// ✅ EXEMPLO DE USO - CURRENCY INPUT COMPONENT
// Arquivo: currency-input.example.ts

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

@Component({
  selector: 'app-currency-input-example',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, CurrencyInputComponent],
  template: `
    <div class="example-container">
      <h3>🎯 Exemplos de Currency Input</h3>
      
      <form [formGroup]="exampleForm" (ngSubmit)="onSubmit()">
        
        <!-- 💰 Exemplo 1: Campo simples de valor -->
        <div class="form-group">
          <app-currency-input
            [field]="{
              key: 'valor',
              label: 'Valor',
              placeholder: 'Digite um valor',
              required: true
            }"
            formControlName="valor">
          </app-currency-input>
        </div>

        <!-- 💰 Exemplo 2: Campo com valor mínimo e máximo -->
        <div class="form-group">
          <app-currency-input
            [field]="{
              key: 'preco',
              label: 'Preço do Produto',
              placeholder: 'Informe o preço',
              required: true,
              min: 0.01,
              max: 999999.99
            }"
            formControlName="preco">
          </app-currency-input>
        </div>

        <!-- 💰 Exemplo 3: Campo readonly -->
        <div class="form-group">
          <app-currency-input
            [field]="{
              key: 'total',
              label: 'Total Calculado',
              readOnly: true
            }"
            formControlName="total">
          </app-currency-input>
        </div>

        <!-- 💰 Exemplo 4: Campo com moeda personalizada (USD) -->
        <div class="form-group">
          <app-currency-input
            [field]="{
              key: 'valorUsd',
              label: 'Valor em Dólares',
              placeholder: 'Digite o valor em USD',
              currency: 'USD',
              locale: 'en-US',
              required: false
            }"
            formControlName="valorUsd">
          </app-currency-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>
      </div>
    </div>
  `,
  styles: [`
    .example-container {
      max-width: 600px;
      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;
    }
  `]
})
export class CurrencyInputExampleComponent {
  exampleForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.exampleForm = this.fb.group({
      valor: [null, [Validators.required, Validators.min(0.01)]],
      preco: [null, [Validators.required, Validators.min(0.01), Validators.max(999999.99)]],
      total: [{ value: null, disabled: false }],
      valorUsd: [null]
    });

    // Calcular total automaticamente
    this.exampleForm.get('valor')?.valueChanges.subscribe(() => this.calculateTotal());
    this.exampleForm.get('preco')?.valueChanges.subscribe(() => this.calculateTotal());
  }

  populateExample(): void {
    this.exampleForm.patchValue({
      valor: 1500.75,
      preco: 299.99,
      valorUsd: 150.50
    });
  }

  clearForm(): void {
    this.exampleForm.reset();
  }

  calculateTotal(): void {
    const valor = this.exampleForm.get('valor')?.value || 0;
    const preco = this.exampleForm.get('preco')?.value || 0;
    const total = valor + preco;
    
    this.exampleForm.get('total')?.setValue(total, { emitEvent: false });
  }

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

  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');
      alert('Verifique os campos obrigatórios');
    }
  }
}

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

/*

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

2. CONFIGURAÇÃO BÁSICA:
   <app-currency-input
     [field]="{
       key: 'valor',
       label: 'Valor',
       required: true
     }"
     formControlName="valor">
   </app-currency-input>

3. PROPRIEDADES DISPONÍVEIS:
   {
     key: string;           // ID único do campo
     label: string;         // Label do campo
     placeholder?: string;  // Placeholder
     min?: number;          // Valor mínimo
     max?: number;          // Valor máximo
     disabled?: boolean;    // Campo desabilitado
     readOnly?: boolean;    // Campo somente leitura
     required?: boolean;    // Campo obrigatório
     currency?: string;     // Moeda (default: 'BRL')
     locale?: string;       // Locale (default: 'pt-BR')
   }

4. VALIDAÇÕES RECOMENDADAS:
   formControl: [null, [
     Validators.required,
     Validators.min(0.01),
     Validators.max(999999.99)
   ]]

5. EVENTOS E MÉTODOS:
   - onChange: Emite o valor numérico (number)
   - onFocus/onBlur: Controla formatação
   - getFormattedValue(): string
   - getNumericValue(): number

6. CARACTERÍSTICAS:
   ✅ Formatação automática em R$ (ou moeda configurada)
   ✅ Máscara de entrada amigável
   ✅ Validação de valores min/max
   ✅ Suporte a readonly e disabled
   ✅ Integração com Reactive Forms
   ✅ Responsivo e acessível
   ✅ Ícone de moeda visual

*/ 