<div class="textarea-input-wrapper" 
     [class.readonly]="field.readOnly" 
     [class.focused]="isFocused"
     [class.disabled]="disabled"
     [class.has-value]="hasValue"
     [class.near-limit]="isNearLimit"
     [class.over-limit]="isOverLimit">
  
  <!-- Container principal -->
  <div class="textarea-container">
    <!-- Textarea principal -->
    <textarea
      #textareaElement
      [id]="field.key"
      [placeholder]="field.placeholder || ' '"
      [value]="value"
      (input)="onInput($event)"
      (focus)="onFocus()"
      (blur)="onBlur()"
      [disabled]="disabled || field.disabled"
      [readonly]="field.readOnly"
      [attr.maxlength]="field.maxLength"
      [rows]="field.rows"
      [class.readonly-textarea]="field.readOnly"
      [class.has-value]="hasValue"
      [class.resizable]="field.resizable"
      autocomplete="off"
      spellcheck="true">
    </textarea>
    
    <!-- Label flutuante -->
    <label [for]="field.key" [class.active]="hasValue || isFocused">
      {{ field.label }}
      <span *ngIf="field.required" class="required-indicator">*</span>
    </label>
    
    <!-- Ícone de limpeza (apenas se houver valor e não for readonly) -->
    <button 
      type="button"
      class="clear-button"
      *ngIf="hasValue && !field.readOnly && !disabled"
      (click)="clearContent()"
      title="Limpar conteúdo">
      <i class="fas fa-times"></i>
    </button>
  </div>
  
  <!-- Informações adicionais -->
  <div class="textarea-info" *ngIf="field.showCharCounter || !isValid()">
    
    <!-- Contador de caracteres -->
    <div class="char-counter" *ngIf="field.showCharCounter">
      <span class="counter-text" 
            [class.warning]="isNearLimit"
            [class.error]="isOverLimit">
        {{ characterCount }}
        <span class="max-length" *ngIf="field.maxLength">
          / {{ field.maxLength }}
        </span>
      </span>
      
      <!-- Indicador visual de progresso -->
      <div class="progress-bar" *ngIf="field.maxLength">
        <div class="progress-fill" 
             [style.width.%]="(characterCount / field.maxLength!) * 100"
             [class.warning]="isNearLimit"
             [class.error]="isOverLimit">
        </div>
      </div>
    </div>
    
    <!-- Mensagem de erro -->
    <div class="error-message" *ngIf="!isValid()">
      <i class="fas fa-exclamation-circle"></i>
      {{ getErrorMessage() }}
    </div>
  </div>
  
  <!-- Indicadores de estado -->
  <div class="state-indicators" *ngIf="field.readOnly">
    <!-- Ícone de readonly -->
    <div class="readonly-indicator" title="Campo somente leitura">
      <i class="fas fa-lock"></i>
    </div>
  </div>
  
  <!-- Dicas úteis (apenas quando focado) -->
  <div class="textarea-hints" *ngIf="isFocused && !field.readOnly">
    <div class="hint-item" *ngIf="field.autoResize">
      <i class="fas fa-expand-arrows-alt"></i>
      <span>Redimensiona automaticamente</span>
    </div>
    <div class="hint-item" *ngIf="field.maxLength">
      <i class="fas fa-text-width"></i>
      <span>Máximo {{ field.maxLength }} caracteres</span>
    </div>
    <div class="hint-item" *ngIf="field.minLength">
      <i class="fas fa-text-height"></i>
      <span>Mínimo {{ field.minLength }} caracteres</span>
    </div>
  </div>
  
</div> 