"use client";

import { useState, useCallback } from "react";
import {
  BarChart3,
  MapPin,
  Users,
  Building2,
  TreePine,
  Ruler,
  Sparkles,
  FileQuestion,
  Lightbulb,
  X,
  Loader2,
  ChevronDown,
  ChevronUp,
} from "lucide-react";
import { Card, CardContent } from "@/shared/components/ui/card";
import { Button } from "@/shared/components/ui/button";
import { Badge } from "@/shared/components/ui/badge";
import { cn } from "@/shared/lib/utils";
import type { UatDashboardData } from "@/app/api/eterra/uat-dashboard/route";

/* ------------------------------------------------------------------ */
/*  Bar component (CSS only)                                           */
/* ------------------------------------------------------------------ */

function Bar({
  pct,
  color = "bg-emerald-500",
  className,
}: {
  pct: number;
  color?: string;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "h-full rounded-sm transition-all duration-500",
        color,
        className,
      )}
      style={{ width: `${Math.max(pct, 1)}%` }}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  KPI Card                                                           */
/* ------------------------------------------------------------------ */

function KpiCard({
  icon: Icon,
  label,
  value,
  sub,
  accent = "text-foreground",
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string | number;
  sub?: string;
  accent?: string;
}) {
  return (
    <div className="flex items-start gap-3 p-3 rounded-lg border bg-card">
      <div className="mt-0.5 p-1.5 rounded-md bg-muted">
        <Icon className="h-4 w-4 text-muted-foreground" />
      </div>
      <div className="min-w-0">
        <p className="text-[11px] text-muted-foreground leading-tight">
          {label}
        </p>
        <p
          className={cn("text-xl font-bold tabular-nums leading-tight", accent)}
        >
          {typeof value === "number" ? value.toLocaleString("ro-RO") : value}
        </p>
        {sub && (
          <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">
            {sub}
          </p>
        )}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Horizontal bar chart                                               */
/* ------------------------------------------------------------------ */

function HBarChart({
  data,
  labelKey,
  valueKey,
  pctKey,
  color = "bg-emerald-500",
  maxBars = 10,
  formatValue,
}: {
  data: Record<string, unknown>[];
  labelKey: string;
  valueKey: string;
  pctKey: string;
  color?: string;
  maxBars?: number;
  formatValue?: (v: number) => string;
}) {
  const items = data.slice(0, maxBars);
  if (items.length === 0)
    return <p className="text-xs text-muted-foreground italic">Fără date</p>;
  const maxPct = Math.max(...items.map((d) => Number(d[pctKey] ?? 0)), 1);

  return (
    <div className="space-y-1.5">
      {items.map((d, i) => {
        const pct = Number(d[pctKey] ?? 0);
        const val = Number(d[valueKey] ?? 0);
        const label = String(d[labelKey] ?? "");
        return (
          <div key={`${label}-${i}`} className="flex items-center gap-2">
            <span className="text-[11px] text-muted-foreground w-[110px] truncate text-right flex-shrink-0">
              {label}
            </span>
            <div className="flex-1 h-5 bg-muted/50 rounded-sm overflow-hidden relative">
              <Bar
                pct={(pct / maxPct) * 100}
                color={color}
                className="absolute inset-y-0 left-0"
              />
              <span className="absolute inset-y-0 left-1.5 flex items-center text-[10px] font-medium tabular-nums mix-blend-difference text-white">
                {formatValue ? formatValue(val) : val.toLocaleString("ro-RO")}
              </span>
            </div>
            <span className="text-[10px] tabular-nums text-muted-foreground w-[32px] text-right flex-shrink-0">
              {pct}%
            </span>
          </div>
        );
      })}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Donut-ish ring (CSS conic-gradient)                                */
/* ------------------------------------------------------------------ */

function DonutRing({
  segments,
  size = 80,
}: {
  segments: { pct: number; color: string; label: string }[];
  size?: number;
}) {
  let cumulative = 0;
  const stops: string[] = [];
  for (const seg of segments) {
    const start = cumulative;
    cumulative += seg.pct;
    stops.push(`${seg.color} ${start}% ${cumulative}%`);
  }
  if (cumulative < 100) {
    stops.push(`hsl(var(--muted)) ${cumulative}% 100%`);
  }

  return (
    <div className="flex items-center gap-3">
      <div
        className="rounded-full flex-shrink-0"
        style={{
          width: size,
          height: size,
          background: `conic-gradient(${stops.join(", ")})`,
          mask: `radial-gradient(circle at center, transparent 55%, black 56%)`,
          WebkitMask: `radial-gradient(circle at center, transparent 55%, black 56%)`,
        }}
      />
      <div className="space-y-1">
        {segments.map((seg) => (
          <div
            key={seg.label}
            className="flex items-center gap-1.5 text-[11px]"
          >
            <span
              className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
              style={{ backgroundColor: seg.color }}
            />
            <span className="text-muted-foreground">{seg.label}</span>
            <span className="font-medium tabular-nums">{seg.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Main dashboard component                                           */
/* ------------------------------------------------------------------ */

export function UatDashboard({
  siruta,
  uatName,
  onClose,
}: {
  siruta: string;
  uatName: string;
  onClose: () => void;
}) {
  const [data, setData] = useState<UatDashboardData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
  const [loaded, setLoaded] = useState(false);

  const toggle = (key: string) =>
    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));

  const fetchDashboard = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const res = await fetch(
        `/api/eterra/uat-dashboard?siruta=${encodeURIComponent(siruta)}`,
      );
      const json = await res.json();
      if (json.error) {
        setError(json.error);
      } else {
        setData(json as UatDashboardData);
      }
    } catch {
      setError("Eroare de rețea.");
    }
    setLoading(false);
    setLoaded(true);
  }, [siruta]);

  // Auto-fetch on first render
  if (!loaded && !loading) {
    void fetchDashboard();
  }

  if (loading && !data) {
    return (
      <Card>
        <CardContent className="py-12 text-center text-muted-foreground">
          <Loader2 className="h-8 w-8 mx-auto mb-3 animate-spin opacity-40" />
          <p className="text-sm">
            Se calculează dashboard-ul pentru {uatName}…
          </p>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardContent className="py-8 text-center">
          <p className="text-sm text-destructive">{error}</p>
          <Button variant="ghost" size="sm" className="mt-2" onClick={onClose}>
            Închide
          </Button>
        </CardContent>
      </Card>
    );
  }

  if (!data) return null;

  return (
    <div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
      {/* ── Header ─────────────────────────────────── */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <BarChart3 className="h-5 w-5 text-indigo-500" />
          <h2 className="text-base font-semibold">
            Dashboard — {data.uatName}
          </h2>
          {data.county && (
            <span className="text-xs text-muted-foreground">
              ({data.county})
            </span>
          )}
          <Badge variant="outline" className="text-[10px] font-mono">
            {data.siruta}
          </Badge>
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="h-7 w-7 p-0"
          onClick={onClose}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>

      {/* ── KPI Grid ───────────────────────────────── */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2">
        <KpiCard
          icon={MapPin}
          label="Terenuri active"
          value={data.totalTerenuri}
          sub={`+ ${data.totalCladiri.toLocaleString("ro-RO")} clădiri`}
          accent="text-emerald-600 dark:text-emerald-400"
        />
        <KpiCard
          icon={Ruler}
          label="Suprafață totală"
          value={`${data.totalAreaHa.toLocaleString("ro-RO")} ha`}
          sub={`Medie: ${data.avgAreaMp.toLocaleString("ro-RO")} mp · Med: ${data.medianAreaMp.toLocaleString("ro-RO")} mp`}
        />
        <KpiCard
          icon={Building2}
          label="Cu clădire"
          value={`${data.withBuildingPct}%`}
          sub={`${data.withBuildingCount.toLocaleString("ro-RO")} parcele (${data.buildingLegalCount} legale)`}
          accent="text-amber-600 dark:text-amber-400"
        />
        <KpiCard
          icon={Users}
          label="Proprietari unici"
          value={data.uniqueOwnerCount}
          sub={
            data.topOwners[0]
              ? `Top: ${data.topOwners[0].name.slice(0, 25)}`
              : "—"
          }
          accent="text-blue-600 dark:text-blue-400"
        />
        <KpiCard
          icon={Sparkles}
          label="Date îmbogățite"
          value={`${data.enrichmentPct}%`}
          sub={`${data.totalEnriched.toLocaleString("ro-RO")} din ${data.totalTerenuri.toLocaleString("ro-RO")}`}
          accent="text-teal-600 dark:text-teal-400"
        />
        <KpiCard
          icon={FileQuestion}
          label="Fără CF"
          value={`${data.parcelsWithoutCFPct}%`}
          sub={`${data.parcelsWithoutCF.toLocaleString("ro-RO")} parcele`}
          accent={
            data.parcelsWithoutCFPct > 30
              ? "text-red-500"
              : "text-muted-foreground"
          }
        />
      </div>

      {/* ── Row 2: Donut + Area distribution ───────── */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Intravilan/Extravilan donut */}
        <Card>
          <CardContent className="py-3 px-4">
            <h3 className="text-xs font-semibold text-muted-foreground mb-3 flex items-center gap-1.5">
              <TreePine className="h-3.5 w-3.5" />
              Intravilan / Extravilan
            </h3>
            <DonutRing
              segments={[
                {
                  pct: data.intravilanPct,
                  color: "hsl(142, 76%, 36%)",
                  label: `Intravilan (${data.intravilanCount.toLocaleString("ro-RO")})`,
                },
                {
                  pct:
                    100 -
                    data.intravilanPct -
                    (data.mixtCount > 0
                      ? Math.round(
                          (data.mixtCount /
                            (data.intravilanCount +
                              data.extravilanCount +
                              data.mixtCount || 1)) *
                            100,
                        )
                      : 0),
                  color: "hsl(30, 70%, 50%)",
                  label: `Extravilan (${data.extravilanCount.toLocaleString("ro-RO")})`,
                },
                ...(data.mixtCount > 0
                  ? [
                      {
                        pct: Math.round(
                          (data.mixtCount /
                            (data.intravilanCount +
                              data.extravilanCount +
                              data.mixtCount || 1)) *
                            100,
                        ),
                        color: "hsl(200, 50%, 55%)",
                        label: `Mixt (${data.mixtCount.toLocaleString("ro-RO")})`,
                      },
                    ]
                  : []),
              ]}
            />
          </CardContent>
        </Card>

        {/* Area distribution */}
        <Card>
          <CardContent className="py-3 px-4">
            <h3 className="text-xs font-semibold text-muted-foreground mb-3 flex items-center gap-1.5">
              <Ruler className="h-3.5 w-3.5" />
              Distribuție suprafețe (mp)
            </h3>
            <HBarChart
              data={
                data.areaDistribution as unknown as Record<string, unknown>[]
              }
              labelKey="bucket"
              valueKey="count"
              pctKey="pct"
              color="bg-indigo-500"
            />
          </CardContent>
        </Card>
      </div>

      {/* ── Row 3: Land use + Top owners ──────────── */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Land use */}
        <Card>
          <CardContent className="py-3 px-4">
            <button
              onClick={() => toggle("landuse")}
              className="w-full flex items-center justify-between"
            >
              <h3 className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
                <TreePine className="h-3.5 w-3.5" />
                Categorii folosință
              </h3>
              {expanded.landuse ? (
                <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
              ) : (
                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
              )}
            </button>
            {(expanded.landuse ?? true) && (
              <div className="mt-3">
                <HBarChart
                  data={
                    data.landUseDistribution as unknown as Record<
                      string,
                      unknown
                    >[]
                  }
                  labelKey="category"
                  valueKey="count"
                  pctKey="pct"
                  color="bg-green-500"
                />
              </div>
            )}
          </CardContent>
        </Card>

        {/* Top owners */}
        <Card>
          <CardContent className="py-3 px-4">
            <button
              onClick={() => toggle("owners")}
              className="w-full flex items-center justify-between"
            >
              <h3 className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
                <Users className="h-3.5 w-3.5" />
                Top 10 proprietari
              </h3>
              {expanded.owners ? (
                <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
              ) : (
                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
              )}
            </button>
            {(expanded.owners ?? true) && (
              <div className="mt-3 space-y-1">
                {data.topOwners.length === 0 ? (
                  <p className="text-xs text-muted-foreground italic">
                    Fără date proprietari (necesită îmbogățire Magic)
                  </p>
                ) : (
                  data.topOwners.map((o, i) => (
                    <div
                      key={`${o.name}-${i}`}
                      className="flex items-center gap-2 text-[11px]"
                    >
                      <span className="w-5 text-right text-muted-foreground font-mono tabular-nums">
                        {i + 1}.
                      </span>
                      <span className="flex-1 truncate">{o.name}</span>
                      <Badge
                        variant="secondary"
                        className="text-[10px] h-4 tabular-nums"
                      >
                        {o.count} parcele
                      </Badge>
                    </div>
                  ))
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* ── Fun facts ────────────────────────────── */}
      {data.funFacts.length > 0 && (
        <Card className="border-amber-200 dark:border-amber-800 bg-amber-50/50 dark:bg-amber-950/20">
          <CardContent className="py-3 px-4">
            <h3 className="text-xs font-semibold text-amber-700 dark:text-amber-400 mb-2 flex items-center gap-1.5">
              <Lightbulb className="h-3.5 w-3.5" />
              Observații
            </h3>
            <ul className="space-y-1">
              {data.funFacts.map((fact, i) => (
                <li
                  key={i}
                  className="text-xs text-amber-800/80 dark:text-amber-300/80 flex items-start gap-1.5"
                >
                  <span className="text-amber-500 mt-0.5">•</span>
                  {fact}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}

      {/* ── Footer meta ──────────────────────────── */}
      <div className="flex items-center justify-between text-[10px] text-muted-foreground px-1">
        <span>
          Ultimul sync:{" "}
          {data.lastSyncDate
            ? new Date(data.lastSyncDate).toLocaleString("ro-RO")
            : "—"}
          {data.syncRunCount > 0 && ` · ${data.syncRunCount} sync-uri totale`}
        </span>
        <span>
          {data.totalNoGeom > 0 &&
            `${data.totalNoGeom.toLocaleString("ro-RO")} fără geometrie · `}
          Date la {new Date().toLocaleDateString("ro-RO")}
        </span>
      </div>
    </div>
  );
}