"use client";

import { Play, Pause, Clock, AlertCircle, Loader2, Heart, MessageSquarePlus, Share2 } from "lucide-react";
import { usePlayback } from "@/contexts/PlaybackContext";
import { Id } from "@/convex/_generated/dataModel";
import { useEffect, useState } from "react";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
import { useToast } from "@/components/toast/Toast";

interface SongAtomRowProps {
  atom: {
    _id: Id<"atoms">;
    type: string;
    status: "pending" | "processing" | "streaming" | "completed" | "failed";
    progress: number;
    likeCount?: number;
    playCount?: number;
    likedBy?: Id<"users">[];
    metadata: {
      sunoClipId: string;
      title?: string;
      artist?: string;
      audioUrl?: string;
      videoUrl?: string;
      albumArtUrl?: string;
      duration?: number;
      sunoStatus?: string;
      tags?: string;
      prompt?: string;
    };
  };
  currentUserId?: Id<"users">;
  onAttachToMessage?: (atomId: Id<"atoms">) => void;
  onReferenceAtom?: (atomId: Id<"atoms">) => void;
}

export function SongAtomRow({ atom, currentUserId, onAttachToMessage, onReferenceAtom }: SongAtomRowProps) {
  const { currentTrackId, isPlaying, play, pause, resume, audioRef } = usePlayback();
  const toggleLike = useMutation(api.atoms.toggleLike);
  const incrementPlayCount = useMutation(api.atoms.incrementPlayCount);
  const { toast } = useToast();

  const [hasTrackedPlay, setHasTrackedPlay] = useState(false);

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

  const metadata = atom.metadata;
  // Song is playable if audio URL is available (can be streaming or completed)
  const isPlayable = !!metadata.audioUrl && (atom.status === "streaming" || atom.status === "completed");
  const isGenerating = ["pending", "processing", "streaming"].includes(atom.status);
  const hasFailed = atom.status === "failed";

  const isCurrentTrack = currentTrackId === atom._id;
  const isThisTrackPlaying = isCurrentTrack && isPlaying;

  // Update audio source when this track starts playing
  useEffect(() => {
    if (isCurrentTrack && audioRef.current && metadata.audioUrl) {
      audioRef.current.src = metadata.audioUrl;
      if (isPlaying) {
        audioRef.current.play().catch(console.error);
      }
    }
  }, [isCurrentTrack, metadata.audioUrl, isPlaying, audioRef]);

  // Track play count when song starts playing
  useEffect(() => {
    if (isThisTrackPlaying && !hasTrackedPlay) {
      setHasTrackedPlay(true);
      incrementPlayCount({ atomId: atom._id as Id<"atoms"> }).catch(console.error);
    } else if (!isThisTrackPlaying) {
      // Reset when this track stops playing
      setHasTrackedPlay(false);
    }
  }, [isThisTrackPlaying, hasTrackedPlay, atom._id, incrementPlayCount]);

  const handlePlayPause = () => {
    if (!isPlayable) return;

    if (isThisTrackPlaying) {
      pause();
    } else if (isCurrentTrack) {
      resume();
    } else {
      play(atom._id as Id<"atoms">);
    }
  };

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

  const handleShare = async () => {
    const shareUrl = `https://b.suno.fm/song/${metadata.sunoClipId}`;
    try {
      await navigator.clipboard.writeText(shareUrl);
      toast({
        title: "Link copied to clipboard!",
        status: "success",
        duration: 2000,
        isClosable: true,
      });
    } catch (error) {
      console.error("Failed to copy to clipboard:", error);
      toast({
        title: "Failed to copy link",
        status: "error",
        duration: 2000,
        isClosable: true,
      });
    }
  };

  const formatDuration = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

  return (
    <div
      className="song-atom-row flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors group"
      onDoubleClick={handlePlayPause}
    >
      {/* Album Art with Hover Play Button */}
      <div className="album-art relative w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700">
        {metadata.albumArtUrl ? (
          <img
            src={metadata.albumArtUrl}
            alt={metadata.title || "Song"}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            {/* LOADING STATE 2: Show song generation spinner */}
            {isGenerating && (
              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
            )}
            {hasFailed && (
              <AlertCircle className="w-6 h-6 text-red-500" />
            )}
          </div>
        )}
        {/* Play/Pause Overlay - Show on hover or when playing */}
        {isPlayable && (
          <button
            className={`absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px] transition-opacity ${
              isThisTrackPlaying ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
            }`}
            onClick={(e) => {
              e.stopPropagation();
              handlePlayPause();
            }}
            aria-label={isThisTrackPlaying ? "Pause" : "Play"}
          >
            {isThisTrackPlaying ? (
              <Pause size={28} className="text-white/90 drop-shadow-md" />
            ) : (
              <Play size={28} className="text-white/90 drop-shadow-md" />
            )}
          </button>
        )}
      </div>

      {/* Song Info */}
      <div className="song-info flex-1 min-w-0">
        <div className={`song-title text-sm font-medium truncate ${
          isThisTrackPlaying
            ? "text-blue-600 dark:text-blue-400"
            : "text-gray-900 dark:text-gray-100"
        }`}>
          {metadata.tags || "Generating..."}
        </div>
        {metadata.artist && (
          <div className="song-artist text-xs text-gray-600 dark:text-gray-400 truncate">
            {metadata.artist}
          </div>
        )}
        {/* LOADING STATE 2: Show generation status */}
        {isGenerating && (
          <div className="generation-status text-xs text-gray-500 dark:text-gray-400 mt-1">
            {atom.status === "pending" && "⏳ Queued..."}
            {atom.status === "processing" && "🎵 Generating..."}
            {atom.status === "streaming" && "📡 Finalizing..."}
          </div>
        )}
        {hasFailed && (
          <div className="error-message text-xs text-red-600 dark:text-red-400 mt-1">
            Generation failed
          </div>
        )}
        {/* Progress Bar (while generating) */}
        {isGenerating && (
          <div className="progress-bar w-full h-1 bg-gray-200 dark:bg-gray-600 rounded-full mt-2 overflow-hidden">
            <div
              className="progress-fill h-full bg-blue-500 transition-all duration-300"
              style={{ width: `${atom.progress}%` }}
            />
          </div>
        )}
      </div>

      {/* Engagement Stats */}
      <div className="engagement-stats flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
        {/* Like Count */}
        {likeCount > 0 && (
          <div className="like-count flex items-center gap-1">
            <Heart size={12} className="fill-current" />
            {likeCount}
          </div>
        )}
        {/* Play Count */}
        {(atom.playCount ?? 0) > 0 && (
          <div className="play-count flex items-center gap-1">
            <Play size={12} />
            {atom.playCount}
          </div>
        )}
        {/* Duration - Show for completed songs */}
        {metadata.duration && atom.status === "completed" && (
          <div className="song-duration flex items-center gap-1 text-[10px]">
            <Clock size={10} />
            {formatDuration(metadata.duration)}
          </div>
        )}
      </div>

      {/* Share Button */}
      <button
        className="share-button p-2 rounded-full transition-colors text-gray-400 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400 cursor-pointer"
        onClick={handleShare}
        aria-label="Share song"
        title="Copy link to clipboard"
      >
        <Share2 size={20} />
      </button>

      {/* Attach to Message Button / Reference Button (behavior changes based on chat state) */}
      {(onAttachToMessage || onReferenceAtom) && (
        <button
          className="attach-button p-2 rounded-full transition-colors text-gray-400 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400 cursor-pointer"
          onClick={() => {
            if (onReferenceAtom) {
              onReferenceAtom(atom._id);
            } else if (onAttachToMessage) {
              onAttachToMessage(atom._id);
            }
          }}
          aria-label="Attach to message"
          title="Attach to message"
        >
          <MessageSquarePlus size={20} />
        </button>
      )}

      {/* Like Button */}
      <button
        className={`like-button p-2 rounded-full transition-colors ${
          isLiked
            ? "text-red-500 hover:text-red-600 cursor-pointer"
            : "text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 cursor-pointer"
        }`}
        onClick={handleLike}
        aria-label={isLiked ? "Unlike" : "Like"}
      >
        <Heart size={20} className={isLiked ? "fill-current" : ""} />
      </button>
    </div>
  );
}