"use client";

import {
  ArrowDownToLine,
  ArrowUpFromLine,
  Calendar,
  CheckCircle2,
  Clock,
  Copy,
  ExternalLink,
  Eye,
  FileText,
  GitBranch,
  HardDrive,
  Link2,
  Paperclip,
  Pencil,
  Trash2,
  User,
  X,
  Image as ImageIcon,
  Reply,
  Radio,
  RefreshCw,
  ChevronDown,
  ChevronUp,
} from "lucide-react";
import { Button } from "@/shared/components/ui/button";
import { Badge } from "@/shared/components/ui/badge";
import { Separator } from "@/shared/components/ui/separator";
import { ScrollArea } from "@/shared/components/ui/scroll-area";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/shared/components/ui/sheet";
import type { RegistryEntry } from "../types";
import { DEFAULT_DOC_TYPE_LABELS, EXTERNAL_STATUS_LABELS } from "../types";
import type { ExternalDocStatus } from "../types";
import { getAuthority } from "../services/authority-catalog";
import { getOverdueDays } from "../services/registry-service";
import { pathFileName, shareLabelFor } from "@/config/nas-paths";
import { cn } from "@/shared/lib/utils";
import { useState, useCallback, useMemo } from "react";
import {
  AttachmentPreview,
  getPreviewableAttachments,
} from "./attachment-preview";
import { findAuthorityForContact } from "../services/authority-catalog";
import { computeTransmissionStatus } from "../services/deadline-service";
import { StatusMonitorConfig } from "./status-monitor-config";
import { FlowDiagram } from "./flow-diagram";
import { DeadlineTimeline } from "./deadline-timeline";

interface RegistryEntryDetailProps {
  entry: RegistryEntry | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onEdit: (entry: RegistryEntry) => void;
  onClose: (entry: RegistryEntry) => void;
  onDelete: (id: string) => void;
  /** Create a new entry linked as reply (conex) to this entry */
  onReply?: (entry: RegistryEntry) => void;
  allEntries: RegistryEntry[];
}

const DIRECTION_CONFIG = {
  intrat: {
    label: "Intrat",
    icon: ArrowDownToLine,
    class: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
  },
  iesit: {
    label: "Ieșit",
    icon: ArrowUpFromLine,
    class:
      "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
  },
} as const;

const STATUS_CONFIG = {
  deschis: {
    label: "Deschis",
    class:
      "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
  },
  inchis: {
    label: "Închis",
    class: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
  },
  reserved: {
    label: "Rezervat",
    class: "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
  },
} as const;

const RESOLUTION_LABELS: Record<string, string> = {
  finalizat: "Finalizat",
  "aprobat-tacit": "Aprobat tacit",
  respins: "Respins",
  retras: "Retras",
  altele: "Altele",
};

const DEADLINE_RES_LABELS: Record<string, string> = {
  pending: "În așteptare",
  completed: "Finalizat",
  "aprobat-tacit": "Aprobat tacit",
  respins: "Respins",
  anulat: "Anulat",
};

function getDocTypeLabel(type: string): string {
  const label = DEFAULT_DOC_TYPE_LABELS[type];
  if (label) return label;
  return type.replace(/-/g, " ").replace(/^\w/, (c) => c.toUpperCase());
}

function formatDate(iso: string): string {
  try {
    return new Date(iso).toLocaleDateString("ro-RO", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  } catch {
    return iso;
  }
}

function formatDateTime(iso: string): string {
  try {
    return new Date(iso).toLocaleString("ro-RO", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

export function RegistryEntryDetail({
  entry,
  open,
  onOpenChange,
  onEdit,
  onClose,
  onDelete,
  onReply,
  allEntries,
}: RegistryEntryDetailProps) {
  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
  const [copiedPath, setCopiedPath] = useState<string | null>(null);
  const [monitorConfigOpen, setMonitorConfigOpen] = useState(false);

  // Auto-detect if recipient matches a known authority
  const matchedAuthority = useMemo(() => {
    if (!entry) return undefined;
    if (entry.externalStatusTracking?.active) return undefined;
    if (!entry.recipientRegNumber) return undefined;
    return findAuthorityForContact(entry.recipient);
  }, [entry]);

  const previewableAtts = useMemo(
    () => (entry ? getPreviewableAttachments(entry.attachments) : []),
    [entry],
  );

  const copyPath = useCallback(async (path: string) => {
    await navigator.clipboard.writeText(path);
    setCopiedPath(path);
    setTimeout(() => setCopiedPath(null), 2000);
  }, []);

  // Build full chain for mini flow diagram (must be before early return to keep hook order stable)
  const threadChain = useMemo(() => {
    if (!entry) return [];
    const threadParentEntry = entry.threadParentId
      ? allEntries.find((e) => e.id === entry.threadParentId)
      : null;
    const threadChildEntries = allEntries.filter(
      (e) => e.threadParentId === entry.id,
    );
    if (!threadParentEntry && threadChildEntries.length === 0) return [];
    const byId = new Map(allEntries.map((e) => [e.id, e]));
    // Walk up to root
    let root = entry;
    while (root.threadParentId) {
      const parent = byId.get(root.threadParentId);
      if (!parent) break;
      root = parent;
    }
    // BFS down from root
    const chain: RegistryEntry[] = [];
    const queue = [root.id];
    const visited = new Set<string>();
    while (queue.length > 0) {
      const id = queue.shift()!;
      if (visited.has(id)) continue;
      visited.add(id);
      const e = byId.get(id);
      if (!e) continue;
      chain.push(e);
      for (const child of allEntries.filter((c) => c.threadParentId === id)) {
        queue.push(child.id);
      }
    }
    chain.sort((a, b) => a.date.localeCompare(b.date));
    return chain;
  }, [entry, allEntries]);

  if (!entry) return null;

  const dir = DIRECTION_CONFIG[entry.direction] ?? DIRECTION_CONFIG.intrat;
  const DirIcon = dir.icon;
  const status = STATUS_CONFIG[entry.status] ?? STATUS_CONFIG.deschis;

  const overdueDays =
    entry.status === "deschis" ? getOverdueDays(entry.deadline) : null;
  const isOverdue = overdueDays !== null && overdueDays > 0;

  const threadParent = entry.threadParentId
    ? allEntries.find((e) => e.id === entry.threadParentId)
    : null;
  const threadChildren = allEntries.filter(
    (e) => e.threadParentId === entry.id,
  );

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        className="w-full sm:max-w-lg md:max-w-xl p-0 flex flex-col"
      >
        <SheetHeader className="px-6 pt-6 pb-0">
          <div className="flex items-start justify-between gap-3 pr-8">
            <div className="space-y-1">
              <SheetTitle className="text-lg font-bold font-mono">
                {entry.number}
              </SheetTitle>
              <SheetDescription className="text-sm">
                {entry.subject}
              </SheetDescription>
            </div>
          </div>

          {/* Action bar */}
          <div className="flex gap-2 mt-3">
            <Button
              size="sm"
              variant="outline"
              onClick={() => {
                onOpenChange(false);
                onEdit(entry);
              }}
            >
              <Pencil className="mr-1.5 h-3.5 w-3.5" /> Editează
            </Button>
            {onReply && (
              <Button
                size="sm"
                variant="outline"
                className="text-blue-600 border-blue-300 hover:bg-blue-50 dark:border-blue-700 dark:hover:bg-blue-950/30"
                onClick={() => {
                  onOpenChange(false);
                  onReply(entry);
                }}
              >
                <Reply className="mr-1.5 h-3.5 w-3.5" /> Conex
              </Button>
            )}
            {entry.status === "deschis" && (
              <Button
                size="sm"
                variant="outline"
                className="text-green-600 border-green-300 hover:bg-green-50 dark:border-green-700 dark:hover:bg-green-950/30"
                onClick={() => {
                  onOpenChange(false);
                  onClose(entry);
                }}
              >
                <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" /> Inchide
              </Button>
            )}
            <Button
              size="sm"
              variant="ghost"
              className="text-destructive ml-auto"
              onClick={() => {
                onOpenChange(false);
                onDelete(entry.id);
              }}
            >
              <Trash2 className="mr-1.5 h-3.5 w-3.5" /> Șterge
            </Button>
          </div>
        </SheetHeader>

        <Separator className="mt-4" />

        <ScrollArea className="flex-1 min-h-0 overflow-hidden [&>[data-slot=scroll-area-viewport]]:!overflow-x-hidden">
          <div className="space-y-5 py-4 px-6">
            {/* ── Status row ── */}
            <div className="flex flex-wrap gap-2">
              <Badge className={cn("text-xs px-2.5 py-0.5", dir.class)}>
                <DirIcon className="mr-1 h-3 w-3" />
                {dir.label}
              </Badge>
              <Badge className={cn("text-xs px-2.5 py-0.5", status.class)}>
                {status.label}
              </Badge>
              <Badge variant="outline" className="text-xs">
                {getDocTypeLabel(entry.documentType)}
              </Badge>
              {entry.company && (
                <Badge variant="outline" className="text-xs uppercase">
                  {entry.company}
                </Badge>
              )}
            </div>

            {/* ── Closure info ── */}
            {entry.closureInfo && (
              <DetailSection title="Închidere">
                <div className="rounded-md border border-muted p-3 space-y-1 text-sm">
                  <div className="flex items-center gap-2">
                    <span className="text-muted-foreground">Rezoluție:</span>
                    <Badge variant="outline" className="text-xs">
                      {RESOLUTION_LABELS[entry.closureInfo.resolution] ??
                        entry.closureInfo.resolution}
                    </Badge>
                  </div>
                  {entry.closureInfo.reason && (
                    <p>
                      <span className="text-muted-foreground">Motiv:</span>{" "}
                      {entry.closureInfo.reason}
                    </p>
                  )}
                  {entry.closureInfo.closedBy && (
                    <p className="text-xs text-muted-foreground">
                      Închis de {entry.closureInfo.closedBy} la{" "}
                      {formatDateTime(entry.closureInfo.closedAt)}
                    </p>
                  )}
                </div>
              </DetailSection>
            )}

            {/* ── Date ── */}
            <DetailSection title="Date">
              <div className="grid grid-cols-2 gap-3">
                <DetailField
                  label="Data document"
                  value={formatDate(entry.date)}
                />
                {entry.registrationDate &&
                  entry.registrationDate !== entry.date && (
                    <DetailField
                      label="Data înregistrare"
                      value={formatDate(entry.registrationDate)}
                    />
                  )}
                {entry.deadline && (
                  <DetailField
                    label="Termen limită"
                    value={formatDate(entry.deadline)}
                    className={cn(isOverdue && "text-destructive font-medium")}
                    extra={
                      overdueDays !== null && overdueDays > 0
                        ? `(${overdueDays} zile depășit)`
                        : overdueDays !== null && overdueDays < 0
                          ? `(mai sunt ${Math.abs(overdueDays)} zile)`
                          : undefined
                    }
                  />
                )}
                {entry.expiryDate && (
                  <DetailField
                    label="Valabilitate"
                    value={formatDate(entry.expiryDate)}
                  />
                )}
                <DetailField
                  label="Creat"
                  value={formatDateTime(entry.createdAt)}
                />
                <DetailField
                  label="Modificat"
                  value={formatDateTime(entry.updatedAt)}
                />
              </div>
            </DetailSection>

            {/* ── Parties ── */}
            <DetailSection title="Părți">
              <div className="grid grid-cols-2 gap-3">
                {entry.sender && (
                  <DetailField label="Expeditor" value={entry.sender} />
                )}
                {entry.recipient && (
                  <DetailField label="Destinatar" value={entry.recipient} />
                )}
                {entry.assignee && (
                  <DetailField
                    label="Responsabil"
                    value={entry.assignee}
                    icon={<User className="h-3 w-3 text-muted-foreground" />}
                  />
                )}
              </div>
              {(entry.recipientRegNumber || entry.recipientRegDate) && (
                <div className="mt-2 rounded border border-dashed p-2 text-xs text-muted-foreground">
                  {entry.recipientRegNumber && (
                    <span>Nr. destinatar: {entry.recipientRegNumber}</span>
                  )}
                  {entry.recipientRegDate && (
                    <span className="ml-3">
                      Data: {formatDate(entry.recipientRegDate)}
                    </span>
                  )}
                </div>
              )}
            </DetailSection>

            {/* ── Thread links (flow diagram) ── */}
            {(threadChain.length >= 2 ||
              (entry.linkedEntryIds ?? []).length > 0) && (
              <DetailSection title="Dosar">
                {threadChain.length >= 2 && (
                  <FlowDiagram
                    chain={threadChain}
                    allEntries={allEntries}
                    highlightEntryId={entry.id}
                    compact
                    maxNodes={5}
                  />
                )}
                {/* Transmission status for thread children */}
                {threadChildren.length > 0 && (
                  <div className="mt-2 space-y-1">
                    {threadChildren.map((child) => {
                      const txStatus = computeTransmissionStatus(entry, child);
                      if (!txStatus) return null;
                      return (
                        <div
                          key={child.id}
                          className="flex items-center gap-2 text-[10px]"
                        >
                          <span className="font-mono">{child.number}</span>
                          {txStatus === "on-time" ? (
                            <span className="text-green-600 dark:text-green-400">
                              Transmis in termen
                            </span>
                          ) : (
                            <span className="text-amber-600 dark:text-amber-400">
                              Transmis cu intarziere
                            </span>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
                {(entry.linkedEntryIds ?? []).length > 0 && (
                  <div className="mt-2">
                    <p className="text-xs text-muted-foreground flex items-center gap-1">
                      <Link2 className="h-3 w-3" />
                      {entry.linkedEntryIds.length} inregistrar
                      {entry.linkedEntryIds.length === 1 ? "e" : "i"} legat
                      {entry.linkedEntryIds.length === 1 ? "a" : "e"}
                    </p>
                  </div>
                )}
              </DetailSection>
            )}

            {/* ── Attachments ── */}
            {entry.attachments.length > 0 && (
              <DetailSection title={`Atașamente (${entry.attachments.length})`}>
                <div className="space-y-2">
                  {entry.attachments.map((att) =>
                    att.networkPath ? (
                      <button
                        type="button"
                        key={att.id}
                        className="w-full text-left rounded-md border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20 px-3 py-2 group cursor-pointer hover:bg-blue-100/50 dark:hover:bg-blue-900/30 transition-colors"
                        onClick={() => copyPath(att.networkPath!)}
                        title={att.networkPath}
                      >
                        <div className="flex items-center gap-2">
                          <HardDrive className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0" />
                          <span className="text-sm text-blue-700 dark:text-blue-300 truncate block">
                            {pathFileName(att.networkPath)}
                          </span>
                          <span className="ml-auto flex items-center gap-1.5 shrink-0">
                            <Badge
                              variant="outline"
                              className="text-[10px] border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400"
                            >
                              {shareLabelFor(att.networkPath) ?? "NAS"}
                            </Badge>
                            {copiedPath === att.networkPath ? (
                              <Badge className="text-[10px] bg-green-600 text-white animate-in fade-in">
                                Copiat!
                              </Badge>
                            ) : (
                              <Badge
                                variant="outline"
                                className="text-[10px] border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 opacity-60 group-hover:opacity-100"
                              >
                                <Copy className="mr-1 h-3 w-3" />
                                Copiază
                              </Badge>
                            )}
                          </span>
                        </div>
                      </button>
                    ) : (
                      <div
                        key={att.id}
                        className="flex items-center gap-2 rounded-md border px-3 py-2 group"
                      >
                        {att.type.startsWith("image/") ? (
                          <ImageIcon className="h-4 w-4 text-muted-foreground shrink-0" />
                        ) : (
                          <FileText className="h-4 w-4 text-muted-foreground shrink-0" />
                        )}
                        <div className="flex-1 min-w-0">
                          <p className="text-sm truncate">{att.name}</p>
                          <p className="text-[10px] text-muted-foreground">
                            {(att.size / 1024).toFixed(0)} KB •{" "}
                            {att.type.split("/")[1]?.toUpperCase() ?? att.type}
                          </p>
                        </div>
                        <div className="flex items-center gap-1 shrink-0">
                          {/* Preview button (images + PDFs) */}
                          {att.data &&
                            att.data !== "" &&
                            att.data !== "__network__" &&
                            (att.type.startsWith("image/") ||
                              att.type === "application/pdf") && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6"
                                onClick={() => {
                                  const idx = previewableAtts.findIndex(
                                    (a) => a.id === att.id,
                                  );
                                  if (idx >= 0) setPreviewIndex(idx);
                                }}
                                title="Previzualizare"
                              >
                                <Eye className="h-3 w-3" />
                              </Button>
                            )}
                          {/* Download for files with data */}
                          {att.data &&
                            att.data !== "" &&
                            att.data !== "__network__" && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6"
                                onClick={() => {
                                  const a = document.createElement("a");
                                  a.href = att.data;
                                  a.download = att.name;
                                  a.click();
                                }}
                                title="Descarcă"
                              >
                                <ExternalLink className="h-3 w-3" />
                              </Button>
                            )}
                          <Badge variant="outline" className="text-[10px]">
                            <Paperclip className="mr-0.5 h-2.5 w-2.5" />
                            Fișier
                          </Badge>
                        </div>
                      </div>
                    ),
                  )}
                </div>
              </DetailSection>
            )}

            {/* ── Legal deadlines (timeline view) ── */}
            {(entry.trackedDeadlines ?? []).length > 0 && (
              <DetailSection title="Termene legale">
                <DeadlineTimeline deadlines={entry.trackedDeadlines!} />
              </DetailSection>
            )}

            {/* ── External status monitoring ── */}
            {entry.externalStatusTracking?.active && (
              <ExternalStatusSection
                entry={entry}
              />
            )}

            {/* ── Auto-detect: suggest monitoring activation ── */}
            {matchedAuthority && !entry.externalStatusTracking?.active && (
              <div className="rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/50 dark:bg-blue-950/20 p-3">
                <div className="flex items-start gap-2">
                  <Radio className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
                  <div className="flex-1">
                    <p className="text-xs font-medium">
                      {matchedAuthority.name} suporta monitorizare automata
                    </p>
                    <p className="text-[10px] text-muted-foreground mt-0.5">
                      Se poate verifica automat statusul cererii nr.{" "}
                      {entry.recipientRegNumber} de 4 ori pe zi.
                    </p>
                    <Button
                      variant="outline"
                      size="sm"
                      className="mt-2 h-6 text-xs"
                      onClick={() => setMonitorConfigOpen(true)}
                    >
                      Configureaza monitorizarea
                    </Button>
                  </div>
                </div>

                <StatusMonitorConfig
                  open={monitorConfigOpen}
                  onOpenChange={setMonitorConfigOpen}
                  entry={entry}
                  authority={matchedAuthority}
                  onActivate={async (tracking) => {
                    // Save tracking to entry via API
                    try {
                      await fetch("/api/registratura", {
                        method: "PUT",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                          id: entry.id,
                          updates: { externalStatusTracking: tracking },
                        }),
                      });
                      window.location.reload();
                    } catch {
                      // Best effort
                    }
                  }}
                />
              </div>
            )}

            {/* ── External tracking (legacy fields) ── */}
            {!entry.externalStatusTracking?.active &&
              (entry.externalStatusUrl || entry.externalTrackingId) && (
              <DetailSection title="Urmărire externă">
                <div className="grid grid-cols-2 gap-3">
                  {entry.externalTrackingId && (
                    <DetailField
                      label="ID extern"
                      value={entry.externalTrackingId}
                    />
                  )}
                  {entry.externalStatusUrl && (
                    <div>
                      <p className="text-[10px] text-muted-foreground mb-0.5">
                        URL verificare
                      </p>
                      <a
                        href={entry.externalStatusUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline break-all"
                      >
                        {entry.externalStatusUrl}
                      </a>
                    </div>
                  )}
                </div>
              </DetailSection>
            )}

            {/* ── Tags ── */}
            {entry.tags.length > 0 && (
              <DetailSection title="Etichete">
                <div className="flex flex-wrap gap-1">
                  {entry.tags.map((tag) => (
                    <Badge key={tag} variant="outline" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </DetailSection>
            )}

            {/* ── Notes ── */}
            {entry.notes && (
              <DetailSection title="Note">
                <p className="text-sm whitespace-pre-wrap text-muted-foreground">
                  {entry.notes}
                </p>
              </DetailSection>
            )}
          </div>
        </ScrollArea>
        {/* QuickLook-style attachment preview */}
        {previewIndex !== null && (
          <AttachmentPreview
            key={previewIndex}
            attachments={previewableAtts}
            initialIndex={previewIndex}
            open
            onClose={() => setPreviewIndex(null)}
          />
        )}
      </SheetContent>
    </Sheet>
  );
}

// ── Sub-components ──

// ── External Status Monitoring Section ──

const STATUS_COLORS: Record<ExternalDocStatus, string> = {
  "in-operare": "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
  trimis: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
  solutionat: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
  respins: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
  necunoscut: "bg-muted text-muted-foreground",
};

function ExternalStatusSection({ entry }: { entry: RegistryEntry }) {
  const tracking = entry.externalStatusTracking;
  if (!tracking) return null;

  const [checking, setChecking] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const authority = getAuthority(tracking.authorityId);

  const handleManualCheck = useCallback(async () => {
    setChecking(true);
    try {
      await fetch("/api/registratura/status-check/single", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ entryId: entry.id }),
      });
      // Reload page to show updated status
      window.location.reload();
    } catch {
      // Ignore — user will see if it worked on reload
    } finally {
      setChecking(false);
    }
  }, [entry.id]);

  const relativeTime = (iso: string) => {
    const diff = Date.now() - new Date(iso).getTime();
    const mins = Math.floor(diff / 60000);
    if (mins < 1) return "chiar acum";
    if (mins < 60) return `acum ${mins} min`;
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return `acum ${hrs}h`;
    const days = Math.floor(hrs / 24);
    return `acum ${days}z`;
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          Monitorizare status extern
        </h3>
        <Button
          variant="ghost"
          size="sm"
          className="h-6 px-2 text-xs"
          onClick={handleManualCheck}
          disabled={checking}
        >
          <RefreshCw className={cn("h-3 w-3 mr-1", checking && "animate-spin")} />
          {checking ? "Se verifică..." : "Verifică acum"}
        </Button>
      </div>

      <div className="space-y-2">
        {/* Authority + status badge */}
        <div className="flex items-center gap-2 flex-wrap">
          <span className="text-xs text-muted-foreground">
            {authority?.name ?? tracking.authorityId}
          </span>
          <Badge className={cn("text-[10px] px-1.5 py-0", STATUS_COLORS[tracking.semanticStatus])}>
            <Radio className="mr-0.5 inline h-2.5 w-2.5" />
            {EXTERNAL_STATUS_LABELS[tracking.semanticStatus]}
          </Badge>
        </div>

        {/* Last check time */}
        {tracking.lastCheckAt && (
          <p className="text-[10px] text-muted-foreground">
            Ultima verificare: {relativeTime(tracking.lastCheckAt)}
          </p>
        )}

        {/* Error state */}
        {tracking.lastError && (
          <p className="text-[10px] text-red-500">{tracking.lastError}</p>
        )}

        {/* Latest status row */}
        {tracking.lastStatusRow && (
          <div className="rounded border bg-muted/30 p-2 text-xs space-y-1">
            <div className="flex gap-3">
              <span>
                <span className="text-muted-foreground">Sursa:</span>{" "}
                {tracking.lastStatusRow.sursa}
              </span>
              <span>
                <span className="text-muted-foreground">→</span>{" "}
                {tracking.lastStatusRow.destinatie}
              </span>
            </div>
            {tracking.lastStatusRow.modRezolvare && (
              <div>
                <span className="text-muted-foreground">Rezolvare:</span>{" "}
                <span className="font-medium">{tracking.lastStatusRow.modRezolvare}</span>
              </div>
            )}
            {tracking.lastStatusRow.comentarii && (
              <div className="text-muted-foreground">
                {tracking.lastStatusRow.comentarii}
              </div>
            )}
            <div className="text-muted-foreground">
              {tracking.lastStatusRow.dataVenire} {tracking.lastStatusRow.oraVenire}
            </div>
          </div>
        )}

        {/* History toggle */}
        {tracking.history.length > 0 && (
          <div>
            <button
              className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
              onClick={() => setShowHistory(!showHistory)}
            >
              {showHistory ? (
                <ChevronUp className="h-3 w-3" />
              ) : (
                <ChevronDown className="h-3 w-3" />
              )}
              Istoric ({tracking.history.length} schimbări)
            </button>

            {showHistory && (
              <div className="mt-1 space-y-1.5 max-h-48 overflow-y-auto">
                {[...tracking.history].reverse().map((change, i) => (
                  <div
                    key={`${change.timestamp}-${i}`}
                    className="rounded border bg-muted/20 p-1.5 text-[10px]"
                  >
                    <div className="flex items-center gap-2">
                      <Badge
                        className={cn(
                          "text-[8px] px-1 py-0",
                          STATUS_COLORS[change.semanticStatus],
                        )}
                      >
                        {EXTERNAL_STATUS_LABELS[change.semanticStatus]}
                      </Badge>
                      <span className="text-muted-foreground">
                        {new Date(change.timestamp).toLocaleString("ro-RO")}
                      </span>
                    </div>
                    <div className="mt-0.5 text-muted-foreground">
                      {change.row.sursa} → {change.row.destinatie}
                      {change.row.modRezolvare ? ` (${change.row.modRezolvare})` : ""}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function DetailSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
        {title}
      </h3>
      {children}
    </div>
  );
}

function DetailField({
  label,
  value,
  className,
  extra,
  icon,
}: {
  label: string;
  value: string;
  className?: string;
  extra?: string;
  icon?: React.ReactNode;
}) {
  return (
    <div>
      <p className="text-[10px] text-muted-foreground mb-0.5">{label}</p>
      <p className={cn("text-sm", className)}>
        {icon && <span className="mr-1 inline-flex align-middle">{icon}</span>}
        {value}
        {extra && (
          <span className="ml-1 text-[10px] text-muted-foreground">
            {extra}
          </span>
        )}
      </p>
    </div>
  );
}