@using PowderCoating.Application.DTOs.Wizard
@{
    ViewData["Title"] = "Setup Complete!";
    var progress = ViewBag.Progress as WizardProgressDto ?? new WizardProgressDto();
    var showGuidedActivationCta = (bool?)ViewBag.ShowGuidedActivationCta ?? false;
}

@section Styles {
<style>
    .complete-hero {
        background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%);
        border-radius: 1rem;
        color: white;
        padding: 3rem 2rem;
        text-align: center;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .complete-hero::after {
        content: '\f26b';
        font-family: 'bootstrap-icons';
        position: absolute;
        right: -1rem;
        top: -1rem;
        font-size: 12rem;
        color: rgba(255,255,255,0.05);
        pointer-events: none;
    }

    .complete-hero h1 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .steps-done-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .step-done-tile {
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: 0.75rem;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
    }

    .step-done-tile.done { border-color: #d1fae5; }
    .step-done-tile.skipped { opacity: 0.65; }

    .step-done-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .step-done-icon.done { background: #d1fae5; color: #059669; }
    .step-done-icon.skipped { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
</style>
}

<div class="complete-hero">
    <div class="mb-3">
        <i class="bi bi-check-circle-fill" style="font-size:3rem;"></i>
    </div>
    <h1>You're all set!</h1>
    <p style="color:rgba(255,255,255,0.8);font-size:1.05rem;max-width:500px;margin:0 auto 1.5rem;">
        Your setup is complete. @progress.DoneSteps.Count of @WizardProgressDto.TotalSteps steps were configured &mdash; your shop is ready to roll.
    </p>
    @if (showGuidedActivationCta)
    {
        <a asp-controller="GuidedActivation" asp-action="Start" class="btn btn-light btn-lg px-5 fw-semibold">
            <i class="bi bi-play-circle me-2"></i>Start First Workflow
        </a>
    }
    else
    {
        <a asp-controller="Dashboard" asp-action="Index" class="btn btn-light btn-lg px-5 fw-semibold">
            <i class="bi bi-house me-2"></i>Go to Dashboard
        </a>
    }
</div>

@{
    var stepLabels = new Dictionary<int, (string Label, string Icon)>
    {
        { 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") },
    };
}

<h5 class="fw-bold mb-3">Steps Summary</h5>
<div class="steps-done-grid">
    @for (int i = 1; i <= WizardProgressDto.TotalSteps; i++)
    {
        var (label, icon) = stepLabels[i];
        bool done = progress.IsStepDone(i);
        bool skipped = progress.IsStepSkipped(i) && !done;
        var stateClass = done ? "done" : skipped ? "skipped" : "skipped";
        var iconClass = done ? "done" : "skipped";
        <div class="step-done-tile @stateClass">
            <div class="step-done-icon @iconClass">
                @if (done)
                {
                    <i class="bi bi-check-lg"></i>
                }
                else
                {
                    <i class="bi bi-dash"></i>
                }
            </div>
            <div>
                <div class="fw-semibold">@label</div>
                <div class="text-secondary" style="font-size:0.8rem;">@(done ? "Completed" : "Skipped")</div>
            </div>
        </div>
    }
</div>

@if (progress.SkippedSteps.Any(s => !progress.IsStepDone(s)))
{
    <div class="alert alert-warning alert-permanent d-flex gap-2 mb-4">
        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
        <div>
            You skipped @progress.SkippedSteps.Count(s => !progress.IsStepDone(s)) step(s). You can always re-run the setup wizard from
            <a asp-controller="CompanySettings" asp-action="Index">Company Settings</a>.
        </div>
    </div>
}

<div class="d-flex gap-2 flex-wrap">
    <a asp-controller="SetupWizard" asp-action="Step" asp-route-step="1" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-counterclockwise me-1"></i>Re-run Wizard
    </a>
    <a asp-controller="CompanySettings" asp-action="Index" class="btn btn-outline-primary">
        <i class="bi bi-gear me-1"></i>Open Company Settings
    </a>
    @if (showGuidedActivationCta)
    {
        <a asp-controller="GuidedActivation" asp-action="Start" class="btn btn-primary">
            <i class="bi bi-play-circle me-1"></i>Start First Workflow
        </a>
    }
    else
    {
        <a asp-controller="Dashboard" asp-action="Index" class="btn btn-primary">
            <i class="bi bi-house me-1"></i>Go to Dashboard
        </a>
    }
</div>