@using PowderCoating.Application.DTOs.Wizard
@model WizardProgressDto

@{
    var steps = new[]
    {
        (1, "Company Profile",  "bi-building"),
        (2, "QB Migration",     "bi-arrow-left-right"),
        (3, "Operating Costs",  "bi-currency-dollar"),
        (4, "Shop Ovens",       "bi-fire"),
        (5, "Notifications",    "bi-bell"),
    };
    int currentStep = ViewBag.Step as int? ?? 1;
}

<div class="wizard-sidebar">
    <div class="wizard-sidebar-header">
        <i class="bi bi-rocket-takeoff me-2"></i>
        <span class="fw-semibold">Setup Wizard</span>
        <span class="ms-auto badge bg-secondary">@Model.CompletedCount / @WizardProgressDto.TotalSteps</span>
    </div>

    <div class="wizard-progress-bar">
        <div class="wizard-progress-fill" style="width:@Model.ProgressPercent%"></div>
    </div>

    <nav class="wizard-steps-nav">
        @foreach (var (num, label, icon) in steps)
        {
            var isDone = Model.IsStepDone(num);
            var isSkipped = Model.IsStepSkipped(num);
            var isCurrent = num == currentStep;

            var stateClass = isCurrent ? "current" : isDone ? "done" : isSkipped ? "skipped" : "pending";

            <a href="@Url.Action("Step", "SetupWizard", new { step = num })"
               class="wizard-step-item @stateClass"
               title="@label">
                <span class="wizard-step-dot">
                    @if (isDone)
                    {
                        <i class="bi bi-check-lg"></i>
                    }
                    else if (isSkipped)
                    {
                        <i class="bi bi-dash"></i>
                    }
                    else
                    {
                        <span>@num</span>
                    }
                </span>
                <span class="wizard-step-label">
                    <i class="@icon me-1"></i>@label
                    @if (isSkipped && !isDone)
                    {
                        <small class="text-warning ms-1">(skipped)</small>
                    }
                </span>
            </a>
        }
    </nav>
</div>