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

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

  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 1 / 3 · Discord connected</p>
        <h1 className="mt-5 font-display text-5xl font-black uppercase leading-none tracking-tight">Welcome, {user.discordUsername}.</h1>
        <p className="mt-6 max-w-xl text-lg leading-8 text-muted">Let’s get started. What should we call you?</p>
        <form action={saveFirstName} className="mt-9">
          <label className="font-mono text-xs font-bold uppercase tracking-wider" htmlFor="firstName">Your first name</label>
          <input className="mt-3 w-full border border-line bg-canvas px-4 py-4 text-lg outline-none focus:border-accent" id="firstName" maxLength={50} name="firstName" required autoFocus />
          {query.error && <p className="mt-3 text-sm text-accent">Enter a name between 1 and 50 characters.</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">Continue</button>
        </form>
      </section>
    </main>
  );
}