import { useState } from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";

interface Sequence {
  id: number;
  nom: string;
  formationNom?: string;
}

interface SequenceMultiSelectProps {
  sequences: Sequence[];
  selectedIds: number[];
  onChange: (selectedIds: number[]) => void;
  placeholder?: string;
}

export function SequenceMultiSelect({
  sequences,
  selectedIds,
  onChange,
  placeholder = "Sélectionnez des séquences...",
}: SequenceMultiSelectProps) {
  const [open, setOpen] = useState(false);

  const toggleSequence = (sequenceId: number) => {
    const newSelection = selectedIds.includes(sequenceId)
      ? selectedIds.filter((id) => id !== sequenceId)
      : [...selectedIds, sequenceId];
    onChange(newSelection);
  };

  const selectedSequences = sequences.filter((seq) =>
    selectedIds.includes(seq.id)
  );

  return (
    <div className="space-y-2">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            className="w-full justify-between"
          >
            {selectedIds.length === 0 ? (
              <span className="text-muted-foreground">{placeholder}</span>
            ) : (
              <span>
                {selectedIds.length} séquence(s) sélectionnée(s)
              </span>
            )}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-full p-0" align="start">
          <Command>
            <CommandInput placeholder="Rechercher une séquence..." />
            <CommandEmpty>Aucune séquence trouvée.</CommandEmpty>
            <CommandGroup className="max-h-64 overflow-auto">
              {sequences.map((sequence) => (
                <CommandItem
                  key={sequence.id}
                  onSelect={() => toggleSequence(sequence.id)}
                  className="cursor-pointer"
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      selectedIds.includes(sequence.id)
                        ? "opacity-100"
                        : "opacity-0"
                    )}
                  />
                  <div className="flex flex-col">
                    <span>{sequence.nom}</span>
                    {sequence.formationNom && (
                      <span className="text-xs text-muted-foreground">
                        {sequence.formationNom}
                      </span>
                    )}
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </Command>
        </PopoverContent>
      </Popover>

      {selectedSequences.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {selectedSequences.map((sequence) => (
            <Badge
              key={sequence.id}
              variant="secondary"
              className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground"
              onClick={() => toggleSequence(sequence.id)}
            >
              {sequence.nom}
              <span className="ml-1">×</span>
            </Badge>
          ))}
        </div>
      )}
    </div>
  );
}
