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;