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

export const metadata = { title: "Sign in" };

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; next?: string }>;
}) {
  const { error, next } = await searchParams;
  return (
    <main className="flex min-h-screen items-center justify-center bg-zinc-950 px-4">
      <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">Sign in</h1>
          <p className="mt-1 text-sm text-zinc-500">Welcome back to your conference workspace.</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={loginAction} className="mt-5 space-y-4">
            {next && <input type="hidden" name="next" value={next} />}
            <Field name="email" title="Email">
              <input id="email" name="email" type="email" required autoComplete="email" className={input} placeholder="you@example.com" />
            </Field>
            <Field name="password" title="Password">
              <input id="password" name="password" type="password" required autoComplete="current-password" className={input} placeholder="••••••••" />
            </Field>
            <button type="submit" className={`${btn.primary} w-full`}>Sign in</button>
          </form>
          <div className="mt-4 border-t border-zinc-800 pt-4 text-center text-sm text-zinc-500">
            New to Confexe? <Link href="/signup" className="font-medium text-indigo-600 hover:text-indigo-500">Create an account</Link>
          </div>
        </Card>
        <p className="mt-6 text-center text-xs text-zinc-600">
          Demo logins — organizer@demo.test · attendee@demo.test · admin@demo.test (password <span className="font-mono">demo1234</span>)
        </p>
      </div>
    </main>
  );
}