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

// Tokens available globally via main application styles

// ==========================================================================
// SEARCH BAR COMPONENT STYLES
// ==========================================================================
// Modern search bar implementation using design tokens
// Follows Material Design 3 principles with semantic token system
// ==========================================================================

.search-bar-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;

  // Size variants
  &.search-bar-wrapper--sm {
    .search-bar {
      height: 40px;
    }
  }

  &.search-bar-wrapper--md {
    .search-bar {
      height: 48px;
    }
  }

  &.search-bar-wrapper--lg {
    .search-bar {
      height: 56px;
    }
  }

  // Variant styles
  &.search-bar-wrapper--outlined {
    .search-bar {
      background-color: $semantic-color-surface-primary;
      border: $semantic-border-width-1 solid $semantic-color-border-primary;
      
      &:hover:not(.search-bar--disabled) {
        border-color: $semantic-color-border-focus;
      }
      
      &.search-bar--focused {
        border-color: $semantic-color-brand-primary;
        box-shadow: $semantic-shadow-button-focus;
      }
    }
  }

  &.search-bar-wrapper--filled {
    .search-bar {
      background-color: $semantic-color-surface-secondary;
      border: $semantic-border-width-1 solid transparent;
      
      &:hover:not(.search-bar--disabled) {
        background-color: $semantic-color-surface-secondary;
      }
      
      &.search-bar--focused {
        border-color: $semantic-color-brand-primary;
        box-shadow: $semantic-shadow-button-focus;
      }
    }
  }

  &.search-bar-wrapper--elevated {
    .search-bar {
      background-color: $semantic-color-surface-primary;
      border: none;
      box-shadow: $semantic-shadow-elevation-1;
      
      &:hover:not(.search-bar--disabled) {
        box-shadow: $semantic-shadow-elevation-2;
      }
      
      &.search-bar--focused {
        box-shadow: $semantic-shadow-elevation-3;
      }
    }
  }

  // State variants
  &.search-bar-wrapper--error {
    .search-bar {
      border-color: $semantic-color-danger;
      
      &.search-bar--focused {
        box-shadow: $semantic-shadow-danger;
      }
    }
  }

  &.search-bar-wrapper--disabled {
    opacity: 0.6;
    
    .search-bar {
      background-color: $semantic-color-surface-disabled;
      border-color: $semantic-color-border-disabled;
      cursor: not-allowed;
    }
  }
}

.search-bar {
  display: flex;
  align-items: center;
  border-radius: $semantic-border-radius-3xl;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  position: relative;
  overflow: hidden;

  // Size-specific heights handled by wrapper

  &--disabled {
    pointer-events: none;
  }
}

.search-bar__leading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $semantic-color-text-secondary;
  flex-shrink: 0;
  
  &--sm {
    width: 40px;
    height: 40px;
    padding-left: $semantic-spacing-component-sm;
    
    fa-icon {
      font-size: $semantic-typography-font-size-lg;
    }
  }
  
  &--md {
    width: 48px;
    height: 48px;
    padding-left: $semantic-spacing-component-md;
    
    fa-icon {
      font-size: $semantic-typography-font-size-2xl;
    }
  }
  
  &--lg {
    width: 56px;
    height: 56px;
    padding-left: $semantic-spacing-component-lg;
    
    fa-icon {
      font-size: $semantic-typography-font-size-lg;
    }
  }
}

.search-bar__input-wrapper {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  
  &--sm {
    padding: 0 $semantic-spacing-component-xs;
  }
  
  &--md {
    padding: 0 $semantic-spacing-component-sm;
  }
  
  &--lg {
    padding: 0 $semantic-spacing-component-md;
  }
}

.search-bar__label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: $semantic-color-text-secondary;
  font-size: $semantic-typography-font-size-md;
  font-weight: $semantic-typography-font-weight-normal;
  pointer-events: none;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  z-index: 1;
  
  &--floating {
    top: 8px;
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-brand-primary;
    transform: translateY(0);
  }
  
  .search-bar__required-indicator {
    color: $semantic-color-danger;
    margin-left: 2px;
  }
}

.search-bar__input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: $semantic-color-text-primary;
  font-size: $semantic-typography-font-size-md;
  font-weight: $semantic-typography-font-weight-normal;
  line-height: $semantic-typography-line-height-normal;
  caret-color: $semantic-color-brand-primary;
  
  &::placeholder {
    color: $semantic-color-text-secondary;
    transition: color $semantic-duration-fast $semantic-easing-standard;
  }
  
  &:focus::placeholder {
    color: transparent;
  }
  
  // Remove default search input styling
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  // Size variants
  &--sm {
    font-size: $semantic-typography-font-size-sm;
    padding: 0 $semantic-spacing-component-xs;
  }
  
  &--md {
    font-size: $semantic-typography-font-size-md;
    padding: 0 $semantic-spacing-component-sm;
  }
  
  &--lg {
    font-size: $semantic-typography-font-size-lg;
    padding: 0 $semantic-spacing-component-md;
  }
  
  &--has-value {
    font-weight: $semantic-typography-font-weight-medium;
  }
}

.search-bar__trailing-icons {
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
  flex-shrink: 0;
  
  &--sm {
    padding-right: $semantic-spacing-component-sm;
  }
  
  &--md {
    padding-right: $semantic-spacing-component-md;
  }
  
  &--lg {
    padding-right: $semantic-spacing-component-lg;
  }
}

.search-bar__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: $semantic-color-text-secondary;
  cursor: pointer;
  border-radius: $semantic-border-radius-sm;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  
  &:hover:not(:disabled) {
    background-color: $semantic-color-surface-secondary;
    color: $semantic-color-text-primary;
  }
  
  &:active:not(:disabled) {
    transform: scale(0.95);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  // Size variants
  &--sm {
    width: 32px;
    height: 32px;
    
    fa-icon {
      font-size: $semantic-typography-font-size-md;
    }
  }
  
  &--md {
    width: 36px;
    height: 36px;
    
    fa-icon {
      font-size: $semantic-typography-font-size-lg;
    }
  }
  
  &--lg {
    width: 40px;
    height: 40px;
    
    fa-icon {
      font-size: $semantic-typography-font-size-2xl;
    }
  }
}

.search-bar__clear-button {
  color: $semantic-color-text-tertiary;
  
  &:hover:not(:disabled) {
    color: $semantic-color-danger;
    background-color: rgba($semantic-color-danger, 0.1);
  }
}

.search-bar__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: $semantic-color-surface-primary;
  border-radius: $semantic-border-radius-lg;
  box-shadow: $semantic-shadow-elevation-3;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: $semantic-spacing-component-xs;
  
  &--sm {
    margin-top: 4px;
  }
  
  &--md {
    margin-top: 6px;
  }
  
  &--lg {
    margin-top: 8px;
  }
}

.search-bar__suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-sm;
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  border: none;
  background: transparent;
  color: $semantic-color-text-primary;
  cursor: pointer;
  text-align: left;
  transition: background-color $semantic-duration-fast $semantic-easing-standard;
  
  &:hover,
  &--selected {
    background-color: $semantic-color-surface-secondary;
  }
  
  &:first-child {
    border-top-left-radius: $semantic-border-radius-lg;
    border-top-right-radius: $semantic-border-radius-lg;
  }
  
  &:last-child {
    border-bottom-left-radius: $semantic-border-radius-lg;
    border-bottom-right-radius: $semantic-border-radius-lg;
  }
  
  // Size variants
  &--sm {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    
    .search-bar__suggestion-text {
      font-size: $semantic-typography-font-size-sm;
    }
    
    .search-bar__suggestion-category {
      font-size: $semantic-typography-font-size-xs;
    }
  }
  
  &--md {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    
    .search-bar__suggestion-text {
      font-size: $semantic-typography-font-size-md;
    }
    
    .search-bar__suggestion-category {
      font-size: $semantic-typography-font-size-sm;
    }
  }
  
  &--lg {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
    
    .search-bar__suggestion-text {
      font-size: $semantic-typography-font-size-lg;
    }
    
    .search-bar__suggestion-category {
      font-size: $semantic-typography-font-size-md;
    }
  }
}

.search-bar__suggestion-icon {
  color: $semantic-color-text-secondary;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.search-bar__suggestion-text {
  flex: 1;
  font-weight: $semantic-typography-font-weight-normal;
}

.search-bar__suggestion-category {
  color: $semantic-color-text-tertiary;
  font-weight: $semantic-typography-font-weight-normal;
  flex-shrink: 0;
}

.search-bar__helper-text {
  margin-top: $semantic-spacing-component-xs;
  padding-left: $semantic-spacing-component-md;
  font-size: $semantic-typography-font-size-xs;
  color: $semantic-color-text-secondary;
  line-height: $semantic-typography-line-height-tight;
}

.search-bar__error-text {
  margin-top: $semantic-spacing-component-xs;
  padding-left: $semantic-spacing-component-md;
  font-size: $semantic-typography-font-size-xs;
  color: $semantic-color-danger;
  line-height: $semantic-typography-line-height-tight;
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
}

// ==========================================================================
// RESPONSIVE DESIGN
// ==========================================================================

@media (max-width: $semantic-breakpoint-md - 1) {
  .search-bar-wrapper {
    // Larger touch targets on mobile
    &.search-bar-wrapper--sm {
      .search-bar {
        height: 44px;
      }
      
      .search-bar__icon-button--sm {
        width: 36px;
        height: 36px;
      }
    }
    
    &.search-bar-wrapper--md {
      .search-bar {
        height: 52px;
      }
      
      .search-bar__icon-button--md {
        width: 40px;
        height: 40px;
      }
    }
  }
  
  .search-bar__suggestions {
    max-height: 250px; // Smaller on mobile
  }
}

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

// Reduced motion preference
@media (prefers-reduced-motion: reduce) {
  .search-bar,
  .search-bar__label,
  .search-bar__input,
  .search-bar__icon-button,
  .search-bar__suggestion {
    transition: none !important;
    animation: none !important;
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .search-bar-wrapper {
    &.search-bar-wrapper--outlined,
    &.search-bar-wrapper--filled {
      .search-bar {
        border-width: $semantic-border-width-2;
      }
    }
  }
  
  .search-bar__suggestions {
    border-width: $semantic-border-width-2;
  }
}

// Focus visible for keyboard navigation
.search-bar__icon-button:focus-visible {
  outline: $semantic-border-width-2 solid $semantic-color-brand-primary;
  outline-offset: 2px;
}

.search-bar__suggestion:focus-visible {
  outline: $semantic-border-width-2 solid $semantic-color-brand-primary;
  outline-offset: -2px;
}