"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema, type RegisterInput } from "@/lib/validation/schemas";
import { createClient } from "@/lib/supabase/client";
import { AuthLayout } from "@/components/layout/auth-layout";
import { Input, Label, FieldError, Select } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useTranslations } from "@/lib/i18n/i18n-provider";
import type { Locale } from "@/lib/i18n/config";

export function RegisterForm({ locale }: { locale: string }) {
  const t = useTranslations();
  const router = useRouter();
  const [serverError, setServerError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: { preferredLanguage: locale as Locale }
  });

  async function onSubmit(values: RegisterInput) {
    setServerError(null);
    const supabase = createClient();
    const { error } = await supabase.auth.signUp({
      email: values.email,
      password: values.password,
      options: {
        data: {
          first_name: values.firstName,
          preferred_language: values.preferredLanguage
        },
        emailRedirectTo: `${window.location.origin}/${values.preferredLanguage}/onboarding`
      }
    });

    if (error) {
      setServerError(
        error.message.toLowerCase().includes("already")
          ? t("auth.errors.emailInUse")
          : t("common.somethingWentWrong")
      );
      return;
    }

    router.push(`/${values.preferredLanguage}/onboarding`);
    router.refresh();
  }

  return (
    <AuthLayout locale={locale} title={t("auth.register.title")} subtitle={t("auth.register.subtitle")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="firstName">{t("auth.register.firstName")}</Label>
          <Input id="firstName" autoComplete="given-name" error={errors.firstName?.message} {...register("firstName")} />
          <FieldError id="firstName-error">{errors.firstName?.message}</FieldError>
        </div>
        <div>
          <Label htmlFor="email">{t("auth.register.email")}</Label>
          <Input id="email" type="email" autoComplete="email" error={errors.email?.message} {...register("email")} />
          <FieldError id="email-error">{errors.email?.message}</FieldError>
        </div>
        <div>
          <Label htmlFor="password">{t("auth.register.password")}</Label>
          <Input
            id="password"
            type="password"
            autoComplete="new-password"
            error={errors.password?.message}
            {...register("password")}
          />
          <FieldError id="password-error">{errors.password?.message}</FieldError>
        </div>
        <div>
          <Label htmlFor="preferredLanguage">{t("auth.register.language")}</Label>
          <Select id="preferredLanguage" {...register("preferredLanguage")}>
            <option value="en">English</option>
            <option value="pl">Polski</option>
          </Select>
        </div>

        {serverError && <p role="alert" className="text-sm text-red-600">{serverError}</p>}

        <Button type="submit" className="w-full" loading={isSubmitting}>
          {t("auth.register.submit")}
        </Button>

        <p className="text-center text-xs text-ink-400">{t("auth.register.terms")}</p>
      </form>

      <p className="mt-6 text-center text-sm text-ink-500">
        {t("auth.register.haveAccount")}{" "}
        <Link href={`/${locale}/login`} className="font-medium text-brand-600 hover:underline">
          {t("auth.register.logIn")}
        </Link>
      </p>
    </AuthLayout>
  );
}