@use 'ui-design-system/src/styles/semantic/index' as *;

// Tokens available globally via main application styles

// ==========================================================================
// MENU ITEM COMPONENT
// ==========================================================================
// Comprehensive menu item component with multiple variants and sizes
// Uses semantic design tokens for consistent styling across the design system
// ==========================================================================

.menu-item {
  display: flex;
  flex-direction: row;  // Changed from column to row
  align-items: center;  // Add this to vertically center content
  width: 100%;
  box-sizing: border-box;
  position: relative;
  user-select: none;
  background-color: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;
  border-radius: $semantic-border-radius-sm;
  


  &:hover:not(.menu-item--disabled) {
    background-color: $semantic-color-surface-interactive;
  }
  
  &:focus-within:not(.menu-item--disabled) {
//   outline: 2px solid $semantic-color-border-focus;
 //   outline-offset: 2px;
  }
  
  // States
  &--active {
    background-color: $semantic-color-container-primary;
    color: $semantic-color-on-container-primary;
    
    &:hover {
      background-color: $semantic-color-container-primary;
      opacity: 0.9;
    }
  }
  
  &--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    color: $semantic-color-text-disabled;
    
    &:hover {
      background-color: $semantic-color-surface-primary;
    }
  }

  // ==========================================================================
  // SIZE VARIANTS
  // ==========================================================================
  
  &--sm {
    min-height: 36px;
    
    &.menu-item--dense {
      min-height: 32px;
    }
  }
  
  &--md {
    min-height: 48px;
    
    &.menu-item--dense {
      min-height: 40px;
    }
  }
  
  &--lg {
    min-height: 56px;
    
    &.menu-item--dense {
      min-height: 48px;
    }
  }

  // ==========================================================================
  // VARIANT STYLES
  // ==========================================================================
  
  &--primary {
    color: $semantic-color-interactive-primary;
    
    &.menu-item--active {
      background-color: $semantic-color-container-primary;
      color: $semantic-color-on-container-primary;
    }
    
    &:hover:not(.menu-item--disabled):not(.menu-item--active) {
      background-color: $semantic-color-surface-hover;
    }
  }
  
  &--secondary {
    color: $semantic-color-interactive-secondary;
    
    &.menu-item--active {
      background-color: $semantic-color-container-secondary;
      color: $semantic-color-on-container-secondary;
    }
    
    &:hover:not(.menu-item--disabled):not(.menu-item--active) {
      background-color: $semantic-color-surface-hover;
    }
  }
  
  &--danger {
    color: $semantic-color-danger;
    
    &.menu-item--active {
      background-color: $semantic-color-container-error;
      color: $semantic-color-on-container-error;
    }
    
    &:hover:not(.menu-item--disabled):not(.menu-item--active) {
      background-color: $semantic-color-surface-hover;
    }
  }

  // ==========================================================================
  // LAYOUT MODIFIERS 
  // ==========================================================================
  
  &--indent {
    margin-left: $semantic-spacing-component-md;
  }
  
  &--with-divider {
    margin-bottom: $semantic-spacing-component-xs;
  }
}

// ==========================================================================
// MENU ITEM LINK
// ==========================================================================

.menu-item__link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  
  .menu-item--sm & {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  }
  
  .menu-item--lg & {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
  }
  
  &:focus {
    outline: none;
  }
}

// ==========================================================================
// MENU ITEM CONTENT (when no link)
// ==========================================================================

.menu-item:not(:has(.menu-item__link)) {
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  
  &.menu-item--sm {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  }
  
  &.menu-item--lg {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
  }
}

// FontAwesome icon content wrapper
.menu-item:not(:has(.menu-item__link)) ng-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

// ==========================================================================
// ICON STYLES
// ==========================================================================

.menu-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $semantic-color-text-secondary;

  &--left {
    margin-right: $semantic-spacing-component-md;
    align-self: center;
  }
  
  &--right {
    margin-left: auto; // Push right icons to the end
    align-self: center;
  }
  
  &--circle {
    border-radius: 50%;
    background-color: $semantic-color-surface-elevated;
    border: 1px solid $semantic-color-border-secondary;
    
    .menu-item--sm & {
      width: 28px;
      height: 28px;
    }
    
    .menu-item--md & {
      width: 32px;
      height: 32px;
    }
    
    .menu-item--lg & {
      width: 36px;
      height: 36px;
    }
  }
  
  i {
    .menu-item--sm & { font-size: 14px; }
    .menu-item--md & { font-size: 16px; }
    .menu-item--lg & { font-size: 18px; }
    
    .menu-item__icon--circle & {
      .menu-item--sm & { font-size: $semantic-typography-font-size-xs; }
      .menu-item--md & { font-size: $semantic-typography-font-size-sm; }
      .menu-item--lg & { font-size: $semantic-typography-font-size-md; }
    }
  }
  
  // Variant specific icon colors
  .menu-item--primary & {
    color: $semantic-color-interactive-primary;
  }
  
  .menu-item--secondary & {
    color: $semantic-color-interactive-secondary;
  }
  
  .menu-item--danger & {
    color: $semantic-color-danger;
  }
  
  // Custom emoji-based icon mappings using ::before pseudo-elements
  // These apply to the <i> element when it has these specific classes
  &.icon-dashboard::before { content: '📊'; }
  &.icon-chart::before { content: '📈'; }
  &.icon-projects::before { content: '📁'; }
  &.icon-team::before { content: '👥'; }
  &.icon-documents::before { content: '📄'; }
  &.icon-demo::before { content: '🎨'; }
  &.icon-button::before { content: '🔘'; }
  &.icon-badge::before { content: '🏷️'; }
  &.icon-avatar::before { content: '👤'; }
  &.icon-table::before { content: '📊'; }
  &.icon-appbar::before { content: '📱'; }
  &.icon-home::before { content: '🏠'; }
  &.icon-settings::before { content: '⚙️'; }
  &.icon-help::before { content: '❓'; }
  &.icon-overview::before { content: '👁️'; }
  &.icon-reports::before { content: '📋'; }
  &.icon-insights::before { content: '💡'; }
  &.icon-members::before { content: '👤'; }
  &.icon-roles::before { content: '🏷️'; }
  &.icon-chevron-left::before { content: '‹'; }
  &.icon-chevron-double-left::before { content: '«'; }
  &.icon-chevron-right::before { content: '›'; }
  
  // FontAwesome component support
  fa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    
    .menu-item--sm & { 
      font-size: 14px; 
      width: 14px;
      height: 14px;
    }
    .menu-item--md & { 
      font-size: 16px;
      width: 16px; 
      height: 16px;
    }
    .menu-item--lg & { 
      font-size: 18px;
      width: 18px;
      height: 18px;
    }
    
    .menu-item__icon--circle & {
      .menu-item--sm & { 
        font-size: 12px;
        width: 12px;
        height: 12px;
      }
      .menu-item--md & { 
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
      .menu-item--lg & { 
        font-size: 16px;
        width: 16px;
        height: 16px;
      }
    }
  }
}

// ==========================================================================
// CONTENT AREA
// ==========================================================================

.menu-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: $semantic-spacing-component-sm;
  width: 100%;
}

.menu-item__label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  .menu-item--sm & {
    font-size: $semantic-typography-font-size-sm;
  }
  
  .menu-item--md & {
    font-size: $semantic-typography-font-size-md;
  }
  
  .menu-item--lg & {
    font-size: $semantic-typography-font-size-lg;
  }
}

.menu-item__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: auto; /* Push badge to the right */
  background-color: $semantic-color-interactive-primary;
  color: $semantic-color-on-brand-primary;
  border-radius: $semantic-border-radius-full;
  font-size: $semantic-typography-font-size-xs;
  font-weight: 600;
  line-height: 1;
  
  .menu-item--sm & {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: $semantic-typography-font-size-xs;
  }
  
  .menu-item--lg & {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: $semantic-typography-font-size-sm;
  }
}

// ==========================================================================
// SUBMENU CARET
// ==========================================================================

.menu-item__caret {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: $semantic-spacing-component-sm;
  color: $semantic-color-text-tertiary;
  transition: transform $semantic-motion-duration-normal $semantic-motion-easing-ease-in-out;
  
  i {
    .menu-item--sm & { font-size: $semantic-typography-font-size-xs; }
    .menu-item--md & { font-size: $semantic-typography-font-size-sm; }
    .menu-item--lg & { font-size: $semantic-typography-font-size-md; }
  }
  
  fa-icon {
    .menu-item--sm & { font-size: $semantic-typography-font-size-xs; }
    .menu-item--md & { font-size: $semantic-typography-font-size-sm; }
    .menu-item--lg & { font-size: $semantic-typography-font-size-md; }
  }
  
  .menu-item--has-submenu.menu-item--active & {
    transform: rotate(90deg);
  }
}

// ==========================================================================
// DIVIDER
// ==========================================================================

.menu-item__divider {
  position: absolute;
  bottom: 0;
  left: $semantic-spacing-component-md;
  right: $semantic-spacing-component-md;
  height: 1px;
  background-color: $semantic-color-border-secondary;
  
  .menu-item--sm & {
    left: $semantic-spacing-component-sm;
    right: $semantic-spacing-component-sm;
  }
  
  .menu-item--lg & {
    left: $semantic-spacing-component-lg;
    right: $semantic-spacing-component-lg;
  }
}

// ==========================================================================
// RESPONSIVE ADJUSTMENTS
// ==========================================================================

@media (max-width: 768px) {
  .menu-item {
    &--lg {
      min-height: 48px;
      
      &.menu-item--dense {
        min-height: 40px;
      }
    }
  }
  
  .menu-item__content {
    padding-left: $semantic-spacing-component-sm;
    padding-right: $semantic-spacing-component-sm;
  }
}

// ==========================================================================
// ACCESSIBILITY ENHANCEMENTS
// ==========================================================================

.menu-item {
  &:focus-visible {
    outline: 2px solid $semantic-color-border-focus;
    outline-offset: 2px;
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .menu-item {
    border: 1px solid transparent;
    
    &:hover:not(.menu-item--disabled) {
      border-color: $semantic-color-border-primary;
    }
    
    &--active {
      border-color: $semantic-color-interactive-primary;
    }
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .menu-item,
  .menu-item__caret {
    transition: none;
  }
}