@page "/admin/onboarding/ready"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Onboarding Step 6 — All set! Summary checklist and CTA to start selling
    VI: Bước 6 thiết lập — Hoàn tất! Checklist tóm tắt và nút bắt đầu sử dụng
    Design: pencil-design/src/pages/tPOS/admin/onboarding-ready.pen
*@

<PageTitle>Hoàn tất thiết lập — aPOS Admin</PageTitle>

<style>
    .confetti-wrapper {
        position:relative;
        width:120px;
        height:120px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .confetti-dot {
        position:absolute;
        width:8px;
        height:8px;
        border-radius:50%;
        animation:confetti-fall 1.6s linear infinite;
    }

    @@keyframes confetti-fall {
        0% {transform:translateY(0) scale(1);opacity:1;}
        100% {transform:translateY(20px) scale(0.6);opacity:0;}
    }
</style>

<div class="admin-content" style="padding:40px;">
    <div class="admin-panel" style="max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:32px;">

        <section>
            <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
                @for (int i = 1; i <= 6; i++)
                {
                    <div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
                        background-color:@(i == currentStep ? "var(--admin-orange-primary)" : i < currentStep ? "rgba(34,197,94,0.2)" : "var(--admin-bg-interactive)");
                        color:@(i == currentStep ? "#FFF" : i < currentStep ? "#22C55E" : "var(--admin-text-tertiary)");">
                        @(i < currentStep ? "✓" : i)
                    </div>
                    @if (i < 6)
                    {
                        <div style="flex:1;height:2px;background-color:@(i < currentStep ? "#22C55E" : "var(--admin-border-subtle)");"></div>
                    }
                }
            </div>
            <div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:6px;">
                @for (int i = 1; i <= 6; i++)
                {
                    <span style="text-align:center;font-size:12px;font-weight:@(i == currentStep ? "600" : "500");color:@(i == currentStep ? "var(--admin-orange-primary)" : "var(--admin-text-tertiary)");">
                        @_steps[i - 1].Label
                    </span>
                }
            </div>
            <p style="font-size:12px;color:var(--admin-text-tertiary);margin:0;">Bước 6/6 — Mọi thứ đã sẵn sàng, hãy bắt đầu hành trình bán hàng</p>
        </section>

        <section class="admin-panel" style="padding:32px;display:flex;flex-direction:column;align-items:center;gap:20px;">
            <div class="confetti-wrapper">
                <div class="confetti-dot" style="background-color:#FF5C00;left:10px;animation-delay:0s;"></div>
                <div class="confetti-dot" style="background-color:#22C55E;left:50px;animation-delay:0.2s;"></div>
                <div class="confetti-dot" style="background-color:#3B82F6;left:90px;animation-delay:0.4s;"></div>
            </div>
            <div style="text-align:center;display:flex;flex-direction:column;gap:8px;">
                <h2 style="margin:0;font-size:26px;font-weight:700;">Thiết lập hoàn tất!</h2>
                <p style="margin:0;font-size:14px;color:var(--admin-text-tertiary);max-width:420px;">Tất cả cấu phần chính đã sẵn sàng. Hãy bắt đầu bán hàng và mang trải nghiệm aPOS đến khách hàng.</p>
            </div>

            <div style="width:100%;display:flex;flex-direction:column;gap:12px;">
                @foreach (var item in _checklist)
                {
                    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;border:1px solid var(--admin-border-subtle);background-color:var(--admin-bg-interactive);">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <i data-lucide="@item.Icon" style="width:18px;height:18px;color:@item.IconColor;"></i>
                            <span style="font-size:14px;font-weight:600;">@item.Label</span>
                        </div>
                        <span style="font-size:13px;color:var(--admin-text-tertiary);">@item.Value</span>
                    </div>
                }
            </div>

            <button class="admin-btn-primary" style="width:100%;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;" @onclick='() => NavigateTo("dashboard")'>
                <i data-lucide="rocket" style="width:20px;height:20px;"></i>
                <span style="font-size:16px;font-weight:700;">Bắt đầu sử dụng</span>
            </button>

            <button class="admin-btn-secondary" style="background:none;border:none;color:var(--admin-text-tertiary);font-size:13px;" @onclick='() => NavigateTo("/docs/getting-started")'>Xem hướng dẫn sử dụng</button>
        </section>
    </div>
</div>

@code {
    private int currentStep = 6;

    private record StepInfo(int Index, string Label);
    private readonly StepInfo[] _steps =
    {
        new StepInfo(1, "Doanh nghiệp"),
        new StepInfo(2, "Cửa hàng"),
        new StepInfo(3, "Sản phẩm"),
        new StepInfo(4, "Nhân viên"),
        new StepInfo(5, "Thiết bị"),
        new StepInfo(6, "Hoàn tất"),
    };

    private record ChecklistItem(string Icon, string IconColor, string Label, string Value);
    private readonly ChecklistItem[] _checklist =
    {
        new ChecklistItem("building-2", "#3B82F6", "Thông tin doanh nghiệp", "Đã hoàn tất"),
        new ChecklistItem("store", "#FF5C00", "Cửa hàng đầu tiên", "Coffee House Q1"),
        new ChecklistItem("package", "#8B5CF6", "Sản phẩm", "3 món mẫu"),
        new ChecklistItem("users", "#EC4899", "Nhân viên", "2 người"),
        new ChecklistItem("tablet", "#22C55E", "Thiết bị", "1 thiết bị"),
    };
}
