@php
    $draft = is_array($draft ?? null) ? $draft : [];
    $stages = app(\App\Campaigns\TikTokCampaignFlow::class)->stages($draft);
    $next = app(\App\Campaigns\TikTokCampaignFlow::class)->next($draft);
    $value = static fn (string $key): string => filled($draft[$key] ?? null) ? (string) $draft[$key] : '—';
    $stageComplete = static fn (string $stage): bool => app(\App\Campaigns\TikTokCampaignFlow::class)->stageComplete($stage, $draft);
    $completed = collect($stages)->keys()->filter($stageComplete)->count();
@endphp

<div class="d-flex justify-content-between align-items-start mb-3">
    <strong>{{ $draft['campaign_name'] ?? 'New TikTok campaign' }}</strong>
    <span class="badge text-bg-secondary">{{ filled($draft['ad_id'] ?? null) ? 'created disabled' : 'draft' }}</span>
</div>

@if (($draft['validation_status'] ?? null) === 'passed')
    <div class="alert alert-success small py-2 mb-3">
        <strong>Validated preview</strong>
        <span class="d-block">Review the settings below. TikTok delivery remains paused until explicitly enabled in TikTok Ads.</span>
    </div>
@endif

<div class="mb-progress mb-3">
    <div class="mb-progress-head">
        <span class="mb-progress-count">{{ $completed }} of {{ count($stages) }} stages</span>
        <span class="mb-progress-next{{ $next ? '' : ' is-ready' }}">{{ $next ? 'Next: '.$next['stage_label'].' / '.$next['label'] : 'Ready to create' }}</span>
    </div>
    <div class="mb-progress-track" role="progressbar" aria-valuenow="{{ $completed }}" aria-valuemin="0" aria-valuemax="{{ count($stages) }}" aria-label="TikTok campaign setup progress">
        <span class="mb-progress-fill" style="width: {{ round($completed / count($stages) * 100) }}%"></span>
    </div>
    <ol class="mb-progress-steps">
        @foreach ($stages as $key => $stage)
            <li class="mb-progress-step{{ $stageComplete($key) ? ' is-done' : '' }}{{ $next && $next['stage'] === $key ? ' is-next' : '' }}">
                <i class="bi {{ $stageComplete($key) ? 'bi-check-circle-fill' : 'bi-circle' }}"></i> {{ $stage['label'] }}
            </li>
        @endforeach
    </ol>
</div>

@foreach ($stages as $stage)
    <div class="small text-uppercase fw-semibold text-muted mb-2">{{ $stage['label'] }}</div>
    <table class="table table-sm mb-3">
        <tbody>
            @foreach ($stage['fields'] as $field)
                <tr>
                    <td class="text-body-secondary" style="width: 42%;"><span class="mb-dot {{ filled($draft[$field['key']] ?? null) ? 'bg-success' : 'bg-secondary-subtle' }}"></span>{{ $field['label'] }}</td>
                    <td class="text-break">{{ $value($field['key']) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endforeach

@if (filled($draft['campaign_id'] ?? null) || filled($draft['adgroup_id'] ?? null) || filled($draft['ad_id'] ?? null))
    <div class="alert alert-success small py-2">
        <div class="fw-semibold mb-1">TikTok IDs</div>
        <dl class="mb-ids font-monospace mb-0">
            @foreach (['campaign_id' => 'Campaign', 'adgroup_id' => 'Ad group', 'ad_id' => 'Ad'] as $key => $label)
                @if (filled($draft[$key] ?? null))<dt>{{ $label }}</dt><dd>{{ $draft[$key] }}</dd>@endif
            @endforeach
        </dl>
    </div>
@endif

<div class="small text-body-secondary">Remote objects are created disabled after the final review.</div>