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,
  HardDrive,
  Workflow,
  GitBranch,
  Sparkles,
  Bell,
  Zap,
  Radio,
  Shield,
  Users,
  TrendingUp,
  Sun,
  BarChart3,
  DollarSign,
} 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: 'Backup Status',
    href: '/backup-status',
    icon: HardDrive,
    description: 'Veeam backup health and compliance'
  },
  {
    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: 'Admin',
    icon: Activity,
    children: [
      {
        title: 'Integrations & Sync',
        href: '/admin/sync',
        icon: RefreshCw,
        description: 'Manage sync across PSA, RMM, NMS, Backup, and Apple RMM'
      },
      {
        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: 'Zabbix WAN Monitor',
        href: '/admin/zabbix-wan',
        icon: Radio,
        description: 'Sync RMM site WAN IPs to Zabbix with Autotask routing'
      },
      {
        title: 'Apple RMM Mapping (Addigy)',
        href: '/addigy-mappings',
        icon: Smartphone,
        description: 'Map Addigy devices to companies'
      },
      {
        title: 'Ticket Workflows',
        href: '/admin/workflow',
        icon: Workflow,
        description: 'Automated ticket triage and classification'
      },
      {
        title: 'Classification Rules',
        href: '/admin/workflow/classification-rules',
        icon: GitBranch,
        description: 'Keyword-based classification rules'
      },
      {
        title: 'AI Templates',
        href: '/admin/workflow/ai-templates',
        icon: Sparkles,
        description: 'AI prompt templates for enhancement'
      },
      {
        title: 'Webhook Pipelines',
        href: '/admin/workflow/pipelines',
        icon: Zap,
        description: 'Automated webhook processing workflows'
      },
      {
        title: 'Morning NOC Summary',
        href: '/admin/morning-summary',
        icon: Sun,
        description: 'Daily Zabbix overnight summary posted to Teams channels via webhook'
      },
      {
        title: 'Ticket Digest Reports',
        href: '/admin/ticket-digest',
        icon: BarChart3,
        description: 'LLM-analyzed ticket reports — noise, SLA, workload — daily/weekly/monthly'
      },
      {
        title: 'Notification Channels',
        href: '/admin/workflow/channels',
        icon: Bell,
        description: 'Teams, Telegram, and webhook notifications'
      },
      {
        title: 'IT Glue Sync',
        href: '/admin/sync/itglue',
        icon: Shield,
        description: 'IT Glue documentation backup — organizations, configs, passwords, flexible assets'
      },
      {
        title: 'SentinelOne Sync',
        href: '/admin/sync/sentinelone',
        icon: Shield,
        description: 'SentinelOne EDR — sites, agents, threats sync'
      },
      {
        title: 'QuickBooks Online',
        href: '/admin/qbo',
        icon: DollarSign,
        description: 'Sync invoices, payments, deposits, transactions and financial reports'
      },
      {
        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 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>
              {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-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>
  );
}