"use client";

import { useEffect, useState, useRef, useCallback } from "react";
import dynamic from "next/dynamic";

import {
    Trash2,
    XCircle,
    Terminal,
    Search,
    Filter,
    RefreshCw,
    Clock,
    CheckCircle2,
    AlertCircle,
    Play,
    Zap,
    Database,
    ExternalLink,
    Eye
} from "lucide-react";
import {
    getJobs,
    deleteJob,
    cancelJob,
    clearJobs,
    subscribeToEvents,
    statusBadgeClass,
    formatBytes,
    approveJob,
    discardJob,
    forceProcess
} from "@/lib/api";
import { clsx } from "clsx";
import { useUI } from "@/context/UIContext";
const QCPreviewModal = dynamic(() => import("@/components/QCPreviewModal"), { ssr: false });


export default function JobsPage() {
    const { confirm, alert, toast } = useUI();
    const [jobs, setJobs] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [selectedJob, setSelectedJob] = useState<any>(null);
    const [filter, setFilter] = useState<string>("all");
    const [qcJob, setQcJob] = useState<any>(null);
    const logEndRef = useRef<HTMLDivElement>(null);

    const loadJobs = useCallback(async () => {
        try {
            const data = await getJobs(filter === 'all' ? undefined : filter);
            setJobs(data.jobs);
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    }, [filter]);

    // Auto-scroll log terminal to bottom when log content changes
    useEffect(() => {
        if (logEndRef.current) {
            logEndRef.current.scrollIntoView({ behavior: 'smooth' });
        }
    }, [selectedJob?.log]);

    useEffect(() => {
        loadJobs();

        // Subscribe to real-time updates via SSE
        const unsubscribe = subscribeToEvents((event, data) => {
            if (event === 'job_update') {
                setJobs(prev => {
                    const index = prev.findIndex(j => j.id === data.id);
                    if (index !== -1) {
                        const next = [...prev];
                        next[index] = data;
                        return next;
                    }
                    return [data, ...prev];
                });

                // Update selected job if it's the one being viewed
                if (selectedJob?.id === data.id) {
                    setSelectedJob(data);
                }
            }
        });

        return () => unsubscribe();
    }, [filter, selectedJob?.id]);

    const handleDelete = async (id: string) => {
        const ok = await confirm({
            title: "Delete Job?",
            message: "Are you sure you want to delete this job from history?",
            type: "danger",
            confirmLabel: "Delete Job"
        });
        if (!ok) return;
        try {
            await deleteJob(id);
            toast("Job deleted from history.", "info");
            setJobs(prev => prev.filter(j => j.id !== id));
            if (selectedJob?.id === id) setSelectedJob(null);
        } catch (err: any) {
            alert({ title: "Delete Failed", message: err.message, type: "error" });
        }
    };

    const handleCancel = async (id: string) => {
        try {
            await cancelJob(id);
            toast("Cancellation command sent.", "info");
        } catch (err: any) {
            alert({ title: "Cancellation Error", message: err.message, type: "error" });
        }
    };

    const handleClearAll = async () => {
        const ok = await confirm({
            title: "Clear Job History?",
            message: "This will remove all finished, failed, and cancelled jobs. Proceed?",
            type: "warning",
            confirmLabel: "Clear All"
        });
        if (!ok) return;
        try {
            const data = await clearJobs();
            toast(`Cleaned ${data.deleted} jobs from history.`, "success");
            loadJobs();
        } catch (err: any) {
            alert({ title: "Cleanup Error", message: err.message, type: "error" });
        }
    };

    const handleForceProcess = async (id: string) => {
        try {
            await forceProcess(id);
            toast("Job re-queued for processing.", "success");
            loadJobs();
        } catch (err: any) {
            alert({ title: "Force Process Error", message: err.message, type: "error" });
        }
    };

    return (
        <div className="space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Active <span className="text-white">Nodes</span></h1>
                    <p className="text-white/40 text-xs md:text-sm mt-1">Real-time monitoring of CPU encoding clusters.</p>
                </div>
                <div className="flex items-center gap-2">
                    <button onClick={handleClearAll} className="btn-ghost text-[10px] uppercase font-bold py-1.5 px-3">
                        <Trash2 className="w-3.5 h-3.5" />
                        Clear Finished
                    </button>
                    <button onClick={loadJobs} className="btn-ghost py-1.5 px-3">
                        <RefreshCw className={clsx("w-3.5 h-3.5", loading && "animate-spin")} />
                    </button>
                </div>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
                {/* Job List */}
                <div className="xl:col-span-2 space-y-4">
                    <div className="flex items-center gap-4 bg-white/5 p-2 rounded-xl border border-white/5 overflow-x-auto no-scrollbar">
                        {['all', 'downloading', 'processing', 'uploading', 'awaiting_review', 'completed', 'failed'].map((s) => (
                            <button
                                key={s}
                                onClick={() => setFilter(s)}
                                className={clsx(
                                    "px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-widest whitespace-nowrap transition-all",
                                    filter === s ? "bg-accent-cyan text-white " : "text-white/40 hover:bg-white/5"
                                )}
                            >
                                {s.replace('_', ' ')}
                            </button>
                        ))}
                    </div>

                    <div className="space-y-3">
                        {loading ? (
                            <div className="p-20 text-center animate-pulse text-white/20">Syncing with remote nodes...</div>
                        ) : jobs.length === 0 ? (
                            <div className="p-20 card text-center space-y-4 border-dashed border-white/10 bg-transparent">
                                <Database className="w-12 h-12 text-white/5 mx-auto" />
                                <p className="text-white/30 text-sm">No jobs found matching filters.</p>
                            </div>
                        ) : (
                            jobs.map((job) => (
                                <div
                                    key={job.id}
                                    onClick={() => setSelectedJob(job)}
                                    className={clsx(
                                        "card p-5 group cursor-pointer transition-all hover:bg-white/[0.03] select-none",
                                        selectedJob?.id === job.id ? "border-accent-cyan/40 bg-accent-cyan/[0.02]" : "border-white/5"
                                    )}
                                >
                                    <div className="flex items-start justify-between gap-4 mb-4">
                                        <div className="flex-1 min-w-0">
                                            <div className="flex items-center gap-2 mb-1">
                                                <span className={clsx("badge", statusBadgeClass(job.status))}>
                                                    {job.status}
                                                </span>
                                                <span className="text-[10px] font-mono text-white/20 tracking-tighter">ID: {job.id.slice(0, 8)}</span>
                                            </div>
                                            <h3 className="font-bold text-base truncate group-hover:text-white transition-colors">{job.original_file_name}</h3>
                                            <p className="text-[10px] text-white/40 font-bold uppercase tracking-widest mt-1">
                                                {job.type} • {job.resolution} {job.batch_total > 0 && `• Part ${job.batch_index}/${job.batch_total}`}
                                            </p>
                                        </div>

                                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                            {['pending', 'downloading', 'processing', 'uploading'].includes(job.status) && (
                                                <button
                                                    onClick={(e) => { e.stopPropagation(); handleCancel(job.id); }}
                                                    className="p-2 hover:bg-red-500/10 text-red-400 rounded-lg"
                                                >
                                                    <XCircle className="w-4 h-4" />
                                                </button>
                                            )}
                                            {['pending', 'failed'].includes(job.status) && (
                                                <button
                                                    onClick={(e) => { e.stopPropagation(); handleForceProcess(job.id); }}
                                                    className="p-2 hover:bg-accent-cyan/10 text-accent-cyan rounded-lg"
                                                    title="Force Start / Re-queue"
                                                >
                                                    <Zap className="w-4 h-4" />
                                                </button>
                                            )}
                                            <button
                                                onClick={(e) => { e.stopPropagation(); handleDelete(job.id); }}
                                                className="p-2 hover:bg-red-500/10 text-red-400 rounded-lg"
                                                title="Delete history"
                                            >
                                                <Trash2 className="w-4 h-4" />
                                            </button>
                                        </div>
                                    </div>

                                    {['downloading', 'processing', 'uploading'].includes(job.status) ? (
                                        <div className="space-y-3">
                                            <div className="flex justify-between items-end">
                                                <p className="text-[10px] text-white font-bold uppercase tracking-widest animate-pulse">{job.current_step}</p>
                                                <p className="font-mono text-xs font-black text-white">{job.progress}%</p>
                                            </div>
                                            <div className="progress-bar">
                                                <div className="progress-fill" style={{ width: `${job.progress}%` }} />
                                            </div>
                                            {job.telemetry && (
                                                <div className="mt-3 p-3 bg-white/[0.02] border border-white/5 rounded-xl space-y-2">
                                                    <div className="flex justify-between items-center text-[10px] font-mono">
                                                        <div className="flex items-center gap-2">
                                                            {job.telemetry.providerIcon && <span className="text-sm">{job.telemetry.providerIcon}</span>}
                                                            <span className="text-white/40 uppercase tracking-widest">
                                                                {job.status === 'uploading' ? 'Upload' : 'Transfer'} Metrics
                                                            </span>
                                                        </div>
                                                        <div className="text-accent-cyan font-bold">{job.telemetry.speed || 'Calculating...'}</div>
                                                    </div>

                                                    <div className="flex justify-between items-center text-[10px] font-mono">
                                                        <div className="flex gap-3">
                                                            {job.telemetry.bitrate && (
                                                                <span className="flex items-center gap-1">
                                                                    <Zap className="w-3 h-3 text-amber-400" />
                                                                    <span className="text-white/80">{job.telemetry.bitrate}</span>
                                                                </span>
                                                            )}
                                                            {(job.telemetry.downloaded || job.telemetry.uploaded) && (
                                                                <span className="text-white/80">
                                                                    {job.telemetry.downloaded || job.telemetry.uploaded}
                                                                    {job.telemetry.size && <span className="text-white/20 ml-1">/ {job.telemetry.size}</span>}
                                                                </span>
                                                            )}
                                                        </div>
                                                        {job.telemetry.eta && (
                                                            <div className="flex items-center gap-1 px-1.5 py-0.5 bg-white/5 rounded text-white/60">
                                                                <Clock className="w-3 h-3" />
                                                                <span>ETA: {job.telemetry.eta}</span>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    ) : job.status === 'failed' ? (
                                        <div className="p-3 bg-red-500/10 border border-red-500/10 rounded-lg flex items-center gap-3">
                                            <AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
                                            <p className="text-[10px] font-bold text-red-200 truncate">{job.error}</p>
                                        </div>
                                    ) : job.status === 'completed' ? (
                                        <div className="flex items-center gap-2 text-emerald-400">
                                            <CheckCircle2 className="w-4 h-4" />
                                            <span className="text-[10px] font-bold uppercase tracking-widest">Job Complete • Success</span>
                                        </div>
                                    ) : job.status === 'awaiting_review' ? (
                                        <button
                                            onClick={(e) => { e.stopPropagation(); setQcJob(job); }}
                                            className="w-full mt-2 flex items-center justify-center gap-2 py-3 bg-amber-500/10 border border-amber-500/20 rounded-xl text-amber-500 group-hover:bg-amber-500/20 transition-all font-bold text-xs "
                                        >
                                            <Eye className="w-4 h-4" />
                                            Review Quality & Approve
                                        </button>
                                    ) : null}
                                </div>
                            ))
                        )}
                    </div>
                </div>

                {/* Console / Info Panel */}
                <div className="space-y-6">
                    <div className="sticky top-6">
                        <h2 className="text-sm font-bold uppercase tracking-widest text-white/40 mb-4 px-2 flex items-center gap-2">
                            <Terminal className="w-4 h-4" />
                            Process Inspector
                        </h2>

                        {selectedJob ? (
                            <div className="space-y-4 animate-fade-in">
                                <div className="card p-6 space-y-4">
                                    <div>
                                        <p className="text-[10px] uppercase font-bold text-white/30 tracking-widest mb-1">Source URL</p>
                                        <p className="text-xs text-white/60 truncate font-mono bg-white/5 p-2 rounded border border-white/5">{selectedJob.url || "Local Upload"}</p>
                                    </div>

                                    {selectedJob.status === 'completed' && selectedJob.gdrive_file_ids?.length > 0 && (
                                        <div>
                                            <p className="text-[10px] uppercase font-bold text-white tracking-widest mb-2">GDrive Links</p>
                                            <div className="space-y-2">
                                                {selectedJob.gdrive_file_ids.map((gd: any, i: number) => (
                                                    <a
                                                        key={i}
                                                        href={gd.webViewLink}
                                                        target="_blank"
                                                        className="flex items-center justify-between p-2 bg-accent-cyan/10 border border-accent-cyan/10 rounded group hover:border-accent-cyan/40 transition-colors"
                                                    >
                                                        <span className="text-[10px] font-bold text-white uppercase">{gd.resolution} File</span>
                                                        <ExternalLink className="w-3 h-3 text-white opacity-40 group-hover:opacity-100" />
                                                    </a>
                                                ))}
                                            </div>
                                        </div>
                                    )}

                                    <div className="pt-4 border-t border-white/5">
                                        <div className="flex items-center justify-between mb-3">
                                            <p className="text-xs font-bold text-white/60">Node Execution Log</p>
                                            <span className="text-[10px] text-white/20 font-mono">{selectedJob.log?.split('\n').filter(Boolean).length || 0} lines</span>
                                        </div>
                                        <div className="bg-black/40 rounded-xl p-4 font-mono text-[10px] h-96 overflow-y-auto space-y-1.5 custom-scrollbar border border-white/5">
                                            {selectedJob.log?.trim().length > 0 ? selectedJob.log.split('\n').filter(Boolean).map((line: string, i: number) => (
                                                <p key={i} className={clsx(
                                                    "leading-relaxed",
                                                    line.includes('❌') || line.toLowerCase().includes('error') ? 'text-red-400' :
                                                        line.includes('✅') ? 'text-emerald-400' :
                                                            line.includes('⚠️') ? 'text-amber-400' :
                                                                line.includes('🎬') || line.includes('🔍') || line.includes('📄') ? 'text-white' : 'text-white/40'
                                                )}>
                                                    {line}
                                                </p>
                                            )) : (
                                                <p className="text-white/10 italic">No log activity yet. Job may be pending or just started.</p>
                                            )}
                                            <div ref={logEndRef} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <div className="card p-12 text-center space-y-4 bg-transparent border-dashed border-white/10">
                                <Search className="w-10 h-10 text-white/10 mx-auto" />
                                <p className="text-white/20 text-xs font-medium">Select a job from the queue to inspect node logs and storage links.</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {qcJob && (
                <QCPreviewModal
                    job={qcJob}
                    onClose={() => setQcJob(null)}
                    onStatusChange={loadJobs}
                />
            )}
        </div>
    );
}