"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { MailCheck } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { recordLegalAcceptance } from "@/actions/legal";
import { AuthCard } from "@/components/auth/auth-card";
import { PasswordInput, PasswordRequirements, passwordStrong } from "@/components/auth/password-input";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, FieldError, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

const ACCESS_DENIED = "This email is not on the access list. Ask your Fetcha administrator to invite you.";

export function SignupForm({ next, initialEmail }: { next?: string; initialEmail?: string }) {
  const router = useRouter();
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState(initialEmail ?? "");
  const [password, setPassword] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [agree, setAgree] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [loading, setLoading] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const mismatch = confirm.length > 0 && confirm !== password;

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!passwordStrong(password)) return setError("Choose a stronger password.");
    if (password !== confirm) return setError("Passwords do not match.");
    if (!agree) return setError("You must accept the Terms of Service and Privacy Policy.");
    setLoading(true);
    const { error } = await authClient.signUp.email({ name: name.trim() || email.split("@")[0]!, email: email.trim().toLowerCase(), password, callbackURL: "/dashboard?verified=1" });
    if (error) {
      setLoading(false);
      const msg = error.message ?? "";
      if (error.status === 403 || /access list/i.test(msg)) setError(ACCESS_DENIED);
      else if (error.status === 422 || /exist/i.test(msg)) setError("An account with this email already exists. Try logging in.");
      else setError(msg || "Could not create the account.");
      return;
    }
    await recordLegalAcceptance().catch(() => {});
    setLoading(false);
    setDone(true);
    setTimeout(() => {
      router.push(next && next.startsWith("/") ? next : "/dashboard");
      router.refresh();
    }, 2500);
  }

  if (done) {
    return (
      <AuthCard title="Check your inbox" description={<>We sent a verification link to <strong className="text-fg">{email}</strong>. Verify it to unlock API access — the Playground is available right away.</>}>
        <div className="flex items-center gap-3 rounded-lg border border-border bg-bg-subtle p-4 text-[13.5px]">
          <MailCheck className="size-5 text-success" />
          <span>Redirecting you to the dashboard…</span>
        </div>
        <Button asChild className="mt-4 w-full" variant="outline">
          <Link href="/dashboard">Open the dashboard now</Link>
        </Button>
      </AuthCard>
    );
  }

  return (
    <AuthCard
      title="Create your account"
      description={
        <>
          Fetcha is invitation-only. Use the address your administrator approved.{" "}
          <a href="mailto:hello@fetcha.co?subject=Fetcha%20access" className="text-fg underline-offset-4 hover:underline">
            Request access
          </a>{" "}
          if you have not been invited yet.
        </>
      }
      footer={
        <>
          Already have an account?{" "}
          <Link href="/login" className="font-medium text-fg underline-offset-4 hover:underline">
            Log in
          </Link>
        </>
      }
    >
      <form onSubmit={onSubmit} className="grid gap-4" noValidate>
        {error ? <Alert variant="danger">{error}</Alert> : null}
        <Field>
          <Label htmlFor="name">Name <span className="font-normal text-fg-subtle">(optional)</span></Label>
          <Input id="name" name="name" autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Ada Lovelace" />
        </Field>
        <Field>
          <Label htmlFor="email">Approved email</Label>
          <Input id="email" name="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" readOnly={Boolean(initialEmail) && email === initialEmail} aria-describedby="email-hint" />
          <p id="email-hint" className="text-xs text-fg-subtle">
            {initialEmail && email === initialEmail ? (
              <>
                Pre-filled from your invitation.{" "}
                <button type="button" className="underline-offset-4 hover:underline" onClick={() => setEmail("")}>
                  Use another address
                </button>
              </>
            ) : (
              "Must match the address on the access list exactly."
            )}
          </p>
        </Field>
        <Field>
          <Label htmlFor="password">Password</Label>
          <PasswordInput id="password" name="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} />
          <PasswordRequirements password={password} />
        </Field>
        <Field>
          <Label htmlFor="confirm">Confirm password</Label>
          <PasswordInput id="confirm" name="confirm" autoComplete="new-password" required value={confirm} onChange={(e) => setConfirm(e.target.value)} aria-invalid={mismatch || undefined} />
          <FieldError>{mismatch ? "Passwords do not match." : null}</FieldError>
        </Field>
        <label className="flex items-start gap-2.5 text-[13px] text-fg-muted leading-snug">
          <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} className="mt-0.5 size-4 shrink-0 rounded border-border accent-[var(--accent)]" required />
          <span>
            I agree to the{" "}
            <Link href="/legal/terms" target="_blank" className="text-fg underline-offset-4 hover:underline">Terms of Service</Link> and{" "}
            <Link href="/legal/privacy" target="_blank" className="text-fg underline-offset-4 hover:underline">Privacy Policy</Link>.
          </span>
        </label>
        <Button type="submit" size="lg" loading={loading} className="mt-1 w-full" disabled={!agree}>
          Create account
        </Button>
      </form>
    </AuthCard>
  );
}