"use client";

import Link from "next/link";
import { ArrowRight, Building2, Mail, UserRound } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { Spinner } from "@/components/ui/spinner";
import { AuthLayout } from "@/components/app/auth-layout";
import { AuthError, AuthHeading, IconField, PasswordField } from "../auth/auth-ui";
import { useRedirectIfSignedIn } from "../auth/auth-redirect";
import { useRegisterForm } from "./useRegisterForm";

export default function RegisterForm() {
  useRedirectIfSignedIn();
  const { form, submit, emailTaken } = useRegisterForm();
  const { errors, isSubmitting } = form.formState;
  const clearServerError = () => { if (errors.root) form.clearErrors("root"); };
  const email = form.watch("email");

  return <AuthLayout variant="register">
    <AuthHeading title="Create your buying house workspace">Free to start. Your buyers, factories and orders stay private to your team.</AuthHeading>

    <form onSubmit={submit} noValidate className="grid gap-6">
      <AuthError message={errors.root?.server?.message} />
      <FieldGroup className="gap-5">
        <IconField control={form.control} name="organizationName" id="register-organizationName" label="Buying house name" icon={Building2} placeholder="e.g. Dhaka Sourcing Ltd" autoComplete="organization" description="Shown to your team across the workspace. You can change it later." onType={clearServerError} />
        <IconField control={form.control} name="name" id="register-name" label="Your full name" icon={UserRound} placeholder="Your name" autoComplete="name" onType={clearServerError} />
        <div className="grid gap-2">
          <IconField control={form.control} name="email" id="register-email" label="Work email" icon={Mail} type="email" placeholder="name@company.com" autoComplete="email" description="You sign in with this email. We send one link to verify it." onType={clearServerError} inputProps={{ inputMode: "email", autoCapitalize: "none", spellCheck: false }} />
          {emailTaken && <Button variant="link" size="sm" className="h-auto justify-self-start p-0" asChild><Link href={`/login?email=${encodeURIComponent(email)}`}>Sign in with this email <ArrowRight /></Link></Button>}
        </div>
        <PasswordField control={form.control} name="password" id="register-password" placeholder="Create a password" autoComplete="new-password" rules onType={clearServerError} />
      </FieldGroup>

      <div className="grid gap-3">
        <Button type="submit" size="lg" className="w-full" disabled={isSubmitting}>{isSubmitting && <Spinner />} {isSubmitting ? "Creating your workspace…" : "Create my workspace"}</Button>
        <p className="text-center text-xs text-muted-foreground">You become the owner with full admin access. Next: three quick questions, then your first order.</p>
      </div>
    </form>

    <p className="mt-8 border-t pt-6 text-center text-sm text-muted-foreground">Already have an account? <Link href="/login" className="font-medium text-foreground underline-offset-4 hover:underline">Sign in</Link></p>
  </AuthLayout>;
}