import Link from "next/link";
import { notFound } from "next/navigation";
import { Filter, Search, Inbox } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { nativeSelectClassName } from "@/components/fichas/form-fields";
import { requireUser } from "@/lib/session";
import { can } from "@/lib/permissions";
import {
  parseDocumentosPendientesFilters,
  tipoDocumentoFilterOptions,
  estadoDocumentoFilterOptions,
} from "@/lib/documentos-pendientes";
import { getDocumentosPendientes } from "@/server/queries/documentos";
import { DocumentosPendientesBoard } from "@/components/documentos-pendientes/documentos-pendientes-board";

export const dynamic = "force-dynamic";

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

  const params = await searchParams;
  const filters = parseDocumentosPendientesFilters(params);
  const documentos = await getDocumentosPendientes(filters);
  const canReview = can(user.role, "documento:validate");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 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">
            <Inbox className="h-3.5 w-3.5" />
            Bandeja documental
          </div>
          <h2 className="text-2xl font-semibold tracking-tight">Documentos pendientes</h2>
          <p className="max-w-3xl text-sm text-muted-foreground">
            Revisa, abre, valida o rechaza documentos asociados a fichas activas.
          </p>
        </div>
      </div>

      <Card className="border-border shadow-sm">
        <CardHeader className="flex flex-row items-center justify-between gap-3">
          <CardTitle className="text-base">Filtros</CardTitle>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <Filter className="h-3.5 w-3.5" />
            Por defecto se muestran pendientes
          </div>
        </CardHeader>
        <CardContent>
          <form className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
            <SelectField
              label="Tipo de documento"
              name="tipoDocumento"
              value={filters.tipoDocumento ?? ""}
              options={tipoDocumentoFilterOptions}
            />
            <div className="space-y-2">
              <Label htmlFor="documentos-manzana">Manzana</Label>
              <select
                id="documentos-manzana"
                name="manzana"
                defaultValue={filters.manzana ?? ""}
                className={nativeSelectClassName}
              >
                <option value="">Seleccione</option>
                {["C", "D", "E", "E1", "F"].map((value) => (
                  <option key={value} value={value}>
                    {value}
                  </option>
                ))}
              </select>
            </div>
            <SelectField
              label="Estado documento"
              name="estadoDocumento"
              value={filters.estadoDocumento ?? "PENDIENTE"}
              options={estadoDocumentoFilterOptions}
            />
            <div className="space-y-2 xl:col-span-3">
              <Label htmlFor="documentos-q">Buscar por ocupante, RUT, código, lote o nombre archivo</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="documentos-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="/documentos-pendientes">Limpiar</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>

      <DocumentosPendientesBoard documentos={documentos} canReview={canReview} />
    </div>
  );
}

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

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <select
        id={id}
        name={name}
        defaultValue={value}
        className={nativeSelectClassName}
      >
        <option value="">Seleccione</option>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}