import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { DialogFooter } from "@/components/ui/dialog";
import { stepSchema } from "./schemas/stepSchema";
import { useFormPersistence } from "@/hooks/useFormPersistence";
import { StepTypeField } from "./fields/StepTypeField";
import { StepDayField } from "./fields/StepDayField";
import { StepLocationField } from "./fields/StepLocationField";
import { StepActivityField } from "./fields/StepActivityField";
import { TransportFields } from "./fields/TransportFields";
import { MealFields } from "./fields/MealFields";
import { AccommodationFields } from "./fields/AccommodationFields";
import { ActivityFields } from "./fields/ActivityFields";
import { BreakFields } from "./fields/BreakFields";
import { TicketFields } from "./fields/TicketFields";
import { OtherFields } from "./fields/OtherFields";
import { InternalNotesField } from "./fields/InternalNotesField";
import { StepLinksField } from "./fields/StepLinksField";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "@/components/ui/accordion";
import { StepFormData } from "./schemas/stepSchema";

interface AddStepFormProps {
  onSubmit: (values: z.infer<typeof stepSchema>) => Promise<boolean>;
  onCancel: () => void;
  initialDay?: number;
}

export function AddStepForm({ onSubmit, onCancel, initialDay = 1 }: AddStepFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const form = useForm<z.infer<typeof stepSchema>>({
    resolver: zodResolver(stepSchema),
    defaultValues: {
      day: initialDay,
      time: "09:00",
      location: "",
      activity: "",
      price: undefined,
      distance: "",
      link: "",
      links: [],
      stepType: "activity",
    },
  });

  const { clearSavedData } = useFormPersistence(form, "step-form-draft");
  const stepType = form.watch("stepType");

  const renderStepTypeFields = () => {
    switch (stepType) {
      case "transport":
        return <TransportFields form={form} />;
      case "meal":
        return <MealFields form={form} />;
      case "accommodation":
        return <AccommodationFields form={form} />;
      case "activity":
        return <ActivityFields form={form} />;
      case "break":
        return <BreakFields form={form} />;
      case "ticket":
        return <TicketFields form={form} />;
      case "other":
        return <OtherFields form={form} />;
      default:
        return null;
    }
  };

  const handleSubmit = async (values: z.infer<typeof stepSchema>) => {
    setIsSubmitting(true);
    try {
      const succeeded = await onSubmit(values);
      if (succeeded) clearSavedData();
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
        <StepTypeField form={form} />

        <StepDayField form={form} />

        <div className="grid grid-cols-1 gap-4">
          <StepActivityField form={form} />
          <StepLocationField form={form} />
        </div>

        {renderStepTypeFields()}

        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="links">
            <AccordionTrigger className="text-sm font-medium">
              Liens externes
            </AccordionTrigger>
            <AccordionContent>
              <StepLinksField form={form} />
            </AccordionContent>
          </AccordionItem>

          <AccordionItem value="notes">
            <AccordionTrigger className="text-sm font-medium">
              Notes internes
            </AccordionTrigger>
            <AccordionContent>
              <InternalNotesField form={form} />
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        <DialogFooter className="gap-2 sm:gap-0 mt-4">
          <Button type="button" variant="outline" onClick={onCancel}>
            Annuler
          </Button>
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting ? "Ajout en cours..." : "Ajouter"}
          </Button>
        </DialogFooter>
      </form>
    </Form>
  );
}