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

@*
    EN: Onboarding Step 1 — Business information (name, tax ID, address, logo upload).
    VI: Bước 1 thiết lập — Thông tin doanh nghiệp (tên, MST, địa chỉ, logo).
    Design: pencil-design/src/pages/tPOS/admin/onboarding-business.pen
*@

<PageTitle>Thiết lập doanh nghiệp — GoodGo Admin</PageTitle>

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

    @* ═══ SIDEBAR — Step Progress ═══ *@
    <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;">
        @* Logo *@
        <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>
        @* Steps *@
        <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;
                <div style="display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;
                    background-color:@(step.Index == 1 ? "rgba(255,92,0,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:@(step.Index == 1 ? "var(--admin-orange-primary)" : "var(--admin-bg-interactive)");
                        color:@(step.Index == 1 ? "#FFF" : "var(--admin-text-tertiary)");
                        border:@(step.Index > 1 ? "2px solid var(--admin-border-default)" : "none");">
                        @step.Index
                    </div>
                    <span style="font-size:14px;font-weight:@(step.Index == 1 ? "600" : "500");color:@(step.Index == 1 ? "var(--admin-orange-primary)" : "var(--admin-text-tertiary)");">@step.Label</span>
                </div>
                @if (step.Index < 6)
                {
                    <div style="width:2px;height:24px;background-color:var(--admin-border-default);margin-left:23px;"></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:720px;max-width:100%;padding:32px;border-radius:16px;display:flex;flex-direction:column;gap:24px;">

            @* Header *@
            <div style="display:flex;flex-direction:column;gap:8px;">
                <h2 style="font-size:22px;font-weight:700;margin:0;">Thông tin doanh nghiệp</h2>
                <p style="font-size:14px;color:var(--admin-text-tertiary);margin:0;">Nhập thông tin cơ bản về doanh nghiệp của bạn</p>
            </div>

            @* Row 1: Business name + Tax ID *@
            <div style="display:flex;gap:20px;">
                <div class="admin-form-group" style="flex:1;">
                    <label class="admin-form-label">Tên doanh nghiệp <span style="color:var(--admin-danger);">*</span></label>
                    <input class="admin-form-input" type="text" placeholder="VD: Công ty TNHH ABC" @bind="_businessName" />
                </div>
                <div class="admin-form-group" style="flex:1;">
                    <label class="admin-form-label">Mã số thuế</label>
                    <input class="admin-form-input" type="text" placeholder="VD: 0312345678" @bind="_taxId" />
                </div>
            </div>

            @* Row 2: Address *@
            <div class="admin-form-group">
                <label class="admin-form-label">Địa chỉ trụ sở <span style="color:var(--admin-danger);">*</span></label>
                <input class="admin-form-input" type="text" placeholder="Nhập địa chỉ trụ sở chính" @bind="_address" />
            </div>

            @* Row 3: Phone + Email *@
            <div style="display:flex;gap:20px;">
                <div class="admin-form-group" style="flex:1;">
                    <label class="admin-form-label">Số điện thoại <span style="color:var(--admin-danger);">*</span></label>
                    <input class="admin-form-input" type="tel" placeholder="VD: 028 1234 5678" @bind="_phone" />
                </div>
                <div class="admin-form-group" style="flex:1;">
                    <label class="admin-form-label">Email</label>
                    <input class="admin-form-input" type="email" placeholder="contact@company.com" @bind="_email" />
                </div>
            </div>

            @* Row 4: Logo upload *@
            <div class="admin-form-group">
                <label class="admin-form-label">Logo doanh nghiệp</label>
                <div style="height:100px;border:2px dashed var(--admin-border-default);border-radius:10px;background-color:var(--admin-bg-interactive);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;">
                    <i data-lucide="upload" style="width:28px;height:28px;color:var(--admin-text-tertiary);"></i>
                    <span style="font-size:13px;color:var(--admin-text-tertiary);">Kéo thả hoặc nhấn để tải logo</span>
                    <span style="font-size:11px;color:var(--admin-text-tertiary);">PNG, JPG tối đa 2MB</span>
                </div>
            </div>

            @* Footer *@
            <div style="display:flex;justify-content:flex-end;padding-top:8px;">
                <button class="admin-btn-primary" @onclick="@(() => NavigateTo("onboarding/store"))">
                    <span>Tiếp tục</span>
                    <i data-lucide="arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

@code {
    private string _businessName = "";
    private string _taxId = "";
    private string _address = "";
    private string _phone = "";
    private string _email = "";

    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"),
    };
}
