<app-ui-card title="Configuration Partenaire DCB">
  <span helper-text class="badge badge-soft-success badge-label fs-xxs py-1">
    Payment Hub DCB
  </span>
  
  <div class="ins-wizard" card-body>
    <!-- Progress Bar -->
    <ngb-progressbar
      class="mb-4"
      [value]="progressValue"
      type="primary"
      height="6px"
    />

    <!-- Navigation Steps -->
    <ul class="nav nav-tabs wizard-tabs" role="tablist">
      @for (step of wizardSteps; track $index; let i = $index) {
        <li class="nav-item">
          <a
            href="javascript:void(0);"
            [class.active]="i === currentStep"
            class="nav-link"
            [class.disabled]="!isStepAccessible(i)"
            [class.wizard-item-done]="i < currentStep"
            (click)="goToStep(i)"
          >
            <span class="d-flex align-items-center">
              <ng-icon [name]="step.icon" class="fs-32" />
              <span class="flex-grow-1 ms-2 text-truncate">
                <span class="mb-0 lh-base d-block fw-semibold text-body fs-base">
                  {{ step.title }}
                </span>
                <span class="mb-0 fw-normal">{{ step.subtitle }}</span>
              </span>
            </span>
          </a>
        </li>
      }
    </ul>

    <!-- Messages -->
    @if (configError) {
      <div class="alert alert-danger mt-3">
        <ng-icon name="lucideAlertCircle" class="me-2"></ng-icon>
        {{ configError }}
      </div>
    }

    @if (configSuccess) {
      <div class="alert alert-success mt-3">
        <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
        {{ configSuccess }}
      </div>
    }

    <!-- Contenu des Steps -->
    <div class="tab-content pt-3">
      @for (step of wizardSteps; track $index; let i = $index) {
        <div
          class="tab-pane fade"
          [class.show]="currentStep === i"
          [class.active]="currentStep === i"
        >
          <form [formGroup]="partnerForm">
            <!-- Step 1: Informations Société -->
            @if (i === 0) {
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label">Nom commercial *</label>
                  <div formGroupName="companyInfo">
                    <input type="text" class="form-control" formControlName="name" 
                          placeholder="Nom commercial" />
                    @if (companyInfo.get('name')?.invalid && companyInfo.get('name')?.touched) {
                      <div class="text-danger small">Le nom commercial est requis</div>
                    }
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Raison sociale *</label>
                  <div formGroupName="companyInfo">
                    <input type="text" class="form-control" formControlName="legalName" 
                          placeholder="Raison sociale" />
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Email *</label>
                  <div formGroupName="companyInfo">
                    <input type="email" class="form-control" formControlName="email" 
                          placeholder="email@entreprise.com" />
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Téléphone *</label>
                  <div formGroupName="companyInfo">
                    <input type="tel" class="form-control" formControlName="phone" 
                          placeholder="+225 XX XX XX XX" />
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Site web</label>
                  <div formGroupName="companyInfo">
                    <input type="url" class="form-control" formControlName="website" 
                          placeholder="https://..." />
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Catégorie *</label>
                  <div formGroupName="companyInfo">
                    <select class="form-select" formControlName="category">
                      @for (cat of categories; track cat.value) {
                        <option [value]="cat.value">{{ cat.label }}</option>
                      }
                    </select>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Pays *</label>
                  <div formGroupName="companyInfo">
                    <select class="form-select" formControlName="country">
                      @for (country of countries; track country.code) {
                        <option [value]="country.code">{{ country.name }}</option>
                      }
                    </select>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Devise *</label>
                  <div formGroupName="companyInfo">
                    <select class="form-select" formControlName="currency">
                      @for (currency of currencies; track currency.code) {
                        <option [value]="currency.code">{{ currency.name }}</option>
                      }
                    </select>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Fuseau horaire *</label>
                  <div formGroupName="companyInfo">
                    <select class="form-select" formControlName="timezone">
                      @for (tz of timezones; track tz.value) {
                        <option [value]="tz.value">{{ tz.label }}</option>
                      }
                    </select>
                  </div>
                </div>
              </div>
            }

            <!-- Step 2: Adresse et Contact -->
            @if (i === 1) {
              <div class="row">
                <div class="col-12 mb-4">
                  <h6 class="border-bottom pb-2">Adresse de l'entreprise</h6>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label">Rue *</label>
                  <div formGroupName="addressInfo">
                    <input type="text" class="form-control" formControlName="street" 
                          placeholder="Adresse complète" />
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Ville *</label>
                  <div formGroupName="addressInfo">
                    <input type="text" class="form-control" formControlName="city" 
                          placeholder="Ville" />
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Région *</label>
                  <div formGroupName="addressInfo">
                    <input type="text" class="form-control" formControlName="state" 
                          placeholder="Région" />
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label class="form-label">Code postal *</label>
                  <div formGroupName="addressInfo">
                    <input type="text" class="form-control" formControlName="postalCode" 
                          placeholder="Code postal" />
                  </div>
                </div>
                
                <div class="col-12 mb-4 mt-4">
                  <h6 class="border-bottom pb-2">Contact technique</h6>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Nom complet *</label>
                  <div formGroupName="technicalContact">
                    <input type="text" class="form-control" formControlName="name" 
                          placeholder="Nom du contact technique" />
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Email *</label>
                  <div formGroupName="technicalContact">
                    <input type="email" class="form-control" formControlName="email" 
                          placeholder="contact@entreprise.com" />
                  </div>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label">Téléphone *</label>
                  <div formGroupName="technicalContact">
                    <input type="tel" class="form-control" formControlName="phone" 
                          placeholder="+225 XX XX XX XX" />
                  </div>
                </div>
              </div>
            }

            <!-- Step 3: Configuration Paiements -->
            @if (i === 2) {
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label">Taux de commission (%) *</label>
                  <div formGroupName="paymentConfig">
                    <input type="number" class="form-control" formControlName="commissionRate" 
                          min="0" max="100" step="0.1" />
                    <div class="form-text">Pourcentage prélevé sur chaque transaction</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Limite quotidienne (XOF) *</label>
                  <div formGroupName="paymentConfig">
                    <input type="number" class="form-control" formControlName="dailyLimit" 
                          min="1000" />
                    <div class="form-text">Plafond total des transactions par jour</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Limite par transaction (XOF) *</label>
                  <div formGroupName="paymentConfig">
                    <input type="number" class="form-control" formControlName="transactionLimit" 
                          min="100" max="500000" />
                    <div class="form-text">Montant maximum par transaction</div>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">Montant minimum (XOF) *</label>
                  <div formGroupName="paymentConfig">
                    <input type="number" class="form-control" formControlName="minAmount" 
                          min="1" />
                  </div>
                </div>
                <div class="col-12 mb-3">
                  <label class="form-label">Montant maximum (XOF) *</label>
                  <div formGroupName="paymentConfig">
                    <input type="number" class="form-control" formControlName="maxAmount" 
                          min="100" />
                  </div>
                </div>
              </div>
            }

            <!-- Step 4: Webhooks -->
            @if (i === 3) {
              <div class="row">
                <div class="col-12 mb-4">
                  <h6 class="border-bottom pb-2">Header Enrichment</h6>
                  <div formGroupName="webhookConfig">
                    <div formGroupName="headerEnrichment">
                      <div class="row mb-3">
                        <div class="col-md-8">
                          <label class="form-label">URL de callback</label>
                          <input type="url" class="form-control" formControlName="url" 
                                placeholder="https://votre-domaine.com/api/header-enrichment" />
                        </div>
                        <div class="col-md-4">
                          <label class="form-label">Méthode HTTP</label>
                          <select class="form-select" formControlName="method">
                            @for (method of httpMethods; track method.value) {
                              <option [value]="method.value">{{ method.label }}</option>
                            }
                          </select>
                        </div>
                      </div>
                      
                      <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                          <label class="form-label">Headers HTTP</label>
                          <button type="button" class="btn btn-sm btn-outline-primary" (click)="addHeader()">
                            <ng-icon name="lucidePlus" class="me-1"></ng-icon>
                            Ajouter un header
                          </button>
                        </div>
                        
                        @for (header of headerEnrichmentHeaders.controls; track $index; let idx = $index) {
                          <div class="row mb-2">
                            <div class="col-md-5">
                              <!-- CORRECTION ICI : Utilisation de getHeaderControl -->
                              <input type="text" class="form-control" 
                                    [formControl]="getHeaderControl(header, 'key')" 
                                    placeholder="Clé (ex: Authorization)" />
                            </div>
                            <div class="col-md-5">
                              <!-- CORRECTION ICI : Utilisation de getHeaderControl -->
                              <input type="text" class="form-control" 
                                    [formControl]="getHeaderControl(header, 'value')" 
                                    placeholder="Valeur" />
                            </div>
                            <div class="col-md-2">
                              <button type="button" class="btn btn-sm btn-outline-danger w-100" 
                                      (click)="removeHeader(idx)">
                                <ng-icon name="lucideTrash2"></ng-icon>
                              </button>
                            </div>
                          </div>
                        }
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12 mb-4">
                  <h6 class="border-bottom pb-2">Webhooks Abonnements</h6>
                  <div formGroupName="webhookConfig">
                    <div formGroupName="subscription">
                      <div class="row">
                        <div class="col-md-6 mb-2">
                          <label class="form-label">Création d'abonnement</label>
                          <input type="url" class="form-control" formControlName="onCreate" 
                                placeholder="https://votre-domaine.com/webhooks/subscription-created" />
                        </div>
                        <div class="col-md-6 mb-2">
                          <label class="form-label">Renouvellement</label>
                          <input type="url" class="form-control" formControlName="onRenew" 
                                placeholder="https://votre-domaine.com/webhooks/subscription-renewed" />
                        </div>
                        <div class="col-md-6 mb-2">
                          <label class="form-label">Annulation</label>
                          <input type="url" class="form-control" formControlName="onCancel" 
                                placeholder="https://votre-domaine.com/webhooks/subscription-cancelled" />
                        </div>
                        <div class="col-md-6 mb-2">
                          <label class="form-label">Expiration</label>
                          <input type="url" class="form-control" formControlName="onExpire" 
                                placeholder="https://votre-domaine.com/webhooks/subscription-expired" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12 mb-4">
                  <h6 class="border-bottom pb-2">Webhooks Paiements</h6>
                  <div formGroupName="webhookConfig">
                    <div formGroupName="payment">
                      <div class="row">
                        <div class="col-md-4 mb-2">
                          <label class="form-label">Paiement réussi</label>
                          <input type="url" class="form-control" formControlName="onSuccess" 
                                placeholder="https://votre-domaine.com/webhooks/payment-success" />
                        </div>
                        <div class="col-md-4 mb-2">
                          <label class="form-label">Paiement échoué</label>
                          <input type="url" class="form-control" formControlName="onFailure" 
                                placeholder="https://votre-domaine.com/webhooks/payment-failed" />
                        </div>
                        <div class="col-md-4 mb-2">
                          <label class="form-label">Remboursement</label>
                          <input type="url" class="form-control" formControlName="onRefund" 
                                placeholder="https://votre-domaine.com/webhooks/payment-refunded" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            }

            <!-- Step 5: Validation -->
            @if (i === 4) {
              <div class="row">
                <div class="col-12">
                  <div class="alert alert-info">
                    <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
                    Vérifiez les informations avant de créer le partenaire
                  </div>
                  
                  <div class="card">
                    <div class="card-body">
                      <h6 class="card-title">Récapitulatif</h6>
                      <div class="row">
                        <div class="col-md-6">
                          <strong>Informations Société:</strong><br>
                          {{ companyInfo.value.name || 'Non renseigné' }}<br>
                          {{ companyInfo.value.legalName || 'Non renseigné' }}<br>
                          {{ companyInfo.value.email || 'Non renseigné' }}<br>
                          {{ companyInfo.value.phone || 'Non renseigné' }}
                        </div>
                        <div class="col-md-6">
                          <strong>Configuration:</strong><br>
                          Commission: {{ paymentConfig.value.commissionRate || 0 }}%<br>
                          Limite quotidienne: {{ (paymentConfig.value.dailyLimit || 0) | number }} XOF<br>
                          Limite transaction: {{ (paymentConfig.value.transactionLimit || 0) | number }} XOF
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            }
          </form>

          <!-- Navigation Buttons -->
          <div class="d-flex justify-content-between mt-4">
            @if (i > 0) {
              <button type="button" class="btn btn-secondary" (click)="previousStep()">
                ← Précédent
              </button>
            } @else {
              <div></div>
            }
            
            @if (i < wizardSteps.length - 1) {
              <button type="button" class="btn btn-primary" (click)="nextStep()" 
                      [disabled]="!isStepValid(i)">
                Suivant →
              </button>
            } @else {
              <button type="button" class="btn btn-success" 
                      (click)="submitForm()" [disabled]="configLoading">
                @if (configLoading) {
                  <div class="spinner-border spinner-border-sm me-2" role="status">
                    <span class="visually-hidden">Chargement...</span>
                  </div>
                }
                Créer le Partenaire
              </button>
            }
          </div>
        </div>
      }
    </div>
  </div>
</app-ui-card>