<div class="dropdown-container" 
     [class.disabled]="disabled" 
     [class.error]="hasError"
     [class.focused]="isOpen"
     [class]="'dropdown-' + size"
     [class]="'dropdown-' + variant"
     [class]="'dropdown-' + color">
  
  <!-- 标签 -->
  @if (label) {
    <label class="dropdown-label" [class.required]="required">
      {{ label }}
      @if (required) {
        <span class="required-asterisk">*</span>
      }
    </label>
  }

  <!-- 主要输入区域 -->
  <div class="dropdown-input-wrapper" 
       (click)="toggleDropdown()"
       [attr.tabindex]="disabled ? -1 : 0"
       (keydown)="onKeyDown($event)"
       [attr.aria-expanded]="isOpen"
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-label]="label || placeholder"
       [attr.aria-describedby]="helpText ? 'dropdown-help-' + label : null"
       [attr.aria-invalid]="hasError"
       role="combobox">
    
    <!-- 选中值显示 -->
    <div class="dropdown-display">
      @if (multiple && selectedOptions.length > 0) {
        <!-- 多选标签 -->
        <div class="selected-tags">
          @for (option of selectedOptions; track option.value) {
            <span class="selected-tag">
              @if (option.icon) {
                <mat-icon class="tag-icon">{{ option.icon }}</mat-icon>
              }
              {{ option.label }}
              <button type="button" 
                      class="tag-remove" 
                      (click)="removeOption($event, option)"
                      [attr.aria-label]="'移除 ' + option.label">
                <mat-icon>close</mat-icon>
              </button>
            </span>
          }
        </div>
      } @else if (!multiple && selectedOption) {
        <!-- 单选显示 -->
        <div class="selected-single">
          @if (selectedOption.icon) {
            <mat-icon class="selected-icon">{{ selectedOption.icon }}</mat-icon>
          }
          <span class="selected-text">{{ selectedOption.label }}</span>
        </div>
      } @else {
        <!-- 占位符 -->
        <span class="dropdown-placeholder">{{ placeholder }}</span>
      }
    </div>

    <!-- 右侧图标 -->
    <div class="dropdown-icons">
      @if (clearable && hasValue && !disabled) {
        <button type="button" 
                class="clear-button" 
                (click)="clearSelection($event)"
                [attr.aria-label]="'清除选择'">
          <mat-icon>close</mat-icon>
        </button>
      }
      <mat-icon class="dropdown-arrow" [class.rotated]="isOpen">
        keyboard_arrow_down
      </mat-icon>
    </div>
  </div>

  <!-- 下拉面板 -->
  @if (isOpen) {
    <div class="dropdown-panel" 
         [@slideInOut]
         (click)="$event.stopPropagation()"
         role="listbox"
         [attr.aria-label]="label + '选项列表'"
         [attr.aria-multiselectable]="multiple">
      
      <!-- 搜索框 -->
      @if (searchable) {
        <div class="dropdown-search">
          <mat-icon class="search-icon">search</mat-icon>
          <input type="text"
                 class="search-input"
                 [(ngModel)]="searchTerm"
                 (input)="onSearch()"
                 [placeholder]="'搜索...'"
                 [attr.aria-label]="'搜索' + label + '选项'"
                 [attr.aria-describedby]="'search-help-' + label"
                 role="searchbox"
                 #searchInput>
          @if (searchTerm) {
            <button type="button" 
                    class="search-clear" 
                    (click)="clearSearch()">
              <mat-icon>close</mat-icon>
            </button>
          }
        </div>
      }

      <!-- 选项列表 -->
      <div class="dropdown-options" [class.with-search]="searchable">
        @if (filteredOptions.length === 0) {
          <div class="no-options">
            @if (searchTerm) {
              <mat-icon>search_off</mat-icon>
              <span>未找到匹配项</span>
            } @else {
              <mat-icon>inbox</mat-icon>
              <span>暂无选项</span>
            }
          </div>
        } @else {
          @if (groupedOptions.size > 0) {
            <!-- 分组选项 -->
            @for (group of groupedOptions | keyvalue; track group.key) {
              <div class="option-group">
                <div class="group-header">{{ group.key }}</div>
                @for (option of group.value; track option.value) {
                  <div class="dropdown-option"
                       [class.selected]="isSelected(option)"
                       [class.highlighted]="highlightedIndex === getOptionIndex(option)"
                       (click)="selectOption(option)"
                       (mouseenter)="highlightedIndex = getOptionIndex(option)"
                       [attr.aria-disabled]="option.disabled || option.isGroup">
                    
                    @if (multiple) {
                      <div class="option-checkbox">
                        <mat-icon>{{ isSelected(option) ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
                      </div>
                    }
                    
                    @if (option.icon) {
                      <mat-icon class="option-icon">{{ option.icon }}</mat-icon>
                    }
                    
                    <span class="option-text">{{ option.label }}</span>
                    
                    @if (option.description) {
                      <span class="option-description">{{ option.description }}</span>
                    }
                  </div>
                }
              </div>
            }
          } @else {
            <!-- 普通选项 -->
            @for (option of filteredOptions; track option.value; let i = $index) {
              <div class="dropdown-option"
                   [class.selected]="isSelected(option)"
                   [class.disabled]="option.disabled"
                   [class.highlighted]="highlightedIndex === i"
                   (click)="selectOption(option)"
                   (mouseenter)="highlightedIndex = i"
                   role="option"
                   [attr.aria-selected]="isSelected(option)"
                   [attr.aria-disabled]="option.disabled || option.isGroup"
                   [attr.aria-label]="option.label"
                   [attr.id]="'option-' + i">
                
                @if (multiple) {
                  <div class="option-checkbox">
                    <mat-icon>{{ isSelected(option) ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
                  </div>
                }
                
                @if (option.icon) {
                  <mat-icon class="option-icon">{{ option.icon }}</mat-icon>
                }
                
                <span class="option-text">{{ option.label }}</span>
                
                @if (option.description) {
                  <span class="option-description">{{ option.description }}</span>
                }
              </div>
            }
          }
        }
      </div>
    </div>
  }

  <!-- 帮助文本或错误信息 -->
  @if (helpText || errorMessage) {
    <div class="dropdown-hint">
      @if (errorMessage && hasError) {
        <mat-icon class="hint-icon error">error</mat-icon>
        <span class="hint-text error">{{ errorMessage }}</span>
      } @else if (helpText) {
        <mat-icon class="hint-icon">info</mat-icon>
        <span class="hint-text">{{ helpText }}</span>
      }
    </div>
  }
</div>

<!-- 背景遮罩 -->
@if (isOpen) {
  <div class="dropdown-backdrop" (click)="closeDropdown()"></div>
}

<!-- 无障碍帮助文本 -->
@if (helpText) {
  <div [id]="'dropdown-help-' + label" class="sr-only">
    {{ helpText }}
  </div>
}

@if (searchable) {
  <div [id]="'search-help-' + label" class="sr-only">
    使用键盘上下箭头键导航选项，回车键选择，Escape键关闭下拉列表
  </div>
}