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

'use client';

import {
  BarChart3,
  Bookmark,
  Bot,
  Building2,
  CreditCard,
  Factory,
  FileText,
  Gem,
  Home,
  List,
  LogOut,
  Menu,
  MessageSquare,
  Moon,
  Plus,
  Sun,
  Target,
  User,
  X,
  type LucideIcon,
} from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { useRouter } from '@/i18n/navigation';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { useTheme } from '@/components/providers/theme-provider';
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';

interface NavItem {
  href: string;
  label: string;
  icon: LucideIcon;
}

interface NavGroup {
  label: string;
  items: NavItem[];
}

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

  // Auth guard — redirect unauthenticated users to /login once the auth store
  // has finished its cookie→profile probe. Without this, protected queries
  // inside the dashboard fire against the API and flood the console with
  // 401 ApiErrors before the user even sees the sign-in screen.
  useEffect(() => {
    if (isInitialized && !isAuthenticated) {
      const next = encodeURIComponent(pathname);
      router.replace(`/login?next=${next}`);
    }
  }, [isInitialized, isAuthenticated, pathname, router]);

  // While the auth store initialises, OR right after we've decided to redirect,
  // render a lightweight skeleton rather than the full dashboard so no queries
  // mount and fire.
  if (!isInitialized || !isAuthenticated) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        {t('common.loading')}
      </div>
    );
  }

  const role = user?.role;
  const isDeveloper = role === 'DEVELOPER';
  const isParkOperator = role === 'PARK_OPERATOR';
  // B2B roles get a focused nav: dashboard + their owned catalog + CRM + profile.
  // ADMIN / AGENT / SELLER / BUYER keep the full nav.
  const showListings = !isDeveloper && !isParkOperator;
  const showProjects = !isParkOperator;
  const showParks = !isDeveloper;

  const navGroups: NavGroup[] = [
    {
      label: t('dashboard.title'),
      items: [
        { href: '/dashboard', label: t('dashboard.title'), icon: Home },
        ...(showListings
          ? [
              { href: '/listings', label: t('dashboard.listings'), icon: List },
              { href: '/listings/new', label: t('dashboard.createListing'), icon: Plus },
            ]
          : []),
      ],
    },
    {
      label: t('dashboard.catalogs'),
      items: [
        ...(showProjects
          ? [
              {
                href: '/projects',
                label: isDeveloper ? 'Dự án của tôi' : t('dashboard.manageProjects'),
                icon: Building2,
              },
            ]
          : []),
        ...(showParks
          ? [
              {
                href: '/industrial-parks',
                label: isParkOperator
                  ? 'KCN của tôi'
                  : t('dashboard.manageIndustrialParks'),
                icon: Factory,
              },
            ]
          : []),
      ],
    },
    {
      label: 'CRM',
      items: [
        { href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
        ...(showListings
          ? [{ href: '/leads', label: t('dashboard.leads'), icon: Target }]
          : []),
      ],
    },
    ...(showListings
      ? [
          {
            label: t('dashboard.analytics'),
            items: [
              { href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
              { href: '/dashboard/reports', label: t('dashboard.reports'), icon: FileText },
              { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
              { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
            ],
          },
        ]
      : []),
    {
      label: t('dashboard.profile'),
      items: [
        { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
        ...(showListings
          ? [
              { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
              { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
            ]
          : []),
      ],
    },
  ].filter((g) => g.items.length > 0);

  // Flat list for desktop nav (only primary items shown inline)
  const primaryNav: NavItem[] = [
    { href: '/dashboard', label: t('dashboard.title'), icon: Home },
    ...(showListings ? [{ href: '/listings', label: t('dashboard.listings'), icon: List }] : []),
    ...(showProjects
      ? [
          {
            href: '/projects',
            label: isDeveloper ? 'Dự án của tôi' : t('dashboard.manageProjects'),
            icon: Building2,
          },
        ]
      : []),
    ...(showParks
      ? [
          {
            href: '/industrial-parks',
            label: isParkOperator ? 'KCN của tôi' : t('dashboard.manageIndustrialParks'),
            icon: Factory,
          },
        ]
      : []),
    { href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
    ...(showListings
      ? [{ href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 }]
      : []),
  ];

  const secondaryNav: NavItem[] = [
    { href: '/dashboard/reports', label: t('dashboard.reports'), icon: FileText },
    { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
    { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
    { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
    { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
    { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
  ];

  const isActive = (href: string) =>
    pathname === href || (href !== '/dashboard' && pathname.startsWith(href));

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

      {/* Mobile sidebar — grouped nav */}
      <aside
        role="navigation"
        aria-label={t('nav.dashboardNav')}
        className={cn(
          'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform md:hidden',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
        )}
      >
        <div className="flex h-14 items-center border-b px-4">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
          </Link>
          <button
            aria-label={t('nav.closeMenu')}
            className="ml-auto"
            onClick={() => setSidebarOpen(false)}
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <nav className="flex flex-col gap-4 overflow-y-auto p-3">
          {navGroups.map((group) => (
            <div key={group.label}>
              <p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
                {group.label}
              </p>
              <div className="flex flex-col gap-0.5">
                {group.items.map((item) => (
                  <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(item.href)
                        ? 'bg-primary/10 text-primary'
                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
                    )}
                  >
                    <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
                    {item.label}
                  </Link>
                ))}
              </div>
            </div>
          ))}
        </nav>

        <div className="mt-auto border-t p-3">
          {user && (
            <p className="mb-2 truncate px-3 text-xs text-muted-foreground">{user.fullName}</p>
          )}
          <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>

      <header
        role="banner"
        className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
      >
        <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
          {/* Mobile hamburger */}
          <button
            aria-label={t('nav.openMenu')}
            className="mr-3 inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
            onClick={() => setSidebarOpen(true)}
          >
            <Menu className="h-5 w-5" />
          </button>

          <Link href="/" className="mr-4 flex items-center space-x-2">
            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
          </Link>

          {/* Desktop nav — primary items with labels, secondary icon-only */}
          <nav aria-label={t('nav.dashboardNav')} className="hidden items-center md:flex">
            <div className="flex items-center">
              {primaryNav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-label={item.label}
                  title={item.label}
                  className={cn(
                    'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
                    isActive(item.href)
                      ? 'bg-accent text-accent-foreground'
                      : 'text-muted-foreground',
                  )}
                >
                  <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
                  <span className="hidden xl:inline">{item.label}</span>
                </Link>
              ))}
            </div>

            <div className="mx-2 h-5 w-px bg-border" aria-hidden="true" />

            <div className="flex items-center">
              {secondaryNav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-label={item.label}
                  title={item.label}
                  className={cn(
                    'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground',
                    isActive(item.href)
                      ? 'bg-accent text-accent-foreground'
                      : 'text-muted-foreground',
                  )}
                >
                  <item.icon className="h-4 w-4" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </nav>

          <div className="ml-auto flex items-center space-x-1">
            {user && (
              <span className="hidden text-sm text-muted-foreground lg:inline">
                {user.fullName}
              </span>
            )}
            {user && <NotificationBell />}
            <LanguageSwitcher />
            <Button
              variant="ghost"
              size="sm"
              onClick={toggleTheme}
              aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
              className="h-9 w-9 p-0"
            >
              {theme === 'light' ? (
                <Moon className="h-4 w-4" aria-hidden="true" />
              ) : (
                <Sun className="h-4 w-4" aria-hidden="true" />
              )}
            </Button>
            <Button variant="ghost" size="sm" className="hidden gap-1.5 md:inline-flex" onClick={() => logout()}>
              <LogOut className="h-4 w-4" aria-hidden="true" />
              <span className="hidden lg:inline">{t('common.logout')}</span>
            </Button>
          </div>
        </div>
      </header>

      <main id="main-content" role="main" className="mx-auto max-w-7xl px-4 py-6">{children}</main>
    </div>
  );
}