// Navigation Component Specification
// Framework-agnostic navigation component definition

import { ScreenName, Action } from '@/core/operations/permissions/permission-types';

export type NavigationVariant = 'navbar' | 'sidebar' | 'tabs' | 'breadcrumbs';
export type NavigationOrientation = 'horizontal' | 'vertical';

export interface NavigationItem {
  id: string;
  label: string;
  icon?: string;
  href?: string;
  path?: string;
  screen?: ScreenName;
  action?: Action;
  module?: string;
  
  // Children (for nested navigation)
  children?: NavigationItem[];
  
  // Badge/Notification
  badge?: string | number;
  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
  
  // State
  active?: boolean;
  disabled?: boolean;
  
  // Visibility
  visibleForRoles?: string[];
  hiddenForRoles?: string[];
  requiredAction?: Action;
  requiredModule?: string;
  
  // Styling
  className?: string;
}

export interface NavbarProps {
  items: NavigationItem[];
  orientation?: NavigationOrientation;
  logo?: string | unknown; // Logo component or image
  logoHref?: string;
  
  // User menu
  userMenu?: UserMenuProps;
  
  // Search
  showSearch?: boolean;
  searchPlaceholder?: string;
  onSearch?: (query: string) => void;
  
  // Styling
  variant?: 'default' | 'elevated' | 'transparent';
  className?: string;
  
  // Role-based visibility
  employeeRole?: string;
  employeeParticipant?: 'DBIS' | 'SCB' | 'FI';
}

export interface SidebarProps {
  items: NavigationItem[];
  collapsed?: boolean;
  collapsible?: boolean;
  onToggle?: () => void;
  
  // Header
  header?: string | unknown;
  logo?: string | unknown;
  
  // Footer
  footer?: unknown;
  
  // Styling
  width?: string;
  collapsedWidth?: string;
  className?: string;
  
  // Role-based visibility
  employeeRole?: string;
  employeeParticipant?: 'DBIS' | 'SCB' | 'FI';
}

export interface TabsProps {
  items: NavigationItem[];
  activeTab?: string;
  onTabChange?: (tabId: string) => void;
  
  // Variants
  variant?: 'default' | 'pills' | 'underline';
  size?: 'sm' | 'md' | 'lg';
  
  // Behavior
  fullWidth?: boolean;
  
  // Styling
  className?: string;
}

export interface BreadcrumbsProps {
  items: NavigationItem[];
  separator?: string | unknown; // Icon or text
  maxItems?: number;
  showHome?: boolean;
  homeHref?: string;
  className?: string;
}

export interface UserMenuProps {
  user: {
    name: string;
    email?: string;
    avatar?: string;
    role?: string;
  };
  menuItems: NavigationItem[];
  onLogout?: () => void;
  className?: string;
}

/**
 * Navigation Component Interfaces
 * 
 * Usage example (React):
 * ```tsx
 * <Navbar
 *   items={navItems}
 *   logo="/logo.svg"
 *   userMenu={{
 *     user: { name: "John Doe", role: "MSC_Officer" },
 *     menuItems: userMenuItems
 *   }}
 *   showSearch
 *   onSearch={handleSearch}
 * />
 * 
 * <Sidebar
 *   items={sidebarItems}
 *   collapsed={isCollapsed}
 *   onToggle={toggleSidebar}
 * />
 * 
 * <Tabs
 *   items={tabItems}
 *   activeTab={activeTab}
 *   onTabChange={setActiveTab}
 * />
 * 
 * <Breadcrumbs
 *   items={breadcrumbItems}
 *   separator="/"
 * />
 * ```
 */
export interface NavbarComponent {
  props: NavbarProps;
  render(): unknown;
}

export interface SidebarComponent {
  props: SidebarProps;
  toggle(): void;
  render(): unknown;
}

export interface TabsComponent {
  props: TabsProps;
  setActiveTab(tabId: string): void;
  render(): unknown;
}

export interface BreadcrumbsComponent {
  props: BreadcrumbsProps;
  render(): unknown;
}

