import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2 } from "lucide-react";
import { Trip } from "@/types";
import { tripFormSchema, TripFormData } from "@/components/forms/schemas/tripFormSchema";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { DateRangePicker } from "@/components/forms/DateRangePicker";
import { TravelerSelect } from "@/components/forms/TravelerSelect";
import { CoverImageUpload } from "@/components/forms/CoverImageUpload";
import { useEditTripForm } from "@/hooks/useEditTripForm";
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";

interface EditTripFormProps {
  trip: Trip;
  onClose: (success?: boolean) => void;
}

export function EditTripForm({ trip, onClose }: EditTripFormProps) {
  const {
    form,
    isSubmitting,
    tripDuration,
    formatTripDuration,
    travelers,
    searchTerm,
    setSearchTerm,
    handleSelectTraveler,
    handleNewTraveler,
    handleNoTraveler,
    onSubmit,
    isCreatingNewTraveler
  } = useEditTripForm({
    trip,
    onSuccess: () => {
      onClose(true);
    }
  });

  const isDirty = form.formState.isDirty;
  const isValid = form.formState.isValid;

  const handleCancel = () => {
    onClose(false);
  };

  return (
        <Form {...form}>
          <form onSubmit={onSubmit} className="space-y-8">
            <CoverImageUpload
              control={form.control}
              initialCoverUrl={trip.coverUrl}
              note="Cette image sera utilisée comme couverture et bannière du voyage"
            />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Titre du voyage</FormLabel>
                    <FormControl>
                      <Input placeholder="Mon voyage à Paris" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="destination"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Destination</FormLabel>
                    <FormControl>
                      <Input placeholder="Paris, France" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <DateRangePicker
              control={form.control}
              tripDuration={tripDuration}
              formatTripDuration={formatTripDuration}
            />

            {tripDuration !== null && (
              <div className="text-sm text-muted-foreground -mt-4">
                Durée du voyage : <span className="font-medium">{formatTripDuration(tripDuration)}</span>
              </div>
            )}

            <TravelerSelect
              control={form.control}
              isEditMode={false}
              travelers={travelers}
              searchTerm={searchTerm}
              setSearchTerm={setSearchTerm}
              handleSelectTraveler={handleSelectTraveler}
              handleNewTraveler={handleNewTraveler}
              handleNoTraveler={handleNoTraveler}
            />

            <div className="flex gap-3 justify-end pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={handleCancel}
              >
                Annuler
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting || !isDirty || !isValid}
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Enregistrement...
                  </>
                ) : (
                  "Enregistrer les modifications"
                )}
              </Button>
            </div>
          </form>
        </Form>
  );
}