"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { authApi } from "@/lib/api";
import { authStore } from "@/lib/auth-store";
import { toast } from "@/stores/ui-store";
import { Field, FormError, Input, SubmitButton } from "@/components/ui/form";

const registerSchema = z
  .object({
    name: z.string().min(2, "Name must be at least 2 characters").max(80),
    email: z.string().email("Enter a valid email address"),
    password: z
      .string()
      .min(10, "Password must be at least 10 characters")
      .regex(/[a-zA-Z]/, "Must contain a letter")
      .regex(/[0-9]/, "Must contain a number"),
    workspaceName: z.string().min(2, "Workspace name must be at least 2 characters").max(50)
  });
type RegisterValues = z.infer<typeof registerSchema>;

export default function RegisterPage() {
  const router = useRouter();
  const [serverError, setServerError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<RegisterValues>({
    resolver: zodResolver(registerSchema),
    defaultValues: { name: "", email: "", password: "", workspaceName: "" }
  });

  const onSubmit = async (values: RegisterValues) => {
    setServerError(null);
    try {
      // POST /auth/register creates user + workspaces, then auto-logs-in
      // (server sets the httpOnly factory_refresh cookie — source of truth;
      // the access token stays in JS memory only, never localStorage).
      const result = await authApi.register({
        name: values.name,
        email: values.email,
        password: values.password,
        workspaceName: values.workspaceName
      });
      authStore.setUser(result.user, result.accessToken);
      toast("success", "Workspace created", `Welcome to ${values.workspaceName}!`);
      // Land in the workspace the API points at (team workspace when one was
      // created, else the personal workspace — W4: the API returns the
      // `workspace` object, not a bare `workspaceId`).
      router.replace(`/w/${result.workspace.id}`);
    } catch (err) {
      setServerError(err instanceof Error ? err.message : "Registration failed. Please try again.");
    }
  };

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-xl font-semibold">Create your account</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          You&apos;ll also get a private workspace to start in.
        </p>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
        <FormError message={serverError} data-testid="auth-error" />
        <Field label="Your name" htmlFor="name" error={errors.name?.message}>
          <Input id="name" autoComplete="name" placeholder="Ada Lovelace" {...register("name")} />
        </Field>
        <Field label="Email" htmlFor="reg-email" error={errors.email?.message}>
          <Input
            id="reg-email"
            type="email"
            autoComplete="email"
            placeholder="you@company.com"
            data-testid="auth-email"
            {...register("email")}
          />
        </Field>
        <Field
          label="Password"
          htmlFor="password"
          error={errors.password?.message}
          hint="At least 10 characters, with a letter and a number."
        >
          <Input
            id="password"
            type="password"
            autoComplete="new-password"
            data-testid="auth-password"
            {...register("password")}
          />
        </Field>
        <Field label="Workspace name" htmlFor="workspace" error={errors.workspaceName?.message}>
          <Input id="workspace" placeholder="Acme Inc." {...register("workspaceName")} />
        </Field>
        <SubmitButton busy={isSubmitting} data-testid="auth-submit">
          Create account
        </SubmitButton>
      </form>

      <p className="text-center text-sm text-muted-foreground">
        Already have an account?{" "}
        <Link href="/login" className="text-foreground underline underline-offset-2">
          Sign in
        </Link>
      </p>
    </div>
  );
}