@import "/src/assets/scss/modern-variables.scss";

.hybrid-navigation {
  display: flex;
  flex-direction: column;
  background: $bg-secondary;
  border-right: 1px solid $border-light;
  position: relative;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 100%;
  
  // Mode tabs horizontaux uniquement
  &.main-tabs-only {
    width: 100%;
    min-width: auto;
    max-width: none;
    height: auto;
    border-right: none;
    border-bottom: 1px solid $border-light;
    
    .main-tabs {
      border-bottom: none;
      
      .tabs-container {
        flex-direction: row;
        justify-content: center;
        padding: 0 $space-lg;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        height: 50px;
        // Scrollbar personnalisée horizontale
        &::-webkit-scrollbar {
          height: 2px;
          width: auto;
        }
      }
    }
  }
  
  // Mode sidebar uniquement
  &.sub-sidebar-only {
    // Garder les styles par défaut de sidebar
  }
}

// ===========================
// TABS PRINCIPALES
// ===========================

.main-tabs {
  flex-shrink: 0;
  background: $bg-secondary;
  border-bottom: 1px solid $border-light;
  overflow: hidden;
  
  .tabs-container {
    display: flex;
    flex-direction: column;
    padding: $space-md 0;
    gap: $space-xs;
    overflow-y: auto;
    max-height: 300px;
    
    // Scrollbar personnalisée
    &::-webkit-scrollbar {
      width: 2px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $border-medium;
      border-radius: 1px;
    }
  }
}

.main-tab {
  display: flex;
  align-items: center;
  gap: $space-sm;
  padding: $space-md $space-lg;
  margin: 0 $space-md;
  border: none;
  background: none;
  color: $text-secondary;
  font-size: $text-sm;
  font-weight: 500;
  cursor: pointer;
  border-radius: $radius-lg;
  transition: all $transition-normal;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  width: auto;
  
  // Mode horizontal
  .hybrid-navigation.main-tabs-only & {
    margin: 0 $space-xs;
    padding: $space-sm $space-md;
    min-width: auto;
  }
  
  @media (max-width: $mobile) {
    padding: $space-sm $space-md;
    gap: $space-xs;
  }
  
  // Indicateur de couleur du module
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--module-color, $estair-blue);
    border-radius: 2px 2px 0 0;
    transition: width $transition-normal;
  }
  
  &:hover {
    background: rgba(var(--module-color-rgb, 74, 168, 220), 0.05);
    color: var(--module-color, $estair-blue);
    
    &::before {
      width: 60%;
    }
  }
  
  &.active {
    // Conserver en permanence l'apparence du hover quand sélectionné
    background: rgba(var(--module-color-rgb, 74, 168, 220), 0.05) !important;
    color: var(--module-color, $estair-blue) !important;
    font-weight: 600;
    
    &::before {
      width: 60% !important;
    }
    
    // Intensifier légèrement au survol de l'onglet actif
    &:hover {
      background: rgba(var(--module-color-rgb, 74, 168, 220), 0.08) !important;
      
      &::before {
        width: 70% !important;
      }
    }
  }
  
  .tab-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    
    @media (max-width: $mobile) {
      font-size: 16px;
      width: 16px;
      height: 16px;
    }
  }
  
  .tab-label {
    @media (max-width: 480px) {
      display: none;
    }
  }
}

// ===========================
// SIDEBAR CONTEXTUELLE
// ===========================

.sub-sidebar {
  flex: 1;
  background: $bg-tertiary;
  display: flex;
  flex-direction: column;
  transition: all $transition-normal;
  position: relative;
  overflow-y: auto;
  
  @media (max-width: $mobile) {
    position: absolute;
    top: 100%;
    left: 0;
    height: calc(100vh - #{$header-height + $main-tabs-height});
    z-index: $z-fixed;
    transform: translateX(-100%);
    box-shadow: $shadow-lg;
    
    &:not(.collapsed) {
      transform: translateX(0);
    }
  }
  
  &.collapsed {
    width: $sidebar-collapsed-width;
    
    .sidebar-header .module-details,
    .sub-details,
    .sidebar-footer {
      display: none;
    }
    
    .sub-module-item {
      justify-content: center;
      
      .sub-item-content {
        justify-content: center;
      }
    }
  }
}

.sidebar-header {
  padding: $space-lg;
  border-bottom: 1px solid $border-light;
  background: $bg-secondary;
  
  .module-info {
    display: flex;
    align-items: center;
    gap: $space-sm;
    
    .module-icon {
      width: 40px;
      height: 40px;
      border-radius: $radius-lg;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $estair-blue;
      color: $text-inverse;
      flex-shrink: 0;
      
      mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
      }
    }
    
    .module-details {
      flex: 1;
      min-width: 0;
      
      .module-name {
        font-size: $text-base;
        font-weight: 600;
        color: $text-primary;
        margin: 0 0 2px 0;
        line-height: 1.2;
      }
      
      .module-description {
        font-size: $text-xs;
        color: $text-secondary;
        margin: 0;
        line-height: 1.3;
      }
    }
  }
}

.sub-modules-list {
  flex: 1;
  padding: $space-md;
  overflow-y: auto;
  
  .sub-module-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $space-sm $space-md;
    border: none;
    background: none;
    color: $text-secondary;
    font-size: $text-sm;
    font-weight: 500;
    cursor: pointer;
    border-radius: $radius-md;
    transition: all $transition-fast;
    margin-bottom: $space-xs;
    position: relative;
    text-align: left;
    
    &:hover {
      background: $bg-secondary;
      color: $text-primary;
      transform: translateX(2px);
    }
    
    &.active {
      background: $estair-blue-light;
      color: $estair-blue;
      font-weight: 600;
      
      .sub-count {
        background: $estair-blue;
        color: $text-inverse;
      }
    }
    
    .sub-item-content {
      display: flex;
      align-items: center;
      gap: $space-sm;
      flex: 1;
      min-width: 0;
      
      .sub-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }
      
      .sub-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        min-width: 0;
        
        .sub-name {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .sub-count {
          background: $border-medium;
          color: $text-muted;
          font-size: $text-xs;
          font-weight: 600;
          padding: 2px 6px;
          border-radius: 10px;
          min-width: 20px;
          text-align: center;
          flex-shrink: 0;
          margin-left: $space-sm;
        }
      }
    }
    
    .active-indicator {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: $estair-blue;
      border-radius: 0 2px 2px 0;
    }
  }
}

.sidebar-footer {
  padding: $space-md;
  border-top: 1px solid $border-light;
  background: $bg-secondary;
  
  .footer-stats {
    display: flex;
    flex-direction: column;
    gap: $space-xs;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: $space-xs;
      font-size: $text-xs;
      color: $text-muted;
      
      mat-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
    }
  }
}

// ===========================
// TOGGLE SIDEBAR
// ===========================

.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: $bg-secondary;
  border: 1px solid $border-light;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-muted;
  transition: all $transition-normal;
  z-index: $z-fixed;
  
  @media (min-width: $mobile + 1px) {
    display: none;
  }
  
  &:hover {
    background: $estair-blue-light;
    border-color: $estair-blue;
    color: $estair-blue;
    transform: translateY(-50%) scale(1.1);
  }
  
  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

// ===========================
// RESPONSIVE
// ===========================

@media (max-width: $mobile) {
  .hybrid-navigation {
    .main-tabs {
      .tabs-container {
        justify-content: space-around;
        
        .main-tab {
          flex: 1;
          justify-content: center;
          max-width: none;
          
          .tab-label {
            font-size: $text-xs;
          }
        }
      }
    }
    
    .sub-sidebar {
      &.collapsed {
        transform: translateX(-100%);
      }
    }
  }
}

// ===========================
// ANIMATIONS
// ===========================

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.sub-sidebar {
  animation: slideInLeft $transition-normal ease-out;
}

// ===========================
// UTILITAIRES
// ===========================

.hybrid-navigation {
  // Méthodes helper pour les couleurs dynamiques
  .main-tab {
    // Conversion des couleurs hex en RGB pour les variables CSS
    &[style*="#4AA8DC"] { --module-color-rgb: 74, 168, 220; }
    &[style*="#8DA969"] { --module-color-rgb: 141, 169, 105; }
    &[style*="#F59E0B"] { --module-color-rgb: 245, 158, 11; }
    &[style*="#EF4444"] { --module-color-rgb: 239, 68, 68; }
    &[style*="#8B5CF6"] { --module-color-rgb: 139, 92, 246; }
    &[style*="#6B7280"] { --module-color-rgb: 107, 114, 128; }
  }
}