<div class="customer-create-modal">
  <!-- Header do Modal -->
  <div class="modal-header">
    <div class="header-content">
      <div class="header-icon">
        <mat-icon>person_add</mat-icon>
      </div>
      <div class="header-text">
        <h2>Novo Cliente</h2>
        <p>Cadastro rápido com busca automática</p>
      </div>
    </div>
    <button mat-icon-button (click)="onCancel()" class="close-button">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <!-- Formulário -->
  <form [formGroup]="customerForm" (ngSubmit)="onSave()" class="customer-form">
    
    <!-- Seleção do Tipo -->
    <div class="form-section">
      <h3>
        <mat-icon>business</mat-icon>
        Tipo de Cliente
      </h3>
      
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Selecione o tipo</mat-label>
        <mat-select formControlName="type" (selectionChange)="onTypeChange($event.value)">
          <mat-option value="Individual">
            <mat-icon>person</mat-icon>
            Pessoa Física
          </mat-option>
          <mat-option value="Business">
            <mat-icon>business</mat-icon>
            Pessoa Jurídica
          </mat-option>
        </mat-select>
        <mat-error *ngIf="typeControl?.invalid && typeControl?.touched">
          Selecione o tipo de cliente
        </mat-error>
      </mat-form-field>
    </div>

    <!-- Campo Documento (CPF/CNPJ) -->
    <div class="form-section">
      <h3>
        <mat-icon>{{ customerType === 'Individual' ? 'badge' : 'business_center' }}</mat-icon>
        {{ documentLabel }}
      </h3>
      
      <div class="document-field-container">
        <mat-form-field appearance="outline" class="document-field">
          <mat-label>{{ documentLabel }}</mat-label>
          <input 
            matInput 
            formControlName="document"
            [placeholder]="documentPlaceholder"
            (blur)="onDocumentSearch()"
            maxlength="{{ customerType === 'Individual' ? '14' : '18' }}"
          />
          <mat-icon matSuffix>{{ customerType === 'Individual' ? 'badge' : 'business_center' }}</mat-icon>
          <mat-error *ngIf="documentControl?.invalid && documentControl?.touched">
            <span *ngIf="documentControl?.errors?.['required']">{{ documentLabel }} é obrigatório</span>
            <span *ngIf="documentControl?.errors?.['minlength']">{{ documentLabel }} deve ter pelo menos {{ customerType === 'Individual' ? '11' : '14' }} dígitos</span>
          </mat-error>
        </mat-form-field>
        
        <!-- Indicador de busca -->
        <div class="search-indicator" *ngIf="searchingData">
          <mat-spinner diameter="24"></mat-spinner>
          <span>Buscando...</span>
        </div>
      </div>

      <!-- Status da busca -->
      <div class="search-status" *ngIf="foundData && !searchingData">
        <div class="status-success">
          <mat-icon>check_circle</mat-icon>
          <span>Dados encontrados e preenchidos automaticamente!</span>
        </div>
      </div>
    </div>

    <!-- Dados Básicos -->
    <div class="form-section">
      <h3>
        <mat-icon>info</mat-icon>
        Dados Básicos
      </h3>
      
      <div class="form-row">
        <mat-form-field appearance="outline" class="full-width">
          <mat-label>{{ customerType === 'Individual' ? 'Nome Completo' : 'Razão Social / Nome Fantasia' }}</mat-label>
          <input 
            matInput 
            formControlName="name"
            [placeholder]="customerType === 'Individual' ? 'Digite o nome completo' : 'Digite a razão social'"
          />
          <mat-icon matSuffix>person</mat-icon>
          <mat-error *ngIf="nameControl?.invalid && nameControl?.touched">
            <span *ngIf="nameControl?.errors?.['required']">Nome é obrigatório</span>
            <span *ngIf="nameControl?.errors?.['minlength']">Nome deve ter pelo menos 2 caracteres</span>
          </mat-error>
        </mat-form-field>
      </div>

      <div class="form-row">
        <mat-form-field appearance="outline" class="half-width">
          <mat-label>E-mail *</mat-label>
          <input 
            matInput 
            type="email"
            formControlName="email"
            placeholder="Digite o e-mail"
            required
          />
          <mat-icon matSuffix>email</mat-icon>
          <mat-error *ngIf="emailControl?.hasError('required') && emailControl?.touched">
            E-mail é obrigatório
          </mat-error>
          <mat-error *ngIf="emailControl?.hasError('email') && emailControl?.touched && !emailControl?.hasError('required')">
            E-mail deve ter um formato válido
          </mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="half-width">
          <mat-label>Telefone</mat-label>
          <input 
            matInput 
            formControlName="phone"
            placeholder="(11) 99999-9999"
          />
          <mat-icon matSuffix>phone</mat-icon>
        </mat-form-field>
      </div>

      <!-- ✅ Nova linha com Segmento e Código -->
      <div class="form-row">
        <mat-form-field appearance="outline" class="half-width">
          <mat-label>Segmento *</mat-label>
          <mat-select formControlName="segment" multiple>
            <mat-option *ngFor="let option of segmentOptions" [value]="option.value">
              {{ option.label }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>category</mat-icon>
          <mat-error *ngIf="segmentControl?.hasError('required') && segmentControl?.touched">
            Segmento é obrigatório
          </mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="half-width">
          <mat-label>Código *</mat-label>
          <input 
            matInput 
            formControlName="code"
            placeholder="Digite o código do cliente"
            required
          />
          <mat-icon matSuffix>qr_code</mat-icon>
          <mat-error *ngIf="codeControl?.hasError('required') && codeControl?.touched">
            Código é obrigatório
          </mat-error>
        </mat-form-field>
      </div>
    </div>

    <!-- Observações -->
    <div class="form-section">
      <h3>
        <mat-icon>note</mat-icon>
        Observações (Opcional)
      </h3>
      
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Observações</mat-label>
        <textarea 
          matInput 
          formControlName="notes"
          rows="3"
          placeholder="Digite observações sobre o cliente..."
        ></textarea>
        <mat-icon matSuffix>note</mat-icon>
      </mat-form-field>
    </div>

  </form>

  <!-- Footer com Ações -->
  <div class="modal-footer">
    <div class="footer-info">
      <mat-icon>info</mat-icon>
      <span>Os dados serão buscados automaticamente nas bases oficiais</span>
    </div>
    
    <div class="footer-actions">
      <button 
        mat-button 
        type="button" 
        (click)="onCancel()"
        class="cancel-button"
      >
        <mat-icon>close</mat-icon>
        Cancelar
      </button>
      
      <button 
        mat-raised-button 
        color="primary"
        type="submit"
        (click)="onSave()"
        [disabled]="customerForm.invalid || isLoading"
        class="save-button"
      >
        <mat-spinner diameter="20" *ngIf="isLoading"></mat-spinner>
        <mat-icon *ngIf="!isLoading">save</mat-icon>
        <span *ngIf="!isLoading">Criar Cliente</span>
        <span *ngIf="isLoading">Criando...</span>
      </button>
    </div>
  </div>
</div>
