"use client";

import { useEffect, useState, useCallback } from "react";
import {
  ShieldCheck, AlertTriangle, RefreshCw, CheckCircle2, XCircle,
  BadgeCheck, Eye, ChevronDown, ChevronUp,
} from "lucide-react";
import Link from "next/link";

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

interface ConfidenceEntry {
  confidence: number;
  sourceCount: number;
  verified: boolean;
  level: string;
  label: string;
  method: string;
  lastChecked: string;
}

interface CarReviewItem {
  id: string;
  name: string;
  brand: string;
  slug?: string;
  overallConfidence: number;
  publishReady: boolean;
  flaggedFields: string[];
  confidenceMap: Record<string, ConfidenceEntry>;
}

interface Summary {
  total: number;
  publishReady: number;
  needsReview: number;
  avgConfidence: number;
}

const LEVEL_STYLE: Record<string, string> = {
  verified:     "bg-green-100 text-green-700 border-green-200",
  high:         "bg-blue-100 text-blue-700 border-blue-200",
  medium:       "bg-amber-100 text-amber-700 border-amber-200",
  needs_review: "bg-red-100 text-red-700 border-red-200",
};

const LEVEL_LABELS: Record<string, string> = {
  verified:     "Verified",
  high:         "High Confidence",
  medium:       "Medium Confidence",
  needs_review: "Needs Review",
};

function ConfidenceBar({ score }: { score: number }) {
  const pct = Math.round(score * 100);
  const color = score >= 0.95 ? "bg-green-500"
    : score >= 0.80 ? "bg-blue-500"
    : score >= 0.60 ? "bg-amber-500"
    : "bg-red-500";
  return (
    <div className="flex items-center gap-2 min-w-0">
      <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden min-w-0">
        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
      </div>
      <span className="text-xs font-bold w-10 text-right shrink-0">{pct}%</span>
    </div>
  );
}

function CarRow({ car, onVerify }: { car: CarReviewItem; onVerify: () => void }) {
  const [expanded, setExpanded] = useState(false);
  const [verifying, setVerifying] = useState<string | null>(null);

  async function handleVerify(field: string) {
    setVerifying(field);
    try {
      const token = sessionStorage.getItem("drivehub_admin_token") || "";
      await fetch(`${API}/api/confidence/${car.id}/verify/${field}`, {
        method: "PATCH",
        headers: { Authorization: `Bearer ${token}` },
      });
      onVerify();
    } catch (e) {
      console.error(e);
    } finally {
      setVerifying(null);
    }
  }

  const pct = Math.round((car.overallConfidence ?? 0) * 100);
  const levelColor = car.publishReady ? "text-green-600" : "text-red-500";

  return (
    <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm min-w-0">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center gap-2 sm:gap-4 p-3 sm:p-4 text-left hover:bg-gray-50 transition-colors min-w-0"
      >
        <div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${car.publishReady ? "bg-green-100" : "bg-red-100"}`}>
          {car.publishReady
            ? <CheckCircle2 className="w-4 h-4 text-green-600" />
            : <XCircle className="w-4 h-4 text-red-500" />
          }
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1 min-w-0 flex-wrap">
            <span className="font-bold text-gray-900 text-sm truncate min-w-0 max-w-full">{car.brand} {car.name}</span>
            {!car.publishReady && (
              <span className="text-[10px] font-black px-2 py-0.5 rounded-full bg-red-100 text-red-600 shrink-0">
                {car.flaggedFields.length} field{car.flaggedFields.length !== 1 ? "s" : ""} flagged
              </span>
            )}
          </div>
          <ConfidenceBar score={car.overallConfidence ?? 0} />
        </div>
        <span className={`text-sm font-black ${levelColor} shrink-0`}>{pct}%</span>
        {expanded
          ? <ChevronUp className="w-4 h-4 text-gray-400 shrink-0" />
          : <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" />
        }
      </button>

      {expanded && (
        <div className="border-t border-gray-100 p-3 sm:p-4 bg-gray-50/50 min-w-0">
          {car.flaggedFields.length > 0 && (
            <div className="mb-4 p-3 rounded-xl bg-red-50 border border-red-100 min-w-0">
              <p className="text-xs font-black text-red-600 uppercase tracking-wider mb-1">Flagged Fields</p>
              <div className="flex flex-wrap gap-2">
                {car.flaggedFields.map((f) => (
                  <span key={f} className="text-xs font-semibold px-2 py-1 rounded-lg bg-red-100 text-red-700 break-all max-w-full">{f}</span>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 min-w-0">
            {Object.entries(car.confidenceMap || {}).map(([field, entry]) => (
              <div key={field} className={`rounded-xl border p-3 min-w-0 overflow-hidden ${LEVEL_STYLE[entry.level] || "bg-gray-50 border-gray-200"}`}>
                <div className="flex items-start justify-between gap-2 mb-1.5 min-w-0">
                  <span className="text-xs font-black uppercase tracking-wider min-w-0 break-words">{field}</span>
                  <div className="flex items-center gap-1.5 shrink-0 flex-wrap justify-end">
                    <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-white/60 max-w-[9rem] truncate">
                      {entry.label || LEVEL_LABELS[entry.level] || entry.level}
                    </span>
                    {!entry.verified && (
                      <button
                        onClick={() => handleVerify(field)}
                        disabled={verifying === field}
                        className="text-[10px] font-black min-h-[28px] px-2.5 py-1 rounded bg-white border border-current/30 hover:bg-white/80 transition-colors disabled:opacity-50"
                      >
                        {verifying === field ? "…" : "Verify"}
                      </button>
                    )}
                    {entry.verified && <BadgeCheck className="w-3.5 h-3.5 shrink-0" />}
                  </div>
                </div>
                <div className="flex items-center gap-x-3 gap-y-1 text-xs flex-wrap min-w-0">
                  <span className="font-bold shrink-0">{Math.round(entry.confidence * 100)}%</span>
                  <span className="opacity-70 shrink-0">{entry.sourceCount} source{entry.sourceCount !== 1 ? "s" : ""}</span>
                  <span className="opacity-50 capitalize min-w-0 break-words">{entry.method}</span>
                </div>
              </div>
            ))}
          </div>

          {car.slug && (
            <div className="mt-3 flex justify-end">
              <Link
                href={`/cars/${car.slug}`}
                target="_blank"
                className="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:underline"
              >
                <Eye className="w-3.5 h-3.5" />
                View car page
              </Link>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default function ConfidencePage() {
  const [summary, setSummary] = useState<Summary | null>(null);
  const [cars, setCars] = useState<CarReviewItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [running, setRunning] = useState(false);

  const token = () => typeof window !== "undefined"
    ? sessionStorage.getItem("drivehub_admin_token") || ""
    : "";

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [sumRes, carsRes] = await Promise.all([
        fetch(`${API}/api/confidence/summary`, { headers: { Authorization: `Bearer ${token()}` } }),
        fetch(`${API}/api/confidence/needs-review?limit=100`, { headers: { Authorization: `Bearer ${token()}` } }),
      ]);
      if (sumRes.ok) setSummary(await sumRes.json());
      if (carsRes.ok) {
        const d = await carsRes.json();
        setCars(d.cars || []);
      }
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function runCheck() {
    setRunning(true);
    try {
      await fetch(`${API}/api/confidence/run-check`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token()}` },
      });
      await load();
    } finally {
      setRunning(false);
    }
  }

  const publishPct = summary ? Math.round((summary.publishReady / (summary.total || 1)) * 100) : 0;

  return (
    <div className="p-4 sm:p-6 max-w-5xl mx-auto min-w-0 overflow-x-hidden pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 min-w-0">
        <div className="min-w-0">
          <h1 className="text-xl sm:text-2xl font-black text-gray-900 flex items-center gap-2 min-w-0">
            <ShieldCheck className="w-6 h-6 text-blue-600 shrink-0" />
            <span className="min-w-0 break-words">AI Confidence System</span>
          </h1>
          <p className="text-gray-500 text-sm mt-1">
            Every AI-generated field is tracked. Below 60% blocks auto-publishing.
          </p>
        </div>
        <button
          onClick={runCheck}
          disabled={running || loading}
          className="flex items-center justify-center gap-1.5 px-4 py-2.5 min-h-[44px] rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 shrink-0 w-full sm:w-auto"
        >
          <RefreshCw className={`w-4 h-4 ${running ? "animate-spin" : ""}`} />
          Run Check
        </button>
      </div>

      {/* Confidence Levels Legend */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6 min-w-0">
        {[
          { level: "verified",     label: "Verified",          range: "95–100%", color: "bg-green-50 border-green-200 text-green-700" },
          { level: "high",         label: "High Confidence",   range: "80–94%",  color: "bg-blue-50 border-blue-200 text-blue-700" },
          { level: "medium",       label: "Medium Confidence", range: "60–79%",  color: "bg-amber-50 border-amber-200 text-amber-700" },
          { level: "needs_review", label: "Needs Review",      range: "< 60%",   color: "bg-red-50 border-red-200 text-red-700" },
        ].map(({ label, range, color }) => (
          <div key={label} className={`rounded-2xl border p-3 min-w-0 ${color}`}>
            <p className="font-black text-sm break-words">{label}</p>
            <p className="text-xs mt-0.5 opacity-70">{range}</p>
          </div>
        ))}
      </div>

      {/* KPI cards */}
      {loading ? (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 min-w-0">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="h-24 rounded-2xl bg-gray-100 animate-pulse" />
          ))}
        </div>
      ) : summary && (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 min-w-0">
          {[
            { label: "Total Cars",     value: summary.total,        color: "bg-gray-50 border-gray-200" },
            { label: "Publish Ready",  value: `${summary.publishReady} (${publishPct}%)`, color: "bg-green-50 border-green-200 text-green-700" },
            { label: "Needs Review",   value: summary.needsReview,  color: summary.needsReview > 0 ? "bg-red-50 border-red-200 text-red-700" : "bg-gray-50 border-gray-200" },
            { label: "Avg Confidence", value: `${Math.round((summary.avgConfidence || 0) * 100)}%`, color: "bg-blue-50 border-blue-200 text-blue-700" },
          ].map(({ label, value, color }) => (
            <div key={label} className={`rounded-2xl border p-3 sm:p-5 min-w-0 overflow-hidden ${color}`}>
              <p className="text-xl sm:text-2xl font-black break-words">{value}</p>
              <p className="text-xs font-semibold opacity-70 mt-0.5 break-words">{label}</p>
            </div>
          ))}
        </div>
      )}

      {/* Cars needing review */}
      <div className="min-w-0">
        <h2 className="text-lg font-black text-gray-900 mb-4 flex flex-wrap items-center gap-2 min-w-0">
          <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0" />
          <span className="min-w-0">Cars Needing Review</span>
          {cars.length > 0 && (
            <span className="text-sm font-semibold text-gray-400 sm:ml-auto">{cars.length} cars</span>
          )}
        </h2>

        {loading ? (
          <div className="space-y-3">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="h-16 rounded-2xl bg-gray-100 animate-pulse" />
            ))}
          </div>
        ) : cars.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-2xl border border-gray-100">
            <CheckCircle2 className="w-12 h-12 text-green-400 mx-auto mb-3" />
            <p className="font-bold text-gray-700">All cars pass confidence checks</p>
            <p className="text-sm text-gray-400 mt-1">Run a check to re-evaluate</p>
          </div>
        ) : (
          <div className="space-y-3">
            {cars.map((car) => (
              <CarRow key={car.id} car={car} onVerify={load} />
            ))}
          </div>
        )}
      </div>

      <p className="text-xs text-gray-400 mt-6 text-center">
        Confidence is re-evaluated daily at 10:45 UTC. Fields below 60% are never auto-published.
      </p>
    </div>
  );
}