import Link from "next/link";
import { signupAction } from "../actions";
import { btn, input, Field, Logo, Card } from "@/components/ui";

export const metadata = { title: "Create account" };

export default async function SignupPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  return (
    <main className="flex min-h-screen items-center justify-center bg-zinc-950 px-4 py-10">
      <div className="w-full max-w-sm">
        <div className="mb-8 flex justify-center"><Logo /></div>
        <Card className="fx-pop-in p-6">
          <h1 className="text-lg font-semibold">Create your account</h1>
          <p className="mt-1 text-sm text-zinc-500">Run conferences or attend them — one account for both.</p>
          {error && (
            <div className="mt-4 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600">{error}</div>
          )}
          <form action={signupAction} className="mt-5 space-y-4">
            <div>
              <span className="mb-1.5 block text-xs font-semibold text-zinc-400">I want to…</span>
              <div className="grid grid-cols-2 gap-2">
                <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-white/80 bg-white/70 px-3 py-2.5 text-sm text-zinc-200 shadow-sm backdrop-blur transition has-checked:border-indigo-400 has-checked:bg-indigo-500/10">
                  <input type="radio" name="accountType" value="ATTENDEE" defaultChecked className="accent-indigo-500" />
                  🎟️ Attend events
                </label>
                <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-white/80 bg-white/70 px-3 py-2.5 text-sm text-zinc-200 shadow-sm backdrop-blur transition has-checked:border-indigo-400 has-checked:bg-indigo-500/10">
                  <input type="radio" name="accountType" value="ORGANIZER" className="accent-indigo-500" />
                  🎤 Organize events
                </label>
              </div>
            </div>
            <Field name="name" title="Full name">
              <input id="name" name="name" required className={input} placeholder="Priya Sharma" />
            </Field>
            <Field name="email" title="Email">
              <input id="email" name="email" type="email" required autoComplete="email" className={input} placeholder="you@example.com" />
            </Field>
            <Field name="organization" title="Organization (optional)">
              <input id="organization" name="organization" className={input} placeholder="Acme Institute" />
            </Field>
            <Field name="password" title="Password">
              <input id="password" name="password" type="password" required minLength={8} autoComplete="new-password" className={input} placeholder="At least 8 characters" />
            </Field>
            <button type="submit" className={`${btn.primary} w-full`}>Create account</button>
          </form>
          <div className="mt-4 border-t border-zinc-800 pt-4 text-center text-sm text-zinc-500">
            Already have an account? <Link href="/login" className="font-medium text-indigo-600 hover:text-indigo-500">Sign in</Link>
          </div>
        </Card>
      </div>
    </main>
  );
}