"use client";

import React, { useState, useCallback, useMemo, useEffect, useRef } from "react";
import dynamic from "next/dynamic";
import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { Badge } from "@/shared/components/ui/badge";
import { Card, CardContent } from "@/shared/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/shared/components/ui/tooltip";
import {
  Loader2,
  ChevronDown,
  ChevronUp,
  Download,
  Search,
  FileText,
  Clock,
  AlertTriangle,
  Settings2,
  Shield,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Archive,
  Map as MapIcon,
  Moon,
  Satellite,
  RefreshCw,
} from "lucide-react";
import { cn } from "@/shared/lib/utils";
import { SelectionToolbar, type SelectionMode } from "@/modules/geoportal/components/selection-toolbar";
// Simple inline feature panel — no enrichment, no CF extract
import type { MapViewerHandle } from "@/modules/geoportal/components/map-viewer";
import type {
  BasemapId,
  ClickedFeature,
  LayerVisibility,
  SelectedFeature,
} from "@/modules/geoportal/types";

/* MapLibre uses WebGL — must disable SSR */
const MapViewer = dynamic(
  () => import("@/modules/geoportal/components/map-viewer").then((m) => ({ default: m.MapViewer })),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center h-full bg-muted/30">
        <p className="text-sm text-muted-foreground">Se incarca harta...</p>
      </div>
    ),
  },
);

/* ================================================================== */
/*  RGI Types & Constants                                              */
/* ================================================================== */

type App = {
  actorName: string;
  adminUnit: number;
  appDate: number;
  appNo: number;
  applicationObject: string;
  applicationPk: number;
  colorNumber: number;
  communicationType: string;
  deponent: string;
  dueDate: number;
  hasSolution: number;
  identifiers: string;
  initialAppNo: string;
  orgUnit: string;
  requester: string;
  resolutionName: string;
  stateCode: string;
  statusName: string;
  totalFee: number;
  uat: string;
  workspace: string;
  workspaceId: number;
  [key: string]: unknown;
};

type IssuedDoc = {
  applicationId: number;
  docType: string;
  documentPk: number;
  documentTypeCode: string;
  documentTypeId: number;
  fileExtension: string;
  digitallySigned: number;
  startDate: number;
  lastUpdatedDtm: number;
  initialAppNo: string;
  workspaceId: number;
  identifierDetails: string | null;
  [key: string]: unknown;
};

type SortDir = "asc" | "desc";
type SortState = { key: string; dir: SortDir } | null;

const COUNTIES = [
  { id: 10, name: "Alba" },
  { id: 29, name: "Arad" },
  { id: 38, name: "Arges" },
  { id: 47, name: "Bacau" },
  { id: 56, name: "Bihor" },
  { id: 65, name: "Bistrita-Nasaud" },
  { id: 74, name: "Botosani" },
  { id: 83, name: "Brasov" },
  { id: 92, name: "Braila" },
  { id: 108, name: "Buzau" },
  { id: 117, name: "Caras-Severin" },
  { id: 127, name: "Cluj" },
  { id: 136, name: "Constanta" },
  { id: 145, name: "Covasna" },
  { id: 154, name: "Dambovita" },
  { id: 163, name: "Dolj" },
  { id: 172, name: "Galati" },
  { id: 181, name: "Giurgiu" },
  { id: 190, name: "Gorj" },
  { id: 199, name: "Harghita" },
  { id: 208, name: "Hunedoara" },
  { id: 217, name: "Ialomita" },
  { id: 226, name: "Iasi" },
  { id: 235, name: "Ilfov" },
  { id: 244, name: "Maramures" },
  { id: 253, name: "Mehedinti" },
  { id: 262, name: "Mures" },
  { id: 271, name: "Neamt" },
  { id: 280, name: "Olt" },
  { id: 289, name: "Prahova" },
  { id: 298, name: "Satu Mare" },
  { id: 307, name: "Salaj" },
  { id: 316, name: "Sibiu" },
  { id: 325, name: "Suceava" },
  { id: 334, name: "Teleorman" },
  { id: 343, name: "Timis" },
  { id: 352, name: "Tulcea" },
  { id: 361, name: "Vaslui" },
  { id: 370, name: "Valcea" },
  { id: 379, name: "Vrancea" },
  { id: 401, name: "Bucuresti" },
] as const;

/* ================================================================== */
/*  RGI Column definitions                                             */
/* ================================================================== */

type ColumnDef = {
  key: string;
  label: string;
  defaultVisible: boolean;
  render: (app: App) => string;
  className?: string;
};

function fmtTs(ts: number | null | undefined): string {
  if (!ts) return "-";
  const d = new Date(ts);
  if (isNaN(d.getTime())) return "-";
  return d.toLocaleDateString("ro-RO", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });
}

const ALL_COLUMNS: ColumnDef[] = [
  {
    key: "appNo",
    label: "Nr. cerere",
    defaultVisible: true,
    render: (a) => String(a.appNo ?? "-"),
    className: "font-mono font-semibold",
  },
  {
    key: "initialAppNo",
    label: "Nr. initial",
    defaultVisible: false,
    render: (a) => a.initialAppNo || "-",
    className: "font-mono text-xs",
  },
  {
    key: "applicationObject",
    label: "Obiect",
    defaultVisible: false,
    render: (a) => a.applicationObject || "-",
  },
  {
    key: "identifiers",
    label: "Identificatori (IE/CF)",
    defaultVisible: false,
    render: (a) => a.identifiers || "-",
    className: "text-xs max-w-[300px] truncate",
  },
  {
    key: "deponent",
    label: "Deponent",
    defaultVisible: false,
    render: (a) => a.deponent || "-",
  },
  {
    key: "requester",
    label: "Solicitant",
    defaultVisible: true,
    render: (a) => a.requester || "-",
  },
  {
    key: "appDate",
    label: "Data depunere",
    defaultVisible: false,
    render: (a) => fmtTs(a.appDate),
    className: "tabular-nums",
  },
  {
    key: "dueDate",
    label: "Termen",
    defaultVisible: true,
    render: (a) => fmtTs(a.dueDate),
    className: "tabular-nums",
  },
  {
    key: "statusName",
    label: "Status",
    defaultVisible: true,
    render: (a) => a.statusName || a.stateCode || "-",
  },
  {
    key: "resolutionName",
    label: "Rezolutie",
    defaultVisible: true,
    render: (a) => a.resolutionName || "-",
  },
  {
    key: "hasSolution",
    label: "Solutionat",
    defaultVisible: false,
    render: (a) => (a.hasSolution === 1 ? "DA" : "NU"),
  },
  {
    key: "totalFee",
    label: "Taxa (lei)",
    defaultVisible: false,
    render: (a) => (a.totalFee != null ? String(a.totalFee) : "-"),
    className: "tabular-nums",
  },
  {
    key: "uat",
    label: "UAT",
    defaultVisible: true,
    render: (a) => a.uat || "-",
  },
  {
    key: "orgUnit",
    label: "OCPI",
    defaultVisible: false,
    render: (a) => a.orgUnit || "-",
  },
  {
    key: "communicationType",
    label: "Comunicare",
    defaultVisible: false,
    render: (a) => a.communicationType || "-",
    className: "text-xs",
  },
  {
    key: "actorName",
    label: "Actor curent",
    defaultVisible: false,
    render: (a) => a.actorName || "-",
  },
  {
    key: "applicationPk",
    label: "Application PK",
    defaultVisible: false,
    render: (a) => String(a.applicationPk ?? "-"),
    className: "font-mono text-xs",
  },
];

/* ================================================================== */
/*  RGI Helpers                                                        */
/* ================================================================== */

function removeDiacritics(str: string): string {
  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

function matchesSearch(text: string, query: string): boolean {
  return removeDiacritics(text.toLowerCase()).includes(
    removeDiacritics(query.toLowerCase()),
  );
}

function sanitize(raw: string): string {
  return raw
    .replace(/[ăâ]/g, "a")
    .replace(/[ĂÂ]/g, "A")
    .replace(/[îÎ]/g, "i")
    .replace(/[țȚ]/g, "t")
    .replace(/[șȘ]/g, "s")
    .replace(/[^a-zA-Z0-9._-]/g, "_")
    .replace(/_+/g, "_")
    .replace(/^_|_$/g, "");
}

/* ================================================================== */
/*  Issued Documents Panel                                             */
/* ================================================================== */

function IssuedDocsPanel({
  applicationPk,
  workspaceId,
  appNo,
}: {
  applicationPk: number;
  workspaceId: number;
  appNo: number;
}) {
  const [docs, setDocs] = useState<IssuedDoc[] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [blockedDocPk, setBlockedDocPk] = useState<number | null>(null);
  const [downloadingAll, setDownloadingAll] = useState(false);
  const [downloadProgress, setDownloadProgress] = useState("");
  const blockedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      try {
        const res = await fetch(
          `/api/eterra/rgi/issued-docs?applicationId=${applicationPk}&workspaceId=${workspaceId}`,
        );
        const data = await res.json();
        const items: IssuedDoc[] = Array.isArray(data)
          ? data
          : data?.content ?? data?.data ?? data?.list ?? [];
        if (!cancelled) setDocs(items);
      } catch {
        if (!cancelled) setError("Eroare la incarcarea documentelor");
      }
      if (!cancelled) setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [applicationPk, workspaceId]);

  useEffect(() => {
    return () => {
      if (blockedTimerRef.current) clearTimeout(blockedTimerRef.current);
    };
  }, []);

  const handleDownloadAll = useCallback(async () => {
    if (!docs || docs.length === 0 || downloadingAll) return;
    setDownloadingAll(true);
    let downloaded = 0;
    let blocked = 0;

    const typeCounts: Record<string, number> = {};
    for (const d of docs) typeCounts[d.docType || "Document"] = (typeCounts[d.docType || "Document"] || 0) + 1;
    const typeIdx: Record<string, number> = {};

    for (const doc of docs) {
      const docName = sanitize(doc.docType || doc.documentTypeCode || "Document");
      const ext = (doc.fileExtension || "pdf").toLowerCase();
      const typeKey = doc.docType || "Document";
      typeIdx[typeKey] = (typeIdx[typeKey] || 0) + 1;
      const suffix = (typeCounts[typeKey] ?? 0) > 1 ? `_${typeIdx[typeKey]}` : "";
      const filename = `${docName}_${appNo}${suffix}.${ext}`;
      setDownloadProgress(`${downloaded + blocked + 1}/${docs.length}: ${doc.docType || "Document"}...`);

      const url =
        `/api/eterra/rgi/download-doc?workspaceId=${doc.workspaceId || workspaceId}` +
        `&applicationId=${doc.applicationId || applicationPk}` +
        `&documentPk=${doc.documentPk}` +
        `&documentTypeId=${doc.documentTypeId}` +
        `&docType=${encodeURIComponent(doc.docType || "")}` +
        `&appNo=${appNo}`;

      try {
        const res = await fetch(url);
        const ct = res.headers.get("content-type") || "";
        if (ct.includes("application/json")) {
          blocked++;
          continue;
        }
        const blob = await res.blob();
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
        downloaded++;
        await new Promise((r) => setTimeout(r, 300));
      } catch {
        blocked++;
      }
    }

    setDownloadProgress(
      blocked > 0
        ? `${downloaded} descarcat${downloaded !== 1 ? "e" : ""}, ${blocked} indisponibil${blocked !== 1 ? "e" : ""}`
        : `${downloaded} document${downloaded !== 1 ? "e" : ""} descarcat${downloaded !== 1 ? "e" : ""}`,
    );
    setDownloadingAll(false);
    setTimeout(() => setDownloadProgress(""), 5000);
  }, [docs, downloadingAll, workspaceId, applicationPk, appNo]);

  const handleDownload = useCallback(
    async (doc: IssuedDoc, e: React.MouseEvent) => {
      e.stopPropagation();
      const url =
        `/api/eterra/rgi/download-doc?workspaceId=${doc.workspaceId || workspaceId}` +
        `&applicationId=${doc.applicationId || applicationPk}` +
        `&documentPk=${doc.documentPk}` +
        `&documentTypeId=${doc.documentTypeId}` +
        `&docType=${encodeURIComponent(doc.docType || doc.documentTypeCode || "Document")}` +
        `&appNo=${appNo}`;

      try {
        const res = await fetch(url);
        const contentType = res.headers.get("content-type") || "";

        if (contentType.includes("application/json")) {
          const json = await res.json();
          if (json.blocked || json.error) {
            setBlockedDocPk(doc.documentPk);
            if (blockedTimerRef.current) clearTimeout(blockedTimerRef.current);
            blockedTimerRef.current = setTimeout(() => setBlockedDocPk(null), 5000);
            return;
          }
        }

        const blob = await res.blob();
        const disposition = res.headers.get("content-disposition") || "";
        let filename = `document_${doc.documentPk}.pdf`;
        const match = disposition.match(/filename="?([^";\n]+)"?/);
        if (match) {
          const decoded = match[1];
          if (decoded) filename = decodeURIComponent(decoded);
        }
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
      } catch {
        setBlockedDocPk(doc.documentPk);
        if (blockedTimerRef.current) clearTimeout(blockedTimerRef.current);
        blockedTimerRef.current = setTimeout(() => setBlockedDocPk(null), 5000);
      }
    },
    [workspaceId, applicationPk, appNo],
  );

  if (loading) {
    return (
      <div className="flex items-center gap-2 py-3 text-sm text-muted-foreground">
        <Loader2 className="h-4 w-4 animate-spin" />
        Se incarca documentele...
      </div>
    );
  }

  if (error) {
    return <p className="py-3 text-sm text-destructive">{error}</p>;
  }

  if (!docs || docs.length === 0) {
    return (
      <p className="py-3 text-sm text-muted-foreground">
        Niciun document eliberat.
      </p>
    );
  }

  return (
    <div className="space-y-1.5 py-2">
      <div className="flex items-center justify-between mb-2">
        <p className="text-xs font-medium text-muted-foreground">
          {docs.length} document{docs.length > 1 ? "e" : ""} eliberat
          {docs.length > 1 ? "e" : ""}
        </p>
        <div className="flex items-center gap-2">
          {downloadProgress && (
            <span className="text-[11px] text-muted-foreground">{downloadProgress}</span>
          )}
          <Button
            size="sm"
            variant="default"
            className="gap-1 h-7 text-xs"
            disabled={downloadingAll}
            onClick={(e) => { e.stopPropagation(); void handleDownloadAll(); }}
          >
            {downloadingAll ? (
              <Loader2 className="h-3 w-3 animate-spin" />
            ) : (
              <Archive className="h-3 w-3" />
            )}
            Descarca toate
          </Button>
        </div>
      </div>
      {docs.map((doc, i) => (
        <div key={doc.documentPk || i} className="space-y-0">
          <div className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2 hover:bg-muted/30 transition-colors">
            <div className="flex items-center gap-2.5 min-w-0 flex-1">
              <FileText className="h-4 w-4 text-muted-foreground shrink-0" />
              <div className="min-w-0">
                <p className="text-sm font-medium">
                  {doc.docType || doc.documentTypeCode || "Document"}
                </p>
                <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
                  <span>{fmtTs(doc.startDate || doc.lastUpdatedDtm)}</span>
                  <span className="font-mono opacity-60">
                    .{(doc.fileExtension || "PDF").toLowerCase()}
                  </span>
                  {doc.digitallySigned === 1 && (
                    <span className="inline-flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400">
                      <Shield className="h-3 w-3" />
                      semnat
                    </span>
                  )}
                  {doc.identifierDetails && (
                    <span className="truncate max-w-[200px]">
                      {doc.identifierDetails}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <Button
              size="sm"
              variant="outline"
              className="gap-1 shrink-0"
              onClick={(e) => void handleDownload(doc, e)}
            >
              <Download className="h-3.5 w-3.5" />
              Descarca
            </Button>
          </div>
          {blockedDocPk === doc.documentPk && (
            <div className="mx-3 mt-1 mb-1 px-3 py-1.5 rounded text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
              Documentul nu este inca disponibil pentru descarcare din eTerra
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

/* ================================================================== */
/*  RGI Content Tab                                                    */
/* ================================================================== */

function RgiContent() {
  const [countyId, setCountyId] = useState(127);
  const orgUnitId = countyId * 1000 + 2;
  const [year, setYear] = useState("2026");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [applications, setApplications] = useState<App[]>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [expandedPk, setExpandedPk] = useState<number | null>(null);
  const [showColumnPicker, setShowColumnPicker] = useState(false);
  const [downloadingAppPk, setDownloadingAppPk] = useState<number | null>(null);
  const [filterMode, setFilterMode] = useState<"all" | "solved" | "confirmed">("solved");
  const [searchQuery, setSearchQuery] = useState("");
  const [sortState, setSortState] = useState<SortState>(null);

  const [visibleCols, setVisibleCols] = useState<Set<string>>(
    () => new Set(ALL_COLUMNS.filter((c) => c.defaultVisible).map((c) => c.key)),
  );

  const toggleColumn = (key: string) => {
    setVisibleCols((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const columns = useMemo(
    () => ALL_COLUMNS.filter((c) => visibleCols.has(c.key)),
    [visibleCols],
  );

  const downloadAllForApp = useCallback(async (app: App) => {
    if (downloadingAppPk) return;
    setDownloadingAppPk(app.applicationPk);
    try {
      const res = await fetch(
        `/api/eterra/rgi/issued-docs?applicationId=${app.applicationPk}&workspaceId=${app.workspaceId}`,
      );
      const data = await res.json();
      const docs: IssuedDoc[] = Array.isArray(data)
        ? data
        : data?.content ?? data?.data ?? data?.list ?? [];

      if (docs.length === 0) {
        setDownloadingAppPk(null);
        return;
      }

      const typeCounts: Record<string, number> = {};
      for (const d of docs) typeCounts[d.docType || "Document"] = (typeCounts[d.docType || "Document"] || 0) + 1;
      const typeIdx: Record<string, number> = {};

      for (const doc of docs) {
        const docName = sanitize(doc.docType || doc.documentTypeCode || "Document");
        const ext = (doc.fileExtension || "pdf").toLowerCase();
        const typeKey = doc.docType || "Document";
        typeIdx[typeKey] = (typeIdx[typeKey] || 0) + 1;
        const suffix = (typeCounts[typeKey] ?? 0) > 1 ? `_${typeIdx[typeKey]}` : "";
        const filename = `${docName}_${app.appNo}${suffix}.${ext}`;

        const url =
          `/api/eterra/rgi/download-doc?workspaceId=${doc.workspaceId || app.workspaceId}` +
          `&applicationId=${doc.applicationId || app.applicationPk}` +
          `&documentPk=${doc.documentPk}` +
          `&documentTypeId=${doc.documentTypeId}` +
          `&docType=${encodeURIComponent(doc.docType || "")}` +
          `&appNo=${app.appNo}`;

        try {
          const r = await fetch(url);
          const ct = r.headers.get("content-type") || "";
          if (ct.includes("application/json")) continue;
          const blob = await r.blob();
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(a.href);
          document.body.removeChild(a);
          await new Promise((resolve) => setTimeout(resolve, 300));
        } catch {
          // skip
        }
      }
    } catch {
      // silent
    }
    setDownloadingAppPk(null);
  }, [downloadingAppPk]);

  const handleSort = useCallback(
    (key: string) => {
      setSortState((prev) => {
        if (prev && prev.key === key) {
          return prev.dir === "asc" ? { key, dir: "desc" } : null;
        }
        return { key, dir: "asc" };
      });
    },
    [],
  );

  const loadApplications = useCallback(async () => {
    setLoading(true);
    setError("");
    setApplications([]);
    setExpandedPk(null);
    try {
      const res = await fetch("/api/eterra/rgi/applications", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          workspaceId: countyId,
          orgUnitId,
          year,
          page: 0,
          nrElements: 200,
        }),
      });
      const data = await res.json();
      if (data.error) {
        setError(data.error);
        return;
      }
      const items: App[] = Array.isArray(data)
        ? data
        : data?.content ?? data?.data ?? data?.list ?? [];
      setApplications(items);
      setTotalCount(
        typeof data?.totalElements === "number"
          ? data.totalElements
          : items.length,
      );
    } catch {
      setError("Eroare de retea. Verifica conexiunea la eTerra.");
    }
    setLoading(false);
  }, [countyId, orgUnitId, year]);

  const processed = useMemo(() => {
    let result = applications;
    if (filterMode === "solved") {
      result = result.filter((a) => a.hasSolution === 1);
    } else if (filterMode === "confirmed") {
      result = result.filter((a) => a.stateCode === "CONFIRMED");
    }

    if (searchQuery.trim()) {
      const q = searchQuery.trim();
      result = result.filter((app) =>
        columns.some((col) => matchesSearch(col.render(app), q)),
      );
    }

    if (sortState) {
      const col = ALL_COLUMNS.find((c) => c.key === sortState.key);
      if (col) {
        const dir = sortState.dir === "asc" ? 1 : -1;
        const dateKeys = new Set(["dueDate", "appDate"]);
        result = [...result].sort((a, b) => {
          if (dateKeys.has(sortState.key)) {
            const va = (a[sortState.key] as number) || 0;
            const vb = (b[sortState.key] as number) || 0;
            return (va - vb) * dir;
          }
          const va = col.render(a);
          const vb = col.render(b);
          const na = parseFloat(va);
          const nb = parseFloat(vb);
          if (!isNaN(na) && !isNaN(nb)) return (na - nb) * dir;
          return va.localeCompare(vb, "ro") * dir;
        });
      }
    }

    return result;
  }, [applications, filterMode, searchQuery, columns, sortState]);

  const SortIcon = ({ colKey }: { colKey: string }) => {
    if (!sortState || sortState.key !== colKey) {
      return <ArrowUpDown className="h-3 w-3 opacity-0 group-hover:opacity-40 transition-opacity" />;
    }
    if (sortState.dir === "asc") {
      return <ArrowUp className="h-3 w-3 text-foreground" />;
    }
    return <ArrowDown className="h-3 w-3 text-foreground" />;
  };

  return (
    <div className="space-y-3 sm:space-y-4 max-w-[1400px] mx-auto p-3 sm:p-4">
      <div>
        <h2 className="text-base sm:text-lg font-bold">Documente Eliberate eTerra</h2>
        <p className="text-xs sm:text-sm text-muted-foreground">
          Lucrari depuse cu documente eliberate
        </p>
      </div>

      <Card>
        <CardContent className="pt-4 space-y-3">
          <div className="flex items-end gap-3 flex-wrap">
            <div className="space-y-1">
              <Label className="text-xs">Judet</Label>
              <Select
                value={String(countyId)}
                onValueChange={(v) => setCountyId(parseInt(v, 10))}
              >
                <SelectTrigger className="w-[200px]">
                  <SelectValue placeholder="Alege judetul" />
                </SelectTrigger>
                <SelectContent>
                  {COUNTIES.map((c) => (
                    <SelectItem key={c.id} value={String(c.id)}>
                      {c.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">An</Label>
              <Input
                value={year}
                onChange={(e) => setYear(e.target.value)}
                className="w-20"
              />
            </div>
            <Button onClick={() => void loadApplications()} disabled={loading}>
              {loading ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Search className="mr-2 h-4 w-4" />
              )}
              Incarca lucrari
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="gap-1"
              onClick={() => setShowColumnPicker(!showColumnPicker)}
            >
              <Settings2 className="h-3.5 w-3.5" />
              Coloane
            </Button>
          </div>

          {showColumnPicker && (
            <div className="flex flex-wrap gap-1.5 pt-2 border-t">
              {ALL_COLUMNS.map((col) => (
                <button
                  key={col.key}
                  onClick={() => toggleColumn(col.key)}
                  className={cn(
                    "px-2 py-1 rounded text-[11px] border transition-colors",
                    visibleCols.has(col.key)
                      ? "bg-foreground/10 border-foreground/20 font-medium"
                      : "bg-transparent border-muted-foreground/15 text-muted-foreground hover:border-foreground/20",
                  )}
                >
                  {col.label}
                </button>
              ))}
            </div>
          )}

          <div className="flex items-center gap-3 pt-2 border-t flex-wrap">
            <div className="flex gap-1 p-0.5 bg-muted rounded-md">
              {(
                [
                  { id: "solved" as const, label: "Solutionate", desc: "lucrari cu solutie" },
                  { id: "confirmed" as const, label: "Confirmate", desc: "solutie confirmata" },
                  { id: "all" as const, label: "Toate", desc: "" },
                ] as const
              ).map((opt) => (
                <button
                  key={opt.id}
                  onClick={() => setFilterMode(opt.id)}
                  className={cn(
                    "px-2 sm:px-3 py-1 text-[11px] sm:text-xs rounded font-medium transition-colors",
                    filterMode === opt.id
                      ? "bg-background shadow text-foreground"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                  title={opt.desc}
                >
                  {opt.label}
                </button>
              ))}
            </div>

            {applications.length > 0 && (
              <div className="flex items-center gap-3 flex-1 min-w-0">
                <div className="relative flex-1 max-w-xs">
                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                  <Input
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Cauta in rezultate..."
                    className="pl-8 h-8 text-xs"
                  />
                </div>
                <span className="text-xs text-muted-foreground whitespace-nowrap">
                  {processed.length} din {applications.length} lucrari
                  {totalCount > applications.length && ` (${totalCount} total)`}
                </span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {error && (
        <Card className="border-destructive">
          <CardContent className="py-3 flex items-center gap-2 text-sm text-destructive">
            <AlertTriangle className="h-4 w-4 shrink-0" />
            {error}
          </CardContent>
        </Card>
      )}

      {loading && (
        <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>Se incarca lucrarile din eTerra RGI...</p>
          </CardContent>
        </Card>
      )}

      {/* Mobile card view */}
      {!loading && processed.length > 0 && (
        <div className="space-y-2 sm:hidden">
          {processed.map((app) => {
            const pk = app.applicationPk;
            const isExpanded = expandedPk === pk;
            const solved = app.hasSolution === 1;
            return (
              <Card key={pk} className={cn(isExpanded && "ring-1 ring-foreground/10")}>
                <CardContent className="p-3">
                  <div className="flex items-start gap-2" onClick={() => setExpandedPk(isExpanded ? null : pk)}>
                    <button
                      type="button"
                      className="mt-0.5 shrink-0"
                      onClick={(e) => { e.stopPropagation(); void downloadAllForApp(app); }}
                      disabled={downloadingAppPk === pk}
                    >
                      {downloadingAppPk === pk ? (
                        <Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
                      ) : solved ? (
                        <Download className="h-4 w-4 text-emerald-500" />
                      ) : (
                        <Clock className="h-4 w-4 text-muted-foreground" />
                      )}
                    </button>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 justify-between">
                        <span className="font-mono font-bold text-sm">{app.appNo}</span>
                        <Badge
                          variant={solved ? "default" : "secondary"}
                          className={cn("text-[10px]", solved && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400")}
                        >
                          {app.statusName || app.stateCode || "-"}
                        </Badge>
                      </div>
                      <p className="text-xs text-muted-foreground truncate">{app.requester || app.deponent || "-"}</p>
                      <div className="flex items-center gap-3 text-[11px] text-muted-foreground mt-1">
                        <span>Termen: {fmtTs(app.dueDate)}</span>
                        <Badge variant="outline" className="text-[9px]">{app.resolutionName || "-"}</Badge>
                        {app.uat && <span>{app.uat}</span>}
                      </div>
                    </div>
                    {isExpanded ? <ChevronUp className="h-4 w-4 text-muted-foreground shrink-0" /> : <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />}
                  </div>
                  {isExpanded && (
                    <div className="mt-2 pt-2 border-t">
                      <IssuedDocsPanel applicationPk={pk} workspaceId={app.workspaceId} appNo={app.appNo} />
                    </div>
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* Desktop table view */}
      {!loading && processed.length > 0 && (
        <Card className="hidden sm:block">
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b bg-muted/40">
                    <th className="px-2 py-2 w-8"></th>
                    {columns.map((col) => (
                      <th
                        key={col.key}
                        className="px-3 py-2 text-left font-medium text-xs text-muted-foreground whitespace-nowrap cursor-pointer select-none group"
                        onClick={() => handleSort(col.key)}
                      >
                        <span className="inline-flex items-center gap-1">
                          {col.label}
                          <SortIcon colKey={col.key} />
                        </span>
                      </th>
                    ))}
                    <th className="px-2 py-2 w-8"></th>
                  </tr>
                </thead>
                <tbody>
                  {processed.map((app) => {
                    const pk = app.applicationPk;
                    const isExpanded = expandedPk === pk;
                    const solved = app.hasSolution === 1;

                    return (
                      <React.Fragment key={pk}>
                        <tr
                          className={cn(
                            "border-b cursor-pointer hover:bg-muted/30 transition-colors",
                            isExpanded && "bg-muted/20",
                          )}
                          onClick={() => setExpandedPk(isExpanded ? null : pk)}
                        >
                          <td className="px-2 py-2.5 w-8">
                            <TooltipProvider>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <button
                                    type="button"
                                    className="focus:outline-none"
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      void downloadAllForApp(app);
                                    }}
                                    disabled={downloadingAppPk === pk}
                                  >
                                    {downloadingAppPk === pk ? (
                                      <Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
                                    ) : solved ? (
                                      <Download className="h-4 w-4 text-emerald-500" />
                                    ) : (
                                      <Clock className="h-4 w-4 text-muted-foreground" />
                                    )}
                                  </button>
                                </TooltipTrigger>
                                <TooltipContent side="right" className="text-xs max-w-xs">
                                  <p className="font-semibold">Nr. {app.appNo} — click descarca toate</p>
                                  <p>{app.applicationObject || "-"}</p>
                                  <p>Status: {app.statusName || app.stateCode}</p>
                                  <p>Rezolutie: {app.resolutionName || "-"}</p>
                                  <p>Termen: {fmtTs(app.dueDate)}</p>
                                  {app.identifiers && (
                                    <p className="truncate max-w-[250px]">{app.identifiers}</p>
                                  )}
                                </TooltipContent>
                              </Tooltip>
                            </TooltipProvider>
                          </td>
                          {columns.map((col) => (
                            <td
                              key={col.key}
                              className={cn("px-3 py-2.5 text-sm", col.className)}
                              title={col.render(app)}
                            >
                              {col.key === "statusName" ? (
                                <Badge
                                  variant={solved ? "default" : "secondary"}
                                  className={cn(
                                    "text-[10px]",
                                    solved && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400",
                                  )}
                                >
                                  {col.render(app)}
                                </Badge>
                              ) : col.key === "resolutionName" ? (
                                <Badge variant="outline" className="text-[10px]">
                                  {col.render(app)}
                                </Badge>
                              ) : (
                                col.render(app)
                              )}
                            </td>
                          ))}
                          <td className="px-2 py-2.5 w-8">
                            {isExpanded ? (
                              <ChevronUp className="h-4 w-4 text-muted-foreground" />
                            ) : (
                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
                            )}
                          </td>
                        </tr>
                        {isExpanded && (
                          <tr>
                            <td
                              colSpan={columns.length + 2}
                              className="px-4 pb-3 bg-muted/10 border-b"
                            >
                              <IssuedDocsPanel
                                applicationPk={pk}
                                workspaceId={app.workspaceId}
                                appNo={app.appNo}
                              />
                            </td>
                          </tr>
                        )}
                      </React.Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      )}

      {!loading && applications.length > 0 && processed.length === 0 && (
        <Card>
          <CardContent className="py-8 text-center text-muted-foreground">
            <FileText className="h-8 w-8 mx-auto mb-2 opacity-30" />
            <p>Nicio lucrare gasita pentru filtrul selectat.</p>
            <p className="text-xs mt-1">Schimba filtrul sau termenul de cautare.</p>
          </CardContent>
        </Card>
      )}

      {!loading && applications.length === 0 && !error && (
        <Card>
          <CardContent className="py-8 text-center text-muted-foreground">
            <Search className="h-8 w-8 mx-auto mb-2 opacity-30" />
            <p>Apasa &quot;Incarca lucrari&quot; pentru a incepe.</p>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

/* ================================================================== */
/*  Simplified Basemap Switcher (3 options only)                       */
/* ================================================================== */

const PORTAL_BASEMAPS: { id: BasemapId; label: string; icon: typeof MapIcon }[] = [
  { id: "liberty", label: "Harta", icon: MapIcon },
  { id: "dark", label: "Noapte", icon: Moon },
  { id: "google", label: "Google", icon: Satellite },
];

function PortalBasemapSwitcher({ value, onChange }: { value: BasemapId; onChange: (id: BasemapId) => void }) {
  return (
    <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg flex p-0.5 gap-0.5">
      {PORTAL_BASEMAPS.map((b) => {
        const Icon = b.icon;
        const active = value === b.id;
        return (
          <Button
            key={b.id}
            variant="ghost"
            size="sm"
            className={cn(
              "px-2 py-1 h-7 text-xs gap-1 rounded-md",
              active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
            )}
            onClick={() => onChange(b.id)}
            title={b.label}
          >
            <Icon className="h-3.5 w-3.5" />
            <span className="hidden sm:inline">{b.label}</span>
          </Button>
        );
      })}
    </div>
  );
}

/* ================================================================== */
/*  UAT type for selector                                              */
/* ================================================================== */

type UatItem = {
  siruta: string;
  name: string;
  county: string;
  localFeatures: number;
};

/* ================================================================== */
/*  Map layer IDs — must match map-viewer.tsx                          */
/* ================================================================== */

const BASE_LAYERS = [
  "l-terenuri-fill",
  "l-terenuri-line",
  "l-terenuri-label",
  "l-cladiri-fill",
  "l-cladiri-line",
];

/* ================================================================== */
/*  Harta (Map) Tab                                                    */
/* ================================================================== */

type MapLike = {
  getLayer(id: string): unknown;
  getSource(id: string): unknown;
  setFilter(id: string, filter: unknown[] | null): void;
  setLayoutProperty(id: string, prop: string, value: unknown): void;
  fitBounds(
    bounds: [number, number, number, number],
    opts?: Record<string, unknown>,
  ): void;
  isStyleLoaded(): boolean;
};

function asMap(handle: MapViewerHandle | null): MapLike | null {
  const m = handle?.getMap();
  return m ? (m as unknown as MapLike) : null;
}

function HartaContent() {
  const mapHandleRef = useRef<MapViewerHandle>(null);
  const [basemap, setBasemap] = useState<BasemapId>("liberty");
  const [clickedFeature, setClickedFeature] = useState<ClickedFeature | null>(null);
  const [selectionMode, setSelectionMode] = useState<SelectionMode>("off");
  const [selectedFeatures, setSelectedFeatures] = useState<SelectedFeature[]>([]);
  const [mapReady, setMapReady] = useState(false);

  // UAT selector state
  const [uats, setUats] = useState<UatItem[]>([]);
  const [uatsLoading, setUatsLoading] = useState(false);
  const [selectedSiruta, setSelectedSiruta] = useState("");
  const [uatSearch, setUatSearch] = useState("");
  const [showUatDropdown, setShowUatDropdown] = useState(false);
  const uatInputRef = useRef<HTMLInputElement>(null);

  // Sync state
  const [syncing, setSyncing] = useState(false);
  const [syncMsg, setSyncMsg] = useState("");

  // Bounds state
  const boundsRef = useRef<[number, number, number, number] | null>(null);
  const appliedSirutaRef = useRef("");
  const boundsFittedForSirutaRef = useRef("");
  const prevBoundsSirutaRef = useRef("");

  // Layer visibility: show terenuri + cladiri
  const [layerVisibility] = useState<LayerVisibility>({
    terenuri: true,
    cladiri: true,
    administrativ: false,
  });

  // Load UATs on mount
  useEffect(() => {
    setUatsLoading(true);
    fetch("/api/eterra/uats")
      .then((r) => r.ok ? r.json() : Promise.reject())
      .then((data: { uats: UatItem[] }) => {
        setUats(data.uats ?? []);
      })
      .catch(() => {})
      .finally(() => setUatsLoading(false));
  }, []);

  // Selected UAT info
  const selectedUat = useMemo(
    () => uats.find((u) => u.siruta === selectedSiruta),
    [uats, selectedSiruta],
  );

  // Filtered UATs for dropdown
  const filteredUats = useMemo(() => {
    if (!uatSearch.trim()) return uats.slice(0, 50);
    const q = removeDiacritics(uatSearch.toLowerCase());
    return uats.filter((u) =>
      removeDiacritics(u.name.toLowerCase()).includes(q) ||
      u.siruta.includes(uatSearch) ||
      removeDiacritics((u.county ?? "").toLowerCase()).includes(q)
    ).slice(0, 50);
  }, [uats, uatSearch]);

  // Detect map ready
  useEffect(() => {
    if (!selectedSiruta) return;
    const check = setInterval(() => {
      const map = asMap(mapHandleRef.current);
      if (!map || !map.isStyleLoaded()) {
        if (mapReady) {
          setMapReady(false);
          appliedSirutaRef.current = "";
        }
        return;
      }
      if (!mapReady) {
        setMapReady(true);
      }
    }, 300);
    return () => clearInterval(check);
  }, [selectedSiruta, mapReady]);

  // Fetch UAT bounds when selected
  useEffect(() => {
    if (!selectedSiruta) return;
    if (prevBoundsSirutaRef.current === selectedSiruta) return;
    prevBoundsSirutaRef.current = selectedSiruta;

    fetch(`/api/geoportal/uat-bounds?siruta=${selectedSiruta}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data: { bounds?: [[number, number], [number, number]] } | null) => {
        if (data?.bounds) {
          const [[minLng, minLat], [maxLng, maxLat]] = data.bounds;
          boundsRef.current = [minLng, minLat, maxLng, maxLat];
          boundsFittedForSirutaRef.current = "";
          const map = asMap(mapHandleRef.current);
          if (map) {
            map.fitBounds([minLng, minLat, maxLng, maxLat], { padding: 40, duration: 1500 });
            boundsFittedForSirutaRef.current = selectedSiruta;
          }
        }
      })
      .catch(() => {});
  }, [selectedSiruta]);

  // Hide basemap admin boundaries + our UAT layers
  const cleanedBasemapRef = useRef(false);
  useEffect(() => {
    if (!mapReady) { cleanedBasemapRef.current = false; return; }
    if (cleanedBasemapRef.current) return;
    const map = asMap(mapHandleRef.current);
    if (!map) return;
    cleanedBasemapRef.current = true;
    try {
      const style = (map as unknown as { getStyle(): { layers?: { id: string }[] } }).getStyle();
      if (style?.layers) {
        for (const layer of style.layers) {
          const id = layer.id.toLowerCase();
          if (id.includes("boundary") || id.includes("admin") ||
              (id.includes("place") && !id.includes("place-city") && !id.includes("place-town"))) {
            map.setLayoutProperty(layer.id, "visibility", "none");
          }
        }
      }
    } catch { /* noop */ }
    const uatLayers = [
      "l-uats-z0-line", "l-uats-z5-fill", "l-uats-z5-line",
      "l-uats-z8-fill", "l-uats-z8-line", "l-uats-z8-label",
      "l-uats-z12-fill", "l-uats-z12-line", "l-uats-z12-label",
    ];
    for (const lid of uatLayers) {
      try { if (map.getLayer(lid)) map.setLayoutProperty(lid, "visibility", "none"); } catch { /* noop */ }
    }
  }, [mapReady]);

  // When map becomes ready, fitBounds ONCE per siruta
  useEffect(() => {
    if (!mapReady || !boundsRef.current || !selectedSiruta) return;
    if (boundsFittedForSirutaRef.current === selectedSiruta) return;
    const map = asMap(mapHandleRef.current);
    if (!map) return;
    map.fitBounds(boundsRef.current, { padding: 40, duration: 1500 });
    boundsFittedForSirutaRef.current = selectedSiruta;
  }, [mapReady, selectedSiruta]);

  // Apply siruta filter to layers
  useEffect(() => {
    if (!mapReady || !selectedSiruta) return;
    if (appliedSirutaRef.current === selectedSiruta) return;

    const map = asMap(mapHandleRef.current);
    if (!map) return;

    appliedSirutaRef.current = selectedSiruta;
    const filter = ["==", ["get", "siruta"], selectedSiruta];

    for (const layerId of BASE_LAYERS) {
      try {
        if (map.getLayer(layerId)) map.setFilter(layerId, filter);
      } catch { /* noop */ }
    }
  }, [mapReady, selectedSiruta]);

  const handleFeatureClick = useCallback((feature: ClickedFeature | null) => {
    if (!feature || !feature.properties) {
      setClickedFeature(null);
      return;
    }
    setClickedFeature(feature);
  }, []);

  const handleSelectionModeChange = useCallback((mode: SelectionMode) => {
    if (mode === "off") {
      mapHandleRef.current?.clearSelection();
      setSelectedFeatures([]);
    }
    setSelectionMode(mode);
  }, []);

  const handleSelectUat = (uat: UatItem) => {
    setSelectedSiruta(uat.siruta);
    setUatSearch(uat.name + (uat.county ? ` (${uat.county})` : ""));
    setShowUatDropdown(false);
    // Reset map state for new UAT
    appliedSirutaRef.current = "";
    prevBoundsSirutaRef.current = "";
    setMapReady(false);
    setClickedFeature(null);
    setSelectedFeatures([]);
    setSelectionMode("off");
    setSyncMsg("");
  };

  const handleSync = async () => {
    if (!selectedSiruta || syncing) return;
    setSyncing(true);
    setSyncMsg("Se porneste sincronizarea...");
    try {
      const res = await fetch("/api/eterra/sync-background", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ siruta: selectedSiruta, mode: "base" }),
      });
      const data = await res.json();
      if (res.ok) {
        setSyncMsg(`Sincronizare pornita (job: ${data.jobId ?? "?"}). Datele vor aparea dupa finalizare.`);
      } else {
        setSyncMsg(data.error ?? "Eroare la pornirea sincronizarii");
      }
    } catch {
      setSyncMsg("Eroare de retea la sincronizare");
    }
    setSyncing(false);
  };

  const hasNoData = selectedUat && selectedUat.localFeatures === 0;

  return (
    <div className="relative h-[calc(100vh-52px)] w-full">
      {!selectedSiruta ? (
        /* No UAT selected — show selector */
        <div className="flex flex-col items-center justify-center h-full gap-4 p-8">
          <MapIcon className="h-16 w-16 text-muted-foreground/30" />
          <h3 className="text-lg font-semibold text-muted-foreground">Selecteaza un UAT</h3>
          <p className="text-sm text-muted-foreground text-center max-w-md">
            Alege o unitate administrativ-teritoriala pentru a vizualiza parcele si cladiri pe harta.
          </p>
          <div className="relative w-80">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              ref={uatInputRef}
              value={uatSearch}
              onChange={(e) => {
                setUatSearch(e.target.value);
                setShowUatDropdown(true);
              }}
              onFocus={() => setShowUatDropdown(true)}
              placeholder={uatsLoading ? "Se incarca UAT-urile..." : "Cauta UAT (nume, SIRUTA, judet)..."}
              className="pl-10"
              disabled={uatsLoading}
            />
            {showUatDropdown && filteredUats.length > 0 && (
              <div className="absolute top-full left-0 right-0 mt-1 bg-background border rounded-lg shadow-lg max-h-64 overflow-y-auto z-50">
                {filteredUats.map((uat) => (
                  <button
                    key={uat.siruta}
                    className="w-full text-left px-3 py-2 hover:bg-muted/50 transition-colors text-sm flex justify-between items-center"
                    onClick={() => handleSelectUat(uat)}
                  >
                    <span>
                      <span className="font-medium">{uat.name}</span>
                      {uat.county && <span className="text-muted-foreground ml-1">({uat.county})</span>}
                    </span>
                    <span className="text-xs text-muted-foreground font-mono">
                      {uat.siruta}
                      {uat.localFeatures > 0 && (
                        <Badge variant="secondary" className="ml-2 text-[10px] h-4 px-1">
                          {uat.localFeatures}
                        </Badge>
                      )}
                    </span>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      ) : (
        /* UAT selected — show map */
        <>
          {hasNoData ? (
            /* No data for this UAT */
            <div className="flex flex-col items-center justify-center h-full gap-4 p-8">
              <AlertTriangle className="h-12 w-12 text-amber-500/60" />
              <h3 className="text-lg font-semibold">Nu exista date GIS pentru {selectedUat?.name}</h3>
              <p className="text-sm text-muted-foreground text-center max-w-md">
                Acest UAT nu a fost inca sincronizat. Porneste sincronizarea pentru a descarca parcele si cladiri de la eTerra.
              </p>
              <div className="flex gap-2">
                <Button onClick={handleSync} disabled={syncing} className="gap-2">
                  {syncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
                  Sincronizeaza {selectedUat?.name}
                </Button>
                <Button
                  variant="outline"
                  onClick={() => {
                    setSelectedSiruta("");
                    setUatSearch("");
                    prevBoundsSirutaRef.current = "";
                    appliedSirutaRef.current = "";
                  }}
                >
                  Schimba UAT
                </Button>
              </div>
              {syncMsg && (
                <p className="text-sm text-muted-foreground mt-2">{syncMsg}</p>
              )}
            </div>
          ) : (
            /* Map view */
            <div className="absolute inset-0">
              <MapViewer
                ref={mapHandleRef}
                className="h-full w-full"
                basemap={basemap}
                selectionType={selectionMode}
                onFeatureClick={handleFeatureClick}
                onSelectionChange={setSelectedFeatures}
                layerVisibility={layerVisibility}
              />

              {/* Top-left: UAT info + change button (responsive) */}
              <div className="absolute top-2 left-2 right-[140px] sm:right-auto z-10 flex flex-col gap-2">
                <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg px-2 sm:px-3 py-1.5 sm:py-2 flex items-center gap-2">
                  <div className="min-w-0">
                    <p className="text-xs sm:text-sm font-semibold truncate">{selectedUat?.name}</p>
                    <p className="text-[10px] sm:text-[11px] text-muted-foreground truncate">
                      {selectedUat?.county && `${selectedUat.county} - `}SIRUTA: {selectedSiruta}
                      {selectedUat && selectedUat.localFeatures > 0 && (
                        <span className="ml-1 sm:ml-2">{selectedUat.localFeatures.toLocaleString()} parcele</span>
                      )}
                    </p>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-7 px-2 text-xs shrink-0"
                    onClick={() => {
                      setSelectedSiruta("");
                      setUatSearch("");
                      prevBoundsSirutaRef.current = "";
                      appliedSirutaRef.current = "";
                      setMapReady(false);
                    }}
                  >
                    Schimba
                  </Button>
                </div>
              </div>

              {/* Top-right: basemap switcher + simple feature info */}
              <div className="absolute top-2 right-2 z-10 flex flex-col items-end gap-2">
                <PortalBasemapSwitcher value={basemap} onChange={setBasemap} />
                {clickedFeature && selectionMode === "off" && (
                  <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg w-56 sm:w-64 overflow-hidden">
                    <div className="flex items-center justify-between px-3 py-2 border-b">
                      <h3 className="text-sm font-semibold truncate">
                        {String(clickedFeature.properties.cadastral_ref ?? clickedFeature.properties.object_id ?? "Parcela")}
                      </h3>
                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0 shrink-0" onClick={() => setClickedFeature(null)}>
                        <span className="text-xs">✕</span>
                      </Button>
                    </div>
                    <div className="px-3 py-2 text-xs space-y-1">
                      {(() => {
                        const p = clickedFeature.properties;
                        const sir = String(p.siruta ?? "");
                        const cad = String(p.cadastral_ref ?? "");
                        const area = Number(p.area_value ?? 0);
                        return (
                          <>
                            {sir && (
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">SIRUTA</span>
                                <span className="font-medium">{sir}</span>
                              </div>
                            )}
                            {cad && (
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">Nr. cadastral</span>
                                <span className="font-medium">{cad}</span>
                              </div>
                            )}
                            {area > 0 && (
                              <div className="flex justify-between">
                                <span className="text-muted-foreground">Suprafata</span>
                                <span className="font-medium">{area.toLocaleString("ro-RO")} mp</span>
                              </div>
                            )}
                          </>
                        );
                      })()}
                    </div>
                  </div>
                )}
              </div>

              {/* Bottom: selection toolbar — centered on mobile */}
              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 sm:left-3 sm:translate-x-0 z-10">
                <SelectionToolbar
                  selectedFeatures={selectedFeatures}
                  selectionMode={selectionMode}
                  onSelectionModeChange={handleSelectionModeChange}
                  onClearSelection={() => {
                    mapHandleRef.current?.clearSelection();
                    setSelectedFeatures([]);
                  }}
                />
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

/* ================================================================== */
/*  Main Portal Page                                                   */
/* ================================================================== */

export default function PortalPage() {
  return (
    <div className="fixed inset-0 z-[100] bg-background overflow-auto flex flex-col">
      {/* Header */}
      <Tabs defaultValue="rgi" className="flex-1 flex flex-col gap-0">
        <header className="border-b bg-background/95 backdrop-blur-sm px-3 sm:px-4 py-2 flex items-center gap-2 sm:gap-4 shrink-0">
          <h1 className="text-sm sm:text-lg font-bold whitespace-nowrap">Portal</h1>
          <TabsList className="h-8">
            <TabsTrigger value="rgi" className="text-xs px-2 sm:px-3 h-7">
              RGI
            </TabsTrigger>
            <TabsTrigger value="harta" className="text-xs px-2 sm:px-3 h-7">
              Harta
            </TabsTrigger>
          </TabsList>
        </header>

        <TabsContent value="rgi" className="flex-1 overflow-auto">
          <RgiContent />
        </TabsContent>

        <TabsContent value="harta" className="flex-1 relative">
          <HartaContent />
        </TabsContent>
      </Tabs>
    </div>
  );
}