buildmymcpserver/apps/web/app/admin/layout.tsx

'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import {
  LayoutGrid,
  LifeBuoy,
  Users,
  Building2,
  Server,
  Hammer,
  FileClock,
  Activity,
  Wand2,
  LogOut,
  ShieldAlert,
  Package,
  KeyRound,
} from 'lucide-react';
import { apiFetch } from '@/lib/api';
import { cn } from '@/lib/cn';
import { Logo } from '@/components/logo';

interface MeUser {
  userId: string;
  email: string;
  isAdmin: boolean;
}

const NAV: { href: string; label: string; icon: React.ComponentType<{ size?: number }> }[] = [
  { href: '/admin', label: 'Overview', icon: LayoutGrid },
  { href: '/admin/support', label: 'Support', icon: LifeBuoy },
  { href: '/admin/users', label: 'Users', icon: Users },
  { href: '/admin/orgs', label: 'Organizations', icon: Building2 },
  { href: '/admin/servers', label: 'MCP servers', icon: Server },
  { href: '/admin/templates', label: 'Templates', icon: Package },
  { href: '/admin/builds', label: 'Builds', icon: Hammer },
  { href: '/admin/audit', label: 'Audit log', icon: FileClock },
  { href: '/admin/system', label: 'System health', icon: Activity },
  { href: '/admin/encryption', label: 'Encryption', icon: KeyRound },
  { href: '/admin/prompt', label: 'AI prompt', icon: Wand2 },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const [user, setUser] = useState<MeUser | null>(null);
  const [authState, setAuthState] = useState<'checking' | 'ok' | 'forbidden'>('checking');
  const [supportPending, setSupportPending] = useState(0);

  useEffect(() => {
    if (pathname === '/admin/login') {
      setAuthState('ok');
      return;
    }
    apiFetch<{ user: MeUser }>('/v1/auth/me')
      .then((r) => {
        if (r.user.isAdmin) {
          setUser(r.user);
          setAuthState('ok');
        } else {
          setAuthState('forbidden');
        }
      })
      .catch(() => setAuthState('forbidden'));
  }, [pathname]);

  // Poll support count every 30s so the sidebar badge stays fresh while admin
  // is doing other work in the panel.
  useEffect(() => {
    if (authState !== 'ok' || pathname === '/admin/login') return;
    let cancelled = false;
    const load = () => {
      apiFetch<{ awaitingAdmin: number }>('/v1/admin/support/counts')
        .then((r) => {
          if (!cancelled) setSupportPending(r.awaitingAdmin);
        })
        .catch(() => undefined);
    };
    load();
    const t = setInterval(load, 30_000);
    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, [authState, pathname]);

  useEffect(() => {
    if (authState === 'forbidden' && pathname !== '/admin/login') {
      router.replace('/admin/login');
    }
  }, [authState, pathname, router]);

  async function logout() {
    await apiFetch('/v1/auth/logout', { method: 'POST' }).catch(() => undefined);
    router.replace('/admin/login');
  }

  if (pathname === '/admin/login') return <>{children}</>;

  if (authState === 'checking') {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="mono text-[12px] text-[--color-fg-subtle]">verifying admin…</p>
      </div>
    );
  }
  if (authState === 'forbidden') {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3">
        <ShieldAlert size={24} className="text-[--color-danger]" />
        <p className="text-[14px]">Admin access required.</p>
        <Link
          href="/admin/login"
          className="mono text-[12px] text-[--color-accent] underline hover:text-white"
        >
          /admin/login
        </Link>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen">
      <aside className="sticky top-0 flex h-screen w-[230px] shrink-0 flex-col border-r border-[--color-border] bg-[--color-bg-elevated]">
        <div className="flex h-12 items-center gap-2 border-b border-[--color-border] px-4">
          <Logo />
          <span className="mono text-[10.5px] uppercase tracking-wider text-[--color-fg-subtle]">
            / admin
          </span>
        </div>
        <nav className="flex-1 overflow-y-auto p-2">
          <ul className="space-y-0.5">
            {NAV.map((item) => {
              const Icon = item.icon;
              const active =
                pathname === item.href ||
                (item.href !== '/admin' && pathname.startsWith(item.href));
              return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className={cn(
                      'flex h-8 items-center gap-2 rounded-md px-2.5 text-[12.5px] transition-colors',
                      active
                        ? 'bg-[--color-bg-subtle] text-[--color-fg]'
                        : 'text-[--color-fg-muted] hover:bg-[--color-bg-subtle] hover:text-[--color-fg]',
                    )}
                  >
                    <Icon size={13} />
                    <span className="flex-1">{item.label}</span>
                    {item.href === '/admin/support' && supportPending > 0 && (
                      <span className="mono inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500/30 px-1 text-[10px] font-semibold text-amber-300">
                        {supportPending}
                      </span>
                    )}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="border-t border-[--color-border] p-3 text-[12px]">
          {user && (
            <div className="mb-2 truncate text-[--color-fg-muted]" title={user.email}>
              {user.email}
            </div>
          )}
          <div className="flex gap-1">
            <Link
              href="/dashboard"
              className="flex-1 rounded-md border border-[--color-border] px-2 py-1 text-center text-[11px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
            >
              user view
            </Link>
            <button
              type="button"
              onClick={logout}
              className="rounded-md border border-[--color-border] px-2 py-1 text-[11px] text-[--color-fg-muted] transition-colors hover:text-[--color-danger]"
              aria-label="logout"
            >
              <LogOut size={11} />
            </button>
          </div>
        </div>
      </aside>
      <main className="flex-1 overflow-x-hidden">{children}</main>
    </div>
  );
}