import Link from 'next/link';
import type { ReactNode } from 'react';
import { logoutAction } from '@/lib/admin/actions';
import { AdminNavSelect } from './nav-select';

export const ADMIN_NAV = [
  { href: '/admin/overview', label: 'Overview' },
  { href: '/admin/connectors', label: 'Connectors' },
  { href: '/admin/runs', label: 'Runs' },
  { href: '/admin/errors', label: 'Errors' },
  { href: '/admin/documents', label: 'Documents' },
  { href: '/admin/jobs', label: 'Jobs' },
  { href: '/admin/llm-jobs', label: 'LLM jobs' },
  { href: '/admin/review', label: 'Review queue' },
  { href: '/admin/quality', label: 'Data quality' },
  { href: '/admin/entity-resolution', label: 'Entity resolution' },
  { href: '/admin/anomalies', label: 'Anomalies' },
  { href: '/admin/quarantine', label: 'Quarantine' },
  { href: '/admin/audit', label: 'Audit log' },
  { href: '/admin/entities/duplicates', label: 'Duplicates (v1)' },
  { href: '/admin/infrastructure', label: 'Infrastructure' },
  { href: '/admin/cache', label: 'Cache' },
];

/** Admin shell: header line + left nav (≥ lg) / select (mobile). Server component; the nav highlight is done by the client select and CSS-less links. */
export function AdminShell({ children, where }: { children: ReactNode; where?: string | null }) {
  return (
    <div className="py-5 md:py-6">
      <div className="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-rule pb-3">
        <p className="mono text-xs text-ink-3">
          <span className="text-ink">AI Atlas admin</span>
          {where && <span> · {where}</span>}
        </p>
        <div className="flex items-center gap-3 text-xs">
          <Link href="/" className="text-ink-3 hover:text-ink">
            ← public site
          </Link>
          <form action={logoutAction}>
            <button type="submit" className="h-8 border border-rule px-2.5 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
              Sign out
            </button>
          </form>
        </div>
      </div>
      <div className="grid gap-6 lg:grid-cols-[11rem_minmax(0,1fr)]">
        <aside className="min-w-0">
          <AdminNavSelect items={ADMIN_NAV} />
          <nav aria-label="Admin sections" className="hidden lg:block lg:sticky lg:top-[calc(var(--header-h)+1rem)]">
            <ul className="space-y-px">
              {ADMIN_NAV.map((n) => (
                <li key={n.href}>
                  <Link href={n.href} className="flex min-h-8 items-center px-1 text-sm text-ink-2 hover:bg-surface-2 hover:text-ink">
                    {n.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </aside>
        <div className="min-w-0">{children}</div>
      </div>
    </div>
  );
}