import { isApiError, type SessionDto } from '@impuestos/contracts';
import { setRequestLocale } from 'next-intl/server';
import type { ReactNode } from 'react';
import { Card } from '@/components/ui/card';
import { EmptyState } from '@/components/ui/empty-state';
import { LanguageSwitcher } from '@/components/language-switcher';
import { Link, redirect } from '@/i18n/navigation';
import { getT } from '@/i18n/t';
import { serverApi } from '@/lib/api-server';

const ADMIN_ROLES = new Set(['staff', 'superadmin']);

const TABS = [
  { href: '/usuarios', key: 'admin.users.title' },
  { href: '/errores', key: 'admin.errors.title' },
  { href: '/auditoria', key: 'admin.audit.title' },
] as const;

/**
 * FLOWS.md Flow H. No tab bar, no floating button, no playfulness: a wide page with a
 * plain nav. The role is checked here and again on every API call, because a layout is a
 * convenience and the server is the rule.
 */
export default async function AdminLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getT(locale);

  const api = await serverApi();
  const session: SessionDto | null = await api.getSession().catch((error: unknown) => {
    if (isApiError(error) && error.code === 'unauthorized') return null;
    throw error;
  });
  if (!session) redirect({ href: '/login', locale });

  if (!session || !ADMIN_ROLES.has(session.role)) {
    return (
      <main className="mx-auto w-full max-w-md px-5 py-16">
        <Card>
          <EmptyState title={t('admin.forbidden')} />
        </Card>
      </main>
    );
  }

  return (
    <div className="mx-auto flex min-h-dvh w-full max-w-6xl flex-col">
      <header className="flex flex-wrap items-center justify-between gap-4 border-b px-5 py-3">
        <div className="flex items-center gap-6">
          <span className="text-sm font-semibold tracking-tight">{t('admin.nav.console')}</span>
          <nav aria-label={t('admin.nav.console')}>
            <ul className="flex items-center gap-4">
              {TABS.map((tab) => (
                <li key={tab.href}>
                  <Link href={tab.href} className="text-sm hover:underline">
                    {t(tab.key)}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <span className="text-xs text-[var(--text-muted)]">{session.email}</span>
          <LanguageSwitcher />
          <Link href="/inicio" className="text-sm text-accent-700 hover:underline">
            {t('common.back')}
          </Link>
        </div>
      </header>

      {/* The reminder sits above every screen in the console, not only the user search. */}
      <p className="border-b bg-attention-soft px-5 py-2 text-xs text-attention">
        {t('admin.users.auditBanner')}
      </p>

      <main className="flex-1 px-5 py-6">{children}</main>
    </div>
  );
}