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

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

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

<div class="admin-content" style="padding:40px;">
    <div class="admin-panel" style="max-width:980px;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 1/6 — Nhập thông tin sơ bộ để aPOS hiểu doanh nghiệp của bạn</p>
        </section>

        <section class="admin-panel" style="padding:32px;display:flex;flex-direction:column;gap:24px;">
            <div style="display:flex;flex-direction:column;gap:6px;">
                <h2 style="font-size:24px;margin:0;font-weight:700;">Thông tin doanh nghiệp</h2>
                <p style="margin:0;font-size:14px;color:var(--admin-text-tertiary);">Giúp chúng tôi biết bạn bán gì và ở đâu.</p>
            </div>

            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;">
                <div class="admin-form-group">
                    <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" @bind="_businessName" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Mã số thuế</label>
                    <input class="admin-form-input" type="text" @bind="_taxId" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Địa chỉ trụ sở</label>
                    <input class="admin-form-input" type="text" @bind="_address" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Số điện thoại</label>
                    <input class="admin-form-input" type="tel" @bind="_phone" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Email liên hệ</label>
                    <input class="admin-form-input" type="email" @bind="_email" />
                </div>
            </div>

            <div>
                <label class="admin-form-label">Loại hình kinh doanh</label>
                <div style="display:flex;flex-wrap:wrap;gap:12px;padding-top:8px;">
                    @foreach (var type in _businessTypes)
                    {
                        <button type="button" class="admin-btn-secondary" style="background-color:@(type.Key == _businessType ? "var(--admin-orange-primary)" : "var(--admin-bg-interactive)");
                            color:@(type.Key == _businessType ? "#FFF" : "var(--admin-text-primary)");border:1px solid var(--admin-border-default);min-width:140px;display:flex;flex-direction:column;gap:4px;padding:14px;"
                                @onclick="() => _businessType = type.Key">
                            <span style="font-size:14px;font-weight:600;">@type.Label</span>
                            <span style="font-size:12px;color:@(type.Key == _businessType ? "rgba(255,255,255,0.8)" : "var(--admin-text-tertiary)");">@type.Description</span>
                        </button>
                    }
                </div>
            </div>

            <div style="display:flex;flex-wrap:wrap;gap:20px;">
                <div style="flex:1;min-width:220px;">
                    <label class="admin-form-label">Logo doanh nghiệp</label>
                    <div style="height:120px;border:2px dashed var(--admin-border-default);border-radius:14px;background-color:var(--admin-bg-interactive);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;">
                        <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 để chọn logo</span>
                        <span style="font-size:12px;color:var(--admin-text-secondary);">@_logoPlaceholder</span>
                    </div>
                </div>
                <div style="flex:1;min-width:220px;border-radius:14px;background-color:var(--admin-bg-interactive);padding:20px;display:flex;flex-direction:column;gap:8px;">
                    <span style="font-size:14px;font-weight:600;">Tóm tắt nhanh</span>
                    <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--admin-text-tertiary);">
                        <span>Loại hình</span>
                        <span>@GetBusinessTypeLabel()</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--admin-text-tertiary);">
                        <span>Địa chỉ</span>
                        <span>@_address</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--admin-text-tertiary);">
                        <span>Liên hệ</span>
                        <span>@_phone</span>
                    </div>
                </div>
            </div>

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

@code {
    private int currentStep = 1;
    private string _businessName = "aPOS Bistro";
    private string _taxId = "0312345678";
    private string _address = "123 Nguyễn Huệ, Quận 1, TP.HCM";
    private string _phone = "028 7300 1234";
    private string _email = "contact@goodgo.vn";
    private string _businessType = "fnb";
    private string _logoPlaceholder = "Chưa chọn tệp";

    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 BusinessType(string Key, string Label, string Description);
    private readonly BusinessType[] _businessTypes =
    {
        new BusinessType("fnb", "F&B", "Quán cà phê, nhà hàng"),
        new BusinessType("retail", "Bán lẻ", "Cửa hàng, showroom"),
        new BusinessType("services", "Dịch vụ", "Spa, salon, gym"),
    };

    private string GetBusinessTypeLabel()
        => Array.Find(_businessTypes, t => t.Key == _businessType)?.Label ?? "F&B";
}
