"use client";

import { useTransition } from "react";
import { toast } from "sonner";
import { updateChambreStatut } from "@/actions/chambres";
import { STATUT_CHAMBRE_LABELS } from "@/lib/utils";
import { Badge, statutBadgeVariant } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown } from "lucide-react";

export function ChambreStatutSwitcher({ id, statut }: { id: string; statut: string }) {
  const [pending, startTransition] = useTransition();

  function onChange(newStatut: string) {
    if (newStatut === statut) return;
    startTransition(async () => {
      const result = await updateChambreStatut(id, newStatut);
      if (result?.error) toast.error(result.error);
      else toast.success("Statut mis à jour");
    });
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger disabled={pending} className="cursor-pointer inline-flex">
        <Badge variant={statutBadgeVariant(statut)} className="gap-1">
          {STATUT_CHAMBRE_LABELS[statut]}
          <ChevronDown className="w-3 h-3" />
        </Badge>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {Object.entries(STATUT_CHAMBRE_LABELS).map(([key, label]) => (
          <DropdownMenuItem key={key} onClick={() => onChange(key)}>
            <Badge variant={statutBadgeVariant(key)} className="mr-1">
              {label}
            </Badge>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}