import { EstadoFicha, SituacionLote } from "@prisma/client";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { nativeSelectClassName } from "@/components/fichas/form-fields";

const manzanaOptions = ["C", "D", "E", "E1", "F"];

const estadoFichaLabels: Record<EstadoFicha, string> = {
  BORRADOR: "Borrador",
  COMPLETA: "Completa",
  INCOMPLETA: "Incompleta",
  EN_REVISION: "En revisión",
  ARCHIVADA: "Archivada",
};

const situacionLoteLabels: Record<SituacionLote, string> = {
  CON_DUENO: "Con dueño",
  CON_RESOLUCION: "Con resolución",
  SIN_RESOLUCION: "Sin resolución",
  SIN_OCUPANTE: "Sin ocupante",
  INHABILITADO_SERVIU: "Inhabilitado por SERVIU",
  SEDE_SOCIAL: "Sede social",
  OTRO: "Otro",
};

export function FichasFilters({
  q,
  estadoFicha,
  situacionLote,
  manzana,
  documentos,
}: {
  q?: string;
  estadoFicha?: string;
  situacionLote?: string;
  manzana?: string;
  documentos?: string;
}) {
  return (
    <form className="grid gap-3 rounded-lg border border-border bg-card p-4 md:grid-cols-2 xl:grid-cols-[1.5fr_repeat(4,minmax(140px,1fr))_auto] xl:items-end">
      <Input name="q" defaultValue={q} placeholder="Buscar nombre, RUT, lote, rol, dirección..." />
      <select name="manzana" defaultValue={manzana ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione</option>
        {manzanaOptions.map((value) => (
          <option key={value} value={value}>
            Manzana {value}
          </option>
        ))}
      </select>
      <select name="estadoFicha" defaultValue={estadoFicha ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione</option>
        {Object.values(EstadoFicha).map((value) => (
          <option key={value} value={value}>
            {estadoFichaLabels[value]}
          </option>
        ))}
      </select>
      <select name="situacionLote" defaultValue={situacionLote ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione</option>
        {Object.values(SituacionLote).map((value) => (
          <option key={value} value={value}>
            {situacionLoteLabels[value]}
          </option>
        ))}
      </select>
      <select name="documentos" defaultValue={documentos ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione</option>
        <option value="pendientes">Con pendientes</option>
        <option value="validados">Con validados</option>
        <option value="sin-rsh">Sin RSH</option>
        <option value="sin-cuenta-luz">Sin cuenta luz</option>
      </select>
      <Button type="submit" className="w-full xl:w-auto">
        <Search className="h-4 w-4" />
        Filtrar
      </Button>
    </form>
  );
}