import { LoginForm } from './login-form'

export const dynamic = 'force-dynamic'

export default async function LoginPage({
  searchParams,
}: {
  searchParams?: Promise<{ error?: string; next?: string }>
}) {
  const resolvedSearchParams = searchParams ? await searchParams : {}
  const error =
    resolvedSearchParams.error === 'admin_required'
      ? "Votre compte existe, mais il n'est pas autorise dans le back office."
      : null

  return (
    <main className="grid min-h-screen bg-background lg:grid-cols-[1.05fr_0.95fr]">
      <section className="flex items-center justify-center px-6 py-12">
        <div className="w-full max-w-md">
          <div className="mb-8">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-base font-black text-primary-foreground">
              KH
            </div>
            <h1 className="mt-6 text-3xl font-semibold tracking-normal">Connexion admin</h1>
            <p className="mt-2 text-sm text-muted-foreground">
              Acces reserve aux equipes KHARJA. Les actions sensibles sont controlees cote serveur et auditees.
            </p>
          </div>
          <LoginForm nextPath={resolvedSearchParams.next} serverError={error} />
        </div>
      </section>
      <section className="hidden border-l bg-[radial-gradient(circle_at_20%_20%,rgba(249,115,22,0.28),transparent_32%),linear-gradient(135deg,#111827,#020617)] p-10 text-white lg:flex lg:flex-col lg:justify-between">
        <div>
          <p className="text-sm font-medium uppercase tracking-[0.2em] text-orange-200">KHARJA Operations</p>
          <h2 className="mt-6 max-w-xl text-4xl font-semibold tracking-normal">
            Moderation, support, partenaires et croissance produit dans un seul cockpit.
          </h2>
        </div>
        <div className="grid grid-cols-3 gap-3">
          {['Admin API securisee', 'Audit complet', 'Roles fins'].map((label) => (
            <div key={label} className="rounded-lg border border-white/15 bg-white/10 p-4 text-sm backdrop-blur">
              {label}
            </div>
          ))}
        </div>
      </section>
    </main>
  )
}