import { LoginForm } from './LoginForm';
import { PUBLIC_SITE } from '@/lib/format';
import { ArrowLeftIcon, BadgeCheckIcon, ClockIcon, LockIcon, ShieldCheckIcon } from '@/components/Icons';
import { BrandMark } from '@/components/BrandMark';

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

export default async function Login({ searchParams }: { searchParams: Promise<{ expired?: string }> }) {
  const { expired } = await searchParams;
  return (
    <div className="grid min-h-screen lg:grid-cols-[1fr_1.1fr]">
      <aside className="relative hidden overflow-hidden bg-ledger p-12 text-ledger-ink lg:flex lg:flex-col lg:justify-between">
        <div aria-hidden className="pointer-events-none absolute -right-24 -top-24 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
        <div aria-hidden className="pointer-events-none absolute -bottom-32 -left-16 h-80 w-80 rounded-full bg-white/5 blur-3xl" />
        <div className="relative flex items-center gap-3">
          <BrandMark inverted className="h-10 w-10" />
          <span className="font-serif text-xl font-semibold">Justice Choice</span>
        </div>
        <div className="relative max-w-md">
          <h2 className="font-serif text-4xl font-semibold leading-tight">The Justice Choice console behind every evidence-based ranking.</h2>
          <ul className="mt-8 space-y-4 text-sm opacity-90">
            {[
              [BadgeCheckIcon, 'Verify licences against the issuing body'],
              [ShieldCheckIcon, 'Every change written to an append-only audit log'],
              [LockIcon, 'Role-based access with two-factor authentication'],
            ].map(([Icon, t]) => {
              const I = Icon as typeof LockIcon;
              return (
                <li key={t as string} className="flex items-center gap-3">
                  <span className="grid h-8 w-8 place-items-center rounded-lg bg-white/10">
                    <I className="h-4 w-4" />
                  </span>
                  {t as string}
                </li>
              );
            })}
          </ul>
        </div>
        <p className="relative text-xs opacity-70">Staff and professional dashboard · not indexed</p>
      </aside>
      <div className="flex items-center justify-center px-4 py-12 sm:px-8">
        <div className="w-full max-w-sm">
          <a href={PUBLIC_SITE} className="mb-8 inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
            <ArrowLeftIcon className="h-4 w-4" /> Back to justicechoice.com
          </a>
          <h1 className="font-serif text-3xl font-semibold tracking-tight">Sign in</h1>
          <p className="mb-7 mt-1.5 text-sm text-muted">Staff and professional dashboard</p>
          {expired && (
            <p className="mb-5 flex items-center gap-2 rounded-lg border border-brass/40 bg-brass-soft px-3 py-2.5 text-sm text-ink-2">
              <ClockIcon className="h-4 w-4 text-brass" /> Your session ended. Sign in again.
            </p>
          )}
          <LoginForm />
          <p className="mt-4 text-center text-sm">
            <a href="/forgot-password" className="text-muted underline-offset-2 hover:text-ink hover:underline">
              Forgot your password?
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}