"use client";

import { useState, useEffect } from "react";
import { Search, Film, Tv, Star, Loader2, Check, X, ExternalLink, ChevronRight } from "lucide-react";
import { clsx } from "clsx";

const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";

interface TMDBResult {
    id: number;
    type: string;
    title: string;
    originalTitle?: string;
    year: string;
    rating?: string;
    overview?: string;
    poster?: string;
    backdrop?: string;
}

interface MetadataSearchProps {
    fileName?: string;
    onSelect?: (meta: any) => void;
    compact?: boolean;
}

export default function MetadataSearch({ fileName, onSelect, compact = false }: MetadataSearchProps) {
    const [query, setQuery] = useState(fileName || "");
    const [type, setType] = useState<"movie" | "tv">("movie");
    const [results, setResults] = useState<TMDBResult[]>([]);
    const [details, setDetails] = useState<any>(null);
    const [loading, setLoading] = useState(false);
    const [selected, setSelected] = useState<TMDBResult | null>(null);
    const [tmdbAvailable, setTmdbAvailable] = useState<boolean | null>(null); // null = checking

    const authHeaders = () => {
        const token = typeof window !== "undefined" ? localStorage.getItem("mhb_token") : "";
        return { "Content-Type": "application/json", Authorization: `Bearer ${token}` };
    };

    useEffect(() => {
        fetch(`${API}/api/metadata/status`, { headers: authHeaders() })
            .then(r => r.json())
            .then(d => setTmdbAvailable(d.available))
            .catch(() => setTmdbAvailable(false));
    }, []);

    async function handleSearch() {
        if (!query.trim()) return;
        setLoading(true); setResults([]); setDetails(null);
        try {
            const res = await fetch(`${API}/api/metadata/search?q=${encodeURIComponent(query)}&type=${type}`, { headers: authHeaders() });
            const data = await res.json();
            if (data.success) setResults(data.results);
        } catch (e) { console.error(e); }
        setLoading(false);
    }

    async function handleAutoDetect() {
        if (!fileName) return;
        setLoading(true);
        try {
            const res = await fetch(`${API}/api/metadata/auto-detect`, {
                method: "POST", headers: authHeaders(),
                body: JSON.stringify({ fileName, type })
            });
            const data = await res.json();
            if (data.success && data.match) {
                setResults([data.match]);
                setQuery(data.cleanedQuery);
            }
        } catch (e) { console.error(e); }
        setLoading(false);
    }

    async function loadDetails(result: TMDBResult) {
        setSelected(result);
        setLoading(true);
        try {
            const res = await fetch(`${API}/api/metadata/details/${result.type}/${result.id}`, { headers: authHeaders() });
            const data = await res.json();
            if (data.success) setDetails(data);
        } catch (e) { console.error(e); }
        setLoading(false);
    }

    // ── TMDB unavailable guard ─────────────────────────────────────────
    if (tmdbAvailable === null) {
        return <div className="flex items-center gap-2 py-4 text-white/30"><Loader2 className="w-4 h-4 animate-spin" /><span className="text-xs">Checking TMDB...</span></div>;
    }

    if (tmdbAvailable === false) {
        return (
            <div className={clsx("flex items-start gap-3 p-4 rounded-2xl border border-amber-500/20 bg-amber-500/5", compact ? "" : "max-w-2xl mx-auto")}>
                <span className="text-2xl shrink-0">🎬</span>
                <div>
                    <p className="font-black text-white text-sm">TMDB not configured</p>
                    <p className="text-xs text-white/40 mt-0.5">Add your free TMDB API key to unlock automatic metadata, posters, and cast info.</p>
                    <div className="flex gap-2 mt-3">
                        <a href="https://www.themoviedb.org/settings/api" target="_blank" rel="noreferrer" className="text-xs text-accent-cyan hover:underline flex items-center gap-1">
                            Get free API key ↗
                        </a>
                        <span className="text-white/20">·</span>
                        <a href="/settings/general" className="text-xs text-white/40 hover:text-white transition-colors">General Settings</a>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className={clsx("space-y-4", compact ? "" : "max-w-2xl mx-auto")}>
            {/* Header */}
            <div className="flex items-center gap-3">
                <input
                    type="text"
                    value={query}
                    onChange={e => setQuery(e.target.value)}
                    onKeyDown={e => e.key === "Enter" && handleSearch()}
                    placeholder="Search movie or series..."
                    className="input flex-1"
                />
                <div className="flex bg-white/5 rounded-xl p-0.5 shrink-0">
                    <button onClick={() => setType("movie")} className={clsx("flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-black transition-all", type === "movie" ? "bg-white/10 text-white" : "text-white/30")}>
                        <Film className="w-3 h-3" /> Movie
                    </button>
                    <button onClick={() => setType("tv")} className={clsx("flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-black transition-all", type === "tv" ? "bg-white/10 text-white" : "text-white/30")}>
                        <Tv className="w-3 h-3" /> TV
                    </button>
                </div>
                <button onClick={handleSearch} disabled={loading || !query} className="btn-primary px-4 py-2.5 shrink-0">
                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
                </button>
            </div>

            {fileName && (
                <button onClick={handleAutoDetect} disabled={loading} className="text-xs text-accent-cyan hover:text-cyan-300 transition-colors flex items-center gap-1.5">
                    <ChevronRight className="w-3 h-3" /> Auto-detect from filename: <span className="font-mono text-white/50 truncate max-w-xs">{fileName}</span>
                </button>
            )}

            {/* Results */}
            {results.length > 0 && !details && (
                <div className="space-y-2 max-h-96 overflow-y-auto custom-scrollbar">
                    {results.map(r => (
                        <div
                            key={r.id}
                            onClick={() => loadDetails(r)}
                            className="flex items-center gap-3 p-3 rounded-xl bg-white/5 hover:bg-white/10 cursor-pointer transition-all group border border-transparent hover:border-white/10"
                        >
                            {r.poster ? (
                                <img src={r.poster} alt={r.title} className="w-10 h-14 object-cover rounded-lg shrink-0 bg-white/5" />
                            ) : (
                                <div className="w-10 h-14 rounded-lg bg-white/5 flex items-center justify-center shrink-0">
                                    <Film className="w-4 h-4 text-white/20" />
                                </div>
                            )}
                            <div className="flex-1 min-w-0">
                                <p className="font-bold text-white text-sm truncate">{r.title}</p>
                                <div className="flex items-center gap-2 mt-0.5">
                                    <span className="text-[10px] text-white/40">{r.year}</span>
                                    {r.rating && (
                                        <span className="flex items-center gap-0.5 text-[10px] text-amber-400">
                                            <Star className="w-2.5 h-2.5 fill-amber-400" /> {r.rating}
                                        </span>
                                    )}
                                </div>
                                {r.overview && <p className="text-[10px] text-white/30 mt-1 line-clamp-2">{r.overview}</p>}
                            </div>
                            <ChevronRight className="w-4 h-4 text-white/20 group-hover:text-white transition-colors shrink-0" />
                        </div>
                    ))}
                </div>
            )}

            {/* Detail Card */}
            {details && (
                <div className="card p-5 bg-black/40 border-white/10 space-y-4">
                    <div className="flex items-start gap-4">
                        {details.poster && (
                            <img src={details.poster} alt={details.title} className="w-20 h-28 object-cover rounded-xl shrink-0 shadow-lg" />
                        )}
                        <div className="flex-1 min-w-0">
                            <div className="flex items-start justify-between gap-2">
                                <h3 className="font-black text-white text-lg leading-tight">{details.title}</h3>
                                <button onClick={() => { setDetails(null); setSelected(null); }} className="p-1 rounded text-white/20 hover:text-white shrink-0"><X className="w-4 h-4" /></button>
                            </div>
                            <div className="flex flex-wrap items-center gap-2 mt-1">
                                <span className="text-xs text-white/40">{details.year}</span>
                                {details.rating && <span className="flex items-center gap-1 text-xs text-amber-400"><Star className="w-3 h-3 fill-amber-400" /> {details.rating}/10</span>}
                                {details.runtime && <span className="text-xs text-white/40">{details.runtime} min</span>}
                                {details.imdbId && <a href={`https://imdb.com/title/${details.imdbId}`} target="_blank" className="text-xs text-blue-400 hover:underline flex items-center gap-1">IMDb <ExternalLink className="w-2.5 h-2.5" /></a>}
                            </div>
                            <div className="flex flex-wrap gap-1 mt-2">
                                {(details.genres || []).map((g: string) => (
                                    <span key={g} className="text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-full bg-white/5 text-white/40">{g}</span>
                                ))}
                            </div>
                            {details.overview && <p className="text-xs text-white/50 mt-2 line-clamp-3">{details.overview}</p>}
                        </div>
                    </div>

                    {details.cast && details.cast.length > 0 && (
                        <div>
                            <p className="text-[9px] font-black uppercase tracking-widest text-white/30 mb-1.5">Cast</p>
                            <p className="text-xs text-white/50">{details.cast.slice(0, 5).map((c: any) => c.name).join(", ")}</p>
                        </div>
                    )}

                    <button
                        onClick={() => onSelect?.(details)}
                        className="btn-primary w-full py-3 flex items-center justify-center gap-2 text-sm"
                    >
                        <Check className="w-4 h-4" /> Use This Metadata
                    </button>
                </div>
            )}
        </div>
    );
}