"use client";
import { useState, useRef } from "react";
import { Plus, Trash2, Upload, Play, Loader2, Check, AlertCircle, Link2, FileText, X } from "lucide-react";
import { clsx } from "clsx";

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

interface BatchURLImportProps {
    onStartDownloads?: (urls: string[]) => void;
    compact?: boolean;
}

export default function BatchURLImport({ onStartDownloads, compact = false }: BatchURLImportProps) {
    const [urls, setUrls] = useState<string[]>([""]);
    const [pasteText, setPasteText] = useState("");
    const [mode, setMode] = useState<"manual" | "paste" | "file">("manual");
    const [loading, setLoading] = useState(false);
    const [results, setResults] = useState<any[]>([]);
    const fileRef = useRef<HTMLInputElement>(null);

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

    function addUrl() { setUrls(prev => [...prev, ""]); }
    function removeUrl(i: number) { setUrls(prev => prev.filter((_, j) => j !== i)); }
    function updateUrl(i: number, val: string) { setUrls(prev => prev.map((u, j) => j === i ? val : u)); }

    function parsePastedText() {
        const parsed = pasteText
            .split(/[\n,\s]+/)
            .map(s => s.trim())
            .filter(s => s.startsWith("http://") || s.startsWith("https://") || s.startsWith("magnet:"));
        setUrls(parsed.length > 0 ? parsed : [""]);
        setMode("manual");
    }

    function handleFileImport(e: React.ChangeEvent<HTMLInputElement>) {
        const file = e.target.files?.[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (ev) => {
            const text = ev.target?.result as string;
            const parsed = text.split(/\n/).map(s => s.trim()).filter(s => s.startsWith("http") || s.startsWith("magnet:"));
            setUrls(parsed.length > 0 ? parsed : [""]);
            setMode("manual");
        };
        reader.readAsText(file);
        e.target.value = "";
    }

    async function handleStartAll() {
        const validUrls = urls.filter(u => u.trim().startsWith("http") || u.trim().startsWith("magnet:"));
        if (validUrls.length === 0) return;

        setLoading(true);
        const res: any[] = [];

        for (const url of validUrls) {
            try {
                const resp = await fetch(`${API}/api/analyze`, {
                    method: "POST",
                    headers: authHeaders(),
                    body: JSON.stringify({ url, action: "download_only" }),
                });
                const data = await resp.json();
                res.push({ url, status: data.jobId ? "queued" : "error", jobId: data.jobId, error: data.error });
            } catch (e: any) {
                res.push({ url, status: "error", error: e.message });
            }
        }

        setResults(res);
        setLoading(false);
        onStartDownloads?.(validUrls);
    }

    const validCount = urls.filter(u => u.trim().length > 5).length;

    return (
        <div className="space-y-4">
            {/* Mode Tabs */}
            <div className="flex items-center gap-1 bg-white/5 p-1 rounded-xl">
                {[
                    { id: "manual", label: "Add URLs", icon: Plus },
                    { id: "paste", label: "Paste List", icon: Link2 },
                    { id: "file", label: "Import .txt", icon: FileText },
                ].map(m => (
                    <button
                        key={m.id}
                        onClick={() => { setMode(m.id as any); if (m.id === "file") fileRef.current?.click(); }}
                        className={clsx(
                            "flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-xs font-black transition-all",
                            mode === m.id ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"
                        )}
                    >
                        <m.icon className="w-3 h-3" />
                        {m.label}
                    </button>
                ))}
            </div>

            <input type="file" ref={fileRef} accept=".txt" className="hidden" onChange={handleFileImport} />

            {/* Paste Mode */}
            {mode === "paste" && (
                <div className="space-y-2">
                    <textarea
                        value={pasteText}
                        onChange={e => setPasteText(e.target.value)}
                        placeholder={"Paste URLs here (one per line or comma-separated):\nhttps://example.com/file1.mkv\nhttps://example.com/file2.zip"}
                        className="w-full h-32 bg-white/5 border border-white/10 rounded-xl p-4 text-xs font-mono text-white outline-none resize-none focus:border-accent-cyan/40 placeholder-white/20"
                    />
                    <button
                        onClick={parsePastedText}
                        disabled={!pasteText.trim()}
                        className="btn-primary w-full py-2.5 text-sm"
                    >
                        Parse {pasteText.split(/\n/).filter(s => s.trim()).length} URL(s)
                    </button>
                </div>
            )}

            {/* Manual URL List */}
            {mode === "manual" && (
                <div className="space-y-2 max-h-64 overflow-y-auto custom-scrollbar">
                    {urls.map((url, i) => (
                        <div key={i} className="flex items-center gap-2">
                            <span className="text-[10px] font-black text-white/20 w-5 text-right shrink-0">{i + 1}</span>
                            <input
                                type="url"
                                value={url}
                                onChange={e => updateUrl(i, e.target.value)}
                                placeholder="https://..."
                                className="flex-1 input text-xs font-mono"
                            />
                            {urls.length > 1 && (
                                <button onClick={() => removeUrl(i)} className="p-1.5 rounded-lg text-red-400/50 hover:text-red-400 transition-all shrink-0">
                                    <X className="w-3.5 h-3.5" />
                                </button>
                            )}
                        </div>
                    ))}
                    <button onClick={addUrl} className="flex items-center gap-2 text-xs text-white/30 hover:text-white/60 transition-colors py-1 ml-7">
                        <Plus className="w-3.5 h-3.5" /> Add another URL
                    </button>
                </div>
            )}

            {/* Start Button */}
            {validCount > 0 && mode === "manual" && (
                <button
                    onClick={handleStartAll}
                    disabled={loading}
                    className="btn-primary w-full py-3 flex items-center justify-center gap-2"
                >
                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
                    Download {validCount} File{validCount !== 1 ? "s" : ""}
                </button>
            )}

            {/* Results */}
            {results.length > 0 && (
                <div className="space-y-1.5 mt-2">
                    <p className="text-[10px] font-black uppercase tracking-widest text-white/30">Results</p>
                    {results.map((r, i) => (
                        <div key={i} className={clsx("flex items-center gap-2 p-2.5 rounded-lg text-xs", r.status === "queued" ? "bg-emerald-500/5" : "bg-red-500/5")}>
                            {r.status === "queued" ? <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" /> : <AlertCircle className="w-3.5 h-3.5 text-red-400 shrink-0" />}
                            <span className="truncate text-white/60 font-mono">{r.url}</span>
                            <span className={clsx("shrink-0 font-black", r.status === "queued" ? "text-emerald-400" : "text-red-400")}>{r.status}</span>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}