@using PowderCoating.Web.ViewModels.Dashboard
@model ShopProgressWidgetViewModel

<div class="card border-0 shadow-sm mb-4" id="shopProgressWidget">
    <div class="card-header d-flex align-items-center gap-2 py-2 px-4"
         style="background:var(--pcl-paper-2);border-bottom:1px solid var(--pcl-rule);">
        <i class="bi bi-rocket-takeoff" style="color:var(--pcl-blue);"></i>
        <span class="fw-semibold" style="color:var(--pcl-ink);">Get the most out of your shop</span>
        @if (!Model.AllDone)
        {
            <span class="ms-auto badge rounded-pill bg-secondary">@Model.BadgeText</span>
        }
        <button class="btn btn-link btn-sm p-0 @(Model.AllDone ? "ms-auto" : "ms-2") text-secondary"
                id="shopProgressToggle" title="Collapse" style="line-height:1;">
            <i class="bi bi-chevron-up" id="shopProgressChevron"></i>
        </button>
    </div>

    <div id="shopProgressBody">
        @if (Model.AllDone)
        {
            <div class="px-4 py-4 d-flex align-items-center justify-content-between gap-3">
                <div>
                    <div class="fw-semibold mb-1" style="font-size:1rem;color:var(--pcl-ink);">Your shop is fully set up 🎉</div>
                    <div class="text-muted mb-3" style="font-size:0.85rem;">You're ready to run everything from here.</div>
                    <a href="@Url.Action("Create", "Jobs")" class="btn btn-primary btn-sm">
                        Create job <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
                <button id="shopProgressDismiss" type="button"
                        class="btn btn-link btn-sm text-muted p-0 flex-shrink-0 align-self-start"
                        title="Dismiss" style="font-size:1.1rem;line-height:1;">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        }
        else
        {
            <div class="px-4 pt-3 pb-1">
                <p class="text-muted mb-2" style="font-size:0.85rem;">@Model.SubtitleText</p>
                <div class="progress mb-1" style="height:5px;border-radius:3px;">
                    <div class="progress-bar @(Model.ProgressPercent >= 60 ? "bg-success" : "bg-primary")"
                         role="progressbar"
                         style="width:@Model.ProgressPercent%;transition:width 0.4s ease;"
                         aria-valuenow="@Model.ProgressPercent" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>

            <ul class="list-group list-group-flush mb-1">
                @{
                    var nextFound  = false;
                    bool? prevDone = null;
                }
                @foreach (var item in Model.Items)
                {
                    var isNext = !item.Done && !nextFound;
                    if (isNext) { nextFound = true; }

                    @if (prevDone.HasValue && prevDone.Value && !item.Done)
                    {
                        <li class="list-group-item border-0 px-4 py-0" style="background:transparent;">
                            <hr class="my-0" style="border-color:var(--pcl-rule);">
                        </li>
                    }
                    prevDone = item.Done;

                    <li class="list-group-item border-0 d-flex align-items-center gap-3 px-4 py-2"
                        style="background:@(isNext ? "rgba(13,110,253,0.04)" : "transparent");">
                        @if (item.Done)
                        {
                            <i class="bi bi-check-circle-fill flex-shrink-0"
                               style="color:var(--pcl-good);font-size:1.1rem;"></i>
                        }
                        else
                        {
                            <i class="bi @item.Icon flex-shrink-0 text-muted" style="font-size:1.1rem;"></i>
                        }

                        <div class="flex-grow-1 min-width-0">
                            <div class="fw-medium @(item.Done ? "text-muted" : "")" style="font-size:0.875rem;">
                                @item.Label
                                @if (isNext)
                                {
                                    <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill ms-1" style="font-size:0.65rem;">Next</span>
                                }
                            </div>
                            @if (item.Done)
                            {
                                @if (!string.IsNullOrEmpty(item.DoneSubLabel))
                                {
                                    <div style="font-size:0.78rem;color:var(--pcl-good);">@item.DoneSubLabel</div>
                                }
                            }
                            else
                            {
                                <div class="text-muted" style="font-size:0.78rem;">@item.SubLabel</div>
                            }
                        </div>

                        @if (item.Done)
                        {
                            <span class="flex-shrink-0 fw-medium"
                                  style="font-size:0.78rem;color:var(--pcl-good);">Done</span>
                        }
                        else
                        {
                            <a href="@item.CtaUrl"
                               class="btn btn-sm @(isNext ? "btn-primary" : "btn-outline-primary") flex-shrink-0">
                                @item.CtaText <i class="bi bi-arrow-right ms-1"></i>
                            </a>
                        }
                    </li>
                }
            </ul>
        }
    </div>
</div>