import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Check, ChevronDown, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface DateFormation {
  id: number;
  date: string;
  heureDebut: string;
  heureFin: string;
}

interface Sequence {
  id: number;
  nom: string;
  formationNom: string;
  dates: DateFormation[];
}

interface DateFormationMultiSelectProps {
  sequences: Sequence[];
  selectedDateIds: number[];
  onSelectionChange: (dateIds: number[]) => void;
}

export function DateFormationMultiSelect({
  sequences,
  selectedDateIds,
  onSelectionChange,
}: DateFormationMultiSelectProps) {
  const [open, setOpen] = useState(false);
  const [expandedSequences, setExpandedSequences] = useState<Set<number>>(new Set());

  const toggleSequence = (sequenceId: number) => {
    const newExpanded = new Set(expandedSequences);
    if (newExpanded.has(sequenceId)) {
      newExpanded.delete(sequenceId);
    } else {
      newExpanded.add(sequenceId);
    }
    setExpandedSequences(newExpanded);
  };

  const toggleDate = (dateId: number) => {
    const newSelection = selectedDateIds.includes(dateId)
      ? selectedDateIds.filter((id) => id !== dateId)
      : [...selectedDateIds, dateId];
    onSelectionChange(newSelection);
  };

  const toggleAllDatesInSequence = (sequence: Sequence) => {
    const sequenceDateIds = sequence.dates.map((d) => d.id);
    const allSelected = sequenceDateIds.every((id) => selectedDateIds.includes(id));

    if (allSelected) {
      // Désélectionner toutes les dates de cette séquence
      onSelectionChange(selectedDateIds.filter((id) => !sequenceDateIds.includes(id)));
    } else {
      // Sélectionner toutes les dates de cette séquence
      const newSelection = Array.from(new Set([...selectedDateIds, ...sequenceDateIds]));
      onSelectionChange(newSelection);
    }
  };

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };

  const getSelectedCount = () => {
    return selectedDateIds.length;
  };

  const getSelectedLabel = () => {
    const count = getSelectedCount();
    if (count === 0) {
      return "Toutes les dates (par défaut)";
    }
    return `${count} date(s) sélectionnée(s)`;
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between"
        >
          {getSelectedLabel()}
          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[400px] p-0" align="start">
        <div className="max-h-[400px] overflow-y-auto p-2">
          {sequences.length === 0 ? (
            <div className="py-6 text-center text-sm text-muted-foreground">
              Aucune séquence disponible
            </div>
          ) : (
            <div className="space-y-1">
              {sequences.map((sequence) => {
                const sequenceDateIds = sequence.dates.map((d) => d.id);
                const allSelected = sequenceDateIds.length > 0 && 
                  sequenceDateIds.every((id) => selectedDateIds.includes(id));
                const someSelected = sequenceDateIds.some((id) => selectedDateIds.includes(id));
                const isExpanded = expandedSequences.has(sequence.id);

                return (
                  <div key={sequence.id} className="space-y-1">
                    {/* En-tête de séquence */}
                    <div className="flex items-center gap-2 rounded-sm hover:bg-accent p-2">
                      <button
                        onClick={() => toggleSequence(sequence.id)}
                        className="flex items-center gap-1 flex-1 text-left"
                      >
                        {isExpanded ? (
                          <ChevronDown className="h-4 w-4 shrink-0" />
                        ) : (
                          <ChevronRight className="h-4 w-4 shrink-0" />
                        )}
                        <div className="flex-1 min-w-0">
                          <div className="font-medium text-sm truncate">
                            {sequence.nom}
                          </div>
                          <div className="text-xs text-muted-foreground truncate">
                            {sequence.formationNom} • {sequence.dates.length} date(s)
                          </div>
                        </div>
                      </button>
                      <button
                        onClick={() => toggleAllDatesInSequence(sequence)}
                        className={cn(
                          "h-4 w-4 shrink-0 rounded-sm border border-primary",
                          allSelected
                            ? "bg-primary text-primary-foreground"
                            : someSelected
                            ? "bg-primary/50 text-primary-foreground"
                            : "opacity-50 hover:opacity-100"
                        )}
                      >
                        {(allSelected || someSelected) && (
                          <Check className="h-3 w-3" />
                        )}
                      </button>
                    </div>

                    {/* Liste des dates */}
                    {isExpanded && (
                      <div className="ml-6 space-y-1">
                        {sequence.dates.map((date) => {
                          const isSelected = selectedDateIds.includes(date.id);
                          return (
                            <button
                              key={date.id}
                              onClick={() => toggleDate(date.id)}
                              className="flex items-center gap-2 w-full rounded-sm hover:bg-accent p-2 text-left"
                            >
                              <div
                                className={cn(
                                  "h-4 w-4 shrink-0 rounded-sm border border-primary",
                                  isSelected
                                    ? "bg-primary text-primary-foreground"
                                    : "opacity-50 hover:opacity-100"
                                )}
                              >
                                {isSelected && <Check className="h-3 w-3" />}
                              </div>
                              <div className="flex-1 text-sm">
                                {formatDate(date.date)} • {date.heureDebut} - {date.heureFin}
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
        <div className="border-t p-2 text-xs text-muted-foreground">
          Si aucune date n'est sélectionnée, le rappel s'appliquera à toutes les dates
        </div>
      </PopoverContent>
    </Popover>
  );
}
