import Link from "next/link";
import { notFound } from "next/navigation";
import { MapPinned, Search, FileSpreadsheet, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MapaTerritorialBoard } from "@/components/mapa-territorial/mapa-territorial-board";
import { requireUser } from "@/lib/session";
import { can } from "@/lib/permissions";
import {
  estadoFichaReportOptions,
  manzanaReportOptions,
  parseReportFilters,
  situacionLoteReportOptions,
  tramoRshReportOptions,
  type ReportesFilters,
} from "@/lib/reportes";
import { getMapaTerritorialData } from "@/server/queries/mapa-territorial";

export const dynamic = "force-dynamic";

export default async function MapaTerritorialPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const user = await requireUser();
  if (!can(user.role, "dashboard:read")) notFound();

  const params = await searchParams;
  const filters = parseReportFilters(params);
  const data = await getMapaTerritorialData(filters);
  const queryString = buildQueryString(filters);
  const canExport = can(user.role, "reporte:export");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div className="space-y-2">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
            <MapPinned className="h-3.5 w-3.5" />
            Vista territorial
          </div>
          <h2 className="text-2xl font-semibold tracking-tight">Mapa territorial</h2>
          <p className="max-w-3xl text-sm text-muted-foreground">
            Vista por manzanas y lotes para revisar estado, vulnerabilidad, documentos y acciones rápidas.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          {canExport ? (
            <>
              <Button asChild variant="outline" className="gap-2">
                <Link href={`/api/reportes/export/excel${queryString}`}>
                  <FileSpreadsheet className="h-4 w-4" />
                  Excel
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href={`/api/reportes/export/pdf${queryString}`}>
                  <FileText className="h-4 w-4" />
                  PDF
                </Link>
              </Button>
            </>
          ) : (
            <>
              <Button variant="outline" className="gap-2" disabled>
                <FileSpreadsheet className="h-4 w-4" />
                Excel
              </Button>
              <Button variant="outline" className="gap-2" disabled>
                <FileText className="h-4 w-4" />
                PDF
              </Button>
            </>
          )}
        </div>
      </div>

      <Card className="border-border shadow-sm">
        <CardContent className="p-4">
          <form className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
            <SelectFilter label="Manzana" name="manzana" value={filters.manzana ?? ""} options={manzanaReportOptions} />
            <div className="space-y-2">
              <Label htmlFor="mapa-direccionLote">Dirección del lote</Label>
              <Input id="mapa-direccionLote" name="direccionLote" defaultValue={filters.direccionLote ?? ""} placeholder="Pasaje..." />
            </div>
            <SelectFilter label="Estado ficha" name="estadoFicha" value={filters.estadoFicha ?? ""} options={estadoFichaReportOptions} />
            <SelectFilter label="Situación lote" name="situacionLote" value={filters.situacionLote ?? ""} options={situacionLoteReportOptions} />
            <SelectFilter label="Tramo RSH" name="tramoRsh" value={filters.tramoRsh ?? ""} options={tramoRshReportOptions} />
            <div className="space-y-2 xl:col-span-2">
              <Label htmlFor="mapa-q">Buscar ocupante / RUT / lote</Label>
              <div className="relative">
                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input id="mapa-q" name="q" defaultValue={filters.q ?? ""} placeholder="Buscar..." className="pl-9" />
              </div>
            </div>
            <div className="flex flex-wrap items-end gap-2 xl:col-span-6">
              <Button type="submit">Aplicar filtros</Button>
              <Button asChild variant="outline">
                <Link href="/mapa-territorial">Limpiar</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>

      <MapaTerritorialBoard data={data} />
    </div>
  );
}

function SelectFilter({
  label,
  name,
  value,
  options,
}: {
  label: string;
  name: string;
  value: string;
  options: ReadonlyArray<{ value: string; label: string }>;
}) {
  const id = `mapa-${name}`;

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <select
        id={id}
        name={name}
        defaultValue={value}
        className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-ring"
      >
        <option value="">Seleccione</option>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}

function buildQueryString(filters: ReportesFilters) {
  const params = new URLSearchParams();
  if (filters.q) params.set("q", filters.q);
  if (filters.manzana) params.set("manzana", filters.manzana);
  if (filters.direccionLote) params.set("direccionLote", filters.direccionLote);
  if (filters.estadoFicha) params.set("estadoFicha", filters.estadoFicha);
  if (filters.situacionLote) params.set("situacionLote", filters.situacionLote);
  if (filters.tramoRsh) params.set("tramoRsh", filters.tramoRsh);
  if (filters.fechaDesde) params.set("fechaDesde", filters.fechaDesde);
  if (filters.fechaHasta) params.set("fechaHasta", filters.fechaHasta);
  const query = params.toString();
  return query ? `?${query}` : "";
}