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, 
  Network,
  Globe,
  Smartphone,
  Database,
  RefreshCw,
  ChevronDown,
  Activity
} 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';

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: 'Admin',
    icon: Activity,
    children: [
      {
        title: 'Sync Management',
        href: '/admin/sync',
        icon: RefreshCw,
        description: 'Sync data from external systems'
      },
      {
        title: 'NMS Mapping (Auvik)',
        href: '/auvik-mappings',
        icon: Network,
        description: 'Map Auvik tenants to companies'
      },
      {
        title: 'RMM Mapping (Datto)',
        href: '/rmm-mappings',
        icon: Globe,
        description: 'Map RMM sites to companies'
      },
      {
        title: 'Apple RMM Mapping (Addigy)',
        href: '/addigy-mappings',
        icon: Smartphone,
        description: 'Map Addigy devices to companies'
      },
      {
        title: 'Data Browser',
        href: '/admin/data-browser',
        icon: Database,
        description: 'Browse and query system data'
      },
    ]
  },
];

export function AppNavigation() {
  const pathname = usePathname();

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

  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 flex h-16 items-center">
        <div className="flex flex-1 items-center justify-between">
          {/* Logo and App Name */}
          <Link href="/" className="flex items-center space-x-3 mr-6">
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg">
              <Activity className="h-5 w-5" />
            </div>
            <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 */}
          <NavigationMenu className="mx-6">
            <NavigationMenuList>
              {navigationItems.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-accent"
                      )}>
                        {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-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
                                    isActive(child.href) && "bg-accent"
                                  )}
                                >
                                  <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-accent"
                      )}>
                        {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-2">
            <ThemeToggle />
          </div>
        </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 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>
  );
}