import Link from "next/link";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { nativeSelectClassName } from "@/components/fichas/form-fields";
import {
  bitacoraCategoriaOptions,
  bitacoraEstadoOptions,
  bitacoraPrioridadOptions,
} from "@/lib/bitacora";

export function BitacoraFilters({
  q,
  categoria,
  estado,
  prioridad,
  anio,
  view,
}: {
  q?: string;
  categoria?: string;
  estado?: string;
  prioridad?: string;
  anio?: string;
  view?: string;
}) {
  return (
    <form className="grid gap-3 rounded-lg border border-border bg-card p-4 md:grid-cols-2 xl:grid-cols-[1.6fr_repeat(4,minmax(140px,1fr))_auto] xl:items-end">
      <Input name="q" defaultValue={q} placeholder="Buscar título, organismo, responsable o ubicación..." />
      <select name="categoria" defaultValue={categoria ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione categoría</option>
        {bitacoraCategoriaOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <select name="estado" defaultValue={estado ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione estado</option>
        {bitacoraEstadoOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <select name="prioridad" defaultValue={prioridad ?? ""} className={nativeSelectClassName}>
        <option value="">Seleccione prioridad</option>
        {bitacoraPrioridadOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <Input name="anio" defaultValue={anio ?? ""} placeholder="Año" inputMode="numeric" />
      {view ? <input type="hidden" name="view" value={view} /> : null}
      <Button type="submit" className="w-full xl:w-auto">
        <Search className="h-4 w-4" />
        Filtrar
      </Button>
      <div className="flex gap-2 md:col-span-2 xl:col-span-1 xl:justify-end">
        <Button asChild variant={view === "timeline" ? "secondary" : "outline"} size="sm">
          <Link href={buildViewHref("timeline", { q, categoria, estado, prioridad, anio })}>Timeline</Link>
        </Button>
        <Button asChild variant={view === "list" || !view ? "secondary" : "outline"} size="sm">
          <Link href={buildViewHref("list", { q, categoria, estado, prioridad, anio })}>Listado</Link>
        </Button>
      </div>
    </form>
  );
}

function buildViewHref(
  view: "list" | "timeline",
  filters: { q?: string; categoria?: string; estado?: string; prioridad?: string; anio?: string },
) {
  const params = new URLSearchParams();
  for (const [key, value] of Object.entries(filters)) {
    if (value) params.set(key, value);
  }
  params.set("view", view);
  return `/bitacora-territorial${params.toString() ? `?${params.toString()}` : ""}`;
}