"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_RESERVATION_LABELS } from "@/lib/utils";
import { X } from "lucide-react";

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

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

  return (
    <Card>
      <CardContent className="p-4 flex items-center gap-3 flex-wrap">
        <span className="text-sm font-medium text-muted-foreground">Statut :</span>
        <Select value={statut} onValueChange={update}>
          <SelectTrigger className="w-[180px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous les statuts</SelectItem>
            {Object.entries(STATUT_RESERVATION_LABELS).map(([key, label]) => (
              <SelectItem key={key} value={key}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {statut !== "all" && (
          <Button variant="ghost" size="sm" onClick={() => update("all")}>
            <X className="w-3.5 h-3.5" />
            Réinitialiser
          </Button>
        )}
      </CardContent>
    </Card>
  );
}