"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Target, Check, Loader2 } from "lucide-react"
import { getApiUrl } from "@/lib/api-config"
import { useAuth } from "@/contexts/auth-context"

interface ChaseSong {
    id: number
    song_id: number
    song_title: string
    caught_at: string | null
    caught_show_id: number | null
}

interface MarkCaughtButtonProps {
    songId: number
    songTitle: string
    showId: number
    className?: string
}

export function MarkCaughtButton({ songId, songTitle, showId, className }: MarkCaughtButtonProps) {
    const { user, token } = useAuth()
    const [chaseSong, setChaseSong] = useState<ChaseSong | null>(null)
    const [loading, setLoading] = useState(false)
    const [marking, setMarking] = useState(false)

    useEffect(() => {
        if (!user || !token) return

        // Check if this song is in the user's chase list
        setLoading(true)
        fetch(`${getApiUrl()}/chase/songs`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => res.ok ? res.json() : [])
            .then((songs: ChaseSong[]) => {
                const match = songs.find(s => s.song_id === songId)
                setChaseSong(match || null)
            })
            .catch(() => setChaseSong(null))
            .finally(() => setLoading(false))
    }, [user, token, songId])

    const handleMarkCaught = async () => {
        if (!chaseSong || !token) return

        setMarking(true)
        try {
            const res = await fetch(`${getApiUrl()}/chase/songs/${chaseSong.id}/caught?show_id=${showId}`, {
                method: "POST",
                headers: { Authorization: `Bearer ${token}` }
            })

            if (!res.ok) throw new Error("Failed to mark caught")

            // Update local state
            setChaseSong({ ...chaseSong, caught_at: new Date().toISOString(), caught_show_id: showId })
        } catch (err) {
            console.error(err)
            alert("Failed to mark song as caught")
        } finally {
            setMarking(false)
        }
    }

    // Not logged in or not chasing this song
    if (!user || !chaseSong) return null

    // Already caught at THIS show
    if (chaseSong.caught_show_id === showId) {
        return (
            <span
                className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400 font-medium"
                title={`You caught ${songTitle} at this show! 🎉`}
            >
                <Check className="h-3 w-3" />
                Caught!
            </span>
        )
    }

    // Already caught at another show
    if (chaseSong.caught_at) {
        return (
            <span
                className="inline-flex items-center gap-1 text-xs text-muted-foreground"
                title={`You already caught ${songTitle} at another show`}
            >
                <Check className="h-3 w-3" />
                Caught
            </span>
        )
    }

    // Chasing but not yet caught
    return (
        <Button
            variant="ghost"
            size="sm"
            onClick={handleMarkCaught}
            disabled={marking}
            title={`You're chasing ${songTitle}! Mark it as caught at this show.`}
            className={`h-6 px-2 text-xs gap-1 text-amber-600 hover:text-amber-700 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/50 ${className}`}
        >
            {marking ? (
                <Loader2 className="h-3 w-3 animate-spin" />
            ) : (
                <Target className="h-3 w-3" />
            )}
            Mark Caught
        </Button>
    )
}