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

@*
    EN: Onboarding Step 3 — Add initial products (quick form, CSV import, product list preview)
    VI: Bước 3 thiết lập — Thêm sản phẩm ban đầu (form nhanh, import CSV, danh sách)
    Design: pencil-design/src/pages/tPOS/admin/onboarding-products.pen
*@

<PageTitle>Thêm sản phẩm — 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 3/6 — Nhập vài sản phẩm mẫu hoặc import thẳng từ file CSV</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êm sản phẩm đầu tiên</h2>
                <p style="margin:0;font-size:14px;color:var(--admin-text-tertiary);">Không cần làm tất cả ngay, bạn có thể bắt đầu với vài món tiêu biểu.</p>
            </div>

            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;">
                <div style="border-radius:14px;border:1px dashed var(--admin-border-default);padding:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;">
                    <div style="display:flex;align-items:center;gap:6px;font-weight:600;color:var(--admin-orange-primary);">
                        <i data-lucide="file-spreadsheet" style="width:20px;height:20px;"></i>
                        <span>Import từ CSV</span>
                    </div>
                    <p style="margin:0;font-size:13px;color:var(--admin-text-tertiary);">Tải file định dạng chuẩn aPOS để tiết kiệm thời gian.</p>
                    <button class="admin-btn-secondary" style="width:100%;" @onclick="ImportFromCsv">Tải file CSV</button>
                    <span style="font-size:12px;color:var(--admin-text-secondary);">@_importStatus</span>
                </div>
                <div style="border-radius:14px;background-color:rgba(255,92,0,0.08);border:1px solid var(--admin-orange-primary);padding:20px;display:flex;flex-direction:column;gap:10px;">
                    <span style="font-weight:600;color:var(--admin-orange-primary);">Nhập thủ công</span>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
                        <div class="admin-form-group" style="flex:1;min-width:140px;">
                            <label class="admin-form-label">Tên sản phẩm</label>
                            <input class="admin-form-input" type="text" @bind="_newProductName" />
                        </div>
                        <div class="admin-form-group" style="width:140px;">
                            <label class="admin-form-label">Giá bán</label>
                            <input class="admin-form-input" type="text" @bind="_newProductPrice" />
                        </div>
                        <div class="admin-form-group" style="width:140px;">
                            <label class="admin-form-label">Danh mục</label>
                            <select class="admin-form-input" @bind="_newProductCategory">
                                <option value="Đồ uống">Đồ uống</option>
                                <option value="Đồ ăn">Đồ ăn</option>
                                <option value="Tráng miệng">Tráng miệng</option>
                            </select>
                        </div>
                        <button class="admin-btn-primary" style="height:44px;" @onclick="AddProduct">
                            <i data-lucide="plus" style="width:18px;height:18px;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div style="display:flex;flex-direction:column;gap:10px;">
                <h3 style="margin:0;font-size:16px;font-weight:600;">Danh sách sản phẩm (@_products.Count)</h3>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    @foreach (var product in _products)
                    {
                        <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>
                                <div style="font-weight:600;">@product.Name</div>
                                <div style="font-size:12px;color:var(--admin-text-tertiary);">@product.Category</div>
                            </div>
                            <span style="font-weight:600;color:var(--admin-orange-primary);">@product.Price</span>
                        </div>
                    }
                </div>
            </div>

            <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;">
                <button class="admin-btn-secondary" @onclick='() => NavigateTo("onboarding/store")' style="display:flex;gap:8px;align-items:center;">
                    <i data-lucide="arrow-left"></i>
                    <span>Quay lại</span>
                </button>
                <div style="display:flex;gap:12px;">
                    <button class="admin-btn-secondary" @onclick='() => NavigateTo("onboarding/staff")'>Bỏ qua</button>
                    <button class="admin-btn-primary" @onclick='() => NavigateTo("onboarding/staff")' style="display:flex;gap:8px;align-items:center;">
                        <span>Tiếp tục</span>
                        <i data-lucide="arrow-right"></i>
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>

@code {
    private int currentStep = 3;
    private string _importStatus = "Chưa import";
    private string _newProductName = "Cà phê sữa đá";
    private string _newProductPrice = "35,000";
    private string _newProductCategory = "Đồ uống";

    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 ProductItem(string Name, string Price, string Category);
    private List<ProductItem> _products = new()
    {
        new("Cà phê sữa đá", "35,000đ", "Đồ uống"),
        new("Trà sen vàng", "45,000đ", "Đồ uống"),
        new("Bánh mì thịt", "25,000đ", "Đồ ăn"),
    };

    private void AddProduct()
    {
        if (string.IsNullOrWhiteSpace(_newProductName) || string.IsNullOrWhiteSpace(_newProductPrice))
        {
            _importStatus = "Vui lòng nhập tên và giá";
            return;
        }

        _products.Insert(0, new ProductItem(_newProductName, $"{_newProductPrice}đ", _newProductCategory));
        _newProductName = string.Empty;
        _newProductPrice = string.Empty;
        _importStatus = "Đã thêm sản phẩm mới";
    }

    private void ImportFromCsv()
    {
        _importStatus = "Đang phân tích file...";
    }
}
