<!-- 🚗 Modal de Alteração de Status de Veículo -->
<div class="vehicle-status-modal-container">
  <!-- Close Button -->
  <button 
    type="button" 
    class="modal-close-btn" 
    (click)="onCancel()"
    [disabled]="isLoading">
    <i class="fas fa-times"></i>
  </button>

  <!-- Header com Ícone -->
  <div class="modal-header">
    <div class="status-icon">
      <i class="fas" [class]="selectedStatusIcon || 'fa-exchange-alt'"></i>
    </div>
    <h2 class="modal-title">Alterar Status do Veículo</h2>
    <p class="modal-subtitle">Selecione o novo status e preencha as informações da ocorrência</p>
  </div>

  <!-- Lista de Veículos Selecionados (se múltiplos) -->
  <div class="selected-vehicles-section" *ngIf="selectedVehicles.length > 1">
    <h4 class="vehicles-header">
      <i class="fas fa-list"></i>
      Veículos Selecionados ({{selectedVehicles.length}})
    </h4>
    <div class="vehicles-list">
      <div class="vehicle-item" *ngFor="let vehicle of selectedVehicles; trackBy: trackByVehicleId">
        <div class="vehicle-info">
          <span class="vehicle-plate">{{vehicle.license_plate}}</span>
          <span class="vehicle-model">{{vehicle.brand}} {{vehicle.model}}</span>
          <span class="vehicle-current-status" [class]="'status-' + (vehicle.status || 'unknown').toLowerCase()">
            <i class="fas" [class]="getStatusIcon(vehicle.status)"></i>
            {{getStatusLabel(vehicle.status)}}
          </span>
        </div>
        <button 
          type="button" 
          class="remove-btn" 
          (click)="removeVehicle(vehicle.id)"
          [disabled]="isLoading"
          title="Remover veículo da lista">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- Veículo Único (se apenas 1 selecionado) -->
  <div class="single-vehicle-section" *ngIf="selectedVehicles.length === 1">
    <div class="vehicle-card">
      <div class="vehicle-details">
        <h4 class="vehicle-title">
          <i class="fas fa-car"></i>
          {{selectedVehicles[0].license_plate}}
        </h4>
        <p class="vehicle-description">
          {{selectedVehicles[0].brand}} {{selectedVehicles[0].model}} 
          <span class="current-status">
            Status atual: 
            <span [class]="'status-badge status-' + (selectedVehicles[0].status || 'unknown').toLowerCase()">
              <i class="fas" [class]="getStatusIcon(selectedVehicles[0].status)"></i>
              {{getStatusLabel(selectedVehicles[0].status)}}
            </span>
          </span>
        </p>
      </div>
    </div>
  </div>

  <!-- Formulário -->
  <form [formGroup]="statusForm" (ngSubmit)="onSubmit()" class="modal-form">
    <div class="form-content">
      
      <!-- Novo Status -->
      <div class="input-group">
        <label for="status_select" class="input-label">
          <i class="fas fa-exchange-alt"></i>
          Novo Status *
        </label>
        <select 
          id="status_select"
          formControlName="status" 
          class="status-select"
          [class.error]="hasFieldError('status')"
          (change)="onStatusChange($any($event.target).value)"
          [disabled]="isLoading">
          <option value="">Selecione o novo status...</option>
          <option *ngFor="let option of statusOptions" [value]="option.value">
            <i class="fas" [class]="option.icon"></i>
            {{option.label}}
          </option>
        </select>
        
        <!-- Mensagem de Erro -->
        <div class="error-message" *ngIf="hasFieldError('status')">
          <i class="fas fa-exclamation-circle"></i>
          {{ getFieldErrorMessage('status') }}
        </div>
      </div>

      <!-- Data da Ocorrência -->
      <div class="input-group">
        <label for="data_ocorrencia" class="input-label">
          <i class="fas fa-calendar-alt"></i>
          Data da Ocorrência *
        </label>
        <input 
          id="data_ocorrencia"
          type="date" 
          formControlName="data_ocorrencia" 
          class="date-input"
          [class.error]="hasFieldError('data_ocorrencia')"
          [disabled]="isLoading">
        
        <!-- Mensagem de Erro -->
        <div class="error-message" *ngIf="hasFieldError('data_ocorrencia')">
          <i class="fas fa-exclamation-circle"></i>
          {{ getFieldErrorMessage('data_ocorrencia') }}
        </div>
      </div>

      <!-- Local da Ocorrência (apenas para roubo) -->
      <div class="input-group" *ngIf="showLocalField">
        <label for="local_ocorrencia" class="input-label">
          <i class="fas fa-map-marker-alt"></i>
          Local da Ocorrência *
        </label>
        <input 
          id="local_ocorrencia"
          type="text" 
          formControlName="local_ocorrencia" 
          placeholder="Ex: Rua das Flores, 123 - Centro, São Paulo/SP" 
          class="text-input"
          [class.error]="hasFieldError('local_ocorrencia')"
          [disabled]="isLoading">
        
        <!-- Mensagem de Erro -->
        <div class="error-message" *ngIf="hasFieldError('local_ocorrencia')">
          <i class="fas fa-exclamation-circle"></i>
          {{ getFieldErrorMessage('local_ocorrencia') }}
        </div>
        
        <!-- Dica -->
        <div class="input-hint">
          Informe o local exato onde ocorreu o roubo do veículo
        </div>
      </div>

      <!-- Campos Condicionais -->
      <div class="conditional-fields">
        
        <!-- Person Remote Select (for_sale, available) -->
        <div class="input-group" *ngIf="showPersonField">
          <label class="input-label">
            <i class="fas fa-map-marker-alt"></i>
            {{ personFieldLabel }} *
          </label>
          <app-remote-select
            formControlName="person_id"
            [config]="personRemoteConfig"
            [required]="true"
            [disabled]="isLoading">
          </app-remote-select>
          
          <!-- Mensagem de Erro -->
          <div class="error-message" *ngIf="hasFieldError('person_id')">
            <i class="fas fa-exclamation-circle"></i>
            {{ getFieldErrorMessage('person_id') }}
          </div>
        </div>

        <!-- Cliente Remote Select (rented) -->
        <div class="input-group" *ngIf="showClienteField">
          <label class="input-label">
            <i class="fas fa-user-tie"></i>
            Cliente *
          </label>
          <app-remote-select
            formControlName="cliente_id"
            [config]="clienteRemoteConfig"
            [required]="true"
            [disabled]="isLoading">
          </app-remote-select>
          
          <!-- Mensagem de Erro -->
          <div class="error-message" *ngIf="hasFieldError('cliente_id')">
            <i class="fas fa-exclamation-circle"></i>
            {{ getFieldErrorMessage('cliente_id') }}
          </div>
        </div>

        <!-- Fornecedor Remote Select (under_review) -->
        <div class="input-group" *ngIf="showFornecedorField">
          <label class="input-label">
            <i class="fas fa-tools"></i>
            Oficina/Fornecedor *
          </label>
          <app-remote-select
            formControlName="fornecedor_id"
            [config]="fornecedorRemoteConfig"
            [required]="true"
            [disabled]="isLoading">
          </app-remote-select>
          
          <!-- Mensagem de Erro -->
          <div class="error-message" *ngIf="hasFieldError('fornecedor_id')">
            <i class="fas fa-exclamation-circle"></i>
            {{ getFieldErrorMessage('fornecedor_id') }}
          </div>
        </div>
      </div>

      <!-- Descrição da Ocorrência -->
      <div class="input-group" *ngIf="false">
        <label for="descricao_ocorrencia" class="input-label">
          <i class="fas fa-comment-alt"></i>
          Descrição da Ocorrência
        </label>
        <textarea 
          id="descricao_ocorrencia"
          formControlName="descricao_ocorrencia" 
          placeholder="Descreva os detalhes da ocorrência, motivo da mudança de status, observações importantes..."
          rows="4" 
          class="textarea-input"
          [disabled]="isLoading"></textarea>
        
        <!-- Dica -->
        <div class="input-hint">
          Forneça detalhes que ajudem a entender o contexto da mudança de status
        </div>
      </div>
    </div>

    <!-- Botões de Ação -->
    <div class="modal-actions">
      <button 
        type="button" 
        class="btn btn-cancel"
        (click)="onCancel()"
        [disabled]="isLoading">
        <i class="fas fa-times"></i>
        Cancelar
      </button>
      
      <button 
        type="submit" 
        class="btn btn-submit"
        [disabled]="!statusForm.valid || isLoading || selectedVehicles.length === 0">
        <span *ngIf="!isLoading" class="submit-content">
          <i class="fas fa-check"></i>
          Alterar Status
          <span class="vehicle-count" *ngIf="selectedVehicles.length > 1">
            ({{selectedVehicles.length}} veículos)
          </span>
        </span>
        <span *ngIf="isLoading" class="loading-content">
          <i class="fas fa-spinner fa-spin"></i>
          Processando...
        </span>
      </button>
    </div>
  </form>
</div>

<!-- Overlay de Loading -->
<div class="loading-overlay" *ngIf="isLoading">
  <div class="loading-spinner">
    <i class="fas fa-exchange-alt fa-bounce"></i>
    <p>Atualizando status dos veículos...</p>
    <div class="progress-info">
      <small>Processando {{selectedVehicles.length}} veículo(s)</small>
    </div>
  </div>
</div>
