/**
 * Company Multi-Select Component
 *
 * Multi-select dropdown for carrier companies
 */

'use client';

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 CompanyMultiSelectProps {
  companies: string[];
  selected: string[];
  onChange: (selected: string[]) => void;
  disabled?: boolean;
}

export function CompanyMultiSelect({
  companies,
  selected,
  onChange,
  disabled = false,
}: CompanyMultiSelectProps) {
  const [open, setOpen] = useState(false);

  const toggleCompany = (company: string) => {
    if (selected.includes(company)) {
      onChange(selected.filter(c => c !== company));
    } else {
      onChange([...selected, company]);
    }
  };

  const clearAll = () => {
    onChange([]);
  };

  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"
            disabled={disabled}
          >
            <span className="truncate">
              {selected.length === 0
                ? 'Sélectionner des compagnies...'
                : `${selected.length} compagnie${selected.length > 1 ? 's' : ''} sélectionnée${
                    selected.length > 1 ? 's' : ''
                  }`}
            </span>
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-full p-0">
          <Command>
            <CommandInput placeholder="Rechercher une compagnie..." />
            <CommandEmpty>Aucune compagnie trouvée.</CommandEmpty>
            <CommandGroup className="max-h-64 overflow-auto">
              {companies.map(company => (
                <CommandItem key={company} onSelect={() => toggleCompany(company)}>
                  <Check
                    className={cn(
                      'mr-2 h-4 w-4',
                      selected.includes(company) ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                  {company}
                </CommandItem>
              ))}
            </CommandGroup>
          </Command>
        </PopoverContent>
      </Popover>

      {/* Selected companies badges */}
      {selected.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {selected.map(company => (
            <Badge key={company} variant="secondary" className="gap-1">
              {company}
              <button
                type="button"
                onClick={() => toggleCompany(company)}
                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                disabled={disabled}
              >
                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </Badge>
          ))}
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={clearAll}
            disabled={disabled}
            className="h-6 text-xs"
          >
            Tout effacer
          </Button>
        </div>
      )}
    </div>
  );
}
