"use client";

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { X, Loader2, Download, AlertCircle, FileText, Map as MapIcon } from "lucide-react";
import { cn } from "@/shared/lib/utils";
import { SignAsPicker } from "../sign-as/sign-as-picker";
import type { SignerPayload } from "../sign-as/types";

export type ExportKind = "piz" | "pad" | "coords" | "dxf";

export interface ExportModalProps {
  open: boolean;
  kind: ExportKind;
  /** GisFeature uuid (when known) — used in the route path. */
  parcelId: string;
  /** Display-only metadata for the modal header. */
  cadastralRef: string | null;
  uatName: string | null;
  layerId: string | null;
  onClose: () => void;
}

const TITLE: Record<ExportKind, string> = {
  piz: "Plan de încadrare în zonă",
  pad: "Plan de situație (PAD)",
  coords: "Coordonate Stereo70 (XLSX)",
  dxf: "Export DXF",
};

const DESCRIPTION: Record<ExportKind, string> = {
  piz: "PDF A4 cu parcela încadrată la scara 1:5000 peste imagine satelit / ortofoto ANCPI.",
  pad: "PDF cu plan de amplasament + delimitare, cu cartuș (CF, topo, categorie, adresă) și tabel de coordonate.",
  coords: "Tabel Excel cu coordonatele vârfurilor (X/Y Stereo70), lungimile segmentelor și suprafața.",
  dxf: "Fișier DXF al parcelei (+ vecini și clădiri din intersecție) pentru deschidere în AutoCAD / QCAD.",
};

const NEEDS_SIGNER: Record<ExportKind, boolean> = {
  piz: true,
  pad: true,
  coords: false,
  dxf: false,
};

const NEEDS_BASEMAP: Record<ExportKind, boolean> = {
  piz: true,
  pad: false,
  coords: false,
  dxf: false,
};

const FILE_EXT: Record<ExportKind, string> = {
  piz: "pdf",
  pad: "pdf",
  coords: "xlsx",
  dxf: "dxf",
};

type State =
  | { kind: "idle" }
  | { kind: "running" }
  | { kind: "done"; blobUrl: string; filename: string }
  | { kind: "error"; message: string };

export function ExportModal({
  open,
  kind,
  parcelId,
  cadastralRef,
  uatName,
  layerId,
  onClose,
}: ExportModalProps) {
  const [signer, setSigner] = useState<SignerPayload | null>(null);
  const [coSigner, setCoSigner] = useState<SignerPayload | null>(null);
  const [basemap, setBasemap] = useState<"google" | "orto">("google");
  const [state, setState] = useState<State>({ kind: "idle" });
  const lastBlobUrl = useRef<string | null>(null);

  // Reset transient state when the modal closes or jumps to a new parcel.
  useEffect(() => {
    if (!open) {
      setState({ kind: "idle" });
      if (lastBlobUrl.current) {
        URL.revokeObjectURL(lastBlobUrl.current);
        lastBlobUrl.current = null;
      }
    }
  }, [open, parcelId]);

  if (!open) return null;
  if (typeof document === "undefined") return null;

  const handleGenerate = async () => {
    setState({ kind: "running" });
    try {
      const body: Record<string, unknown> = {};
      if (NEEDS_SIGNER[kind]) {
        if (!signer) {
          setState({ kind: "error", message: "Selectează un semnatar." });
          return;
        }
        body.signer = signer;
        if (coSigner) body.coSigner = coSigner;
      }
      if (NEEDS_BASEMAP[kind]) {
        body.basemap = basemap;
      }
      if (layerId) body.layerId = layerId;

      const isJsonOnly = kind === "coords" || kind === "dxf";
      const res = await fetch(`/api/gis/parcel/${parcelId}/${kind}`, {
        method: isJsonOnly && kind === "coords" ? "GET" : "POST",
        headers: { "Content-Type": "application/json" },
        body: isJsonOnly && kind === "coords" ? undefined : JSON.stringify(body),
      });

      if (!res.ok) {
        let msg = `Eroare HTTP ${res.status}`;
        const text = await res.text();
        try {
          const j = JSON.parse(text);
          if (typeof j.error === "string") msg = j.error;
          else if (typeof j.message === "string") msg = j.message;
        } catch {
          if (text) msg += `: ${text.slice(0, 200)}`;
        }
        setState({ kind: "error", message: msg });
        return;
      }

      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      lastBlobUrl.current = url;
      const cd = res.headers.get("content-disposition") ?? "";
      const m = /filename\*?=(?:UTF-8''|"?)([^";]+)/i.exec(cd);
      const fallback = `${kind}_${cadastralRef ?? parcelId}.${FILE_EXT[kind]}`;
      const filename = m?.[1] ? decodeURIComponent(m[1]) : fallback;
      setState({ kind: "done", blobUrl: url, filename });

      // Auto-download — most users just want the file.
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      a.click();
    } catch (err) {
      setState({
        kind: "error",
        message: err instanceof Error ? err.message : String(err),
      });
    }
  };

  return createPortal(
    <div
      className="fixed inset-0 z-[1100] flex items-center justify-center bg-black/40 p-4"
      onClick={onClose}
    >
      <div
        className="w-full max-w-md overflow-hidden rounded-lg border bg-background shadow-xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start gap-2 border-b bg-muted/30 px-3 py-2">
          {kind === "piz" ? (
            <MapIcon className="mt-0.5 h-4 w-4 text-primary" />
          ) : (
            <FileText className="mt-0.5 h-4 w-4 text-primary" />
          )}
          <div className="flex-1">
            <div className="text-sm font-semibold">{TITLE[kind]}</div>
            <div className="text-[11px] text-muted-foreground">
              {cadastralRef && <span className="font-mono">{cadastralRef}</span>}
              {cadastralRef && uatName && " · "}
              {uatName}
            </div>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="rounded p-1 hover:bg-muted"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </div>

        <div className="max-h-[60vh] space-y-3 overflow-y-auto px-3 py-3">
          <p className="text-xs text-muted-foreground">{DESCRIPTION[kind]}</p>

          {NEEDS_BASEMAP[kind] && (
            <div>
              <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                Fundal hartă
              </div>
              <div className="flex gap-1">
                <button
                  type="button"
                  onClick={() => setBasemap("google")}
                  className={cn(
                    "flex-1 rounded-md border px-2 py-1.5 text-xs",
                    basemap === "google"
                      ? "border-primary bg-primary/5 font-medium"
                      : "border-border hover:bg-muted/50",
                  )}
                >
                  Google Satellite
                </button>
                <button
                  type="button"
                  disabled
                  title="Disponibil în curând — necesită endpoint basemap pe orchestrator (pool eTerra)."
                  className="flex-1 cursor-not-allowed rounded-md border border-dashed border-border bg-muted/30 px-2 py-1.5 text-xs text-muted-foreground"
                >
                  Ortofoto ANCPI <span className="ml-0.5 text-[9px] uppercase opacity-70">curând</span>
                </button>
              </div>
            </div>
          )}

          {NEEDS_SIGNER[kind] && (
            <SignAsPicker
              value={signer}
              onChange={setSigner}
              allowCoSigner={kind === "piz"}
              coSigner={coSigner}
              onCoSignerChange={setCoSigner}
            />
          )}

          {state.kind === "error" && (
            <div className="flex items-start gap-2 rounded border border-destructive/40 bg-destructive/10 p-2 text-xs text-destructive">
              <AlertCircle className="mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
              <div className="min-w-0">{state.message}</div>
            </div>
          )}

          {state.kind === "done" && (
            <div className="flex items-start gap-2 rounded border border-emerald-500/40 bg-emerald-500/10 p-2 text-xs">
              <Download className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-emerald-600" />
              <div className="min-w-0">
                <div className="font-medium">Gata.</div>
                <a
                  href={state.blobUrl}
                  download={state.filename}
                  className="text-primary underline-offset-2 hover:underline"
                >
                  {state.filename}
                </a>
              </div>
            </div>
          )}
        </div>

        <div className="flex items-center justify-end gap-2 border-t bg-muted/30 px-3 py-2">
          <button
            type="button"
            onClick={onClose}
            className="rounded px-3 py-1.5 text-xs hover:bg-muted"
          >
            Închide
          </button>
          <button
            type="button"
            onClick={handleGenerate}
            disabled={state.kind === "running" || (NEEDS_SIGNER[kind] && !signer)}
            className="inline-flex items-center gap-1 rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-50"
          >
            {state.kind === "running" ? (
              <>
                <Loader2 className="h-3 w-3 animate-spin" /> Generare…
              </>
            ) : (
              <>
                <Download className="h-3 w-3" /> Generează
              </>
            )}
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}