"use client";

import { useQuery, useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
import { X, Heart, FileText } from "lucide-react";
import { Id } from "@/convex/_generated/dataModel";
import { useState, useEffect } from "react";

interface AtomActionPanelProps {
  atomId: Id<"atoms">;
  onClose: () => void;
  currentUserId?: Id<"users">;
}

export function AtomActionPanel({ atomId, onClose, currentUserId }: AtomActionPanelProps) {
  const atoms = useQuery(
    api.atoms.getByIds,
    atomId ? { ids: [atomId] } : "skip"
  );

  const toggleLike = useMutation(api.atoms.toggleLike);
  const currentAtom = atoms?.[0];
  const atomType = currentAtom?.type;

  const [showLyrics, setShowLyrics] = useState(true);

  // Derive like state from atom data instead of local state
  const isLiked = currentUserId && currentAtom ? currentAtom.likedBy?.includes(currentUserId) ?? false : false;
  const likeCount = currentAtom?.likeCount ?? 0;

  // Show skeleton while loading
  if (!currentAtom) {
    return (
      <div className="w-60 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 flex-shrink-0 overflow-y-auto">
        <div className="p-4">
          {/* Header with close button */}
          <div className="flex items-center justify-between mb-4">
            <div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <button
              onClick={onClose}
              className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
              title="Close"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          {/* Album Art Skeleton */}
          <div className="mb-4 w-full aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>

          {/* Title Skeleton */}
          <div className="mb-3">
            <div className="h-6 w-3/4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          </div>

          {/* Artist Skeleton */}
          <div className="mb-4">
            <div className="h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          </div>

          {/* Tags Skeleton */}
          <div className="mb-4">
            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
            <div className="h-4 w-full bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          </div>

          {/* Action Buttons Skeleton */}
          <div className="flex flex-col gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
            <div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
          </div>
        </div>
      </div>
    );
  }

  const metadata = currentAtom.metadata;

  const handleLike = async () => {
    try {
      await toggleLike({ atomId });
      // No need to update local state - the atom data will be updated by Convex reactivity
    } catch (error) {
      console.error("Failed to toggle like:", error);
    }
  };

  return (
    <div className="w-60 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 flex-shrink-0 overflow-y-auto">
      <div className="p-4">
        {/* Header with close button */}
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">
            Now Playing
          </h3>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
            title="Close"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Album Art */}
        {metadata.albumArtUrl && (
          <div className="mb-4">
            <img
              src={metadata.albumArtUrl}
              alt={metadata.title || "Album art"}
              className="w-full aspect-square rounded-lg object-cover shadow-lg"
            />
          </div>
        )}

        {/* Title */}
        {metadata.title && (
          <div className="mb-3">
            <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">
              {metadata.title}
            </h2>
          </div>
        )}

        {/* Artist/Creator */}
        {metadata.artist && (
          <div className="mb-4">
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {metadata.artist}
            </p>
          </div>
        )}

        {/* Tags */}
        {metadata.tags && (
          <div className="mb-4">
            <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2">
              Tags
            </h4>
            <p className="text-sm text-gray-700 dark:text-gray-300">
              {metadata.tags}
            </p>
          </div>
        )}

        {/* Actions */}
        <div className="flex flex-col gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={handleLike}
            className={`flex items-center justify-between w-full px-4 py-2 text-sm rounded-lg transition-colors ${
              isLiked
                ? "bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50"
                : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
            }`}
            title={isLiked ? "Unlike" : "Like"}
          >
            <div className="flex items-center gap-2">
              <Heart className={`w-4 h-4 ${isLiked ? "fill-current" : ""}`} />
              <span>{isLiked ? "Liked" : "Like"}</span>
            </div>
            {likeCount > 0 && <span className="text-xs">{likeCount}</span>}
          </button>
        </div>

        {/* Lyrics section for songs */}
        {atomType === "song" && metadata.lyrics && (
          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
              onClick={() => setShowLyrics(!showLyrics)}
              className="flex items-center justify-between w-full mb-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
            >
              <span>Lyrics</span>
              <FileText className="w-3 h-3" />
            </button>
            {showLyrics && (
              <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap max-h-64 overflow-y-auto">
                {metadata.lyrics}
              </div>
            )}
          </div>
        )}

        {/* Prompt section for images */}
        {atomType === "image" && metadata.prompt && (
          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
              onClick={() => setShowLyrics(!showLyrics)}
              className="flex items-center justify-between w-full mb-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
            >
              <span>Prompt</span>
              <FileText className="w-3 h-3" />
            </button>
            {showLyrics && (
              <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap max-h-64 overflow-y-auto">
                {metadata.prompt}
              </div>
            )}
          </div>
        )}

        {/* Additional metadata */}
        {metadata.duration && (
          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div className="text-xs text-gray-500 dark:text-gray-400">
              <div className="mb-1">
                <span className="font-semibold">Duration:</span>{" "}
                {Math.floor(metadata.duration / 60)}:{(metadata.duration % 60).toString().padStart(2, "0")}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}