"use client";

import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import {
  Sparkles, RefreshCw, Play, PlayCircle, CheckCircle2,
  XCircle, AlertCircle, Image as ImageIcon, ListChecks,
  Layers, ArrowLeft, ChevronDown, ChevronUp, Zap,
  TrendingUp, BarChart3, Clock, Star,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  fetchQualityStats, fetchQualityAudit, enrichCar, enrichBatch,
  fetchEnrichmentLogs,
} from "@/lib/api";
import type {
  QualityStats, CarQualityReport, QualityAuditSummary, EnrichmentLog,
} from "@/lib/types";

// ── Helpers ───────────────────────────────────────────────────────────────────

function gradeColor(grade: string) {
  return grade === "A" ? "text-emerald-600 bg-emerald-50 border-emerald-200"
       : grade === "B" ? "text-blue-600 bg-blue-50 border-blue-200"
       : grade === "C" ? "text-amber-600 bg-amber-50 border-amber-200"
       :                 "text-red-600 bg-red-50 border-red-200";
}

function scoreBar(score: number) {
  const color = score >= 90 ? "bg-emerald-500"
              : score >= 70 ? "bg-blue-500"
              : score >= 50 ? "bg-amber-500"
              :               "bg-red-500";
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
        <div className={cn("h-full rounded-full transition-all", color)}
          style={{ width: `${score}%` }} />
      </div>
      <span className="text-xs font-bold text-gray-700 w-8 text-right">{score}</span>
    </div>
  );
}

function GapBadge({ label, ok, count, target }: {
  label: string; ok: boolean; count: number; target: number;
}) {
  return (
    <span className={cn(
      "inline-flex items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded-lg border",
      ok ? "bg-emerald-50 text-emerald-700 border-emerald-200"
         : "bg-red-50 text-red-700 border-red-200"
    )}>
      {ok ? <CheckCircle2 className="w-2.5 h-2.5" /> : <AlertCircle className="w-2.5 h-2.5" />}
      {label}: {count}/{target}
    </span>
  );
}

function timeAgo(iso?: string) {
  if (!iso) return "—";
  const diff = Date.now() - new Date(iso).getTime();
  const m = Math.floor(diff / 60_000);
  if (m < 1)  return "just now";
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

// ── Stat card ─────────────────────────────────────────────────────────────────

function StatCard({
  label, value, sub, icon: Icon, color,
}: { label: string; value: string | number; sub?: string; icon: React.ElementType; color: string }) {
  return (
    <div className={cn("rounded-2xl border p-4 flex gap-3 items-start min-w-0", color)}>
      <div className="p-2 rounded-xl bg-white/60 shrink-0">
        <Icon className="w-4 h-4" />
      </div>
      <div className="min-w-0">
        <div className="text-2xl font-black leading-none truncate">{value}</div>
        <div className="text-xs font-semibold mt-0.5 opacity-80">{label}</div>
        {sub && <div className="text-[10px] opacity-60 mt-0.5 break-words">{sub}</div>}
      </div>
    </div>
  );
}

// ── Car row ───────────────────────────────────────────────────────────────────

function CarRow({
  car,
  onEnrich,
  enrichingId,
  enrichResult,
}: {
  car:          CarQualityReport;
  onEnrich:     (id: string) => void;
  enrichingId:  string | null;
  enrichResult: Record<string, EnrichmentLog | "error">;
}) {
  const [expanded, setExpanded] = useState(false);
  const isRunning = enrichingId === car.carId;
  const result    = enrichResult[car.carId];

  return (
    <motion.div
      layout
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className={cn(
        "rounded-2xl border transition-colors",
        typeof result === "string"        ? "border-red-200 bg-red-50/30"
        : result                         ? "border-emerald-200 bg-emerald-50/20"
        : car.gaps.length > 0            ? "border-amber-200 bg-amber-50/10"
        :                                  "border-gray-200 bg-white"
      )}
    >
      <div className="flex flex-wrap items-center gap-2 sm:gap-3 px-4 py-3 min-w-0">
        {/* Grade */}
        <span className={cn(
          "text-[11px] font-black px-2 py-0.5 rounded-lg border shrink-0",
          gradeColor(car.grade)
        )}>
          {car.grade}
        </span>

        {/* Name */}
        <div className="flex-1 min-w-0 basis-[min(100%,10rem)]">
          <p className="text-sm font-bold text-gray-900 truncate">
            {car.brand} {car.name}
          </p>
          <div className="flex flex-wrap gap-1 mt-1">
            <GapBadge label="Img"  ok={car.images.ok}   count={car.images.count}   target={car.images.target}   />
            <GapBadge label="Spec" ok={car.specs.ok}     count={car.specs.count}    target={car.specs.target}    />
            <GapBadge label="Var"  ok={car.variants.ok}  count={car.variants.count} target={car.variants.target} />
          </div>
        </div>

        {/* Score bar */}
        <div className="w-32 hidden sm:block shrink-0">
          {scoreBar(car.score)}
        </div>

        {/* Result indicator */}
        {typeof result === "string" && (
          <XCircle className="w-4 h-4 text-red-500 shrink-0" />
        )}
        {result && typeof result !== "string" && (
          <span className="text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-lg border border-emerald-200 shrink-0 max-w-[5.5rem] truncate">
            +{(result as EnrichmentLog).scoreGain?.toFixed(1)} pts
          </span>
        )}

        {/* Actions */}
        <div className="flex items-center gap-1 shrink-0 ml-auto sm:ml-0">
          {car.gaps.length > 0 && (
            <button
              onClick={() => onEnrich(car.carId)}
              disabled={!!enrichingId}
              className={cn(
                "flex items-center gap-1 px-3 py-2.5 min-h-11 rounded-xl text-xs font-bold transition-all border",
                isRunning
                  ? "bg-blue-50 border-blue-200 text-blue-600 animate-pulse"
                  : "bg-violet-600 text-white border-violet-600 hover:bg-violet-700 disabled:opacity-40"
              )}
            >
              {isRunning ? (
                <><RefreshCw className="w-3 h-3 animate-spin" /> Running…</>
              ) : (
                <><Sparkles className="w-3 h-3" /> Run AI</>
              )}
            </button>
          )}
          {(result && typeof result !== "string" && (result as EnrichmentLog).actions?.length > 0) && (
            <button
              onClick={() => setExpanded((e) => !e)}
              aria-label={expanded ? "Collapse result" : "Expand result"}
              className="p-2.5 min-h-11 min-w-11 inline-flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
            >
              {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            </button>
          )}
        </div>
      </div>

      {/* Expanded result */}
      <AnimatePresence>
        {expanded && result && typeof result !== "string" && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden border-t border-emerald-100 px-4 py-3"
          >
            <p className="text-xs font-bold text-gray-700 mb-2">
              Steps completed ({(result as EnrichmentLog).actions.length}):
            </p>
            <div className="flex flex-wrap gap-2">
              {(result as EnrichmentLog).actions.map((a, i) => (
                <span key={i} className="text-[11px] font-semibold bg-gray-100 text-gray-700 px-2 py-1 rounded-lg">
                  {a.step === "reverify" && `✓ Reverify (${a.corrections} corrections)`}
                  {a.step === "specs"    && `✓ Specs +${a.count} fields`}
                  {a.step === "variants" && `✓ Variants +${a.count}`}
                  {a.step === "images"   && `✓ Images +${typeof a.added === "number" ? a.added : 0}`}
                </span>
              ))}
            </div>
            {(result as EnrichmentLog).after && (
              <p className="text-xs text-gray-500 mt-2">
                Score: {(result as EnrichmentLog).before.score} →{" "}
                <span className="font-bold text-emerald-600">{(result as EnrichmentLog).after!.score}</span>
                {" "}(+{(result as EnrichmentLog).scoreGain})
              </p>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

// ── Log row ───────────────────────────────────────────────────────────────────

function LogRow({ log }: { log: EnrichmentLog }) {
  return (
    <div className="flex items-center gap-3 py-2 border-b border-gray-100 last:border-0 min-w-0">
      {log.success
        ? <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
        : <XCircle      className="w-4 h-4 text-red-500 shrink-0" />
      }
      <div className="flex-1 min-w-0">
        <p className="text-xs font-semibold text-gray-800 truncate">{log.carName}</p>
        <p className="text-[10px] text-gray-400">{timeAgo(log.startedAt)}</p>
      </div>
      {log.success && (
        <span className={cn(
          "text-[10px] font-bold px-2 py-0.5 rounded-lg border shrink-0 max-w-[5.5rem] truncate",
          (log.scoreGain || 0) > 0
            ? "text-emerald-600 bg-emerald-50 border-emerald-200"
            : "text-gray-500 bg-gray-50 border-gray-200"
        )}>
          {(log.scoreGain || 0) > 0 ? `+${log.scoreGain} pts` : "no change"}
        </span>
      )}
      {!log.success && (
        <span className="text-[10px] font-semibold text-red-500 shrink-0">failed</span>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════════
// Main page
// ══════════════════════════════════════════════════════════════════════════════

export default function EnrichmentAdminPage() {
  const [stats,         setStats]         = useState<QualityStats | null>(null);
  const [audit,         setAudit]         = useState<{ summary: QualityAuditSummary; cars: CarQualityReport[] } | null>(null);
  const [logs,          setLogs]          = useState<EnrichmentLog[]>([]);
  const [loading,       setLoading]       = useState(true);
  const [enrichingId,   setEnrichingId]   = useState<string | null>(null);
  const [batchRunning,  setBatchRunning]  = useState(false);
  const [enrichResults, setEnrichResults] = useState<Record<string, EnrichmentLog | "error">>({});
  const [filter,        setFilter]        = useState<"all" | "images" | "specs" | "variants">("all");
  const [showOnlyGaps,  setShowOnlyGaps]  = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const [s, a, l] = await Promise.all([
      fetchQualityStats(),
      fetchQualityAudit({ limit: 500, deficientOnly: false }),
      fetchEnrichmentLogs({ limit: 30 }),
    ]);
    setStats(s);
    setAudit(a);
    setLogs(l?.logs ?? []);
    setLoading(false);
  }, []);

  useEffect(() => { load(); }, [load]);

  async function handleEnrich(carId: string) {
    setEnrichingId(carId);
    const result = await enrichCar(carId);
    setEnrichingId(null);
    setEnrichResults((prev) => ({ ...prev, [carId]: result ?? "error" }));
    if (result?.success) {
      setStats((s) => s ? { ...s, enrichmentRuns: s.enrichmentRuns + 1, enrichmentSuccessful: s.enrichmentSuccessful + 1 } : s);
    }
  }

  async function handleBatch() {
    setBatchRunning(true);
    const result = await enrichBatch(10);
    setBatchRunning(false);
    if (result) {
      await load(); // full reload after batch
    }
  }

  const cars = (audit?.cars ?? []).filter((c) => {
    if (showOnlyGaps && c.gaps.length === 0) return false;
    if (filter !== "all" && !c.gaps.includes(filter)) return false;
    return true;
  });

  const defCount = audit?.summary?.deficient ?? 0;

  return (
    <main className="min-h-screen bg-[#f5f7fb] min-w-0 overflow-x-hidden pb-[env(safe-area-inset-bottom,0px)]">

      {/* Hero */}
      <div className="bg-gradient-to-br from-gray-900 via-violet-950 to-indigo-900 text-white">
        <div className="max-w-[1280px] mx-auto px-4 sm:px-6 pt-[calc(2.5rem+env(safe-area-inset-top,0px))] pb-10 min-w-0">
          <Link href="/" className="inline-flex items-center gap-1.5 text-xs text-violet-300 hover:text-white mb-4 transition-colors min-h-11">
            <ArrowLeft className="w-3.5 h-3.5" /> Back to home
          </Link>
          <div className="flex items-start justify-between gap-4 flex-wrap min-w-0">
            <div className="min-w-0 flex-1 basis-[min(100%,16rem)]">
              <div className="flex items-center gap-2 mb-2 min-w-0">
                <Sparkles className="w-6 h-6 text-violet-300 shrink-0" />
                <h1 className="text-2xl sm:text-3xl font-black break-words">AI Data Enrichment</h1>
              </div>
              <p className="text-violet-200 text-sm break-words">
                Auto-detect gaps in images · specs · variants → AI reverifies, researches, regenerates, and updates MongoDB
              </p>
            </div>
            <div className="flex gap-2 flex-wrap w-full sm:w-auto">
              <button
                onClick={load}
                disabled={loading}
                className="flex items-center justify-center gap-2 px-4 py-2.5 min-h-11 rounded-xl border border-white/20 bg-white/10 text-white text-sm font-semibold hover:bg-white/20 transition-all disabled:opacity-50 flex-1 sm:flex-none"
              >
                <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
                Refresh
              </button>
              <button
                onClick={handleBatch}
                disabled={batchRunning || !!enrichingId}
                className="flex items-center justify-center gap-2 px-4 py-2.5 min-h-11 rounded-xl bg-violet-500 text-white text-sm font-bold hover:bg-violet-400 transition-all disabled:opacity-50 flex-1 sm:flex-none min-w-0"
              >
                {batchRunning ? (
                  <><RefreshCw className="w-4 h-4 animate-spin shrink-0" /> <span className="truncate">Running batch…</span></>
                ) : (
                  <><PlayCircle className="w-4 h-4 shrink-0" /> <span className="truncate">Run All Deficient (10)</span></>
                )}
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-[1280px] mx-auto px-4 sm:px-6 py-8 grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6 min-w-0">

        {/* ── Left: stats + table ─────────────────────────────────────────── */}
        <div className="space-y-6 min-w-0">

          {/* Stats row */}
          {stats && (
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
              <StatCard
                label="Total Cars" value={stats.total}
                icon={BarChart3} color="bg-blue-50 border-blue-200 text-blue-700"
              />
              <StatCard
                label="Need Images" value={stats.imgDeficient}
                sub={`< ${stats.targets?.images ?? 8} images`}
                icon={ImageIcon} color="bg-amber-50 border-amber-200 text-amber-700"
              />
              <StatCard
                label="Need Variants" value={stats.varDeficient}
                sub={`< ${stats.targets?.variants ?? 3} variants`}
                icon={Layers} color="bg-red-50 border-red-200 text-red-700"
              />
              <StatCard
                label="Enriched Total" value={stats.enrichmentSuccessful}
                sub={`of ${stats.enrichmentRuns} runs`}
                icon={CheckCircle2} color="bg-emerald-50 border-emerald-200 text-emerald-700"
              />
            </div>
          )}

          {/* Grade distribution */}
          {audit?.summary && (
            <div className="rounded-2xl border border-gray-200 bg-white p-4 min-w-0">
              <div className="flex items-center justify-between gap-2 mb-3 flex-wrap min-w-0">
                <p className="text-sm font-bold text-gray-800">Quality Distribution</p>
                <p className="text-xs text-gray-500">
                  Avg score: <span className="font-bold text-gray-800">{audit.summary.avgScore}</span>
                </p>
              </div>
              <div className="grid grid-cols-4 gap-1.5 sm:gap-2">
                {(["A","B","C","F"] as const).map((g) => {
                  const count = audit.summary.gradeDistribution[g] ?? 0;
                  const pct   = Math.round((count / Math.max(audit.summary.total, 1)) * 100);
                  return (
                    <div key={g} className={cn(
                      "rounded-xl border p-2 sm:p-3 text-center min-w-0",
                      gradeColor(g)
                    )}>
                      <div className="text-xl font-black">{g}</div>
                      <div className="text-sm font-bold tabular-nums">{count}</div>
                      <div className="text-[10px] opacity-70">{pct}%</div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Filters */}
          <div className="flex items-center gap-2 flex-wrap min-w-0">
            {(["all","images","specs","variants"] as const).map((f) => (
              <button
                key={f}
                onClick={() => setFilter(f)}
                className={cn(
                  "px-3 py-2.5 min-h-11 rounded-xl text-xs font-bold border transition-all capitalize",
                  filter === f
                    ? "bg-violet-600 text-white border-violet-600"
                    : "bg-white text-gray-600 border-gray-200 hover:border-gray-400"
                )}
              >
                {f === "all" ? "All Gaps" : `Missing ${f.charAt(0).toUpperCase() + f.slice(1)}`}
              </button>
            ))}
            <label className="flex items-center gap-2 text-xs font-semibold text-gray-600 py-2.5 min-h-11 sm:ml-auto cursor-pointer">
              <input
                type="checkbox"
                checked={showOnlyGaps}
                onChange={(e) => setShowOnlyGaps(e.target.checked)}
                className="w-4 h-4 accent-violet-600 shrink-0"
              />
              Deficient only
            </label>
            <span className="text-xs text-gray-400">{cars.length} cars</span>
          </div>

          {/* Car list */}
          {loading ? (
            <div className="flex justify-center py-16">
              <div className="w-8 h-8 border-2 border-gray-200 border-t-violet-500 rounded-full animate-spin" />
            </div>
          ) : cars.length === 0 ? (
            <div className="flex flex-col items-center py-16 gap-3 text-gray-400">
              <CheckCircle2 className="w-10 h-10 text-emerald-400" />
              <p className="text-sm font-semibold text-gray-600">All cars meet quality targets</p>
            </div>
          ) : (
            <div className="space-y-2">
              <AnimatePresence mode="popLayout">
                {cars.map((car) => (
                  <CarRow
                    key={car.carId}
                    car={car}
                    onEnrich={handleEnrich}
                    enrichingId={enrichingId}
                    enrichResult={enrichResults}
                  />
                ))}
              </AnimatePresence>
            </div>
          )}
        </div>

        {/* ── Right: pipeline explainer + recent logs ─────────────────────── */}
        <div className="space-y-4 min-w-0">

          {/* Pipeline card */}
          <div className="rounded-2xl border border-violet-200 bg-violet-50 p-4 min-w-0">
            <div className="flex items-center gap-2 mb-3">
              <Zap className="w-4 h-4 text-violet-600" />
              <h3 className="text-sm font-black text-violet-900">AI Pipeline</h3>
            </div>
            <div className="space-y-2.5">
              {[
                { step: "1", label: "Detect", desc: "Score images, specs, variants against targets", color: "bg-blue-100 text-blue-700" },
                { step: "2", label: "Reverify", desc: "AI checks existing data for inconsistencies & corrects them", color: "bg-violet-100 text-violet-700" },
                { step: "3", label: "Research", desc: "AI fills missing spec fields using real-world model data", color: "bg-amber-100 text-amber-700" },
                { step: "4", label: "Regenerate", desc: "Generate missing variants & find verified image URLs", color: "bg-emerald-100 text-emerald-700" },
                { step: "5", label: "Update", desc: "Atomic MongoDB write + enrichment log saved", color: "bg-gray-100 text-gray-700" },
              ].map(({ step, label, desc, color }) => (
                <div key={step} className="flex gap-2">
                  <span className={cn("text-[10px] font-black px-1.5 py-0.5 rounded-lg shrink-0 mt-0.5", color)}>
                    {step}
                  </span>
                  <div>
                    <p className="text-xs font-bold text-gray-900">{label}</p>
                    <p className="text-[10px] text-gray-500 leading-relaxed">{desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-3 p-2 rounded-xl bg-violet-100 border border-violet-200">
              <p className="text-[10px] text-violet-700 leading-relaxed">
                <span className="font-bold">Nightly auto-run:</span> every day at 01:30 UTC,
                the scheduler automatically enriches the 20 worst-scoring cars.
              </p>
            </div>
          </div>

          {/* Targets card */}
          <div className="rounded-2xl border border-gray-200 bg-white p-4">
            <div className="flex items-center gap-2 mb-3">
              <Star className="w-4 h-4 text-amber-500" />
              <h3 className="text-sm font-bold text-gray-800">Quality Targets</h3>
            </div>
            <div className="space-y-2">
              {[
                { icon: ImageIcon, label: "Images",   target: stats?.targets?.images   ?? 8,  unit: "photos",   color: "text-blue-600" },
                { icon: ListChecks, label: "Specs",   target: 24,                              unit: "fields",   color: "text-violet-600" },
                { icon: Layers,    label: "Variants", target: stats?.targets?.variants ?? 3,  unit: "trims",    color: "text-emerald-600" },
              ].map(({ icon: Icon, label, target, unit, color }) => (
                <div key={label} className="flex items-center justify-between py-1.5 border-b border-gray-100 last:border-0">
                  <div className="flex items-center gap-2">
                    <Icon className={cn("w-3.5 h-3.5", color)} />
                    <span className="text-xs font-semibold text-gray-700">{label}</span>
                  </div>
                  <span className="text-xs text-gray-500">
                    ≥ <span className="font-bold text-gray-900">{target}</span> {unit}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Recent enrichment logs */}
          <div className="rounded-2xl border border-gray-200 bg-white p-4">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4 text-gray-500" />
                <h3 className="text-sm font-bold text-gray-800">Recent Runs</h3>
              </div>
              {logs.length > 0 && (
                <span className="text-[10px] text-gray-400">{logs.length} logged</span>
              )}
            </div>
            {logs.length === 0 ? (
              <p className="text-xs text-gray-400 text-center py-4">No enrichment runs yet</p>
            ) : (
              <div>
                {logs.slice(0, 15).map((log, i) => (
                  <LogRow key={i} log={log} />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}