import { useState } from "react";
import { Control, useWatch } from "react-hook-form";
import { Check, ChevronsUpDown, User as UserIcon, UserPlus } from "lucide-react";
import { User } from "@/types";
import { TripFormData } from "./schemas/tripFormSchema";
import { FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Button } from "../ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../ui/command";
import { NewTravelerForm } from "./traveler/NewTravelerForm";

interface TravelerSelectProps {
  control: Control<TripFormData>;
  isEditMode: boolean;
  travelers: User[];
  searchTerm: string;
  setSearchTerm: (term: string) => void;
  handleSelectTraveler: (traveler: User) => void;
  handleNewTraveler: () => void;
  handleNoTraveler: () => void;
}

export function TravelerSelect({ control, travelers, searchTerm, setSearchTerm, handleSelectTraveler, handleNewTraveler, handleNoTraveler }: TravelerSelectProps) {
  const [open, setOpen] = useState(false);
  const [isCreatingNew, setIsCreatingNew] = useState(false);
  const travelerType = useWatch({ control, name: "travelerType" });
  const existingTraveler = useWatch({ control, name: "existingTraveler" });
  const newTraveler = useWatch({ control, name: "newTraveler" });
  const label = travelerType === "existing" && existingTraveler?.name
    ? existingTraveler.name
    : travelerType === "new" && newTraveler?.name
      ? newTraveler.name
      : travelerType === "none" ? "Aucun voyageur pour le moment" : "Sélectionner un voyageur";

  const close = () => {
    setOpen(false);
    setSearchTerm("");
  };

  return <FormField control={control} name="travelerType" render={() => (
    <FormItem>
      <FormLabel>Voyageur</FormLabel>
      <Popover open={open} onOpenChange={(next) => { setOpen(next); if (next) setIsCreatingNew(false); }}>
        <PopoverTrigger asChild>
          <Button type="button" variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between font-normal">
            <span className="flex min-w-0 items-center gap-2"><UserIcon className="h-4 w-4 shrink-0" /><span className="truncate">{label}</span></span>
            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent align="start" sideOffset={6} collisionPadding={20} className="z-[80] w-[var(--radix-popover-trigger-width)] max-w-[calc(100vw-3rem)] p-0">
          {!isCreatingNew ? <Command shouldFilter={false}>
            <CommandInput placeholder="Rechercher un voyageur..." value={searchTerm} onValueChange={setSearchTerm} />
            <CommandList className="max-h-64 overflow-y-auto">
              <CommandEmpty>Aucun voyageur trouvé.</CommandEmpty>
              <CommandGroup heading="Voyageurs existants">
                {travelers.map((traveler) => <CommandItem key={traveler.id || traveler.email} value={`${traveler.name} ${traveler.email}`} onSelect={() => { handleSelectTraveler(traveler); close(); }} className="cursor-pointer">
                  <span className="min-w-0 flex-1"><span className="block truncate font-medium">{traveler.name}</span><span className="block truncate text-xs text-muted-foreground">{traveler.email}</span></span>
                  <Check className={`h-4 w-4 ${existingTraveler?.id === traveler.id ? "opacity-100" : "opacity-0"}`} />
                </CommandItem>)}
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup>
                <CommandItem onSelect={() => { handleNewTraveler(); setIsCreatingNew(true); }} className="cursor-pointer text-primary"><UserPlus className="mr-2 h-4 w-4" />Créer un nouveau voyageur</CommandItem>
                <CommandItem onSelect={() => { handleNoTraveler(); close(); }} className="cursor-pointer text-muted-foreground">Aucun voyageur pour le moment</CommandItem>
              </CommandGroup>
            </CommandList>
          </Command> : <NewTravelerForm control={control} onCancel={() => setIsCreatingNew(false)} onSubmit={close} />}
        </PopoverContent>
      </Popover>
      <FormDescription>Vous pouvez inviter plusieurs participants plus tard. Les membres déjà associés restent dans le voyage.</FormDescription>
      <FormMessage />
    </FormItem>
  )} />;
}