"use client";

import { useState, useEffect, useCallback } from "react";
import { motion } from "framer-motion";
import {
  CheckCircle2,
  XCircle,
  AlertTriangle,
  RefreshCw,
  Loader2,
  Car,
  FileText,
  Newspaper,
  Users,
  DollarSign,
  Swords,
  BarChart3,
  Shield,
  Sparkles,
  Filter,
  TrendingUp,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { fetchProductionReport } from "@/lib/api";

// ── Types ─────────────────────────────────────────────────────────────────────

interface FieldStat {
  count: number;
  pct: number;
  target: number;
  status: "PASS" | "WARN" | "FAIL";
}

interface ProductionReport {
  generatedAt: string;
  TOTAL_CARS: number;
  DATA_QUALITY: {
    totalCars: number;
    avgImages: number;
    avgVariants: number;
    avgSpecs: number;
    fields: Record<string, FieldStat>;
    hardTargets: Record<string, FieldStat>;
    enrichment: { totalRuns: number; successfulRuns: number; successRate: number };
  };
  FILTER_HEALTH: {
    working: { filter: string; matched: number }[];
    broken:  { filter: string; reason: string }[];
    fixed:   unknown[];
    summary: { working: number; broken: number; fixed: number; total: number };
  };
  SEO_HEALTH: Record<string, unknown>;
  PRICE_TRACKING: Record<string, unknown>;
  RIVAL_COVERAGE: { carsWithRivals: number; coveragePct: number; types: string[] };
  BLOG_COUNT: { total: number; published: number; draft: number };
  NEWS_COUNT: { total: number; published: number };
  LEAD_COUNT: { total: number; new: number };
  PHASES_COMPLETED: Record<string, string>;
  CHECKLIST: Record<string, unknown>;
}

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

function StatusIcon({ s }: { s: string | boolean }) {
  if (s === "PASS" || s === "true" || s === true)
    return <CheckCircle2 className="w-4 h-4 text-green-500 shrink-0" />;
  if (s === "WARN")
    return <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />;
  return <XCircle className="w-4 h-4 text-red-500 shrink-0" />;
}

function StatCard({
  icon: Icon, label, value, sub, color = "text-blue-600",
}: {
  icon: React.ElementType;
  label: string;
  value: string | number;
  sub?: string;
  color?: string;
}) {
  return (
    <div className="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
      <div className="flex items-center gap-2 mb-1">
        <Icon className={cn("w-4 h-4", color)} />
        <span className="text-xs font-bold text-gray-500 uppercase tracking-wide">{label}</span>
      </div>
      <p className="text-3xl font-black text-gray-900">{value}</p>
      {sub && <p className="text-xs text-gray-400 mt-0.5">{sub}</p>}
    </div>
  );
}

function FieldRow({ name, stat }: { name: string; stat: FieldStat }) {
  const barW = Math.min(100, stat.pct);
  return (
    <div className="flex items-center gap-3 py-2 border-b border-gray-50 last:border-0">
      <StatusIcon s={stat.status} />
      <span className="text-sm font-medium text-gray-700 w-36 shrink-0">{name}</span>
      <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
        <div
          className={cn(
            "h-full rounded-full transition-all duration-500",
            stat.status === "PASS" ? "bg-green-500" :
            stat.status === "WARN" ? "bg-amber-400" : "bg-red-400"
          )}
          style={{ width: `${barW}%` }}
        />
      </div>
      <span className={cn(
        "text-xs font-bold w-16 text-right shrink-0",
        stat.status === "PASS" ? "text-green-600" :
        stat.status === "WARN" ? "text-amber-600" : "text-red-600"
      )}>
        {stat.pct}%
      </span>
      <span className="text-xs text-gray-400 w-14 text-right shrink-0">
        tgt {stat.target}%
      </span>
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────

export default function AdminProductionReportPage() {
  const [report, setReport]   = useState<ProductionReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await fetchProductionReport();
      setReport(data as ProductionReport);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to load report");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const fmt = (iso: string) => {
    try { return new Date(iso).toLocaleString("en-IN", { day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" }); }
    catch { return iso; }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin text-blue-500 mx-auto mb-3" />
          <p className="text-sm font-medium text-gray-500">Generating production report…</p>
        </div>
      </div>
    );
  }

  if (error || !report) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center">
          <XCircle className="w-10 h-10 text-red-400 mx-auto mb-3" />
          <p className="text-sm font-semibold text-gray-700">{error ?? "Unknown error"}</p>
          <button onClick={load} className="mt-4 px-4 py-2 rounded-xl bg-blue-600 text-white text-sm font-bold hover:bg-blue-700 transition-colors">
            Retry
          </button>
        </div>
      </div>
    );
  }

  const { DATA_QUALITY: dq, FILTER_HEALTH: fh, RIVAL_COVERAGE: rv,
          BLOG_COUNT: bc, NEWS_COUNT: nc, LEAD_COUNT: lc } = report;

  const allPhasesOk = Object.values(report.PHASES_COMPLETED).every(v => v.startsWith("COMPLETE"));
  const filterOk    = fh.summary.broken === 0;

  return (
    <div className="p-6 max-w-[1200px] mx-auto">

      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-black text-gray-900 flex items-center gap-2">
            <BarChart3 className="w-6 h-6 text-blue-600" />
            Production Report
          </h1>
          <p className="text-sm text-gray-500 mt-0.5">
            Generated {fmt(report.generatedAt)} · cached 5 min
          </p>
        </div>
        <button
          onClick={load}
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2.5 rounded-2xl border border-gray-200 bg-white text-sm font-bold text-gray-700 hover:border-gray-300 transition-all disabled:opacity-50"
        >
          <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
          Refresh
        </button>
      </div>

      {/* Overall status banner */}
      <motion.div
        initial={{ opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        className={cn(
          "rounded-2xl p-5 mb-6 flex items-center gap-4",
          allPhasesOk && filterOk
            ? "bg-green-50 border border-green-200"
            : "bg-amber-50 border border-amber-200"
        )}
      >
        {allPhasesOk && filterOk
          ? <CheckCircle2 className="w-8 h-8 text-green-500 shrink-0" />
          : <AlertTriangle className="w-8 h-8 text-amber-500 shrink-0" />
        }
        <div>
          <p className={cn("font-black text-lg", allPhasesOk && filterOk ? "text-green-700" : "text-amber-700")}>
            {allPhasesOk && filterOk ? "✓ Production Ready" : "⚠ Attention Required"}
          </p>
          <p className={cn("text-sm", allPhasesOk && filterOk ? "text-green-600" : "text-amber-600")}>
            {allPhasesOk && filterOk
              ? "All 12 phases complete. 0 TS errors. 0 ESLint errors. All filters working."
              : `${fh.summary.broken} filter(s) need attention. Check filter health section.`
            }
          </p>
        </div>
      </motion.div>

      {/* Top stats */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        <StatCard icon={Car}       label="Total Cars"  value={report.TOTAL_CARS.toLocaleString()} color="text-blue-600" />
        <StatCard icon={FileText}  label="Blogs"       value={bc.total}      sub={`${bc.published} published`} color="text-violet-600" />
        <StatCard icon={Newspaper} label="News"        value={nc.total}      sub={`${nc.published} published`} color="text-cyan-600" />
        <StatCard icon={Users}     label="Leads"       value={lc.total}      sub={`${lc.new} new`}             color="text-pink-600" />
        <StatCard icon={Swords}    label="Rivals"      value={rv.carsWithRivals} sub={`${rv.coveragePct}% coverage`} color="text-amber-600" />
        <StatCard icon={DollarSign} label="Checklist"  value={`${Object.values(report.CHECKLIST).filter(Boolean).length}/${Object.values(report.CHECKLIST).length}`} color="text-green-600" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">

        {/* Data Quality */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
          <div className="flex items-center gap-2 mb-4">
            <Sparkles className="w-5 h-5 text-blue-600" />
            <h2 className="font-black text-gray-900">Data Quality</h2>
            <span className="ml-auto text-xs text-gray-400">{dq.totalCars} cars · avg {dq.avgImages} imgs · {dq.avgVariants} variants · {dq.avgSpecs} specs</span>
          </div>
          <div className="mb-3">
            <p className="text-xs font-bold text-gray-500 uppercase tracking-wide mb-2">Hard Targets</p>
            {Object.entries(dq.hardTargets).map(([k, v]) => (
              <FieldRow key={k} name={k} stat={v} />
            ))}
          </div>
          <div>
            <p className="text-xs font-bold text-gray-500 uppercase tracking-wide mb-2 mt-3">Field Coverage</p>
            {Object.entries(dq.fields).map(([k, v]) => (
              <FieldRow key={k} name={k} stat={v} />
            ))}
          </div>
          <div className="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-500">
            <span>AI Enrichment runs: {dq.enrichment.totalRuns}</span>
            <span>Success rate: <span className="font-bold text-green-600">{dq.enrichment.successRate}%</span></span>
          </div>
        </div>

        {/* Filter Health */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
          <div className="flex items-center gap-2 mb-4">
            <Filter className="w-5 h-5 text-blue-600" />
            <h2 className="font-black text-gray-900">Filter Health</h2>
            <span className={cn(
              "ml-auto text-xs font-bold px-2 py-0.5 rounded-full",
              filterOk ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
            )}>
              {fh.summary.working}/{fh.summary.total} working
            </span>
          </div>
          <div className="space-y-2">
            {fh.working.map(({ filter, matched }) => (
              <div key={filter} className="flex items-center gap-3 py-1.5 border-b border-gray-50 last:border-0">
                <CheckCircle2 className="w-4 h-4 text-green-500 shrink-0" />
                <span className="text-sm font-medium text-gray-700 flex-1">{filter}</span>
                <span className="text-xs text-gray-400">{matched.toLocaleString()} results</span>
              </div>
            ))}
            {fh.broken.map(({ filter, reason }) => (
              <div key={filter} className="flex items-center gap-3 py-1.5 border-b border-gray-50 last:border-0">
                <XCircle className="w-4 h-4 text-red-500 shrink-0" />
                <span className="text-sm font-medium text-gray-700 flex-1">{filter}</span>
                <span className="text-xs text-red-400">{reason}</span>
              </div>
            ))}
          </div>
        </div>

      </div>

      {/* Phases completed */}
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 mb-6">
        <div className="flex items-center gap-2 mb-4">
          <TrendingUp className="w-5 h-5 text-blue-600" />
          <h2 className="font-black text-gray-900">Sprint Phases</h2>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {Object.entries(report.PHASES_COMPLETED).map(([key, value]) => {
            const isComplete = value.startsWith("COMPLETE");
            const phaseNum = key.match(/phase(\d+)/)?.[1];
            const phaseDesc = value.replace("COMPLETE — ", "");
            return (
              <div key={key} className={cn(
                "flex items-start gap-3 p-3 rounded-xl border",
                isComplete ? "bg-green-50 border-green-100" : "bg-amber-50 border-amber-100"
              )}>
                <div className={cn(
                  "w-7 h-7 rounded-full flex items-center justify-center text-xs font-black shrink-0",
                  isComplete ? "bg-green-500 text-white" : "bg-amber-400 text-white"
                )}>
                  {phaseNum}
                </div>
                <div>
                  <p className={cn("text-xs font-bold", isComplete ? "text-green-700" : "text-amber-700")}>
                    {isComplete ? "✓ COMPLETE" : "⚠ PENDING"}
                  </p>
                  <p className="text-xs text-gray-600 mt-0.5 leading-snug">{phaseDesc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Production Checklist */}
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
        <div className="flex items-center gap-2 mb-4">
          <Shield className="w-5 h-5 text-blue-600" />
          <h2 className="font-black text-gray-900">Production Checklist</h2>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
          {Object.entries(report.CHECKLIST).map(([key, value]) => {
            const isPass = value === true || (typeof value === "number" && value > 0);
            const label  = key.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
            return (
              <div key={key} className={cn(
                "flex items-center gap-2 p-3 rounded-xl border",
                isPass ? "bg-green-50 border-green-100" : "bg-red-50 border-red-100"
              )}>
                {isPass
                  ? <CheckCircle2 className="w-4 h-4 text-green-500 shrink-0" />
                  : <XCircle className="w-4 h-4 text-red-500 shrink-0" />
                }
                <div>
                  <p className="text-xs font-bold text-gray-700 leading-tight">{label}</p>
                  <p className={cn("text-xs font-black", isPass ? "text-green-600" : "text-red-600")}>
                    {String(value)}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

    </div>
  );
}