"use client";

import { useState, useEffect } from "react";
import { CheckCircle, XCircle, Trash2, RotateCcw, History, Disc, Music } from "lucide-react";
import { api } from "@/lib/api";
import { cn } from "@/utils/cn";

interface DownloadHistory {
    id: string;
    subject: string;
    type: string;
    status: string;
    error?: string;
    createdAt: string;
    completedAt?: string;
}

export function HistoryTab() {
    const [history, setHistory] = useState<DownloadHistory[]>([]);
    const [loading, setLoading] = useState(true);
    const [retrying, setRetrying] = useState<Set<string>>(new Set());

    const fetchHistory = async () => {
        try {
            const data = await api.getDownloadHistory();
            setHistory(data);
        } catch (error) {
            console.error("Failed to fetch download history:", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchHistory();
        
        // Refresh on window focus
        const handleFocus = () => fetchHistory();
        window.addEventListener("focus", handleFocus);
        return () => window.removeEventListener("focus", handleFocus);
    }, []);

    const handleClear = async (id: string) => {
        try {
            await api.clearDownloadFromHistory(id);
            setHistory((prev) => prev.filter((h) => h.id !== id));
            // Notify other components that download status has changed
            window.dispatchEvent(new CustomEvent("download-status-changed"));
        } catch (error) {
            console.error("Failed to clear download:", error);
        }
    };

    const handleClearAll = async () => {
        try {
            await api.clearAllDownloadHistory();
            setHistory([]);
            // Notify other components that download status has changed
            window.dispatchEvent(new CustomEvent("download-status-changed"));
        } catch (error) {
            console.error("Failed to clear all history:", error);
        }
    };

    const handleRetry = async (id: string) => {
        try {
            setRetrying((prev) => new Set(prev).add(id));
            const result = await api.retryFailedDownload(id);
            if (result.success) {
                // Remove from history (it's now in active)
                setHistory((prev) => prev.filter((h) => h.id !== id));
            }
        } catch (error) {
            console.error("Failed to retry download:", error);
        } finally {
            setRetrying((prev) => {
                const next = new Set(prev);
                next.delete(id);
                return next;
            });
        }
    };

    const formatTime = (dateStr: string) => {
        const date = new Date(dateStr);
        const now = new Date();
        const diff = now.getTime() - date.getTime();
        
        if (diff < 60000) return "Just now";
        if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
        if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
        return date.toLocaleDateString();
    };

    const completed = history.filter((h) => h.status === "completed");
    const failed = history.filter((h) => h.status === "failed" || h.status === "exhausted");

    if (loading) {
        return (
            <div className="flex items-center justify-center py-8">
                <div className="w-5 h-5 border-2 border-white/20 border-t-white/60 rounded-full animate-spin" />
            </div>
        );
    }

    if (history.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center py-12 text-center">
                <History className="w-8 h-8 text-white/20 mb-3" />
                <p className="text-sm text-white/40">No download history</p>
                <p className="text-xs text-white/30 mt-1">Completed downloads will appear here</p>
            </div>
        );
    }

    return (
        <div className="flex flex-col h-full">
            {/* Header with clear all */}
            <div className="flex items-center justify-between px-3 py-2 border-b border-white/5">
                <div className="flex items-center gap-3 text-xs text-white/40">
                    {completed.length > 0 && (
                        <span className="flex items-center gap-1">
                            <CheckCircle className="w-3 h-3 text-green-400" />
                            {completed.length}
                        </span>
                    )}
                    {failed.length > 0 && (
                        <span className="flex items-center gap-1">
                            <XCircle className="w-3 h-3 text-red-400" />
                            {failed.length}
                        </span>
                    )}
                </div>
                <button
                    onClick={handleClearAll}
                    className="text-xs text-white/40 hover:text-white transition-colors"
                >
                    Clear all
                </button>
            </div>

            {/* History list */}
            <div className="flex-1 overflow-y-auto">
                {/* Failed section first */}
                {failed.length > 0 && (
                    <div>
                        <div className="px-3 py-1.5 bg-red-500/10 border-b border-red-500/20">
                            <span className="text-xs font-medium text-red-400">Failed ({failed.length})</span>
                        </div>
                        {failed.map((item) => (
                            <HistoryItem
                                key={item.id}
                                item={item}
                                onClear={handleClear}
                                onRetry={handleRetry}
                                isRetrying={retrying.has(item.id)}
                            />
                        ))}
                    </div>
                )}

                {/* Completed section */}
                {completed.length > 0 && (
                    <div>
                        <div className="px-3 py-1.5 bg-green-500/10 border-b border-green-500/20">
                            <span className="text-xs font-medium text-green-400">Completed ({completed.length})</span>
                        </div>
                        {completed.map((item) => (
                            <HistoryItem
                                key={item.id}
                                item={item}
                                onClear={handleClear}
                            />
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

function HistoryItem({
    item,
    onClear,
    onRetry,
    isRetrying,
}: {
    item: DownloadHistory;
    onClear: (id: string) => void;
    onRetry?: (id: string) => void;
    isRetrying?: boolean;
}) {
    const isCompleted = item.status === "completed";
    const isFailed = item.status === "failed" || item.status === "exhausted";

    const formatTime = (dateStr: string) => {
        const date = new Date(dateStr);
        const now = new Date();
        const diff = now.getTime() - date.getTime();
        
        if (diff < 60000) return "Just now";
        if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
        if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
        return date.toLocaleDateString();
    };

    return (
        <div className="px-3 py-3 border-b border-white/5 hover:bg-white/5 transition-colors group">
            <div className="flex items-start gap-3">
                <div className="mt-0.5 flex-shrink-0">
                    {isCompleted ? (
                        <CheckCircle className="w-4 h-4 text-green-400" />
                    ) : (
                        <XCircle className="w-4 h-4 text-red-400" />
                    )}
                </div>
                <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-white truncate">
                        {item.subject}
                    </p>
                    <div className="flex items-center gap-2 mt-1">
                        <span className="text-xs text-white/30 capitalize flex items-center gap-1">
                            {item.type === "album" ? (
                                <Disc className="w-3 h-3" />
                            ) : (
                                <Music className="w-3 h-3" />
                            )}
                            {item.type}
                        </span>
                        <span className="text-xs text-white/30">•</span>
                        <span className="text-xs text-white/30">
                            {formatTime(item.completedAt || item.createdAt)}
                        </span>
                    </div>
                    {item.error && (
                        <p className="text-xs text-red-400/70 mt-1 line-clamp-2">
                            {item.error}
                        </p>
                    )}
                </div>
                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    {isFailed && onRetry && (
                        <button
                            onClick={() => onRetry(item.id)}
                            disabled={isRetrying}
                            className={cn(
                                "p-1 hover:bg-white/10 rounded transition-colors",
                                isRetrying && "opacity-50 cursor-not-allowed"
                            )}
                            title="Retry download"
                        >
                            <RotateCcw className={cn(
                                "w-3.5 h-3.5 text-white/40 hover:text-[#ecb200]",
                                isRetrying && "animate-spin"
                            )} />
                        </button>
                    )}
                    <button
                        onClick={() => onClear(item.id)}
                        className="p-1 hover:bg-white/10 rounded transition-colors"
                        title="Remove from history"
                    >
                        <Trash2 className="w-3.5 h-3.5 text-white/40 hover:text-red-400" />
                    </button>
                </div>
            </div>
        </div>
    );
}