"use client";

import { useState } from "react";
import { ApiError, NotConnected, api } from "@/lib/api";
import { Button } from "@/components/Button";
import { Field } from "@/components/Field";

export default function SignupPage() {
    const [form, setForm] = useState({ name: "", email: "", password: "", website: "" });
    const [state, setState] = useState<"idle" | "busy" | "sent">("idle");
    const [error, setError] = useState<string | null>(null);

    async function submit(e: React.FormEvent) {
        e.preventDefault();
        setState("busy");
        setError(null);
        try {
            await api.signup(form);
            setState("sent");
        } catch (err) {
            setState("idle");
            setError(
                err instanceof NotConnected
                    ? "The licensing service is not reachable from this page."
                    : err instanceof ApiError
                      ? err.message
                      : "Could not create the account. Try again.",
            );
        }
    }

    return (
        <main className="mx-auto max-w-rail px-5 py-12">
            {state === "sent" ? (
                <div className="grid max-w-xl gap-3">
                    <h1 className="text-3xl">Check your email</h1>
                    <p className="text-ink-2">
                        We sent a link to {form.email}. Open it to finish setting up your account —
                        it expires in 24 hours. Nothing is created until you do.
                    </p>
                </div>
            ) : (
                <>
                    <h1 className="text-3xl">Create an account</h1>
                    <p className="mt-2 max-w-xl text-ink-2">
                        For self-hosted licences. If you run on our cloud, sign in with the same
                        details you use for your Vantage instance.
                    </p>
                    <form onSubmit={submit} className="mt-6 grid gap-4">
                        <Field
                            label="Organisation"
                            required
                            value={form.name}
                            onChange={(e) => setForm({ ...form, name: e.target.value })}
                        />
                        <Field
                            label="Email"
                            type="email"
                            required
                            value={form.email}
                            onChange={(e) => setForm({ ...form, email: e.target.value })}
                        />
                        <Field
                            label="Password"
                            type="password"
                            required
                            minLength={12}
                            hint="At least 12 characters."
                            value={form.password}
                            onChange={(e) => setForm({ ...form, password: e.target.value })}
                            error={error ?? undefined}
                        />
                        {/* Honeypot: off-screen, unlabelled for humans, irresistible to bots. */}
                        <input
                            type="text"
                            name="website"
                            tabIndex={-1}
                            autoComplete="off"
                            aria-hidden="true"
                            value={form.website}
                            onChange={(e) => setForm({ ...form, website: e.target.value })}
                            className="absolute left-[-9999px] h-0 w-0"
                        />
                        <Button type="submit" disabled={state === "busy"}>
                            {state === "busy" ? "Creating…" : "Create account"}
                        </Button>
                    </form>
                </>
            )}
        </main>
    );
}
