@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 bán hàng.
    Design: pencil-design/src/pages/tPOS/admin/onboarding-ready.pen
*@

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

<div style="display:flex;height:100vh;overflow:hidden;">

    @* ═══ SIDEBAR — Step Progress (all completed) ═══ *@
    <div style="width:260px;min-width:260px;background-color:var(--admin-bg-elevated);border-right:1px solid var(--admin-border-subtle);display:flex;flex-direction:column;height:100vh;">
        <div style="display:flex;align-items:center;gap:12px;padding:24px;border-bottom:1px solid var(--admin-border-subtle);">
            <div style="width:40px;height:40px;border-radius:12px;background:var(--admin-orange-gradient);display:flex;align-items:center;justify-content:center;color:#FFF;font-size:20px;font-weight:800;">G</div>
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:16px;font-weight:700;">GoodGo Admin</span>
                <span style="font-size:11px;color:var(--admin-text-tertiary);">Thiết lập ban đầu</span>
            </div>
        </div>
        <div style="flex:1;padding:32px 24px;display:flex;flex-direction:column;">
            <span style="font-size:10px;font-weight:700;color:var(--admin-text-tertiary);letter-spacing:0.05em;margin-bottom:16px;">TIẾN TRÌNH</span>
            @foreach (var s in _steps)
            {
                var step = s;
                var isLast = step.Index == 6;
                <div style="display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;
                    background-color:@(isLast ? "rgba(34,197,94,0.08)" : "transparent");">
                    <div style="width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
                        background-color:#22C55E;color:#FFF;">
                        ✓
                    </div>
                    <span style="font-size:14px;font-weight:@(isLast ? "600" : "500");color:@(isLast ? "#22C55E" : "var(--admin-text-primary)");">@step.Label</span>
                </div>
                @if (step.Index < 6)
                {
                    <div style="width:2px;height:24px;margin-left:23px;background-color:#22C55E;"></div>
                }
            }
        </div>
    </div>

    @* ═══ MAIN CONTENT ═══ *@
    <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px;overflow-y:auto;">
        <div class="admin-panel" style="width:560px;max-width:100%;padding:40px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:32px;">

            @* Success icon *@
            <div style="width:72px;height:72px;border-radius:50%;background-color:rgba(34,197,94,0.08);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="party-popper" style="width:36px;height:36px;color:#22C55E;"></i>
            </div>

            @* Title *@
            <div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
                <h2 style="font-size:24px;font-weight:700;margin:0;text-align:center;">Thiết lập hoàn tất!</h2>
                <p style="font-size:14px;color:var(--admin-text-tertiary);margin:0;text-align:center;">Mọi thứ đã sẵn sàng để bạn bắt đầu bán hàng</p>
            </div>

            @* Checklist *@
            <div style="width:100%;padding:16px 20px;border-radius:12px;background-color:var(--admin-bg-interactive);display:flex;flex-direction:column;gap:14px;">
                @foreach (var item in _checklist)
                {
                    var c = item;
                    <div style="display:flex;align-items:center;justify-content:space-between;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <i data-lucide="@c.Icon" style="width:18px;height:18px;color:@c.IconColor;"></i>
                            <span style="font-size:14px;font-weight:500;">@c.Label</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:6px;">
                            <span style="font-size:12px;color:var(--admin-text-tertiary);">@c.Value</span>
                            <i data-lucide="check-circle" style="width:16px;height:16px;color:#22C55E;"></i>
                        </div>
                    </div>
                }
            </div>

            @* CTA Button *@
            <button style="width:100%;height:52px;border-radius:12px;background-color:var(--admin-orange-primary);border:none;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:all 0.2s ease;"
                    @onclick="@(() => NavigateTo("dashboard"))">
                <i data-lucide="rocket" style="width:20px;height:20px;color:#FFF;"></i>
                <span style="font-size:16px;font-weight:700;color:#FFF;">Bắt đầu bán hàng</span>
            </button>

            @* Guide link *@
            <span style="font-size:13px;color:var(--admin-text-tertiary);cursor:pointer;">Xem hướng dẫn sử dụng</span>
        </div>
    </div>
</div>

@code {
    private record ChecklistItem(string Icon, string IconColor, string Label, string Value);
    private readonly ChecklistItem[] _checklist = new[]
    {
        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 sản phẩm"),
        new ChecklistItem("users", "#EC4899", "Nhân viên", "2 người"),
        new ChecklistItem("tablet", "#22C55E", "Thiết bị POS", "1 thiết bị"),
    };

    private record StepInfo(int Index, string Label);
    private readonly StepInfo[] _steps = new[]
    {
        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"),
    };
}
