import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { COOKIE, checkPasscode, gateEnabled, makeToken } from "@/lib/auth";
import { Brand } from "@/components/Brand";

export const dynamic = "force-dynamic";

async function login(formData: FormData) {
  "use server";
  const code = String(formData.get("passcode") ?? "");
  const next = String(formData.get("next") ?? "/");
  if (!checkPasscode(code)) redirect(`/access?error=1&next=${encodeURIComponent(next)}`);
  const jar = await cookies();
  jar.set(COOKIE, makeToken(), { httpOnly: true, sameSite: "lax", secure: process.env.NODE_ENV === "production", path: "/", maxAge: 30 * 24 * 3600 });
  redirect(next.startsWith("/") ? next : "/");
}

export default async function AccessPage({ searchParams }: { searchParams: Promise<{ error?: string; next?: string }> }) {
  const sp = await searchParams;
  if (!gateEnabled()) redirect("/");
  return (
    <main className="min-h-screen grid place-items-center grid-bg px-6">
      <form action={login} className="panel w-full max-w-sm p-8 space-y-6">
        <Brand size="lg" />
        <div className="space-y-1">
          <h1 className="text-lg font-semibold">Research console</h1>
          <p className="text-sm text-fg-2">This console observes live social runtimes and can start browser sessions on the cluster. Enter the access code.</p>
        </div>
        <input type="hidden" name="next" value={sp.next ?? "/"} />
        <label className="block space-y-2">
          <span className="text-xs uppercase tracking-widest text-dim">Access code</span>
          <input name="passcode" type="password" autoFocus required className="w-full rounded-lg bg-bg-2 border border-line-2 px-3 py-2 mono text-fg outline-none focus:border-cyan/60 focus:glow-cyan" />
        </label>
        {sp.error && <p className="text-sm text-red">Wrong code.</p>}
        <button className="w-full rounded-lg bg-cyan/90 hover:bg-cyan text-bg font-semibold py-2 transition">Enter</button>
      </form>
    </main>
  );
}