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

.ui-autocomplete {
  // Core Structure
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  
  // Size Variants
  &--sm {
    .ui-autocomplete__input-wrapper {
      min-height: 40px;
    }
    
    .ui-autocomplete__input {
      font-size: 16px;
      padding: 8px 12px;
    }
    
    .ui-autocomplete__label {
      font-size: 14px;
    }
  }
  
  &--md {
    .ui-autocomplete__input-wrapper {
      min-height: 48px;
    }
    
    .ui-autocomplete__input {
      font-size: 18px;
      padding: 12px 16px;
    }
    
    .ui-autocomplete__label {
      font-size: 16px;
    }
  }
  
  &--lg {
    .ui-autocomplete__input-wrapper {
      min-height: 56px;
    }
    
    .ui-autocomplete__input {
      font-size: 20px;
      padding: 16px 20px;
    }
    
    .ui-autocomplete__label {
      font-size: 18px;
    }
  }
  
  // Variant Styles
  &--outlined {
    .ui-autocomplete__input-wrapper {
      background: $semantic-color-surface-primary;
      border: $semantic-border-width-1 solid $semantic-color-border-primary;
      border-radius: $semantic-border-radius-md;
    }
    
    &:hover:not(.ui-autocomplete--disabled) .ui-autocomplete__input-wrapper {
      border-color: $semantic-color-border-focus;
    }
  }
  
  &--filled {
    .ui-autocomplete__input-wrapper {
      background: $semantic-color-surface-secondary;
      border: $semantic-border-width-1 solid transparent;
      border-radius: $semantic-border-radius-md $semantic-border-radius-md 0 0;
      border-bottom-color: $semantic-color-border-primary;
    }
    
    &:hover:not(.ui-autocomplete--disabled) .ui-autocomplete__input-wrapper {
      border-bottom-color: $semantic-color-border-focus;
    }
  }
  
  // State Variants
  &--focused {
    .ui-autocomplete__input-wrapper {
      border-color: $semantic-color-brand-primary;
      box-shadow: $semantic-shadow-button-focus;
    }
    
    .ui-autocomplete__label {
      color: $semantic-color-brand-primary;
    }
  }
  
  &--error {
    .ui-autocomplete__input-wrapper {
      border-color: $semantic-color-error;
    }
    
    .ui-autocomplete__label {
      color: $semantic-color-error;
    }
  }
  
  &--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    
    .ui-autocomplete__input {
      cursor: not-allowed;
    }
  }
  
  &--loading {
    .ui-autocomplete__input {
      cursor: wait;
    }
  }
  
  // Label
  &__label {
    display: block;
    margin-bottom: 8px;
    color: $semantic-color-text-secondary;
    font-weight: 500;
    transition: color 0.2s ease;
    
    &--required::after {
      content: ' *';
      color: $semantic-color-error;
    }
  }
  
  // Input Wrapper
  &__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
  }
  
  // Input Field
  &__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: $semantic-color-text-primary;
    font-family: inherit;
    transition: all 0.2s ease;
    
    &::placeholder {
      color: $semantic-color-text-tertiary;
    }
    
    &:focus {
      outline: none;
    }
    
    &:disabled {
      color: $semantic-color-text-tertiary;
      cursor: not-allowed;
    }
  }
  
  // Clear Button
  &__clear-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 8px;
    border: none;
    background: transparent;
    color: $semantic-color-text-secondary;
    border-radius: $semantic-border-radius-sm;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background: $semantic-color-surface-elevated;
      color: $semantic-color-text-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-brand-primary;
      outline-offset: 2px;
    }
    
    &:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }
  }
  
  // Dropdown Container
  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 8px;
    background: $semantic-color-surface-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    border-radius: $semantic-border-radius-md;
    box-shadow: $semantic-shadow-elevation-3;
    max-height: 240px;
    overflow-y: auto;
    
    &--sm {
      max-height: 200px;
    }
    
    &--lg {
      max-height: 280px;
    }
  }
  
  // Option Item
  &__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: $semantic-color-text-primary;
    font-family: inherit;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &--sm {
      padding: 8px 12px;
      font-size: 16px;
    }
    
    &--md {
      padding: 12px 16px;
      font-size: 18px;
    }
    
    &--lg {
      padding: 16px 20px;
      font-size: 20px;
    }
    
    &:hover {
      background: $semantic-color-surface-secondary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-brand-primary;
      outline-offset: -2px;
    }
    
    &--highlighted {
      background: $semantic-color-surface-secondary;
      color: $semantic-color-text-primary;
    }
    
    &--selected {
      background: rgba($semantic-color-brand-primary, 0.08);
      color: $semantic-color-brand-primary;
      font-weight: 500;
    }
    
    &--disabled {
      opacity: 0.38;
      cursor: not-allowed;
      
      &:hover {
        background: transparent;
      }
    }
  }
  
  // Option Text
  &__option-text {
    flex: 1;
  }
  
  // Option Secondary Text
  &__option-secondary {
    color: $semantic-color-text-secondary;
    font-size: 12px;
    margin-left: 12px;
  }
  
  // Loading State
  &__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: $semantic-color-text-secondary;
    font-size: 14px;
  }
  
  // No Options State
  &__no-options {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: $semantic-color-text-secondary;
    font-size: 14px;
    font-style: italic;
  }
  
  // Helper Text
  &__helper-text {
    margin-top: 8px;
    color: $semantic-color-text-secondary;
    font-size: 12px;
  }
  
  // Error Text
  &__error-text {
    margin-top: 8px;
    color: $semantic-color-error;
    font-size: 12px;
  }
  
  // Full Width
  &--full-width {
    width: 100%;
  }
  
  // Dark Mode Support
  :host-context(.dark-theme) & {
    .ui-autocomplete__input::placeholder {
      color: $semantic-color-text-secondary;
    }
  }
  
  // Responsive Design
  @media (max-width: 767px) {
    &__dropdown {
      max-height: 200px;
    }
  }
  
  @media (max-width: 575px) {
    // Mobile adjustments - respect size variants
    &--sm &__input {
      font-size: 16px;
    }
    
    &--md &__input {
      font-size: 18px;
    }
    
    &--lg &__input {
      font-size: 20px;
    }
    
    &__dropdown {
      max-height: 180px;
    }
    
    &__option {
      padding: 12px 16px;
    }
  }
}