import React from "react";
import { Document, TripMember, TripStep } from "@/types";
import { TripStepCard } from "../step/TripStepCard";
import { Button } from "@/components/ui/button";
import { Plus, Copy, MoreHorizontal, Trash } from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { addDays, format, parseISO } from "date-fns";
import { fr } from "date-fns/locale";

interface TimelineDayProps {
  day: number;
  steps: TripStep[];
  tripId: string;
  isPlanner: boolean;
  onAddStep: (day?: number) => void;
  startDate?: string;
  dayDate?: string;
  onDuplicateDay: (day: number, steps: TripStep[]) => Promise<void>;
  onDeleteDay: (day: number) => Promise<void>;
  members?: TripMember[];
  documents?: Document[];
  onSelectStep?: (step: TripStep, dayDate?: string | null) => void;
  selectedStepId?: string | null;
}

export function TimelineDay({
  day,
  steps,
  tripId,
  isPlanner,
  onAddStep,
  startDate,
  dayDate: isoDayDate,
  onDuplicateDay,
  onDeleteDay,
  members,
  documents,
  onSelectStep,
  selectedStepId,
}: TimelineDayProps) {
  // Calculer la date réelle en fonction du jour et de la date de début
  const getDayDate = () => {
    if (!startDate) return null;

    try {
      // Parser la date de début et ajouter le jour (minus 1 car les jours commencent à 1)
      const date = isoDayDate ? parseISO(isoDayDate) : addDays(parseISO(startDate), day - 1);
      // Formater la date dans le format français
      return format(date, "EEEE d MMMM yyyy", { locale: fr });
    } catch (error) {
      console.error("Erreur lors du calcul de la date:", error);
      return null;
    }
  };

  // Récupérer la date formatée pour ce jour
  const dayDate = getDayDate();

  return (
    <div className="timeline-day relative">
      <div className="day-header mb-5 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
        <h3 className="flex items-center text-lg font-bold sm:text-xl">
          <span className="mr-3 flex h-9 w-9 items-center justify-center rounded-xl bg-secondary text-sm text-white">
            {day}
          </span>
          <span>Jour {day}</span>
          {dayDate && (
            <span className="ml-2 hidden text-sm font-medium text-muted-foreground sm:inline">
              - {dayDate}
            </span>
          )}
        </h3>

        <div className="flex gap-1">
          {isPlanner && (
            <>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => onAddStep(day)}
                className="h-8"
              >
                <Plus className="h-4 w-4 mr-1" />
                Ajouter
              </Button>
              <DropdownMenu><DropdownMenuTrigger asChild><Button size="icon" variant="ghost" className="h-8 w-8" aria-label={`Actions du jour ${day}`}><MoreHorizontal className="h-4 w-4" /></Button></DropdownMenuTrigger><DropdownMenuContent align="end"><DropdownMenuItem onClick={() => void onDuplicateDay(day, steps)}><Copy className="mr-2 h-4 w-4" />Dupliquer la journée</DropdownMenuItem><DropdownMenuItem className="text-destructive" onClick={() => { if (window.confirm(`Êtes-vous sûr de vouloir supprimer le jour ${day} et toutes ses étapes ?`)) void onDeleteDay(day); }}><Trash className="mr-2 h-4 w-4" />Supprimer la journée</DropdownMenuItem></DropdownMenuContent></DropdownMenu>
            </>
          )}
        </div>
      </div>

      <div className="timeline-steps relative ml-[17px] border-l border-border pl-6 sm:pl-8">
        {steps.map((step) => (
          <div key={step.id} className="mb-5">
            <TripStepCard
              step={step}
              tripId={tripId}
              isPlanner={isPlanner}
              dayDate={dayDate}
              members={members}
              documentsCount={documents?.filter((document) => document.stepId === step.id).length || 0}
              onSelectStep={onSelectStep}
              selected={selectedStepId === step.id}
            />
          </div>
        ))}
      </div>

      {isPlanner && steps.length === 0 && (
        <div className="ml-10 mb-4 rounded-xl bg-muted/40 px-5 py-10 text-center">
          <h4 className="font-semibold">Votre journée est encore vide</h4><p className="mt-1 text-sm text-muted-foreground">Ajoutez le premier transport, hébergement ou activité.</p>
          <Button size="sm" onClick={() => onAddStep(day)} className="mt-4"><Plus className="mr-2 h-4 w-4" />Ajouter une étape</Button>
        </div>
      )}
      {isPlanner && steps.length > 0 && <Button variant="ghost" onClick={() => onAddStep(day)} className="ml-10 mt-1"><Plus className="mr-2 h-4 w-4" />Ajouter une étape</Button>}
    </div>
  );
}