"use client";

import React, { useEffect } from "react";
import * as z from "zod";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { RegisterSchema } from "@/lib/db/schemas";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { PasswordInput } from "@/components/ui/PasswordInput";
import { CardWrapper } from "@/components/auth/CardWrapper";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/Spinner";
import { register } from "@/actions/register";
import { useRouter } from "next/navigation";
import { useAction } from "@/hooks/useAction";

const RegisterForm = () => {
  const router = useRouter();
  const { execute, isLoading, validationErrors } = useAction(register);

  const form = useForm<z.infer<typeof RegisterSchema>>({
    resolver: zodResolver(RegisterSchema),
    defaultValues: {
      email: "",
      password: "",
      firstName: "",
      lastName: "",
    },
  });

  // Sync server-side validation errors
  useEffect(() => {
    if (validationErrors) {
      Object.keys(validationErrors).forEach((key) => {
        form.setError(key as any, {
          type: "server",
          message: validationErrors[key][0],
        });
      });
    }
  }, [validationErrors, form]);

  const onSubmit = async (values: z.infer<typeof RegisterSchema>) => {
    const result = await execute(values);
    if (result?.success) {
      router.push("/auth/login");
    }
  };

  return (
    <CardWrapper
      headerLabel="Neues Kundenkonto anlegen"
      backButtonLabel="Jetzt Anmelden"
      backButtonHref="/auth/login"
      showSocial
    >
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <div className="space-y-4">
            <FormField
              control={form.control}
              name="firstName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Vorname</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      disabled={isLoading}
                      placeholder="Vorname"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="lastName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nachname</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      disabled={isLoading}
                      placeholder="Nachname"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>E-Mail</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      disabled={isLoading}
                      placeholder="E-Mail-Adresse"
                      type="email"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Passwort</FormLabel>
                  <FormControl>
                    <PasswordInput
                      {...field}
                      disabled={isLoading}
                      placeholder="******"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
          <Button disabled={isLoading} type="submit" className="w-full">
            {isLoading && <Spinner className="mr-2 h-4 w-4" />}
            {isLoading ? "Wird registriert..." : "Jetzt registrieren"}
          </Button>
        </form>
      </Form>
    </CardWrapper>
  );
};

export default RegisterForm;