import { redirect } from "next/navigation";
import { requireCurrentUser } from "@/lib/auth/user-session";
import { addFirstMinecraftAccount } from "../actions";

const errors: Record<string, string> = {
  "invalid-format": "Java usernames use 3–16 letters, numbers, or underscores.",
  "already-registered": "That Minecraft account is already registered.",
  "vpn-blocked": "Turn off your VPN, proxy, or Tor connection before adding a Minecraft account.",
  "ip-check-unavailable": "We could not verify your network. Try again without a VPN or contact an administrator.",
};

export default async function MinecraftStepPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; unverified?: string }>;
}) {
  const user = await requireCurrentUser("/welcome/minecraft");
  if (!user.firstName) redirect("/welcome");
  const query = await searchParams;

  return (
    <main className="grid min-h-screen place-items-center bg-canvas px-6 py-12 text-ink">
      <section className="w-full max-w-2xl border border-line bg-panel p-8 shadow-[10px_10px_0_var(--color-shadow)] sm:p-12">
        <p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Step 2 / 3 · Java Edition</p>
        <h1 className="mt-5 font-display text-5xl font-black uppercase leading-none tracking-tight">Add your player.</h1>
        <p className="mt-6 text-lg leading-8 text-muted">We’ll verify the username with Mojang and store its UUID for secure matching.</p>

        {query.unverified ? (
          <form action={addFirstMinecraftAccount} className="mt-9 border-l-2 border-accent pl-6">
            <h2 className="font-display text-2xl font-black uppercase">We couldn’t verify “{query.unverified}”.</h2>
            <p className="mt-3 leading-7 text-muted">Check the spelling. If you’re certain it is correct, continue without a UUID. The server can associate it after a successful online-mode login.</p>
            <input name="username" type="hidden" value={query.unverified} />
            <input name="confirmUnverified" type="hidden" value="yes" />
            <div className="mt-6 flex flex-wrap gap-4">
              <button className="border border-ink bg-ink px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas" type="submit">Yes, continue</button>
              <a className="border border-line px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider" href="/welcome/minecraft">Check spelling</a>
            </div>
          </form>
        ) : (
          <form action={addFirstMinecraftAccount} className="mt-9">
            <label className="font-mono text-xs font-bold uppercase tracking-wider" htmlFor="username">Minecraft username</label>
            <input className="mt-3 w-full border border-line bg-canvas px-4 py-4 font-mono text-lg outline-none focus:border-accent" id="username" maxLength={16} minLength={3} name="username" pattern="[A-Za-z0-9_]{3,16}" required autoFocus />
            {query.error && <p className="mt-3 text-sm text-accent">{errors[query.error] ?? "We could not add that account."}</p>}
            <button className="mt-7 border border-ink bg-ink px-6 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas hover:bg-accent" type="submit">Verify account</button>
          </form>
        )}
      </section>
    </main>
  );
}