import { type FormEvent, useState } from "react";

import { Button } from "@/components/ui/button";

type RequestState = "idle" | "working" | "sent" | "failed" | "missing-worker";

const LinkAmtAccount = function () {
    const [email, setEmail] = useState("");
    const [state, setState] = useState<RequestState>("idle");
    const [mockLink, setMockLink] = useState<string | null>(null);
    const amtWorkerId = new URLSearchParams(window.location.search).get("workerId");

    const submit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        if (!amtWorkerId) {
            setState("missing-worker");
            return;
        }

        setState("working");
        setMockLink(null);
        try {
            const response = await fetch("/auth/link-amt/request", {
                method: "POST",
                credentials: "include",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({
                    "email": email,
                    "amt_worker_id": amtWorkerId,
                }),
            });
            if (!response.ok) throw new Error("Account-link request failed");
            const body = await response.json() as {magic_link?: string};
            setMockLink(body.magic_link ?? null);
            setState("sent");
        } catch {
            setState("failed");
        }
    };

    return (
        <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
            <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
                <h1 className="text-xl font-semibold">Link your MTurk account</h1>
                <p>Enter the email address you want to use for James Billings.</p>
                <form className="space-y-4" onSubmit={submit}>
                    <input
                        className="w-full rounded-md border px-3 py-2"
                        type="email"
                        autoComplete="email"
                        required
                        value={email}
                        onChange={(event) => setEmail(event.target.value)}
                        placeholder="you@example.com"
                    />
                    <Button type="submit" disabled={state === "working"}>
                        {state === "working" ? "Sending…" : "Send link"}
                    </Button>
                </form>
                {state === "sent" && <p>Check your email to finish linking your account.</p>}
                {state === "failed" && <p>Unable to send the link. Please try again.</p>}
                {state === "missing-worker" && <p>This page is missing your MTurk worker ID.</p>}
                {mockLink && (
                    <p>
                        Development link: <a className="underline" href={mockLink}>continue</a>
                    </p>
                )}
            </section>
        </main>
    );
};

export default LinkAmtAccount;