"use client";

import { useEffect, useState } from "react";

import { useRouter } from "next/navigation";

import { zodResolver } from "@hookform/resolvers/zod";
import { Eye, EyeOff } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useRegister } from "@/hooks/auth/use-auth-queries";
import { useAuthErrors } from "@/stores/auth/auth-store";

const FormSchema = z
  .object({
    username: z.string().min(3, { message: "Le nom d'utilisateur doit contenir au moins 3 caractères." }),
    email: z.string().email({ message: "Veuillez entrer une adresse email valide." }),
    password: z.string().min(8, { message: "Le mot de passe doit contenir au moins 8 caractères." }),
    confirmPassword: z.string().min(8, { message: "La confirmation doit contenir au moins 8 caractères." }),
    first_name: z.string().min(2, { message: "Le prénom doit contenir au moins 2 caractères." }),
    last_name: z.string().min(2, { message: "Le nom doit contenir au moins 2 caractères." }),
    phone_number: z.string().min(8, { message: "Le numéro de téléphone est requis." }),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Les mots de passe ne correspondent pas.",
    path: ["confirmPassword"],
  });

export function RegisterForm() {
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const router = useRouter();
  const registerMutation = useRegister();
  const { registerError, clearError } = useAuthErrors();

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      username: "",
      email: "",
      password: "",
      confirmPassword: "",
      first_name: "",
      last_name: "",
      phone_number: "",
    },
  });

  // Effet pour appliquer les erreurs de champs au formulaire
  useEffect(() => {
    if (registerError?.details) {
      // Mapper les noms de champs Django vers les noms du formulaire
      const fieldMapping: Record<string, keyof z.infer<typeof FormSchema>> = {
        username: "username",
        email: "email",
        first_name: "first_name",
        last_name: "last_name",
        phone_number: "phone_number",
        password: "password",
        re_password: "confirmPassword",
      };

      Object.entries(registerError.details).forEach(([djangoField, messages]) => {
        const formField = fieldMapping[djangoField];
        if (formField && messages.length > 0) {
          form.setError(formField, {
            type: "manual",
            message: messages[0],
          });
        }
      });
    }
  }, [registerError, form]);

  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    clearError(); // Effacer les erreurs précédentes
    form.clearErrors(); // Effacer les erreurs de formulaire

    try {
      await registerMutation.mutateAsync({
        username: data.username,
        email: data.email,
        password: data.password,
        re_password: data.confirmPassword,
        first_name: data.first_name,
        last_name: data.last_name,
        phone_number: data.phone_number,
      });

      // Rediriger vers la page de connexion après inscription réussie
      router.push("/auth/login?message=registration-success");
    } catch (error) {
      // L'erreur est déjà gérée par le hook useRegister et sera traitée par useEffect
      console.error("Erreur d'inscription:", error);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {/* Afficher les erreurs générales */}
        {registerError && (
          <div className="bg-destructive/15 text-destructive rounded-md p-3 text-sm">{registerError.message}</div>
        )}

        <div className="grid grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="first_name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Prénom</FormLabel>
                <FormControl>
                  <Input
                    {...field}
                    placeholder="Jean"
                    autoComplete="given-name"
                    disabled={registerMutation.isPending}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="last_name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nom</FormLabel>
                <FormControl>
                  <Input
                    {...field}
                    placeholder="Dupont"
                    autoComplete="family-name"
                    disabled={registerMutation.isPending}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nom d'utilisateur</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  placeholder="jeandupont"
                  autoComplete="username"
                  disabled={registerMutation.isPending}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Adresse Email</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="email"
                  placeholder="votre@email.com"
                  autoComplete="email"
                  disabled={registerMutation.isPending}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="phone_number"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Numéro de téléphone</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="tel"
                  placeholder="+237xxxxxxxx"
                  autoComplete="tel"
                  disabled={registerMutation.isPending}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Mot de passe</FormLabel>
              <FormControl>
                <div className="relative">
                  <Input
                    {...field}
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    autoComplete="new-password"
                    disabled={registerMutation.isPending}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword(!showPassword)}
                    disabled={registerMutation.isPending}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="confirmPassword"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Confirmer le mot de passe</FormLabel>
              <FormControl>
                <div className="relative">
                  <Input
                    {...field}
                    type={showConfirmPassword ? "text" : "password"}
                    placeholder="••••••••"
                    autoComplete="new-password"
                    disabled={registerMutation.isPending}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    disabled={registerMutation.isPending}
                  >
                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button className="w-full" type="submit" disabled={registerMutation.isPending}>
          {registerMutation.isPending ? "Inscription..." : "S'inscrire"}
        </Button>
      </form>
    </Form>
  );
}