// ✅ EXEMPLO DE USO - TEXTAREA INPUT COMPONENT
// Arquivo: textarea-input.example.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { TextareaInputComponent } from './textarea-input.component';

@Component({
  selector: 'app-textarea-input-example',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, TextareaInputComponent],
  template: `
    <div class="example-container">
      <h3>📝 Exemplos de Textarea Input</h3>
      
      <form [formGroup]="exampleForm" (ngSubmit)="onSubmit()">
        
        <!-- 📝 Exemplo 1: Campo simples de observações -->
        <div class="form-group">
          <app-textarea-input
            [field]="{
              key: 'observacoes',
              label: 'Observações',
              placeholder: 'Digite suas observações aqui...',
              required: true,
              maxLength: 500,
              rows: 4,
              showCharCounter: true,
              autoResize: true
            }"
            formControlName="observacoes">
          </app-textarea-input>
        </div>

        <!-- 📝 Exemplo 2: Campo de notas com configurações personalizadas -->
        <div class="form-group">
          <app-textarea-input
            [field]="{
              key: 'notas',
              label: 'Notas Internas',
              placeholder: 'Adicione notas internas...',
              required: false,
              maxLength: 1000,
              minLength: 10,
              rows: 6,
              showCharCounter: true,
              autoResize: false,
              resizable: true
            }"
            formControlName="notas">
          </app-textarea-input>
        </div>

        <!-- 📝 Exemplo 3: Campo readonly para descrições -->
        <div class="form-group">
          <app-textarea-input
            [field]="{
              key: 'descricao',
              label: 'Descrição do Sistema',
              readOnly: true,
              rows: 3,
              showCharCounter: false,
              autoResize: false
            }"
            formControlName="descricao">
          </app-textarea-input>
        </div>

        <!-- 📝 Exemplo 4: Campo compacto para comentários -->
        <div class="form-group">
          <app-textarea-input
            [field]="{
              key: 'comentarios',
              label: 'Comentários',
              placeholder: 'Adicione um comentário breve...',
              required: false,
              maxLength: 200,
              rows: 2,
              showCharCounter: true,
              autoResize: true,
              resizable: false
            }"
            formControlName="comentarios">
          </app-textarea-input>
        </div>

        <!-- 🎯 Botões de ação -->
        <div class="form-actions">
          <button type="button" (click)="populateExample()">
            Preencher Exemplo
          </button>
          <button type="button" (click)="clearForm()">
            Limpar
          </button>
          <button type="submit" [disabled]="!exampleForm.valid">
            Salvar
          </button>
        </div>

      </form>

      <!-- 📊 Debug Info -->
      <div class="debug-info">
        <h4>🔍 Valores do Formulário</h4>
        <pre>{{ getFormValues() | json }}</pre>
        
        <h4>📝 Status de Validação</h4>
        <p>Formulário válido: {{ exampleForm.valid ? '✅' : '❌' }}</p>
        <p>Formulário alterado: {{ exampleForm.dirty ? '✅' : '❌' }}</p>
        
        <h4>📐 Contagens de Caracteres</h4>
        <div class="char-counts">
          <p><strong>Observações:</strong> {{ getCharCount('observacoes') }} caracteres</p>
          <p><strong>Notas:</strong> {{ getCharCount('notas') }} caracteres</p>
          <p><strong>Comentários:</strong> {{ getCharCount('comentarios') }} caracteres</p>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .example-container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background: var(--surface);
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-actions {
      display: flex;
      gap: 10px;
      margin: 20px 0;
    }

    .form-actions button {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
    }

    .form-actions button[type="submit"] {
      background: var(--primary);
      color: white;
    }

    .form-actions button[type="button"] {
      background: var(--surface-variant);
      color: var(--text-primary);
    }

    .form-actions button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .debug-info {
      margin-top: 30px;
      padding: 15px;
      background: var(--surface-variant);
      border-radius: 4px;
      border-left: 4px solid var(--primary);
    }

    .debug-info h4 {
      margin-top: 0;
      color: var(--primary);
    }

    .debug-info pre {
      background: var(--surface);
      padding: 10px;
      border-radius: 4px;
      overflow-x: auto;
      font-size: 12px;
    }

    .char-counts p {
      margin: 5px 0;
      font-size: 14px;
    }
  `]
})
export class TextareaInputExampleComponent {
  exampleForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.exampleForm = this.fb.group({
      observacoes: ['', [Validators.required, Validators.maxLength(500)]],
      notas: ['', [Validators.minLength(10), Validators.maxLength(1000)]],
      descricao: [{ 
        value: 'Este é um sistema de gestão de frota desenvolvido com Angular 19. Permite o controle completo de veículos, motoristas, rotas e aspectos financeiros da operação.', 
        disabled: false 
      }],
      comentarios: ['', [Validators.maxLength(200)]]
    });
  }

  populateExample(): void {
    this.exampleForm.patchValue({
      observacoes: 'Veículo apresentou comportamento irregular durante a última viagem. Recomenda-se revisão completa do sistema de freios e verificação do motor.',
      notas: 'IMPORTANTE: Este veículo está com manutenção em atraso.\n\nItens pendentes:\n- Troca de óleo (vencida há 2 semanas)\n- Revisão dos freios\n- Alinhamento e balanceamento\n- Verificação do ar condicionado\n\nMotorista relatou ruídos estranhos no motor durante viagens longas.',
      comentarios: 'Prioridade alta para manutenção. Não utilizar em rotas longas até revisão completa.'
    });
  }

  clearForm(): void {
    this.exampleForm.reset();
    // Manter o valor readonly da descrição
    this.exampleForm.get('descricao')?.setValue('Este é um sistema de gestão de frota desenvolvido com Angular 19. Permite o controle completo de veículos, motoristas, rotas e aspectos financeiros da operação.');
  }

  getFormValues(): any {
    return this.exampleForm.value;
  }

  getCharCount(fieldName: string): number {
    const value = this.exampleForm.get(fieldName)?.value || '';
    return value.length;
  }

  onSubmit(): void {
    if (this.exampleForm.valid) {
      console.log('📝 Valores do formulário:', this.exampleForm.value);
      alert('Formulário salvo com sucesso!');
    } else {
      console.log('❌ Formulário inválido');
      this.markFormGroupTouched();
      alert('Verifique os campos obrigatórios e limites de caracteres');
    }
  }

  private markFormGroupTouched(): void {
    Object.keys(this.exampleForm.controls).forEach(key => {
      const control = this.exampleForm.get(key);
      control?.markAsTouched();
    });
  }
}

// ==========================================
// 🎯 GUIA DE USO RÁPIDO
// ==========================================

/*

1. IMPORTAÇÃO:
   import { TextareaInputComponent } from './path/to/textarea-input.component';

2. CONFIGURAÇÃO BÁSICA:
   <app-textarea-input
     [field]="{
       key: 'observacoes',
       label: 'Observações',
       required: true
     }"
     formControlName="observacoes">
   </app-textarea-input>

3. PROPRIEDADES DISPONÍVEIS:
   {
     key: string;              // ID único do campo
     label: string;            // Label do campo
     placeholder?: string;     // Placeholder
     disabled?: boolean;       // Campo desabilitado
     readOnly?: boolean;       // Campo somente leitura
     required?: boolean;       // Campo obrigatório
     maxLength?: number;       // Máximo de caracteres (default: 1000)
     minLength?: number;       // Mínimo de caracteres
     rows?: number;           // Número de linhas inicial (default: 4)
     autoResize?: boolean;    // Auto-redimensionar (default: true)
     showCharCounter?: boolean; // Mostrar contador (default: true)
     resizable?: boolean;     // Permitir redimensionamento manual (default: true)
   }

4. VALIDAÇÕES RECOMENDADAS:
   formControl: ['', [
     Validators.required,
     Validators.maxLength(500),
     Validators.minLength(10)
   ]]

5. EVENTOS E MÉTODOS:
   - onChange: Emite o valor de texto (string)
   - onFocus/onBlur: Controla dicas e estados visuais
   - clearContent(): Limpa o conteúdo
   - isValid(): Verifica se é válido
   - getErrorMessage(): Retorna mensagem de erro

6. CARACTERÍSTICAS:
   ✅ Auto-redimensionamento baseado no conteúdo
   ✅ Contador de caracteres com barra de progresso
   ✅ Validação de comprimento min/max
   ✅ Botão de limpeza quando há conteúdo
   ✅ Suporte a readonly e disabled
   ✅ Integração com Reactive Forms
   ✅ Dicas contextuais quando focado
   ✅ Responsivo e acessível

7. CASOS DE USO COMUNS:
   - Observações e notas
   - Comentários e feedback
   - Descrições detalhadas
   - Instruções e orientações
   - Relatórios e análises

*/ 