"use client";

import { useState, useMemo } from "react";
import {
  ChevronDown,
  ChevronRight,
  Info,
  Clock,
  ShieldCheck,
  Bell,
  ArrowRight,
  Scale,
  FileWarning,
  Timer,
  Link2,
  Zap,
} from "lucide-react";
import { Badge } from "@/shared/components/ui/badge";
import { Separator } from "@/shared/components/ui/separator";
import {
  DEADLINE_CATALOG,
  CATEGORY_LABELS,
  getDeadlineType,
  getDeadlinesByCategory,
} from "../services/deadline-catalog";
import { NOTIFICATION_TYPES } from "@/core/notifications/types";
import type { DeadlineCategory, DeadlineTypeDef } from "../types";
import { cn } from "@/shared/lib/utils";

// ── Constants ──

const ALL_CATEGORIES: DeadlineCategory[] = [
  "certificat",
  "avize",
  "completari",
  "urbanism",
  "autorizare",
  "litigii",
];

const CATEGORY_ICONS: Record<DeadlineCategory, string> = {
  certificat: "CU",
  avize: "AV",
  completari: "CO",
  urbanism: "UR",
  autorizare: "AC",
  litigii: "LI",
};

// ── Chain building ──

interface ChainGroup {
  sources: DeadlineTypeDef[];
  target: DeadlineTypeDef;
}

function buildChainGroups(category: DeadlineCategory): ChainGroup[] {
  const types = getDeadlinesByCategory(category);
  const targetMap = new Map<string, DeadlineTypeDef[]>();

  for (const t of types) {
    if (t.chainNextTypeId) {
      const sources = targetMap.get(t.chainNextTypeId) ?? [];
      sources.push(t);
      targetMap.set(t.chainNextTypeId, sources);
    }
  }

  const groups: ChainGroup[] = [];
  for (const [targetId, sources] of targetMap) {
    const target = getDeadlineType(targetId);
    if (target) {
      groups.push({ sources, target });
    }
  }
  return groups;
}

// ── Legal reference index ──

function buildLegalIndex(): Map<string, DeadlineTypeDef[]> {
  const index = new Map<string, DeadlineTypeDef[]>();
  for (const t of DEADLINE_CATALOG) {
    if (t.legalReference) {
      const existing = index.get(t.legalReference) ?? [];
      existing.push(t);
      index.set(t.legalReference, existing);
    }
  }
  return index;
}

// ── Component ──

export function DeadlineConfigOverview() {
  const [expandedCategories, setExpandedCategories] = useState<Set<DeadlineCategory>>(
    () => new Set(ALL_CATEGORIES),
  );
  const [expandedDescs, setExpandedDescs] = useState<Set<string>>(new Set());
  const [showLegalIndex, setShowLegalIndex] = useState(false);

  const stats = useMemo(() => {
    const total = DEADLINE_CATALOG.length;
    const autoTracked = DEADLINE_CATALOG.filter((d) => d.autoTrack).length;
    const tacit = DEADLINE_CATALOG.filter((d) => d.tacitApprovalApplicable).length;
    const chained = DEADLINE_CATALOG.filter((d) => d.chainNextTypeId).length;
    return { total, autoTracked, tacit, chained };
  }, []);

  const legalIndex = useMemo(() => buildLegalIndex(), []);

  const toggleCategory = (cat: DeadlineCategory) => {
    setExpandedCategories((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });
  };

  const toggleDesc = (id: string) => {
    setExpandedDescs((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  return (
    <div className="space-y-6">
      {/* ── Summary stats ── */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <StatCard icon={<Scale className="h-4 w-4" />} value={stats.total} label="Tipuri termene" />
        <StatCard icon={<Zap className="h-4 w-4 text-purple-500" />} value={stats.autoTracked} label="Auto-tracked" />
        <StatCard icon={<ShieldCheck className="h-4 w-4 text-blue-500" />} value={stats.tacit} label="Aprobare tacita" />
        <StatCard icon={<Link2 className="h-4 w-4 text-amber-500" />} value={stats.chained} label="Termene in lant" />
      </div>

      {/* ── Legend ── */}
      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/30 px-3 py-2">
        <span className="text-[10px] font-medium text-muted-foreground">Legenda:</span>
        <Badge variant="outline" className="bg-purple-100 text-purple-700 border-purple-300 text-[10px] dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700">
          Auto
        </Badge>
        <Badge variant="outline" className="bg-gray-100 text-gray-600 border-gray-300 text-[10px] dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600">
          Manual
        </Badge>
        <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-[10px] dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700">
          Tacit
        </Badge>
        <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300 text-[10px] dark:bg-green-900/30 dark:text-green-300 dark:border-green-700">
          Lucratoare
        </Badge>
        <Badge variant="outline" className="bg-orange-100 text-orange-700 border-orange-300 text-[10px] dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-700">
          Calendaristice
        </Badge>
        <Badge variant="outline" className="border-dashed text-muted-foreground text-[10px]">
          Fundal
        </Badge>
      </div>

      {/* ── Category sections ── */}
      {ALL_CATEGORIES.map((cat) => {
        const types = getDeadlinesByCategory(cat);
        if (types.length === 0) return null;
        const isExpanded = expandedCategories.has(cat);
        const chainGroups = buildChainGroups(cat);

        return (
          <div key={cat} className="rounded-lg border bg-card">
            {/* Category header */}
            <button
              onClick={() => toggleCategory(cat)}
              className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
            >
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-[10px] font-bold text-primary">
                {CATEGORY_ICONS[cat]}
              </span>
              <span className="flex-1 text-sm font-medium">
                {CATEGORY_LABELS[cat]}
              </span>
              <Badge variant="outline" className="text-[10px]">
                {types.length} tip{types.length !== 1 ? "uri" : ""}
              </Badge>
              {isExpanded ? (
                <ChevronDown className="h-4 w-4 text-muted-foreground" />
              ) : (
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              )}
            </button>

            {/* Category body */}
            {isExpanded && (
              <div>
                <Separator />
                <div className="divide-y">
                  {types.map((t) => (
                    <DeadlineTypeRow
                      key={t.id}
                      type={t}
                      descExpanded={expandedDescs.has(t.id)}
                      onToggleDesc={() => toggleDesc(t.id)}
                    />
                  ))}
                </div>

                {/* Chain flow diagrams */}
                {chainGroups.length > 0 && (
                  <div className="border-t bg-muted/20 px-4 py-3">
                    <p className="mb-2 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                      Fluxuri de termene in lant
                    </p>
                    <div className="space-y-3">
                      {chainGroups.map((group) => (
                        <ChainFlowDiagram
                          key={group.target.id}
                          group={group}
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        );
      })}

      {/* ── Notification overview ── */}
      <div className="rounded-lg border bg-card">
        <div className="flex items-center gap-3 px-4 py-3">
          <Bell className="h-4 w-4 text-primary" />
          <span className="text-sm font-medium">Notificari email</span>
        </div>
        <Separator />
        <div className="px-4 py-3 space-y-3">
          <p className="text-xs text-muted-foreground">
            Digest zilnic trimis luni-vineri la 8:00 prin Brevo SMTP, declansat automat de N8N cron.
          </p>
          <div className="space-y-2">
            {NOTIFICATION_TYPES.map((nt) => (
              <div key={nt.type} className="flex items-start gap-2">
                <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                <div>
                  <span className="text-xs font-medium">{nt.label}</span>
                  <span className="ml-2 text-xs text-muted-foreground">
                    {nt.description}
                  </span>
                </div>
              </div>
            ))}
          </div>
          <p className="text-[10px] text-muted-foreground italic">
            Preferintele per utilizator se configureaza din iconita clopotel din bara de sus.
          </p>
        </div>
      </div>

      {/* ── Reminder & alert configuration ── */}
      <div className="rounded-lg border bg-card">
        <div className="flex items-center gap-3 px-4 py-3">
          <Timer className="h-4 w-4 text-orange-500" />
          <span className="text-sm font-medium">Configurare remindere si alerte</span>
        </div>
        <Separator />
        <div className="px-4 py-3 space-y-4">
          <p className="text-xs text-muted-foreground">
            Praguri si intervale folosite de sistem pentru a genera alerte si notificari. Valorile se aplica automat tuturor inregistrarilor.
          </p>

          {/* Thresholds table */}
          <div className="overflow-hidden rounded-md border">
            <table className="w-full text-xs">
              <thead>
                <tr className="bg-muted/50">
                  <th className="px-3 py-2 text-left font-medium">Parametru</th>
                  <th className="px-3 py-2 text-left font-medium">Valoare</th>
                  <th className="px-3 py-2 text-left font-medium">Descriere</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                <tr>
                  <td className="px-3 py-2 font-medium">Prag &quot;Urgent&quot;</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300 text-[10px] dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-700">
                      5 zile
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Termenele cu 5 sau mai putine zile ramase sunt marcate ca urgente (galben) si incluse in digest-ul zilnic.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Prag &quot;Depasit&quot;</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-red-50 text-red-700 border-red-300 text-[10px] dark:bg-red-900/20 dark:text-red-300 dark:border-red-700">
                      0 zile
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Termenele depasite (dupa data scadenta) sunt marcate rosu si raportate zilnic pana la rezolvare.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Alerta expirare CU</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-300 text-[10px] dark:bg-amber-900/20 dark:text-amber-300 dark:border-amber-700">
                      30 zile (implicit)
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Se poate configura per inregistrare (campul &quot;Zile alerta expirare&quot;). Implicit 30 zile inainte de expirare.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Reminder lunar AC</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-indigo-50 text-indigo-700 border-indigo-300 text-[10px] dark:bg-indigo-900/20 dark:text-indigo-300 dark:border-indigo-700">
                      Lunar
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    In faza de valabilitate AC, se afiseaza reminder lunar. Se poate amana (+1 luna) sau dezactiva (dismiss) per AC.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Cerere prelungire AC</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-300 text-[10px] dark:bg-amber-900/20 dark:text-amber-300 dark:border-amber-700">
                      45 zile lucr.
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Alerta automata: cererea de prelungire trebuie depusa cu minim 45 zile lucratoare inainte de expirarea AC/executiei.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Anuntare lucrari AC</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="bg-green-50 text-green-700 border-green-300 text-[10px] dark:bg-green-900/20 dark:text-green-300 dark:border-green-700">
                      10 zile cal.
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Lucrarile trebuie anuntate la Primarie si ISC cu minim 10 zile calendaristice inainte de incepere.
                  </td>
                </tr>
                <tr>
                  <td className="px-3 py-2 font-medium">Transmitere in termen</td>
                  <td className="px-3 py-2">
                    <Badge variant="outline" className="border-dashed text-[10px] text-muted-foreground">
                      1 zi (fundal)
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-muted-foreground">
                    Verificare automata in fundal: actul administrativ trebuie transmis in 1 zi de la emitere. Se creeaza automat la inchidere.
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* Pause/resume info */}
          <div className="rounded-md border bg-muted/20 px-3 py-2.5 space-y-1.5">
            <p className="text-xs font-medium flex items-center gap-1.5">
              <Clock className="h-3.5 w-3.5 text-blue-500" />
              Suspendare / reluare termene (clarificari)
            </p>
            <p className="text-[11px] text-muted-foreground leading-relaxed">
              Cand se primeste o solicitare de clarificari (document intrat conex), termenele active ale inregistrarii mama se suspenda automat.
              La depunerea completarilor (document iesit conex), termenele se reiau, iar data scadenta se decaleaza cu numarul de zile suspendate.
              Suspendarea se poate face si manual din fisa termenului.
            </p>
          </div>
        </div>
      </div>

      {/* ── Document expiry overview ── */}
      <div className="rounded-lg border bg-card">
        <div className="flex items-center gap-3 px-4 py-3">
          <FileWarning className="h-4 w-4 text-amber-500" />
          <span className="text-sm font-medium">Expirare documente</span>
        </div>
        <Separator />
        <div className="px-4 py-3 space-y-3">
          <div className="space-y-2">
            <div className="flex items-start gap-2">
              <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
              <div className="text-xs">
                <span className="font-medium">Certificat de Urbanism (CU)</span>
                <span className="ml-1 text-muted-foreground">
                  — data expirare + fereastra de alerta (implicit 30 zile). Se configureaza per inregistrare.
                </span>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
              <div className="text-xs">
                <span className="font-medium">Autorizatie de Construire (AC)</span>
                <span className="ml-1 text-muted-foreground">
                  — valabilitate 12 sau 24 luni (configurabil per AC), executie 6/12/24/36 luni, prelungire +24 luni.
                  Reminder lunar automat (snooze/dismiss disponibil).
                </span>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500" />
              <div className="text-xs">
                <span className="font-medium">Monitorizare externa</span>
                <span className="ml-1 text-muted-foreground">
                  — verificare automata status la autoritate (Primaria Cluj etc.). Notificare la schimbare status.
                </span>
              </div>
            </div>
          </div>
          <p className="text-[10px] text-muted-foreground italic">
            Transmiterea in termen (1 zi) se verifica automat in fundal cand un entry e inchis prin act administrativ.
          </p>
        </div>
      </div>

      {/* ── Legal reference index ── */}
      <div className="rounded-lg border bg-card">
        <button
          onClick={() => setShowLegalIndex(!showLegalIndex)}
          className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
        >
          <Scale className="h-4 w-4 text-muted-foreground" />
          <span className="flex-1 text-sm font-medium">Index referinte legale</span>
          <Badge variant="outline" className="text-[10px]">
            {legalIndex.size} ref.
          </Badge>
          {showLegalIndex ? (
            <ChevronDown className="h-4 w-4 text-muted-foreground" />
          ) : (
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          )}
        </button>
        {showLegalIndex && (
          <>
            <Separator />
            <div className="px-4 py-3 space-y-2">
              {Array.from(legalIndex.entries())
                .sort(([a], [b]) => a.localeCompare(b))
                .map(([ref, types]) => (
                  <div key={ref} className="text-xs">
                    <span className="font-medium text-primary">{ref}</span>
                    <span className="ml-2 text-muted-foreground">
                      {types.map((t) => t.label).join(", ")}
                    </span>
                  </div>
                ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ── Stat card ──

function StatCard({
  icon,
  value,
  label,
}: {
  icon: React.ReactNode;
  value: number;
  label: string;
}) {
  return (
    <div className="flex items-center gap-3 rounded-lg border bg-card px-3 py-2.5">
      {icon}
      <div>
        <p className="text-lg font-semibold leading-none">{value}</p>
        <p className="text-[10px] text-muted-foreground">{label}</p>
      </div>
    </div>
  );
}

// ── Deadline type row ──

function DeadlineTypeRow({
  type,
  descExpanded,
  onToggleDesc,
}: {
  type: DeadlineTypeDef;
  descExpanded: boolean;
  onToggleDesc: () => void;
}) {
  const chainTarget = type.chainNextTypeId
    ? getDeadlineType(type.chainNextTypeId)
    : undefined;

  return (
    <div
      className={cn(
        "px-4 py-2.5",
        type.backgroundOnly && "opacity-60",
      )}
    >
      <div className="flex items-center gap-2 flex-wrap">
        {/* Label */}
        <span className="text-xs font-medium">{type.label}</span>

        {/* Duration badge */}
        <Badge
          variant="outline"
          className={cn(
            "text-[10px]",
            type.dayType === "working"
              ? "bg-green-50 text-green-700 border-green-300 dark:bg-green-900/20 dark:text-green-300 dark:border-green-700"
              : "bg-orange-50 text-orange-700 border-orange-300 dark:bg-orange-900/20 dark:text-orange-300 dark:border-orange-700",
          )}
        >
          <Timer className="mr-0.5 inline h-2.5 w-2.5" />
          {type.days}z {type.dayType === "working" ? "lucr." : "cal."}
        </Badge>

        {/* Auto/Manual badge */}
        {type.autoTrack ? (
          <Badge
            variant="outline"
            className="bg-purple-50 text-purple-700 border-purple-300 text-[10px] dark:bg-purple-900/20 dark:text-purple-300 dark:border-purple-700"
          >
            Auto
          </Badge>
        ) : (
          <Badge variant="outline" className="text-[10px] text-muted-foreground">
            Manual
          </Badge>
        )}

        {/* Tacit badge */}
        {type.tacitApprovalApplicable && (
          <Badge
            variant="outline"
            className="bg-blue-50 text-blue-700 border-blue-300 text-[10px] dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-700"
          >
            <ShieldCheck className="mr-0.5 inline h-2.5 w-2.5" />
            Tacit
          </Badge>
        )}

        {/* Background badge */}
        {type.backgroundOnly && (
          <Badge variant="outline" className="border-dashed text-[10px] text-muted-foreground">
            Fundal
          </Badge>
        )}

        {/* Direction filter */}
        {type.directionFilter && type.directionFilter.length === 1 && (
          <Badge variant="outline" className="text-[10px] text-muted-foreground">
            {type.directionFilter[0] === "iesit" ? "Iesit" : "Intrat"}
          </Badge>
        )}

        {/* Info toggle */}
        <button
          onClick={onToggleDesc}
          className="ml-auto shrink-0 text-muted-foreground hover:text-foreground"
          title="Detalii"
        >
          <Info className="h-3.5 w-3.5" />
        </button>
      </div>

      {/* Chain indicator */}
      {chainTarget && (
        <div className="mt-1 flex items-center gap-1.5 text-[10px] text-amber-600 dark:text-amber-400">
          <ArrowRight className="h-3 w-3" />
          <span>
            La rezolvare lanseaza: <span className="font-medium">{chainTarget.label}</span>
            {" "}({chainTarget.days}z {chainTarget.dayType === "working" ? "lucr." : "cal."})
          </span>
        </div>
      )}

      {/* Description + legal ref (expanded) */}
      {descExpanded && (
        <div className="mt-2 space-y-1 rounded-md bg-muted/30 px-3 py-2">
          <p className="text-[11px] text-muted-foreground leading-relaxed">
            {type.description}
          </p>
          {type.legalReference && (
            <p className="text-[10px] text-primary/70">
              <Scale className="mr-0.5 inline h-2.5 w-2.5" />
              {type.legalReference}
            </p>
          )}
          {type.startDateHint && (
            <p className="text-[10px] text-muted-foreground italic">
              <Clock className="mr-0.5 inline h-2.5 w-2.5" />
              {type.startDateHint}
            </p>
          )}
        </div>
      )}
    </div>
  );
}

// ── Chain flow diagram ──

function ChainFlowDiagram({ group }: { group: ChainGroup }) {
  const isFanIn = group.sources.length > 1;

  if (isFanIn) {
    return (
      <div className="flex items-center gap-0">
        {/* Multiple sources stacked */}
        <div className="flex flex-col gap-1">
          {group.sources.map((src) => (
            <ChainNode key={src.id} type={src} small />
          ))}
        </div>
        {/* Converging arrows */}
        <div className="flex items-center px-1">
          <div className="flex flex-col items-end">
            {group.sources.map((_, i) => (
              <div key={i} className="h-px w-4 bg-amber-400/60" />
            ))}
          </div>
          <div className="h-px w-3 bg-amber-400" />
          <div className="border-y-[4px] border-l-[6px] border-y-transparent border-l-amber-400" />
        </div>
        {/* Target */}
        <ChainNode type={group.target} isTarget />
      </div>
    );
  }

  // Single chain: source → target
  const src = group.sources[0];
  if (!src) return null;

  return (
    <div className="flex items-center gap-0">
      <ChainNode type={src} />
      <div className="flex items-center px-1">
        <div className="h-px w-6 bg-amber-400" />
        <div className="border-y-[4px] border-l-[6px] border-y-transparent border-l-amber-400" />
      </div>
      <ChainNode type={group.target} isTarget />
    </div>
  );
}

function ChainNode({
  type,
  isTarget,
  small,
}: {
  type: DeadlineTypeDef;
  isTarget?: boolean;
  small?: boolean;
}) {
  return (
    <div
      className={cn(
        "rounded-md border px-2 py-1",
        small ? "max-w-[160px]" : "max-w-[200px]",
        isTarget
          ? "border-amber-400 bg-amber-50/50 dark:bg-amber-950/20 dark:border-amber-700"
          : "border-border bg-background",
      )}
    >
      <p className={cn("font-medium leading-tight", small ? "text-[9px]" : "text-[10px]")}>
        {type.label}
      </p>
      <p className="text-[9px] text-muted-foreground">
        {type.days}z {type.dayType === "working" ? "lucr." : "cal."}
        {type.tacitApprovalApplicable && (
          <span className="ml-1 text-blue-600 dark:text-blue-400">tacit</span>
        )}
      </p>
    </div>
  );
}
