"use client";

import { useState, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card";
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 { Switch } from "@/shared/components/ui/switch";
import { Loader2, ChevronDown, ChevronUp, Download, Search, FileText, AlertCircle } from "lucide-react";
import { cn } from "@/shared/lib/utils";

/* ------------------------------------------------------------------ */
/*  Types — loosely typed since eTerra response shape varies           */
/* ------------------------------------------------------------------ */

type Application = Record<string, unknown>;
type IssuedDoc = Record<string, unknown>;

/* ------------------------------------------------------------------ */
/*  Helpers                                                            */
/* ------------------------------------------------------------------ */

/** Safely read a nested string field from a record. */
function str(obj: Record<string, unknown>, ...keys: string[]): string {
  for (const k of keys) {
    const v = obj[k];
    if (typeof v === "string" && v.length > 0) return v;
    if (typeof v === "number") return String(v);
  }
  return "";
}

/** Parse a date string (various eTerra formats) into a Date, or null. */
function parseDate(raw: unknown): Date | null {
  if (!raw) return null;
  if (typeof raw === "number") return new Date(raw);
  if (typeof raw === "string") {
    const d = new Date(raw);
    if (!isNaN(d.getTime())) return d;
  }
  return null;
}

/** Format a date for display (DD.MM.YYYY). */
function fmtDate(raw: unknown): string {
  const d = parseDate(raw);
  if (!d) return "-";
  const dd = String(d.getDate()).padStart(2, "0");
  const mm = String(d.getMonth() + 1).padStart(2, "0");
  const yyyy = d.getFullYear();
  return `${dd}.${mm}.${yyyy}`;
}

/** Check if a date value is in the future. */
function isFuture(raw: unknown): boolean {
  const d = parseDate(raw);
  if (!d) return false;
  return d.getTime() > Date.now();
}

/** Detect if an application looks "solutionat" (solved). */
function isSolutionat(app: Application): boolean {
  const status = String(
    app.statusName ?? app.status ?? app.statusCode ?? app.applicationStatus ?? ""
  ).toLowerCase();
  return (
    status.includes("solu") ||
    status.includes("rezolv") ||
    status.includes("finalizat") ||
    status.includes("closed") ||
    status.includes("eliberat")
  );
}

/** Get the due date from an application (tries common field names). */
function getDueDate(app: Application): unknown {
  return (
    app.dueDate ??
    app.solutionDeadline ??
    app.termenSolutionare ??
    app.deadline ??
    app.termenLegal ??
    null
  );
}

/* ------------------------------------------------------------------ */
/*  Sub-components                                                     */
/* ------------------------------------------------------------------ */

function StatusBadge({ app }: { app: Application }) {
  const raw = String(
    app.statusName ?? app.status ?? app.statusCode ?? app.applicationStatus ?? "Necunoscut"
  );
  const lower = raw.toLowerCase();

  let variant: "default" | "secondary" | "destructive" | "outline" = "outline";
  if (lower.includes("solu") || lower.includes("finalizat") || lower.includes("eliberat")) {
    variant = "default";
  } else if (lower.includes("suspenda") || lower.includes("reject")) {
    variant = "destructive";
  } else if (lower.includes("lucr") || lower.includes("analiz")) {
    variant = "secondary";
  }

  return <Badge variant={variant}>{raw}</Badge>;
}

function IssuedDocsPanel({
  applicationId,
  workspaceId,
}: {
  applicationId: string;
  workspaceId: number;
}) {
  const [docs, setDocs] = useState<IssuedDoc[] | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loaded, setLoaded] = useState(false);

  const loadDocs = useCallback(async () => {
    if (loaded) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `/api/eterra/rgi/issued-docs?applicationId=${encodeURIComponent(applicationId)}&workspaceId=${workspaceId}`
      );
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(
          (body as Record<string, unknown>).error
            ? String((body as Record<string, unknown>).error)
            : `HTTP ${res.status}`
        );
      }
      const data: unknown = await res.json();

      // eTerra can return { elements: [...] } or just an array
      let list: IssuedDoc[] = [];
      if (Array.isArray(data)) {
        list = data as IssuedDoc[];
      } else if (data && typeof data === "object" && Array.isArray((data as Record<string, unknown>).elements)) {
        list = (data as Record<string, unknown>).elements as IssuedDoc[];
      } else if (data && typeof data === "object" && Array.isArray((data as Record<string, unknown>).content)) {
        list = (data as Record<string, unknown>).content as IssuedDoc[];
      }

      setDocs(list);
      setLoaded(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Eroare la incarcarea documentelor");
    } finally {
      setLoading(false);
    }
  }, [applicationId, workspaceId, loaded]);

  // Auto-load on mount
  if (!loaded && !loading && !error) {
    loadDocs();
  }

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

  if (error) {
    return (
      <div className="flex items-center gap-2 p-4 text-sm text-destructive">
        <AlertCircle className="size-4" />
        {error}
        <Button variant="ghost" size="xs" onClick={() => { setLoaded(false); setError(null); }}>
          Reincearca
        </Button>
      </div>
    );
  }

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

  return (
    <div className="p-4 space-y-2">
      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
        Documente eliberate ({docs.length})
      </p>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b text-left text-muted-foreground text-xs">
              <th className="py-1 pr-3">Nr. document</th>
              <th className="py-1 pr-3">Tip</th>
              <th className="py-1 pr-3">Data</th>
              <th className="py-1 pr-3">Status</th>
              <th className="py-1">Actiuni</th>
            </tr>
          </thead>
          <tbody>
            {docs.map((doc, i) => {
              const docId = str(doc, "issuedDocumentId", "documentId", "id", "pk");
              const docNr = str(doc, "documentNumber", "number", "nr", "nrDocument") || docId;
              const docType = str(doc, "documentTypeName", "documentType", "type", "tipDocument");
              const docDate = doc.documentDate ?? doc.date ?? doc.dataDocument ?? doc.issueDate;
              const docStatus = str(doc, "statusName", "status", "documentStatus");

              return (
                <tr key={docId || i} className="border-b border-border/50 hover:bg-muted/30">
                  <td className="py-2 pr-3 font-mono text-xs">{docNr || "-"}</td>
                  <td className="py-2 pr-3">{docType || "-"}</td>
                  <td className="py-2 pr-3">{fmtDate(docDate)}</td>
                  <td className="py-2 pr-3">{docStatus || "-"}</td>
                  <td className="py-2">
                    {docId ? (
                      <a
                        href={`/api/eterra/rgi/download-doc?workspaceId=${workspaceId}&applicationId=${encodeURIComponent(applicationId)}&docId=${encodeURIComponent(docId)}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                      >
                        <Download className="size-3" />
                        Descarca
                      </a>
                    ) : (
                      <span className="text-xs text-muted-foreground">N/A</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Raw JSON for debugging */}
      <details className="mt-2">
        <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">
          Raspuns brut JSON
        </summary>
        <pre className="mt-1 max-h-60 overflow-auto rounded bg-muted/50 p-2 text-xs">
          {JSON.stringify(docs, null, 2)}
        </pre>
      </details>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  ApplicationRow                                                     */
/* ------------------------------------------------------------------ */

function ApplicationRow({
  app,
  workspaceId,
}: {
  app: Application;
  workspaceId: number;
}) {
  const [expanded, setExpanded] = useState(false);

  const appId = str(app, "applicationId", "id", "pk", "applicationPk");
  const appNr = str(app, "applicationNumber", "number", "nrCerere", "registrationNumber") || appId;
  const serviceType = str(app, "serviceTypeName", "serviceType", "tipServiciu", "serviceName");
  const applicant = str(app, "applicantName", "applicant", "deponent", "ownerName", "solicitant");
  const submitDate = app.submitDate ?? app.registrationDate ?? app.dataCerere ?? app.dataInregistrare;
  const dueDate = getDueDate(app);

  return (
    <>
      <tr className="border-b hover:bg-muted/30">
        <td className="py-2.5 px-3 font-mono text-xs">{appNr || "-"}</td>
        <td className="py-2.5 px-3 text-sm max-w-[200px] truncate" title={serviceType}>
          {serviceType || "-"}
        </td>
        <td className="py-2.5 px-3 text-sm max-w-[180px] truncate" title={applicant}>
          {applicant || "-"}
        </td>
        <td className="py-2.5 px-3 text-sm">{fmtDate(submitDate)}</td>
        <td className="py-2.5 px-3 text-sm">
          <span className={cn(isFuture(dueDate) ? "text-green-500" : "text-muted-foreground")}>
            {fmtDate(dueDate)}
          </span>
        </td>
        <td className="py-2.5 px-3">
          <StatusBadge app={app} />
        </td>
        <td className="py-2.5 px-3">
          <Button
            variant="ghost"
            size="xs"
            onClick={() => setExpanded(!expanded)}
            className="gap-1"
          >
            <FileText className="size-3" />
            Detalii
            {expanded ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
          </Button>
        </td>
      </tr>
      {expanded && (
        <tr className="border-b bg-muted/10">
          <td colSpan={7} className="p-0">
            <div className="border-l-2 border-primary/30 ml-4">
              <IssuedDocsPanel applicationId={appId} workspaceId={workspaceId} />

              {/* Application raw details */}
              <details className="px-4 pb-3">
                <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">
                  Date aplicatie (JSON brut)
                </summary>
                <pre className="mt-1 max-h-60 overflow-auto rounded bg-muted/50 p-2 text-xs">
                  {JSON.stringify(app, null, 2)}
                </pre>
              </details>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}

/* ------------------------------------------------------------------ */
/*  Main Page                                                          */
/* ------------------------------------------------------------------ */

export default function RgiTestPage() {
  // Filter state
  const [workspaceId, setWorkspaceId] = useState(127);
  const [orgUnitId, setOrgUnitId] = useState(127002);
  const [year, setYear] = useState("2026");
  const [onlyFutureSolved, setOnlyFutureSolved] = useState(false);

  // Data state
  const [applications, setApplications] = useState<Application[]>([]);
  const [totalCount, setTotalCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadApplications = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/eterra/rgi/applications", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          workspaceId,
          orgUnitId,
          year,
          page: 0,
          nrElements: 100,
        }),
      });

      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(
          (body as Record<string, unknown>).error
            ? String((body as Record<string, unknown>).error)
            : `HTTP ${res.status}`
        );
      }

      const data: unknown = await res.json();

      // Extract the list from various possible response shapes
      let list: Application[] = [];
      let total: number | null = null;

      if (Array.isArray(data)) {
        list = data as Application[];
        total = list.length;
      } else if (data && typeof data === "object") {
        const obj = data as Record<string, unknown>;
        if (Array.isArray(obj.elements)) {
          list = obj.elements as Application[];
        } else if (Array.isArray(obj.content)) {
          list = obj.content as Application[];
        } else if (Array.isArray(obj.data)) {
          list = obj.data as Application[];
        }
        if (typeof obj.totalElements === "number") total = obj.totalElements;
        else if (typeof obj.total === "number") total = obj.total;
        else if (typeof obj.totalCount === "number") total = obj.totalCount;
        else total = list.length;
      }

      setApplications(list);
      setTotalCount(total);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Eroare la incarcarea lucrarilor");
      setApplications([]);
      setTotalCount(null);
    } finally {
      setLoading(false);
    }
  }, [workspaceId, orgUnitId, year]);

  // Apply client-side filter
  const displayedApps = onlyFutureSolved
    ? applications.filter((app) => isSolutionat(app) && isFuture(getDueDate(app)))
    : applications;

  return (
    <div className="mx-auto max-w-7xl space-y-6 p-4">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight">
          Documente Eliberate eTerra
        </h1>
        <p className="text-muted-foreground">
          Pagina de test — lucrari depuse cu documente eliberate
        </p>
      </div>

      {/* Filters */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Filtre</CardTitle>
          <CardDescription>
            Selecteaza judetul, unitatea administrativ-teritoriala si anul
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-end gap-4">
            <div className="space-y-1.5">
              <Label htmlFor="workspaceId">Workspace ID (judet)</Label>
              <Input
                id="workspaceId"
                type="number"
                value={workspaceId}
                onChange={(e) => setWorkspaceId(Number(e.target.value))}
                className="w-32"
                placeholder="127"
              />
              <p className="text-xs text-muted-foreground">127 = Cluj</p>
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="orgUnitId">OrgUnit ID (UAT)</Label>
              <Input
                id="orgUnitId"
                type="number"
                value={orgUnitId}
                onChange={(e) => setOrgUnitId(Number(e.target.value))}
                className="w-32"
                placeholder="127002"
              />
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="year">An</Label>
              <Input
                id="year"
                type="text"
                value={year}
                onChange={(e) => setYear(e.target.value)}
                className="w-24"
                placeholder="2026"
              />
            </div>

            <Button onClick={loadApplications} disabled={loading} className="gap-2">
              {loading ? (
                <Loader2 className="size-4 animate-spin" />
              ) : (
                <Search className="size-4" />
              )}
              Incarca lucrari
            </Button>
          </div>

          {/* Future/solved filter toggle */}
          <div className="flex items-center gap-3 mt-4 pt-4 border-t">
            <Switch
              id="futureFilter"
              checked={onlyFutureSolved}
              onCheckedChange={setOnlyFutureSolved}
            />
            <Label htmlFor="futureFilter" className="cursor-pointer">
              Doar solutionate cu termen viitor
            </Label>
            {onlyFutureSolved && applications.length > 0 && (
              <Badge variant="secondary" className="ml-2">
                {displayedApps.length} / {applications.length}
              </Badge>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Error */}
      {error && (
        <Card className="border-destructive">
          <CardContent className="pt-6">
            <div className="flex items-center gap-2 text-destructive">
              <AlertCircle className="size-5 shrink-0" />
              <div>
                <p className="font-medium">Eroare</p>
                <p className="text-sm">{error}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Results */}
      {!loading && applications.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              Lucrari
              <Badge variant="outline">
                {displayedApps.length}
                {totalCount !== null && totalCount !== displayedApps.length
                  ? ` / ${totalCount} total`
                  : ""}
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b text-left text-xs text-muted-foreground uppercase tracking-wider">
                    <th className="py-2 px-3">Nr. cerere</th>
                    <th className="py-2 px-3">Tip serviciu</th>
                    <th className="py-2 px-3">Deponent</th>
                    <th className="py-2 px-3">Data depunere</th>
                    <th className="py-2 px-3">Termen</th>
                    <th className="py-2 px-3">Status</th>
                    <th className="py-2 px-3">Actiuni</th>
                  </tr>
                </thead>
                <tbody>
                  {displayedApps.map((app, i) => {
                    const key = str(app, "applicationId", "id", "pk") || String(i);
                    return (
                      <ApplicationRow
                        key={key}
                        app={app}
                        workspaceId={workspaceId}
                      />
                    );
                  })}
                </tbody>
              </table>
            </div>

            {displayedApps.length === 0 && (
              <div className="py-8 text-center text-muted-foreground text-sm">
                Nicio lucrare nu corespunde filtrelor selectate.
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Empty state */}
      {!loading && !error && applications.length === 0 && totalCount === null && (
        <Card>
          <CardContent className="py-12">
            <div className="text-center text-muted-foreground">
              <FileText className="size-10 mx-auto mb-3 opacity-40" />
              <p>Apasa &quot;Incarca lucrari&quot; pentru a interoga eTerra RGI.</p>
              <p className="text-xs mt-1">
                Asigura-te ca sesiunea eTerra este activa (conecteaza-te din ParcelSync).
              </p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Loading state for initial load */}
      {loading && (
        <Card>
          <CardContent className="py-12">
            <div className="flex flex-col items-center gap-3 text-muted-foreground">
              <Loader2 className="size-8 animate-spin" />
              <p>Se interogheaza eTerra RGI...</p>
              <p className="text-xs">Poate dura cateva secunde.</p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Raw response debug */}
      {applications.length > 0 && (
        <details className="text-sm">
          <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
            Raspuns brut — toate aplicatiile ({applications.length})
          </summary>
          <pre className="mt-2 max-h-96 overflow-auto rounded-lg bg-muted/50 p-4 text-xs">
            {JSON.stringify(applications.slice(0, 5), null, 2)}
            {applications.length > 5 && `\n\n... si inca ${applications.length - 5} aplicatii`}
          </pre>
        </details>
      )}
    </div>
  );
}