"use client";

import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import {
  Users,
  MousePointerClick,
  TrendingUp,
  Calendar,
  CalendarDays,
  CalendarRange,
  BarChart3,
  RefreshCw,
  ArrowRight,
  Car,
  GitBranch,
  Zap,
  Cpu,
  Clock,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Play,
  Loader2,
  Server,
  FileText,
  Sparkles,
} from "lucide-react";
import {
  fetchLeadStats,
  fetchScraperStatus,
  triggerScrape,
  fetchBlogStats,
  fetchComparisons,
  type ScraperStatus,
  type ScraperResult,
} from "@/lib/api";
import type { LeadStats, LeadStatus, BlogStats } from "@/lib/types";
import { cn } from "@/lib/utils";

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

function fmt(iso: string | null | undefined) {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleString("en-IN", {
      day: "numeric", month: "short", year: "numeric",
      hour: "2-digit", minute: "2-digit",
    });
  } catch { return "—"; }
}

function fmtNum(n: number | null | undefined, fallback = "—"): string {
  if (n == null) return fallback;
  return n.toLocaleString();
}

function fmtSec(n: number | null | undefined): string {
  if (n == null) return "N/A";
  return `${n.toFixed(1)}s`;
}

// ── Sub-components ────────────────────────────────────────────────────────────

function StatCard({
  icon: Icon,
  label,
  value,
  sub,
  color = "blue",
}: {
  icon: React.ElementType;
  label: string;
  value: string | number | undefined;
  sub?: string;
  color?: "blue" | "green" | "amber" | "violet" | "cyan" | "purple" | "orange";
}) {
  const gradients: Record<string, string> = {
    blue:   "from-blue-500 to-blue-600 shadow-blue-100",
    green:  "from-green-500 to-emerald-500 shadow-green-100",
    amber:  "from-amber-400 to-orange-500 shadow-amber-100",
    violet: "from-violet-500 to-purple-500 shadow-violet-100",
    cyan:   "from-cyan-500 to-blue-500 shadow-cyan-100",
    purple: "from-violet-500 to-purple-600 shadow-violet-100",
    orange: "from-orange-500 to-red-500 shadow-orange-100",
  };
  return (
    <div className="rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)]">
      <div className={cn("w-12 h-12 rounded-2xl bg-gradient-to-br flex items-center justify-center mb-4 shadow-lg", gradients[color])}>
        <Icon className="w-6 h-6 text-white" />
      </div>
      <p className="text-3xl font-black text-gray-900">{value}</p>
      <p className="text-sm font-bold text-gray-500 mt-1">{label}</p>
      {sub && <p className="text-xs text-gray-400 mt-1">{sub}</p>}
    </div>
  );
}

function SkeletonCard() {
  return (
    <div className="rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] animate-pulse">
      <div className="w-12 h-12 rounded-2xl bg-gray-100 mb-4" />
      <div className="h-8 bg-gray-100 rounded-xl w-24 mb-2" />
      <div className="h-4 bg-gray-100 rounded-lg w-32" />
    </div>
  );
}

function StatusBadge({ running }: { running: boolean }) {
  return (
    <div className={cn(
      "inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-sm font-bold border",
      running
        ? "bg-green-50 text-green-700 border-green-200"
        : "bg-gray-50 text-gray-500 border-gray-200"
    )}>
      <div className={cn("w-2 h-2 rounded-full", running ? "bg-green-500 animate-pulse" : "bg-gray-300")} />
      {running ? "Running" : "Idle"}
    </div>
  );
}

const STATUS_COLORS: Record<LeadStatus, string> = {
  New:        "bg-blue-500",
  Contacted:  "bg-yellow-500",
  Qualified:  "bg-purple-500",
  Converted:  "bg-green-500",
  Rejected:   "bg-red-500",
};

const ALL_STATUSES: LeadStatus[] = ["New", "Contacted", "Qualified", "Converted", "Rejected"];

// ── Main Page ─────────────────────────────────────────────────────────────────

export default function AdminDashboardPage() {
  const [leadStats,     setLeadStats]     = useState<LeadStats | null>(null);
  const [scraperStatus, setScraperStatus] = useState<ScraperStatus | null>(null);
  const [blogStats,     setBlogStats]     = useState<BlogStats | null>(null);
  const [comparisonTotal, setComparisonTotal] = useState<number | null>(null);
  const [loading,       setLoading]       = useState(true);
  const [error,         setError]         = useState<string | null>(null);
  const [scraping,      setScraping]      = useState(false);
  const [lastResult,    setLastResult]    = useState<ScraperResult | null>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [ls, ss, bs, cs] = await Promise.allSettled([
        fetchLeadStats(),
        fetchScraperStatus(),
        fetchBlogStats(),
        fetchComparisons({ page: 1, limit: 1 }),
      ]);
      if (ls.status === "fulfilled") setLeadStats(ls.value);
      if (ss.status === "fulfilled") {
        setScraperStatus(ss.value);
        if (ss.value.scraper.last_result) setLastResult(ss.value.scraper.last_result);
      }
      if (bs.status === "fulfilled") setBlogStats(bs.value);
      if (cs.status === "fulfilled") setComparisonTotal(cs.value.total);
      if (ls.status === "rejected" && ss.status === "rejected") {
        setError("Failed to load dashboard data. Check your connection.");
      }
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Failed to load data");
    } finally {
      setLoading(false);
    }
  }, []);

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

  // Auto-refresh when scraper is running
  useEffect(() => {
    if (!scraperStatus?.scraper?.running) return;
    const t = setInterval(loadData, 15_000);
    return () => clearInterval(t);
  }, [scraperStatus?.scraper?.running, loadData]);

  async function handleScrape() {
    if (scraping) return;
    setScraping(true);
    try {
      const result = await triggerScrape();
      setLastResult(result);
      await loadData();
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Scrape failed");
    } finally {
      setScraping(false);
    }
  }

  const maxStatus = leadStats
    ? Math.max(...ALL_STATUSES.map((s) => leadStats.byStatus?.[s] ?? 0), 1)
    : 1;

  return (
    <div className="max-w-[1280px] mx-auto px-4 sm:px-6 py-8 space-y-8">
      {/* Page title */}
      <div className="flex items-center justify-between flex-wrap gap-4">
        <div>
          <h1 className="text-2xl font-black text-gray-900">Dashboard</h1>
          <p className="text-sm text-gray-500 mt-1">Platform overview & lead management</p>
        </div>
        <button
          onClick={loadData}
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2.5 rounded-2xl border border-gray-200 bg-white text-sm font-semibold text-gray-700 hover:border-blue-200 transition-all"
        >
          <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
          Refresh
        </button>
      </div>

      {error && (
        <div className="rounded-2xl bg-red-50 border border-red-200 p-4 flex items-center gap-3 text-sm text-red-700">
          <XCircle className="w-5 h-5 shrink-0" />
          {error}
        </div>
      )}

      {/* Lead Stats */}
      <section>
        <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Lead Statistics</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {loading && !leadStats ? (
            Array.from({ length: 4 }).map((_, i) => <SkeletonCard key={i} />)
          ) : leadStats ? (
            <>
              <StatCard icon={Users}       label="Total Leads"   value={fmtNum(leadStats.totalLeads)} color="blue" />
              <StatCard icon={Calendar}    label="Today's Leads" value={fmtNum(leadStats.todayLeads)} color="green" sub="Last 24 hours" />
              <StatCard icon={CalendarDays}label="This Week"     value={fmtNum(leadStats.weekLeads)}  color="violet" sub="Last 7 days" />
              <StatCard icon={CalendarRange}label="This Month"   value={fmtNum(leadStats.monthLeads)} color="amber" sub="Last 30 days" />
            </>
          ) : (
            <div className="col-span-4 text-center text-sm text-gray-400 py-8">Lead stats unavailable</div>
          )}
        </div>
      </section>

      {/* Conversion row */}
      {leadStats && (
        <section>
          <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Conversion</h2>
          <div className="grid grid-cols-2 gap-4">
            <StatCard icon={MousePointerClick} label="Total Button Clicks" value={fmtNum(leadStats.totalClicks)} color="cyan" sub="Get On-Road Price clicks" />
            <StatCard
              icon={TrendingUp}
              label="Conversion Rate"
              value={`${leadStats.conversionRate != null ? leadStats.conversionRate.toFixed(1) : ((leadStats.totalClicks > 0 ? (leadStats.totalLeads / leadStats.totalClicks) * 100 : 0)).toFixed(1)}%`}
              color="green"
              sub="Leads / Clicks"
            />
          </div>
        </section>
      )}

      {/* Status breakdown */}
      {leadStats && (
        <section>
          <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Leads by Status</h2>
          <div className="rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] space-y-4">
            {ALL_STATUSES.map((status) => {
              const count = leadStats.byStatus?.[status] ?? 0;
              const pct = maxStatus > 0 ? (count / maxStatus) * 100 : 0;
              return (
                <div key={status} className="flex items-center gap-4">
                  <span className="text-sm font-bold text-gray-700 w-24 shrink-0">{status}</span>
                  <div className="flex-1 h-3 bg-gray-100 rounded-full overflow-hidden">
                    <motion.div
                      initial={{ width: 0 }}
                      animate={{ width: `${pct}%` }}
                      transition={{ duration: 0.7, ease: "easeOut" }}
                      className={cn("h-full rounded-full", STATUS_COLORS[status])}
                    />
                  </div>
                  <span className="text-sm font-black text-gray-900 w-10 text-right">{count}</span>
                </div>
              );
            })}
          </div>
        </section>
      )}

      {/* Content stats */}
      <section>
        <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Content Statistics</h2>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {loading && !blogStats ? (
            Array.from({ length: 4 }).map((_, i) => <SkeletonCard key={i} />)
          ) : (
            <>
              <StatCard icon={FileText}   label="Total Blogs"        value={blogStats?.total        ?? "—"} color="purple" />
              <StatCard icon={TrendingUp} label="Published"          value={blogStats?.published    ?? "—"} color="green"  />
              <StatCard icon={GitBranch}  label="Comparisons"        value={comparisonTotal         ?? "—"} color="blue"   />
              <StatCard icon={Sparkles}   label="AI Generated Today" value={blogStats?.todayGenerated ?? "—"} color="orange" />
            </>
          )}
        </div>
      </section>

      {/* Quick links */}
      <section>
        <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Quick Actions</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <Link
            href="/admin/leads"
            className="group rounded-[24px] bg-gradient-to-r from-blue-600 to-cyan-500 p-6 shadow-xl shadow-blue-100 flex items-center justify-between text-white hover:shadow-2xl transition-all duration-300"
          >
            <div>
              <p className="text-lg font-black">Manage Leads</p>
              <p className="text-sm text-blue-100 mt-1">View, filter & update lead status</p>
            </div>
            <ArrowRight className="w-6 h-6 opacity-70 group-hover:translate-x-1 transition-transform" />
          </Link>
          <Link
            href="/admin/analytics"
            className="group rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] flex items-center justify-between text-gray-800 hover:border-blue-200 hover:shadow-xl transition-all duration-300"
          >
            <div>
              <p className="text-lg font-black">View Analytics</p>
              <p className="text-sm text-gray-500 mt-1">Charts, trends & brand insights</p>
            </div>
            <BarChart3 className="w-6 h-6 text-blue-500 opacity-70 group-hover:scale-110 transition-transform" />
          </Link>
          <Link
            href="/admin/blogs"
            className="group rounded-[24px] bg-gradient-to-r from-purple-600 to-violet-500 p-6 shadow-xl shadow-purple-100 flex items-center justify-between text-white hover:shadow-2xl transition-all duration-300"
          >
            <div>
              <p className="text-lg font-black">Generate Blog Post</p>
              <p className="text-sm text-purple-100 mt-1">AI-powered automotive content</p>
            </div>
            <Sparkles className="w-6 h-6 opacity-70 group-hover:scale-110 transition-transform" />
          </Link>
          <Link
            href="/compare"
            className="group rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] flex items-center justify-between text-gray-800 hover:border-purple-200 hover:shadow-xl transition-all duration-300"
          >
            <div>
              <p className="text-lg font-black">Generate Comparison</p>
              <p className="text-sm text-gray-500 mt-1">Side-by-side AI car comparisons</p>
            </div>
            <GitBranch className="w-6 h-6 text-purple-500 opacity-70 group-hover:scale-110 transition-transform" />
          </Link>
        </div>
      </section>

      {/* Scraper status */}
      {scraperStatus && (
        <>
          <section>
            <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Database Stats</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <StatCard icon={Car}       label="Total Cars"    value={scraperStatus.database?.total_cars    ?? "—"} color="blue" />
              <StatCard icon={GitBranch} label="Total Brands"  value={scraperStatus.database?.total_brands  ?? "—"} color="violet" />
              <StatCard icon={Zap}       label="Featured Cars" value={scraperStatus.database?.featured_cars ?? "—"} color="amber" />
              <StatCard icon={BarChart3} label="New Launches"  value={scraperStatus.database?.new_launches  ?? "—"} color="green" />
            </div>
          </section>

          <section>
            <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Scraper Status</h2>
            <div className="rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)]">
              <div className="flex items-start justify-between mb-6 flex-wrap gap-4">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-blue-100 flex items-center justify-center">
                    <Cpu className="w-6 h-6 text-blue-600" />
                  </div>
                  <div>
                    <p className="font-black text-gray-900 flex items-center gap-2">
                      <Server className="w-4 h-4 text-gray-400" />
                      Live Scraper
                    </p>
                    <p className="text-sm text-gray-500">
                      Interval: {scraperStatus.scheduler?.interval_hours ?? "—"}h
                      {scraperStatus.scheduler?.apify_configured
                        ? " · Apify enabled"
                        : " · Fallback mode"}
                    </p>
                  </div>
                </div>
                <StatusBadge running={scraperStatus.scraper?.running ?? false} />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                <div className="rounded-2xl bg-gray-50 border border-gray-100 p-4">
                  <p className="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Last Run</p>
                  <p className="text-sm font-bold text-gray-800 flex items-center gap-2">
                    <Clock className="w-4 h-4 text-gray-400" />
                    {fmt(scraperStatus.scraper?.last_run)}
                  </p>
                </div>
                <div className="rounded-2xl bg-green-50 border border-green-100 p-4">
                  <p className="text-xs text-green-500 font-bold uppercase tracking-wider mb-1">Last Success</p>
                  <p className="text-sm font-bold text-gray-800 flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-green-500" />
                    {fmt(scraperStatus.scraper?.last_success)}
                  </p>
                </div>
                <div className="rounded-2xl bg-red-50 border border-red-100 p-4">
                  <p className="text-xs text-red-400 font-bold uppercase tracking-wider mb-1">Last Error</p>
                  <p className="text-sm font-bold text-gray-800 flex items-center gap-2 truncate">
                    <XCircle className="w-4 h-4 text-red-400 shrink-0" />
                    {scraperStatus.scraper?.last_error ?? "None"}
                  </p>
                </div>
              </div>

              <motion.button
                whileTap={{ scale: 0.97 }}
                onClick={handleScrape}
                disabled={scraping || (scraperStatus.scraper?.running ?? false)}
                className={cn(
                  "flex items-center justify-center gap-3 w-full py-4 rounded-2xl font-bold text-sm transition-all",
                  scraping || (scraperStatus.scraper?.running ?? false)
                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                    : "bg-gradient-to-r from-blue-600 to-cyan-500 text-white shadow-xl shadow-blue-100 hover:shadow-2xl"
                )}
              >
                {scraping || (scraperStatus.scraper?.running ?? false)
                  ? <><Loader2 className="w-5 h-5 animate-spin" /> Scraper Running…</>
                  : <><Play className="w-5 h-5" /> Trigger Manual Scrape</>
                }
              </motion.button>
            </div>
          </section>

          {/* Apify config */}
          {!scraperStatus.scheduler?.apify_configured && (
            <div className="rounded-2xl bg-amber-50 border border-amber-200 p-4 flex items-center gap-3 text-sm text-amber-700">
              <AlertTriangle className="w-5 h-5 shrink-0" />
              Apify not configured — scraper is using fallback catalog data. Set <code className="font-mono bg-amber-100 px-1 rounded">APIFY_API_KEY</code> in your .env to enable live scraping.
            </div>
          )}
        </>
      )}

      {/* Last scrape result */}
      {lastResult && (
        <section>
          <h2 className="text-xs uppercase tracking-[0.2em] text-gray-400 font-black mb-4">Last Scrape Result</h2>
          <div className="rounded-[24px] bg-white border border-gray-200/60 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)]">
            <div className="flex items-center gap-3 mb-5 flex-wrap">
              <span className="font-black text-gray-900">{lastResult.source ?? "Unknown"}</span>
              <span className="text-xs text-gray-400">{fmt(lastResult.timestamp)}</span>
              <span className="ml-auto text-xs text-gray-400 shrink-0">{fmtSec(lastResult.execution_time_s)}</span>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
              {[
                { label: "Discovered", value: lastResult.cars_discovered ?? 0, bg: "bg-blue-50",   text: "text-blue-500",   border: "border-blue-100" },
                { label: "Inserted",   value: lastResult.inserted          ?? 0, bg: "bg-green-50",  text: "text-green-500",  border: "border-green-100" },
                { label: "Updated",    value: lastResult.updated            ?? 0, bg: "bg-violet-50", text: "text-violet-500", border: "border-violet-100" },
                { label: "Skipped",    value: lastResult.skipped            ?? 0, bg: "bg-amber-50",  text: "text-amber-500",  border: "border-amber-100" },
                { label: "Errors",     value: lastResult.errors             ?? 0, bg: "bg-red-50",    text: "text-red-500",    border: "border-red-100" },
              ].map(({ label, value, bg, text, border }) => (
                <div key={label} className={cn("rounded-2xl p-4 border", bg, border)}>
                  <p className={cn("text-xs font-black uppercase tracking-wider mb-1", text)}>{label}</p>
                  <p className="text-2xl font-black text-gray-900">{fmtNum(value, "0")}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {loading && !leadStats && !scraperStatus && (
        <div className="flex items-center justify-center py-16">
          <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
        </div>
      )}
    </div>
  );
}