import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { AddStepForm } from "../forms/AddStepForm";
import { useTrips } from "../../contexts/TripContext";
import { z } from "zod";
import { stepSchema } from "../forms/schemas/stepSchema";
import { StepLink } from "@/types";
import { toast } from "sonner";
import { useRef } from "react";
import { isStepDayWithinTrip } from "@/services/itineraryGuards";
import { getStepMutationErrorMessage } from "@/utils/errorHandlers";

interface AddStepDialogProps {
  isOpen: boolean;
  onClose: () => void;
  tripId: string;
  initialDay?: number;
  startDate: string;
  endDate: string;
}

export function AddStepDialog({ isOpen, onClose, tripId, initialDay, startDate, endDate }: AddStepDialogProps) {
  const { addTripStep } = useTrips();
  const submittingRef = useRef(false);

  async function onSubmit(values: z.infer<typeof stepSchema>) {
    if (submittingRef.current) return false;
    if (!isStepDayWithinTrip(values.day, startDate, endDate)) {
      toast.error("Cette étape doit être placée pendant les dates du voyage.");
      return false;
    }
    submittingRef.current = true;
    try {
      console.group('➕ Ajout d\'une étape au voyage');
      console.info('Données du formulaire:', values);
      console.info('ID du voyage:', tripId);

      // Ensure links property meets the required type
      const links = values.links?.map(link => ({
        url: link.url || "",
        title: link.title || ""
      })).filter(link => link.url && link.title) as StepLink[] | undefined;

      const stepData = {
        day: values.day,
        time: values.time,
        location: values.location,
        activity: values.activity,
        price: values.price ? Number(values.price) : undefined,
        distance: values.distance,
        link: values.link,
        // S'assurer que le type d'étape est toujours défini
        stepType: values.stepType || "activity",
        startTime: values.startTime,
        endTime: values.endTime,
        description: values.description,
        transportType: values.transportType,
        referenceNumber: values.referenceNumber,
        departureName: values.departureName,
        arrivalName: values.arrivalName,
        estimatedDuration: values.estimatedDuration,
        restaurantName: values.restaurantName,
        cuisineType: values.cuisineType,
        budget: values.budget,
        accommodationName: values.accommodationName,
        roomType: values.roomType,
        checkInTime: values.checkInTime,
        checkOutTime: values.checkOutTime,
        reservationNumber: values.reservationNumber,
        activityType: values.activityType,
        guideName: values.guideName,
        walkingLevel: values.walkingLevel,
        breakPurpose: values.breakPurpose,
        internalNotes: values.internalNotes,
        links: links,
        validationStatus: "pending" as const,
      };

      console.info('Données formatées de l\'étape:', stepData);
      const newStep = await addTripStep(tripId, stepData);
      if (!newStep) {
        toast.error("Erreur lors de l'ajout de l'étape");
        return false;
      }
      toast.success("Étape ajoutée avec succès !");
      console.info('✅ Étape ajoutée avec succès');
      console.groupEnd();
      onClose();
      return true;
    } catch (error) {
      console.error("❌ Erreur lors de l'ajout de l'étape:", error);
      toast.error(getStepMutationErrorMessage(error));
      console.groupEnd();
      return false;
    } finally {
      submittingRef.current = false;
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Ajouter une étape</DialogTitle>
          <DialogDescription id="step-dialog-description">
            Complétez le formulaire ci-dessous pour ajouter une nouvelle étape à votre itinéraire.
          </DialogDescription>
        </DialogHeader>
        <AddStepForm onSubmit={onSubmit} onCancel={onClose} initialDay={initialDay} />
      </DialogContent>
    </Dialog>
  );
}