import { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { TripStep } from "@/types";
import { stepSchema, StepFormData } from "@/components/forms/schemas/stepSchema";
import { useTrips } from "@/contexts/TripContext";
import { toast } from "sonner";
import { isStepDayWithinTrip } from "@/services/itineraryGuards";

interface UseEditStepFormProps {
  step: TripStep;
  tripId: string;
  onClose: () => void;
}

export function useEditStepForm({ step, tripId, onClose }: UseEditStepFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const submittingRef = useRef(false);
  const { updateTripStep, getTrip } = useTrips();

  // Déterminer le type d'étape à partir des données existantes
  const determineStepType = (step: TripStep): StepFormData['stepType'] => {
    if (step.stepType) return step.stepType;

    // Logique de détermination basée sur les noms d'activités
    const activityLower = step.activity.toLowerCase();
    if (activityLower.includes('transport') || activityLower.includes('train') ||
        activityLower.includes('vol') || activityLower.includes('avion')) {
      return 'transport';
    } else if (activityLower.includes('repas') || activityLower.includes('restaurant') ||
               activityLower.includes('déjeuner') || activityLower.includes('dîner')) {
      return 'meal';
    } else if (activityLower.includes('hôtel') || activityLower.includes('logement') ||
               activityLower.includes('hébergement')) {
      return 'accommodation';
    } else if (activityLower.includes('pause') || activityLower.includes('repos')) {
      return 'break';
    } else if (activityLower.includes('billet') || activityLower.includes('ticket')) {
      return 'ticket';
    }

    // Par défaut
    return 'activity';
  };

  // Préparer les liens dans le bon format
  const formattedLinks = (() => {
    // Vérifier d'abord si step.links est défini et est un tableau
    if (step.links && Array.isArray(step.links)) {
      return step.links.map(link => ({
        url: link.url,
        title: link.title
      }));
    }
    // Sinon, si on a juste un lien simple
    else if (step.link) {
      return [{ url: step.link, title: "Lien principal" }];
    }
    // Par défaut, retourner un tableau vide
    return [];
  })();

  const form = useForm<StepFormData>({
    resolver: zodResolver(stepSchema),
    defaultValues: {
      day: step.day,
      time: step.time,
      location: step.location,
      activity: step.activity,
      price: step.price ? String(step.price) : "",
      distance: step.distance || "",
      link: step.link || "",
      links: formattedLinks,
      stepType: step.stepType || determineStepType(step),
      startTime: step.startTime || step.time || "",
      endTime: step.endTime || "",
      description: step.description || "",
      transportType: step.transportType || "",
      referenceNumber: step.referenceNumber || "",
      departureName: step.departureName || "",
      arrivalName: step.arrivalName || "",
      estimatedDuration: step.estimatedDuration || "",
      restaurantName: step.restaurantName || "",
      cuisineType: step.cuisineType || "",
      budget: step.budget || "",
      accommodationName: step.accommodationName || "",
      roomType: step.roomType || "",
      checkInTime: step.checkInTime || "",
      checkOutTime: step.checkOutTime || "",
      reservationNumber: step.reservationNumber || "",
      activityType: step.activityType || "",
      guideName: step.guideName || "",
      walkingLevel: step.walkingLevel || "",
      breakPurpose: step.breakPurpose || "",
      internalNotes: step.internalNotes || "",
    },
  });

  const stepType = form.watch("stepType");

  // Persistance du formulaire lors des changements d'onglet
  useEffect(() => {
    // Sauvegarder les données du formulaire lors de la perte de focus
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'hidden') {
        const formData = form.getValues();
        sessionStorage.setItem(`editStepForm_${step.id}`, JSON.stringify(formData));
      } else if (document.visibilityState === 'visible') {
        // Restaurer les données si elles existent
        const savedFormData = sessionStorage.getItem(`editStepForm_${step.id}`);
        if (savedFormData) {
          try {
            const parsedData = JSON.parse(savedFormData);
            form.reset(parsedData);
            // Nettoyer après restauration
            sessionStorage.removeItem(`editStepForm_${step.id}`);
          } catch (e) {
            console.error("Erreur lors de la restauration des données du formulaire:", e);
          }
        }
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      // Nettoyer les données sauvegardées lors du démontage
      sessionStorage.removeItem(`editStepForm_${step.id}`);
    };
  }, [form, step.id]);

  const onSubmit = async (data: StepFormData) => {
    if (submittingRef.current) return;
    const trip = getTrip(tripId);
    if (!trip || !isStepDayWithinTrip(data.day, trip.startDate, trip.endDate)) {
      toast.error("Cette étape doit être placée pendant les dates du voyage.");
      return;
    }
    submittingRef.current = true;
    setIsSubmitting(true);
    try {
      // Convert price to number if provided
      const price = data.price ? parseFloat(data.price) : null;

      // Vérifier que les liens sont bien formatés avant l'envoi
      const safeLinks = Array.isArray(data.links)
        ? data.links
            .filter(link => link && typeof link === 'object' && link.url && link.title)
            .map(link => {
              // Ajouter le protocole si absent
              let url = link.url;
              if (url && !url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'https://' + url;
              }
              return {
                url: url,
                title: link.title
              };
            })
        : [];

      const updatedStep = await updateTripStep(tripId, step.id, {
        day: data.day,
        time: data.time,
        location: data.location,
        activity: data.activity,
        price: price,
        distance: data.distance || null,
        links: safeLinks,
        link: safeLinks.length > 0 ? safeLinks[0].url : null,
        stepType: data.stepType,
        startTime: data.startTime,
        endTime: data.endTime,
        description: data.description,
        transportType: data.transportType,
        referenceNumber: data.referenceNumber,
        departureName: data.departureName,
        arrivalName: data.arrivalName,
        estimatedDuration: data.estimatedDuration,
        restaurantName: data.restaurantName,
        cuisineType: data.cuisineType,
        budget: data.budget,
        accommodationName: data.accommodationName,
        roomType: data.roomType,
        checkInTime: data.checkInTime,
        checkOutTime: data.checkOutTime,
        reservationNumber: data.reservationNumber,
        activityType: data.activityType,
        guideName: data.guideName,
        walkingLevel: data.walkingLevel,
        breakPurpose: data.breakPurpose,
        internalNotes: data.internalNotes,
      });

      if (updatedStep) {
        toast.success("Étape mise à jour avec succès");
        // Réinitialiser les états locaux
        sessionStorage.setItem('justEditedTrip', 'true');
        onClose();
      } else {
        toast.error("Erreur lors de la mise à jour de l'étape");
      }
    } catch (error) {
      console.error("Erreur lors de la mise à jour de l'étape:", error);
      toast.error("Erreur lors de la mise à jour de l'étape");
    } finally {
      submittingRef.current = false;
      setIsSubmitting(false);
    }
  };

  return {
    form,
    stepType,
    isSubmitting,
    onSubmit: form.handleSubmit(onSubmit),
  };
}