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

// Tokens available globally via main application styles

// ==========================================================================
// TEXTAREA COMPONENT
// ==========================================================================
// Comprehensive textarea component with multiple variants and sizes
// Uses semantic design tokens for consistent styling across the design system
// ==========================================================================

.textarea-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  
  // ==========================================================================
  // SIZE VARIANTS
  // ==========================================================================
  
  &--sm {
    .textarea__container {
      min-height: 80px;
    }
    
    .textarea__field {
      font-size: 0.875rem;
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      line-height: 1.4;
    }
    
    .textarea__label {
      font-size: 0.8125rem;
      margin-bottom: $semantic-spacing-component-xs;
    }
  }
  
  &--md {
    .textarea__container {
      min-height: 100px;
    }
    
    .textarea__field {
      font-size: 1rem;
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      line-height: 1.5;
    }
    
    .textarea__label {
      font-size: 0.875rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
  }
  
  &--lg {
    .textarea__container {
      min-height: 120px;
    }
    
    .textarea__field {
      font-size: 1.125rem;
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      line-height: 1.6;
    }
    
    .textarea__label {
      font-size: 1rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
  }

  // ==========================================================================
  // VARIANT STYLES
  // ==========================================================================
  
  &--outlined {
    .textarea__container {
      border: 2px solid $semantic-color-border-primary;
      border-radius: $semantic-border-radius-md;
      background-color: $semantic-color-surface-primary;
    }
    
    &.textarea-wrapper--focused .textarea__container {
      border-color: $semantic-color-interactive-primary;
      box-shadow: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12);
    }
  }
  
  &--filled {
    .textarea__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;
    }
    
    &.textarea-wrapper--focused .textarea__container {
      border-bottom-color: $semantic-color-interactive-primary;
      background-color: $semantic-color-surface-elevated;
    }
  }
  
  &--underlined {
    .textarea__container {
      border: none;
      border-bottom: 1px solid $semantic-color-border-primary;
      border-radius: 0;
      background-color: transparent;
      padding: $semantic-spacing-component-xs 0;
    }
    
    &.textarea-wrapper--focused .textarea__container {
      border-bottom: 2px solid $semantic-color-interactive-primary;
    }
  }

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

  &--resize-none {
    .textarea__field {
      resize: none;
    }
  }

  &--resize-vertical {
    .textarea__field {
      resize: vertical;
    }
  }

  &--resize-horizontal {
    .textarea__field {
      resize: horizontal;
    }
  }

  &--resize-both {
    .textarea__field {
      resize: both;
    }
  }

  &--auto-resize {
    .textarea__field {
      resize: none;
      overflow: hidden;
    }
  }
}

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

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

// ==========================================================================
// TEXTAREA CONTAINER
// ==========================================================================

.textarea__container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  position: relative;
  
  &:hover:not(.textarea-wrapper--disabled &) {
    border-color: $semantic-color-border-secondary;
  }
  
  &--has-prefix {
    .textarea__field {
      padding-left: 0;
    }
  }
  
  &--has-suffix {
    .textarea__field {
      padding-right: 0;
    }
  }
}

// ==========================================================================
// TEXTAREA FIELD
// ==========================================================================

.textarea__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: $semantic-color-text-primary;
  font-family: inherit;
  font-weight: 400;
  min-width: 0;
  resize: vertical;
  
  &::placeholder {
    color: $semantic-color-text-tertiary;
    transition: opacity 0.2s ease-in-out;
  }
  
  &:focus::placeholder {
    opacity: 0.7;
  }
}

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

.textarea__prefix-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  color: $semantic-color-text-secondary;
  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
  padding-top: $semantic-spacing-component-sm;
  
  // Size-specific spacing adjustments
  .textarea-wrapper--sm & {
    padding-left: 10px; // Slightly less for smaller size
    padding-right: 10px; // Slightly less for smaller size
  }
  
  .textarea-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;
    
    .textarea-wrapper--sm & {
      width: 0.875rem;
      height: 0.875rem;
      font-size: 0.875rem;
    }
    
    .textarea-wrapper--lg & {
      width: 1.125rem;
      height: 1.125rem;
      font-size: 1.125rem;
    }
  }
}

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

.textarea__suffix {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  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
  padding-top: $semantic-spacing-component-sm;
  
  // Size-specific spacing adjustments
  .textarea-wrapper--sm & {
    padding-left: 10px; // Slightly less for smaller size
    padding-right: 10px; // Slightly less for smaller size
  }
  
  .textarea-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
  }
}

.textarea__clear-btn {
  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;
  }
}

.textarea__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;
  }
}

.textarea__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
// ==========================================================================

.textarea__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
// ==========================================================================

.textarea__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) {
  .textarea-wrapper {
    &--lg {
      .textarea__container {
        min-height: 100px;
      }
      
      .textarea__field {
        font-size: 1rem;
        padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      }
    }
  }
}

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

.textarea__field:focus {
  // Focus is handled by container border/shadow
}

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

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .textarea__container,
  .textarea__field,
  .textarea__label,
  .textarea__clear-btn {
    transition: none;
  }
}