import { useFieldArray, UseFormReturn, useWatch } from "react-hook-form";
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { StepFormData } from "@/components/forms/schemas/stepSchema";
import { X, Plus } from "lucide-react";
import { useEffect } from "react";

interface StepLinksFieldProps {
  form: UseFormReturn<StepFormData>;
}

export function StepLinksField({ form }: StepLinksFieldProps) {
  const { fields, append, remove } = useFieldArray({
    name: "links",
    control: form.control,
  });
  const currentLinks = useWatch({ control: form.control, name: "links" });

  // Si aucun lien n'est défini et que l'utilisateur a saisi un lien dans le champ legacy
  useEffect(() => {
    const linkValue = form.watch("link");
    const links = form.watch("links");

    if (linkValue && (!links || links.length === 0)) {
      // Ajouter le lien legacy comme premier lien
      append({ url: linkValue, title: "Lien principal" });

      // Réinitialiser le champ legacy
      form.setValue("link", "");
    }
  }, [form, append]);

  // Debug des liens
  useEffect(() => {
    console.log("Liens actuels dans le formulaire:", currentLinks);
  }, [currentLinks]);

  return (
    <div className="space-y-4">
      <FormLabel>Liens</FormLabel>
      <div className="space-y-3">
        {fields.map((field, index) => (
          <div key={field.id} className="flex gap-2 items-start">
            <div className="grid grid-cols-5 gap-2 flex-1">
              <FormField
                control={form.control}
                name={`links.${index}.title`}
                render={({ field }) => (
                  <FormItem className="col-span-2">
                    <FormControl>
                      <Input
                        placeholder="Titre"
                        {...field}
                        className="w-full"
                        required
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name={`links.${index}.url`}
                render={({ field }) => (
                  <FormItem className="col-span-3">
                    <FormControl>
                      <Input
                        placeholder="URL (ex: monsite.com)"
                        {...field}
                        className="w-full"
                        required
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <Button
              type="button"
              variant="outline"
              size="icon"
              onClick={() => remove(index)}
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
        ))}
      </div>
      <Button
        type="button"
        variant="outline"
        size="sm"
        className="mt-2"
        onClick={() => append({ title: "", url: "" })}
      >
        <Plus className="h-4 w-4 mr-2" />
        Ajouter un lien
      </Button>
    </div>
  );
}