"use client";

import { useState } from "react";
import { Honeypot } from "@/components/Honeypot";
import { submitAccountSignup, type SubmitResult } from "@/lib/submit";

const MIN_PASSWORD = 12;

export function AccountForm() {
    const [result, setResult] = useState<SubmitResult>({ state: "idle" });
    const sending = result.state === "sending";

    async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setResult({ state: "sending" });
        setResult(
            await submitAccountSignup({
                name: String(data.get("name") ?? ""),
                email: String(data.get("email") ?? ""),
                password: String(data.get("password") ?? ""),
                website: String(data.get("website") ?? ""),
            }),
        );
    }

    if (result.state === "sent") {
        return (
            <div role="status">
                <h2 style={{ fontSize: "var(--s-1)" }}>Check your email.</h2>
                <p style={{ color: "var(--ink-2)", marginTop: "0.5rem" }}>
                    We&apos;ve sent you a confirmation link. Open it and your account is ready to use. The link works once, and expires after 24 hours.
                </p>
                <p style={{ color: "var(--ink-3)", marginTop: "0.75rem", fontSize: "0.88rem" }}>
                    Nothing is created until you confirm if the email doesn&apos;t arrive, start again or email support@hostxtra.co.uk.
                </p>
            </div>
        );
    }

    const fieldError = (name: string) => result.fields?.[name];

    return (
        <form className="form" onSubmit={onSubmit} noValidate>
            <Honeypot />

            <div className="field">
                <label htmlFor="o-name">Your organisation</label>
                <input id="o-name" name="name" type="text" placeholder="Northgate Systems" required aria-describedby="o-name-err" />
                {fieldError("name") && (
                    <small id="o-name-err" className="field__err">
                        {fieldError("name")}
                    </small>
                )}
            </div>

            <div className="field">
                <label htmlFor="o-email">Owner email</label>
                <input id="o-email" name="email" type="email" autoComplete="email" required aria-describedby="o-email-err" />
                <small>You become the first owner and can invite the rest of the team afterwards.</small>
                {fieldError("email") && (
                    <small id="o-email-err" className="field__err">
                        {fieldError("email")}
                    </small>
                )}
            </div>

            <div className="field">
                <label htmlFor="o-pass">Password</label>
                <input id="o-pass" name="password" type="password" autoComplete="new-password" minLength={MIN_PASSWORD} required aria-describedby="o-pass-err" />
                <small>At least {MIN_PASSWORD} characters. Use a manager you are about to manage SSH keys with it.</small>
                {fieldError("password") && (
                    <small id="o-pass-err" className="field__err">
                        {fieldError("password")}
                    </small>
                )}
            </div>

            <button className="btn btn--solid" type="submit" style={{ alignSelf: "flex-start" }} disabled={sending}>
                {sending ? "Sending…" : "Get started"}
            </button>

            {result.state === "error" && result.message && (
                <p className="field__err" role="alert">
                    {result.message}
                </p>
            )}
        </form>
    );
}
