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

// Tokens available globally via main application styles

// ==========================================================================
// TEXT INPUT COMPONENT
// ==========================================================================
// Comprehensive text input component with multiple variants and sizes
// Uses semantic design tokens for consistent styling across the design system
// ==========================================================================

.text-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  
  // ==========================================================================
  // SIZE VARIANTS
  // ==========================================================================
  
  &--sm {
    .text-input__container {
      min-height: 36px;
    }
    
    .text-input__field {
      font-size: 0.875rem;
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    }
    
    .text-input__label {
      font-size: 0.8125rem;
      margin-bottom: $semantic-spacing-component-xs;
    }
  }
  
  &--md {
    .text-input__container {
      min-height: 48px;
    }
    
    .text-input__field {
      font-size: 1rem;
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    }
    
    .text-input__label {
      font-size: 0.875rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
  }
  
  &--lg {
    .text-input__container {
      min-height: 56px;
    }
    
    .text-input__field {
      font-size: 1.125rem;
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
    }
    
    .text-input__label {
      font-size: 1rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
  }

  // ==========================================================================
  // VARIANT STYLES
  // ==========================================================================
  
  &--outlined {
    .text-input__container {
      border: $semantic-border-width-2 solid $semantic-color-border-primary;
      border-radius: $semantic-border-radius-md;
      background-color: $semantic-color-surface-primary;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-color: $semantic-color-interactive-primary;
      box-shadow: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12);
    }
  }
  
  &--filled {
    .text-input__container {
      border: none;
      border-bottom: 2px solid $semantic-color-border-primary;
      border-radius: $semantic-border-radius-sm $semantic-border-radius-sm 0 0;
      background-color: $semantic-color-surface-secondary;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-bottom-color: $semantic-color-interactive-primary;
      background-color: $semantic-color-surface-elevated;
    }
  }
  
  &--underlined {
    .text-input__container {
      border: none;
      border-bottom: 1px solid $semantic-color-border-primary;
      border-radius: 0;
      background-color: transparent;
      padding: $semantic-spacing-component-xs 0;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-bottom: 2px solid $semantic-color-interactive-primary;
    }
  }

  // ==========================================================================
  // STATE VARIANTS
  // ==========================================================================
  
  &--error {
    .text-input__container {
      border-color: $semantic-color-danger;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-color: $semantic-color-danger;
      box-shadow: 0 0 0 2px rgba($semantic-color-danger, 0.12);
    }
    
    .text-input__label {
      color: $semantic-color-danger;
    }
  }
  
  &--success {
    .text-input__container {
      border-color: $semantic-color-success;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-color: $semantic-color-success;
      box-shadow: 0 0 0 2px rgba($semantic-color-success, 0.12);
    }
    
    .text-input__label {
      color: $semantic-color-success;
    }
  }
  
  &--warning {
    .text-input__container {
      border-color: $semantic-color-warning;
    }
    
    &.text-input-wrapper--focused .text-input__container {
      border-color: $semantic-color-warning;
      box-shadow: 0 0 0 2px rgba($semantic-color-warning, 0.12);
    }
    
    .text-input__label {
      color: $semantic-color-warning;
    }
  }
  
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
    
    .text-input__container {
      background-color: $semantic-color-surface-disabled;
      border-color: $semantic-color-border-disabled;
    }
    
    .text-input__label {
      color: $semantic-color-text-disabled;
    }
  }
  
  &--readonly {
    .text-input__field {
      background-color: $semantic-color-surface-secondary;
      cursor: default;
    }
  }
  
  &--loading {
    .text-input__field {
      padding-right: calc($semantic-spacing-component-lg + 24px);
    }
  }
}

// ==========================================================================
// LABEL STYLES
// ==========================================================================

.text-input__label {
  display: block;
  font-weight: 500;
  color: $semantic-color-text-primary;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease-in-out;
  
  &--required {
    .text-input__required-indicator {
      color: $semantic-color-danger;
      margin-left: $semantic-spacing-micro-tight;
    }
  }
}

// ==========================================================================
// INPUT CONTAINER
// ==========================================================================

.text-input__container {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  position: relative;
  
  &:hover:not(.text-input-wrapper--disabled &) {
    border-color: $semantic-color-border-secondary;
  }
  
  &--has-prefix {
    .text-input__field {
      padding-left: 0; // Prefix handles spacing
    }
  }
  
  &--has-suffix {
    .text-input__field {
      padding-right: 0; // Suffix handles spacing
    }
  }
}

// ==========================================================================
// INPUT FIELD
// ==========================================================================

.text-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: $semantic-color-text-primary;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.5;
  min-width: 0;
  
  &::placeholder {
    color: $semantic-color-text-tertiary;
    transition: opacity 0.2s ease-in-out;
  }
  
  &:focus::placeholder {
    opacity: 0.7;
  }
  
  // Remove browser default styles
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  &[type="number"] {
    -moz-appearance: textfield;
  }
  
  // Autofill styles
  &:-webkit-autofill {
    -webkit-text-fill-color: $semantic-color-text-primary !important;
    -webkit-box-shadow: 0 0 0 1000px $semantic-color-surface-primary inset !important;
    transition: background-color 5000s ease-in-out 0s;
  }
  
  // Remove password reveal button in Edge
  &::-ms-reveal,
  &::-ms-clear {
    display: none;
  }
}

// ==========================================================================
// PREFIX STYLES
// ==========================================================================

.text-input__prefix-icon,
.text-input__prefix-text {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: $semantic-color-text-secondary;
}

.text-input__prefix-icon {
  padding-left: 12px; // 8-12px padding from left edge so icon isn't hard against side
  padding-right: 12px; // 8-12px spacing between icon and text as requested
  
  // Size-specific spacing adjustments
  .text-input-wrapper--sm & {
    padding-left: 10px; // Slightly less for smaller size
    padding-right: 10px; // Slightly less for smaller size
  }
  
  .text-input-wrapper--lg & {
    padding-left: 14px; // Slightly more for larger size
    padding-right: 14px; // Slightly more for larger size
  }
  
  fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    
    .text-input-wrapper--sm & {
      width: 0.875rem;
      height: 0.875rem;
      font-size: 0.875rem;
    }
    
    .text-input-wrapper--lg & {
      width: 1.125rem;
      height: 1.125rem;
      font-size: 1.125rem;
    }
  }
}

.text-input__prefix-text {
  padding-left: $semantic-spacing-component-md;
  padding-right: 10px; // Slightly less than icon to account for border
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
  border-right: 1px solid $semantic-color-border-secondary;
  margin-right: $semantic-spacing-component-xs;
  
  .text-input-wrapper--sm & {
    font-size: 0.8125rem;
  }
  
  .text-input-wrapper--lg & {
    font-size: 1rem;
  }
}

// ==========================================================================
// SUFFIX STYLES
// ==========================================================================

.text-input__suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
  padding-right: 12px; // 8-12px padding from right edge so icons aren't hard against side
  padding-left: 12px; // Consistent spacing from text content
  
  // Size-specific spacing adjustments
  .text-input-wrapper--sm & {
    padding-left: 10px; // Slightly less for smaller size
    padding-right: 10px; // Slightly less for smaller size
  }
  
  .text-input-wrapper--lg & {
    padding-left: 14px; // Slightly more for larger size
    padding-right: 14px; // Slightly more for larger size
  }
  
  &--has-content {
    // Maintain consistent padding even when content is present
  }
}

.text-input__clear-btn,
.text-input__password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: $semantic-border-radius-sm;
  background: transparent;
  color: $semantic-color-text-secondary;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  
  &:hover {
    background-color: $semantic-color-surface-interactive;
    color: $semantic-color-text-primary;
  }
  
  &:focus {
    outline: 2px solid $semantic-color-border-focus;
    outline-offset: 1px;
  }
  
  fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
  }
}

.text-input__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: $semantic-color-interactive-primary;
  
  fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
  }
}

.text-input__suffix-icon {
  display: flex;
  align-items: center;
  color: $semantic-color-text-secondary;
  
  fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
  }
}

// ==========================================================================
// HELPER TEXT AND ERROR MESSAGES
// ==========================================================================

.text-input__helper-text {
  margin-top: $semantic-spacing-component-xs;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: $semantic-color-text-secondary;
  
  &--error {
    color: $semantic-color-danger;
  }
  
  &--success {
    color: $semantic-color-success;
  }
  
  &--warning {
    color: $semantic-color-warning;
  }
}

// ==========================================================================
// CHARACTER COUNTER
// ==========================================================================

.text-input__char-counter {
  position: absolute;
  bottom: -#{$semantic-spacing-component-lg};
  right: 0;
  font-size: 0.75rem;
  color: $semantic-color-text-tertiary;
  user-select: none;
}

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

@media (max-width: 768px) {
  .text-input-wrapper {
    &--lg {
      .text-input__container {
        min-height: 48px;
      }
      
      .text-input__field {
        font-size: 1rem;
        padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      }
    }
  }
}

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

.text-input__field:focus {
  // Focus is handled by container border/shadow
}

// High contrast mode support
@media (prefers-contrast: high) {
  .text-input__container {
    border-width: 2px;
  }
  
  .text-input-wrapper--focused .text-input__container {
    border-width: 3px;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .text-input__container,
  .text-input__field,
  .text-input__label,
  .text-input__clear-btn,
  .text-input__password-toggle {
    transition: none;
  }
}

// ==========================================================================
// FLOATING LABEL VARIANT (OPTIONAL)
// ==========================================================================

.text-input-wrapper--floating {
  .text-input__label {
    position: absolute;
    top: 50%;
    left: $semantic-spacing-component-md;
    transform: translateY(-50%);
    background-color: $semantic-color-surface-primary;
    padding: 0 $semantic-spacing-component-xs;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    z-index: 1;
  }
  
  &.text-input-wrapper--focused .text-input__label,
  &.text-input-wrapper--has-value .text-input__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: $semantic-color-interactive-primary;
  }
}