"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { STATUT_CHAMBRE_LABELS, TYPE_CHAMBRE_LABELS } from "@/lib/utils";
import { X } from "lucide-react";

export function ChambreFilters() {
  const router = useRouter();
  const sp = useSearchParams();
  const statut = sp.get("statut") || "all";
  const type = sp.get("type") || "all";

  function update(key: string, value: string) {
    const params = new URLSearchParams(sp.toString());
    if (value === "all") params.delete(key);
    else params.set(key, value);
    router.push(`/chambres${params.size ? `?${params.toString()}` : ""}`);
  }

  function reset() {
    router.push("/chambres");
  }

  const hasFilters = statut !== "all" || type !== "all";

  return (
    <Card>
      <CardContent className="p-4 flex flex-wrap items-center gap-3">
        <span className="text-sm font-medium text-muted-foreground">Filtres :</span>

        <Select value={statut} onValueChange={(v) => update("statut", v)}>
          <SelectTrigger className="w-[170px]">
            <SelectValue placeholder="Statut" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous les statuts</SelectItem>
            {Object.entries(STATUT_CHAMBRE_LABELS).map(([key, label]) => (
              <SelectItem key={key} value={key}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={type} onValueChange={(v) => update("type", v)}>
          <SelectTrigger className="w-[170px]">
            <SelectValue placeholder="Type" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous les types</SelectItem>
            {Object.entries(TYPE_CHAMBRE_LABELS).map(([key, label]) => (
              <SelectItem key={key} value={key}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        {hasFilters && (
          <Button variant="ghost" size="sm" onClick={reset}>
            <X className="w-3.5 h-3.5" />
            Réinitialiser
          </Button>
        )}
      </CardContent>
    </Card>
  );
}