@php
  $mvp = $mvpProgress ?? ['steps' => [], 'progresso_pct' => 0, 'etapa_atual' => 1, 'concluido' => false, 'tab_etapas' => []];
  $steps = $mvp['steps'] ?? [];
  $fluxoEtapa = $mvp['etapa_atual'] ?? 1;
@endphp
@if(config('reforma_tributaria.show_mvp_steps', false))
<div class="mvp-stepper mb-4" data-tour="mvp-stepper" id="mvp-stepper"
     data-tab-etapas='@json($mvp['tab_etapas'] ?? [])'
     data-fluxo-etapa="{{ $fluxoEtapa }}">
  <div class="mvp-stepper-head d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
    <div>
      <span class="text-xs text-uppercase text-muted fw-semibold">Fluxo da análise</span>
      @if($mvp['concluido'] ?? false)
        <span class="badge bg-success ms-2">Concluído</span>
      @else
        <span class="text-xs text-muted ms-2">
          Etapa {{ $mvp['etapa_atual'] ?? 1 }} de 5
        @if(($mvp['etapa_aba'] ?? null) && ($mvp['etapa_aba'] ?? null) !== ($mvp['etapa_atual'] ?? null))
            <span class="text-primary" id="mvp-stepper-hint">· você está na etapa {{ $mvp['etapa_aba'] }}</span>
          @else
            <span class="text-primary" id="mvp-stepper-hint" style="display:none"></span>
          @endif
        </span>
      @endif
    </div>
    <div class="mvp-stepper-progress text-xs">
      <div class="progress" style="width:120px;height:6px;">
        <div class="progress-bar bg-success" style="width:{{ $mvp['progresso_pct'] ?? 0 }}%"></div>
      </div>
      <span class="ms-1 text-muted">{{ $mvp['progresso_pct'] ?? 0 }}%</span>
    </div>
  </div>
  <div class="mvp-stepper-track" id="mvp-stepper-track">
    @foreach($steps as $step)
      @php
        if ($step['concluido'] ?? false) {
            $state = ($step['aba_ativa'] ?? false) ? 'done-active' : 'done';
        } elseif ($step['aba_ativa'] ?? false) {
            $state = 'current';
        } elseif ($step['fluxo_atual'] ?? false) {
            $state = 'fluxo';
        } elseif ($step['atual'] ?? false) {
            $state = 'current';
        } else {
            $state = 'pending';
        }
      @endphp
      <a href="{{ $step['url'] ?? '#' }}"
         class="mvp-step mvp-step--{{ $state }}"
         data-mvp-step="{{ $step['numero'] }}"
         data-mvp-tab="{{ $step['tab'] ?? '' }}"
         @if(empty($step['url'])) onclick="return false;" @endif
         title="{{ $step['subtitulo'] ?? '' }}">
        <span class="mvp-step__icon">
          @if(($step['concluido'] ?? false) && !($step['aba_ativa'] ?? false))
            <i class="fas fa-check"></i>
          @else
            <i class="fas {{ $step['icone'] ?? 'fa-circle' }}"></i>
          @endif
        </span>
        <span class="mvp-step__num">{{ $step['numero'] }}</span>
        <span class="mvp-step__label">{{ $step['titulo'] }}</span>
        @if($state === 'fluxo')
          <span class="mvp-step__badge">Próximo</span>
        @endif
      </a>
      @if(!$loop->last)
        <span class="mvp-stepper-line mvp-stepper-line--{{ ($step['concluido'] ?? false) ? 'done' : 'pending' }}"></span>
      @endif
    @endforeach
  </div>
</div>
@endif