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

@*
    EN: Create product — form with name, price, variants, modifiers, image.
    VI: Thêm sản phẩm — form tên, giá, biến thể, modifier, hình ảnh.
    Design: pencil-design/src/pages/tPOS/admin/product-create.pen
*@

<PageTitle>Thêm sản phẩm — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left" style="flex-direction:row;align-items:center;gap:12px;">
        <button class="admin-icon-btn" @onclick="@(() => NavigateTo("products"))">
            <i data-lucide="arrow-left"></i>
        </button>
        <div>
            <h1 class="admin-topbar__title">Thêm sản phẩm mới</h1>
            <p class="admin-topbar__subtitle">Điền thông tin sản phẩm</p>
        </div>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary" @onclick="@(() => NavigateTo("products"))">Hủy</button>
        <button class="admin-btn-primary">
            <i data-lucide="check"></i>
            <span>Lưu sản phẩm</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;gap:24px;">

    @* LEFT: Main form *@
    <div style="flex:1;display:flex;flex-direction:column;gap:24px;">

        @* Basic Info *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="package" style="color:var(--admin-orange-primary);"></i>
                    Thông tin cơ bản
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div class="admin-form-group">
                    <label class="admin-form-label">Tên sản phẩm <span style="color:var(--admin-danger);">*</span></label>
                    <input class="admin-form-input" type="text" placeholder="VD: Cappuccino" />
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Danh mục <span style="color:var(--admin-danger);">*</span></label>
                        <select class="admin-form-input">
                            <option value="">Chọn danh mục...</option>
                            <option>Cà phê</option>
                            <option>Trà</option>
                            <option>Đồ ăn</option>
                            <option>Khác</option>
                        </select>
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">SKU</label>
                        <input class="admin-form-input" type="text" placeholder="Tự động tạo" />
                    </div>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Mô tả</label>
                    <textarea class="admin-form-input" rows="3" placeholder="Mô tả ngắn về sản phẩm..."></textarea>
                </div>
            </div>
        </div>

        @* Pricing & Variants *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="tag" style="color:#22C55E;"></i>
                    Giá & Biến thể
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Giá bán (VND) <span style="color:var(--admin-danger);">*</span></label>
                        <input class="admin-form-input" type="text" placeholder="VD: 45,000" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Giá gốc (VND)</label>
                        <input class="admin-form-input" type="text" placeholder="VD: 20,000" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Thuế (%)</label>
                        <input class="admin-form-input" type="number" value="10" />
                    </div>
                </div>

                @* Variants *@
                <div style="border-top:1px solid var(--admin-border-subtle);padding-top:16px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                        <span style="font-size:13px;font-weight:600;">Biến thể kích thước</span>
                        <button class="admin-btn-secondary" style="font-size:12px;padding:4px 10px;">
                            <i data-lucide="plus" style="width:14px;height:14px;"></i>
                            Thêm
                        </button>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:8px;">
                        @foreach (var variant in new[] { ("S", "35,000"), ("M", "45,000"), ("L", "55,000") })
                        {
                            <div style="display:flex;gap:12px;align-items:center;">
                                <input class="admin-form-input" style="width:80px;" type="text" value="@variant.Item1" />
                                <input class="admin-form-input" style="flex:1;" type="text" value="@variant.Item2" />
                                <button class="admin-icon-btn" style="width:36px;height:36px;">
                                    <i data-lucide="trash-2" style="width:16px;height:16px;color:#EF4444;"></i>
                                </button>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>

        @* Modifier Groups *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="layers" style="color:#8B5CF6;"></i>
                    Nhóm modifier
                </h3>
                <a href="/admin/modifiers" class="admin-panel__action">Quản lý nhóm →</a>
            </div>
            <div class="admin-panel__body">
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach (var mod in new[] { ("Đường", true), ("Đá", true), ("Topping", false), ("Sữa", false) })
                    {
                        <button class="admin-day-chip @(mod.Item2 ? "admin-day-chip--active" : "")" style="width:auto;padding:0 14px;">
                            @mod.Item1
                        </button>
                    }
                </div>
            </div>
        </div>
    </div>

    @* RIGHT: Image & Preview *@
    <div style="width:320px;display:flex;flex-direction:column;gap:20px;">
        @* Image Upload *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Hình ảnh</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;align-items:center;gap:12px;">
                <div style="width:100%;height:200px;background:var(--admin-bg-interactive);border:2px dashed var(--admin-border-default);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;">
                    <i data-lucide="image-plus" style="width:32px;height:32px;color:var(--admin-text-tertiary);"></i>
                    <span style="font-size:13px;color:var(--admin-text-tertiary);">Kéo thả hoặc click để upload</span>
                    <span style="font-size:11px;color:var(--admin-text-tertiary);">PNG, JPG tối đa 2MB</span>
                </div>
            </div>
        </div>

        @* Availability *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Cửa hàng áp dụng</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:10px;">
                @foreach (var store in new[] { ("Coffee House Q1", true), ("Nhà hàng Q3", true), ("Café Thủ Đức", false) })
                {
                    <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
                        <MudCheckBox T="bool" Value="store.Item2" Color="Color.Primary" />
                        <span style="font-size:13px;">@store.Item1</span>
                    </label>
                }
            </div>
        </div>
    </div>
</div>
