wulf-pulse/components/navigation/app-navigation.tsx

'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { cn } from '@/lib/utils';
import {
  LayoutDashboard,
  Server,
  Database,
  Activity,
  HardDrive,
  Sparkles,
  Users,
  TrendingUp,
  BarChart3,
  GitCompare,
  Brain,
  Search,
  AlertTriangle,
} from 'lucide-react';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
import { Button } from '@/components/ui/button';
import { ThemeToggle } from '@/components/theme-toggle';
import { useSession } from '@/lib/auth-client';

interface NavItem {
  title: string;
  href?: string;
  icon?: React.ElementType;
  description?: string;
  children?: NavItem[];
}

const navigationItems: NavItem[] = [
  {
    title: 'Dashboard',
    href: '/',
    icon: LayoutDashboard,
    description: 'Overview and quick access'
  },
  {
    title: 'Configuration Items',
    href: '/configuration-items',
    icon: Server,
    description: 'Manage IT assets and devices'
  },
  {
    title: 'Backup Status',
    icon: HardDrive,
    children: [
      {
        title: 'Backup Status',
        href: '/backup-status',
        icon: HardDrive,
        description: 'Veeam backup health and compliance'
      },
      {
        title: 'RPO Comparison',
        href: '/veeam-comparison',
        icon: GitCompare,
        description: 'Pulse RPO shadow vs Datto RMM ticket comparison'
      },
      {
        title: 'Ticket Analysis',
        href: '/veeam-analysis',
        icon: Brain,
        description: 'AI classification of backup tickets — patterns, skills, SOP gaps'
      },
    ]
  },
  {
    title: 'Engagement',
    icon: Users,
    children: [
      {
        title: 'Overview',
        href: '/engagement',
        icon: Users,
        description: 'Staff activity and engagement metrics',
      },
      {
        title: 'Employee Profile',
        href: '/engagement/profile',
        icon: TrendingUp,
        description: '12-month activity calendar and performance profile',
      },
    ],
  },
  {
    title: 'Analyzer',
    icon: Sparkles,
    children: [
      {
        title: 'Browse Tickets',
        href: '/analyzer/tickets',
        icon: Search,
        description: 'Filter tickets by period, client, or issue type — pick one to analyze',
      },
      {
        title: 'Aggregate Reports',
        href: '/analyzer/reports',
        icon: BarChart3,
        description: 'Cross-ticket pattern analysis: documentation gaps, process gaps, recurrence clusters',
      },
      {
        title: 'Needs Review',
        href: '/analyzer/queue',
        icon: AlertTriangle,
        description: 'Analyses flagged for human review (low confidence or cost-ceiling skipped Opus)',
      },
      {
        title: 'IT Glue — Applications',
        href: '/analyzer/itglue/applications',
        icon: Database,
        description: 'Audit IT Glue Application records against ticket history; admins can apply or revert documentation changes',
      },
      {
        title: 'IT Glue — Configurations',
        href: '/analyzer/itglue/configurations',
        icon: Database,
        description: 'Audit IT Glue Configuration records (servers, workstations, devices) against ticket history; admins can apply or revert',
      },
    ],
  },
  {
    title: 'Admin',
    href: '/admin',
    icon: Activity,
    description: 'Sync, mappings, workflow, reports, tools & access'
  },
];

export function AppNavigation() {
  const pathname = usePathname();
  const { data: session } = useSession();
  const userRole = (session?.user as any)?.role || 'user';
  const isSuperAdmin = userRole === 'super-admin';

  // Mobile routes have their own nav — suppress desktop header
  if (pathname.startsWith('/mobile')) return null;

  const isActive = (href?: string) => {
    if (!href) return false;
    return pathname === href || pathname.startsWith(href + '/');
  };

  // Hide Engagement and Admin from non-super-admins
  const visibleItems = navigationItems.filter((item) => {
    if (item.title === 'Engagement' || item.title === 'Admin') {
      return isSuperAdmin;
    }
    return true;
  });

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto px-6 flex h-16 items-center justify-between">
        {/* Logo and App Name */}
        <Link href="/" className="flex items-center space-x-3 shrink-0">
          <img
            src="/wulff-logo.png"
            alt="Wulf Consulting"
            className="h-10 w-auto"
          />
          <div className="hidden sm:block">
            <h1 className="text-xl font-semibold tracking-tight">Pulse</h1>
            <p className="text-xs text-muted-foreground">PSA Management System</p>
          </div>
        </Link>

        {/* Main Navigation — centered */}
        <NavigationMenu>
            <NavigationMenuList>
              {visibleItems.map((item) => (
                <NavigationMenuItem key={item.title}>
                  {item.children ? (
                    <>
                      <NavigationMenuTrigger className={cn(
                        "h-9 px-4 py-2",
                        item.children.some(child => isActive(child.href)) && "bg-primary text-primary-foreground"
                      )}>
                        {item.icon && <item.icon className="w-4 h-4 mr-2" />}
                        {item.title}
                      </NavigationMenuTrigger>
                      <NavigationMenuContent>
                        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                          {item.children.map((child) => (
                            <li key={child.title}>
                              <NavigationMenuLink asChild>
                                <Link
                                  href={child.href || '#'}
                                  className={cn(
                                    "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary",
                                    isActive(child.href) && "bg-primary text-primary-foreground"
                                  )}
                                >
                                  <div className="flex items-center text-sm font-medium leading-none">
                                    {child.icon && <child.icon className="w-4 h-4 mr-2" />}
                                    {child.title}
                                  </div>
                                  {child.description && (
                                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                      {child.description}
                                    </p>
                                  )}
                                </Link>
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </>
                  ) : (
                    <Link href={item.href || '#'} legacyBehavior passHref>
                      <NavigationMenuLink className={cn(
                        navigationMenuTriggerStyle(),
                        "h-9",
                        isActive(item.href) && "bg-primary text-primary-foreground"
                      )}>
                        {item.icon && <item.icon className="w-4 h-4 mr-2" />}
                        {item.title}
                      </NavigationMenuLink>
                    </Link>
                  )}
                </NavigationMenuItem>
              ))}
            </NavigationMenuList>
        </NavigationMenu>

        {/* Right Side Actions */}
        <div className="flex items-center gap-3 shrink-0">
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
}

// Breadcrumb component for secondary navigation
export interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface PageHeaderProps {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  actions?: React.ReactNode;
}

export function PageHeader({ title, description, breadcrumbs, actions }: PageHeaderProps) {
  return (
    <div className="border-b">
      <div className="container mx-auto px-6 py-4">
        {/* Breadcrumbs */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <nav className="flex items-center space-x-2 text-sm text-muted-foreground mb-2">
            {breadcrumbs.map((crumb, index) => (
              <div key={index} className="flex items-center">
                {index > 0 && <span className="mx-2">/</span>}
                {crumb.href ? (
                  <Link href={crumb.href} className="hover:text-foreground transition-colors">
                    {crumb.label}
                  </Link>
                ) : (
                  <span className="text-foreground">{crumb.label}</span>
                )}
              </div>
            ))}
          </nav>
        )}

        {/* Title and Actions */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
            {description && (
              <p className="text-muted-foreground mt-1">{description}</p>
            )}
          </div>
          {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
      </div>
    </div>
  );
}