import Image from 'next/image';
import { redirect } from 'next/navigation';

import { auth, isAuthentikConfigured, signIn } from '@/lib/auth';

export const metadata = { title: 'Connexion — ITA ITO' };

const ERRORS: Record<string, string> = {
  AccessDenied: "Ce compte n'a pas accès à cette application.",
  Configuration: "La configuration de la connexion est incomplète. Prévenez l'administrateur.",
  Verification: 'Le lien de connexion a expiré. Réessayez.',
};

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; from?: string }>;
}) {
  const { error, from } = await searchParams;

  // Someone who is already signed in has no business on this page.
  if (await auth()) {
    redirect(from && from.startsWith('/admin') ? from : '/admin');
  }

  const providerName = process.env.AUTHENTIK_DISPLAY_NAME?.trim() || 'Loxi';

  return (
    <main className="flex min-h-dvh items-center justify-center px-6 py-16">
      <div className="w-full max-w-sm text-center">
        <Image
          src="/brand/logo.png"
          alt="ITA ITO"
          width={406}
          height={194}
          priority
          className="mx-auto h-auto w-44"
        />

        <h1 className="mt-10 text-xl">Horaires de la boutique</h1>
        <p className="mt-2 text-sm text-[var(--ink-muted)]">Réservé à l’équipe ITA ITO.</p>

        {error ? (
          <p
            role="alert"
            className="mt-6 rounded-[var(--radius-md)] border border-[var(--danger)] bg-[var(--danger-tint)] px-4 py-3 text-sm text-[var(--danger)]"
          >
            {ERRORS[error] ?? 'La connexion a échoué. Réessayez.'}
          </p>
        ) : null}

        {!isAuthentikConfigured ? (
          <p
            role="alert"
            className="mt-8 rounded-[var(--radius-md)] border border-[var(--danger)] bg-[var(--danger-tint)] px-4 py-3 text-sm text-[var(--danger)]"
          >
            La connexion n’est pas configurée&nbsp;: <span className="font-mono">AUTH_AUTHENTIK_ID</span>,{' '}
            <span className="font-mono">AUTH_AUTHENTIK_SECRET</span> et{' '}
            <span className="font-mono">AUTH_AUTHENTIK_ISSUER</span> doivent être renseignés.
          </p>
        ) : (
        <form
          className="mt-8"
          action={async () => {
            'use server';
            await signIn('authentik', {
              redirectTo: from && from.startsWith('/admin') ? from : '/admin',
            });
          }}
        >
          <button
            type="submit"
            className="w-full rounded-[var(--radius-md)] bg-[var(--accent)] px-5 py-3 text-base font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)]"
          >
            Se connecter avec {providerName}
          </button>
        </form>
        )}
      </div>
    </main>
  );
}