goodgo-platform/apps/web/app/[locale]/(admin)/layout.tsx

'use client';

import {
  LayoutDashboard,
  Users,
  ClipboardList,
  ShieldCheck,
  Building2,
  Factory,
  LogOut,
  Menu,
  Sparkles,
  X,
  ScrollText,
} from 'lucide-react';
import { usePathname, useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
import { Link } from '@/i18n/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { cn } from '@/lib/utils';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, isAuthenticated, isInitialized, logout } = useAuthStore();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const t = useTranslations();

  const adminNavItems = [
    { href: '/admin' as const, label: t('adminNav.dashboard'), icon: LayoutDashboard },
    { href: '/admin/users' as const, label: t('adminNav.users'), icon: Users },
    { href: '/admin/moderation' as const, label: t('adminNav.moderation'), icon: ClipboardList },
    { href: '/admin/kyc' as const, label: t('adminNav.kyc'), icon: ShieldCheck },
    { href: '/admin/audit-log' as const, label: 'Nhật ký kiểm toán', icon: ScrollText },
    { href: '/admin/accounts/developers' as const, label: 'Tài khoản CĐT', icon: Building2 },
    { href: '/admin/accounts/park-operators' as const, label: 'Tài khoản KCN', icon: Factory },
    { href: '/admin/settings/ai' as const, label: t('adminNav.aiSettings'), icon: Sparkles },
  ];

  useEffect(() => {
    // Once the auth store finished its initial cookie→profile probe:
    //  - no session → push to /login (don't leave a spinner forever)
    //  - authenticated but not ADMIN → push to regular dashboard
    if (!isInitialized) return;
    if (!isAuthenticated) {
      router.replace(`/login?next=${encodeURIComponent(pathname)}`);
      return;
    }
    if (user && user.role !== 'ADMIN') {
      router.replace('/dashboard');
    }
  }, [isInitialized, isAuthenticated, user, router, pathname]);

  if (!isInitialized || !user) {
    return (
      <div className="flex min-h-screen items-center justify-center" role="status">
        <div className="text-muted-foreground">{t('common.loading')}</div>
      </div>
    );
  }

  if (user.role !== 'ADMIN') {
    return null;
  }

  return (
    <div className="flex min-h-screen bg-background">
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
        />
      )}

      {/* Sidebar */}
      <aside
        role="navigation"
        aria-label={t('nav.adminNav')}
        className={cn(
          'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform lg:static lg:translate-x-0',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
        )}
      >
        <div className="flex h-14 items-center border-b px-4">
          <Link href="/admin" className="flex items-center gap-2">
            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-semibold text-primary">
              {t('common.admin')}
            </span>
          </Link>
          <button
            aria-label={t('adminNav.closeMenu')}
            className="ml-auto lg:hidden"
            onClick={() => setSidebarOpen(false)}
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <nav aria-label={t('nav.adminNav')} className="flex flex-col gap-1 p-3">
          {adminNavItems.map((item) => {
            const Icon = item.icon;
            const isActive =
              item.href === '/admin'
                ? pathname === '/admin' || pathname.match(/^\/(vi|en)\/admin$/)
                : pathname.includes(item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setSidebarOpen(false)}
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-primary/10 text-primary'
                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
                )}
              >
                <Icon className="h-4 w-4" aria-hidden="true" />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="mt-auto border-t p-3">
          <div className="mb-2 flex items-center justify-between px-3">
            <span className="text-xs text-muted-foreground truncate">{user.fullName}</span>
            <LanguageSwitcher />
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="w-full justify-start gap-2"
            onClick={() => logout()}
          >
            <LogOut className="h-4 w-4" aria-hidden="true" />
            {t('common.logout')}
          </Button>
        </div>
      </aside>

      {/* Main content */}
      <div className="flex flex-1 flex-col">
        <header className="sticky top-0 z-30 flex h-14 items-center border-b bg-background/95 px-4 backdrop-blur lg:hidden">
          <button aria-label={t('adminNav.openMenu')} onClick={() => setSidebarOpen(true)}>
            <Menu className="h-5 w-5" />
          </button>
          <span className="ml-3 text-sm font-semibold">{t('common.goodgo')} {t('common.admin')}</span>
        </header>

        <main id="main-content" role="main" className="flex-1 p-4 md:p-6">{children}</main>
      </div>
    </div>
  );
}