@page "/admin/menu"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Menu builder — drag-drop menu sections, items reorder, visibility toggle.
    VI: Xây dựng menu — kéo thả section menu, sắp xếp món, ẩn/hiện.
    Design: pencil-design/src/pages/tPOS/admin/menu-builder.pen
*@

<PageTitle>Menu Builder — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Xây dựng Menu</h1>
        <p class="admin-topbar__subtitle">Coffee House Q1 • Kéo thả để sắp xếp</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="eye"></i>
            <span>Xem trước</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="save"></i>
            <span>Lưu menu</span>
        </button>
    </div>
</div>

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

    @* LEFT: Menu Sections *@
    <div style="flex:1;display:flex;flex-direction:column;gap:16px;">

        @foreach (var section in _menuSections)
        {
            <div class="admin-panel">
                <div class="admin-panel__header">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <i data-lucide="grip-vertical" style="width:16px;height:16px;color:var(--admin-text-tertiary);cursor:grab;"></i>
                        <h3 class="admin-panel__title" style="margin:0;">
                            <i data-lucide="@(section.Icon)" style="color:@(section.Color);"></i>
                            @(section.Name)
                        </h3>
                        <span class="admin-tab__badge">@(section.Items.Length)</span>
                    </div>
                    <div style="display:flex;gap:8px;align-items:center;">
                        <MudSwitch T="bool" Value="section.Visible" Color="Color.Primary" />
                        <button class="admin-icon-btn" style="width:32px;height:32px;">
                            <i data-lucide="plus" style="width:16px;height:16px;"></i>
                        </button>
                    </div>
                </div>
                <div class="admin-panel__body" style="padding:8px 16px;">
                    @foreach (var item in section.Items)
                    {
                        <div style="display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--admin-border-subtle);">
                            <i data-lucide="grip-vertical" style="width:14px;height:14px;color:var(--admin-text-tertiary);cursor:grab;"></i>
                            <div style="width:40px;height:40px;background:@(section.Color)15;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                <i data-lucide="@(section.Icon)" style="width:18px;height:18px;color:@(section.Color);"></i>
                            </div>
                            <div style="flex:1;">
                                <div style="font-size:14px;font-weight:500;">@item.Name</div>
                                <div style="font-size:11px;color:var(--admin-text-tertiary);">@item.Variants biến thể</div>
                            </div>
                            <span style="font-size:14px;font-weight:600;color:var(--admin-orange-primary);">@item.Price</span>
                            <MudSwitch T="bool" Value="item.Visible" Color="Color.Primary" />
                        </div>
                    }
                </div>
            </div>
        }
    </div>

    @* RIGHT: Quick Stats *@
    <div style="width:300px;display:flex;flex-direction:column;gap:20px;">
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="bar-chart-2" style="color:var(--admin-orange-primary);"></i>
                    Thống kê menu
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;justify-content:space-between;font-size:13px;">
                    <span style="color:var(--admin-text-tertiary);">Tổng danh mục</span>
                    <span style="font-weight:600;">@_menuSections.Length</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:13px;">
                    <span style="color:var(--admin-text-tertiary);">Tổng sản phẩm</span>
                    <span style="font-weight:600;">@_menuSections.Sum(s => s.Items.Length)</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:13px;">
                    <span style="color:var(--admin-text-tertiary);">Đang hiển thị</span>
                    <span style="font-weight:600;color:#22C55E;">@_menuSections.Sum(s => s.Items.Count(i => i.Visible))</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:13px;">
                    <span style="color:var(--admin-text-tertiary);">Đang ẩn</span>
                    <span style="font-weight:600;color:var(--admin-text-tertiary);">@_menuSections.Sum(s => s.Items.Count(i => !i.Visible))</span>
                </div>
            </div>
        </div>

        <div class="admin-panel" style="background:rgba(255,92,0,0.04);border:1px solid rgba(255,92,0,0.15);">
            <div class="admin-panel__body" style="display:flex;gap:10px;align-items:flex-start;">
                <i data-lucide="info" style="width:18px;height:18px;color:var(--admin-orange-primary);flex-shrink:0;margin-top:2px;"></i>
                <div style="font-size:12px;color:var(--admin-text-secondary);line-height:1.5;">
                    Kéo thả để sắp xếp thứ tự danh mục và sản phẩm. Thay đổi sẽ phản ánh trực tiếp trên POS.
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private record MenuItem(string Name, string Price, string Variants, bool Visible);
    private record MenuSection(string Name, string Icon, string Color, bool Visible, MenuItem[] Items);
    private readonly MenuSection[] _menuSections = new[]
    {
        new MenuSection("Cà phê", "coffee", "#FF5C00", true, new[]
        {
            new MenuItem("Espresso", "35K", "3", true),
            new MenuItem("Cappuccino", "45K", "3", true),
            new MenuItem("Latte", "49K", "3", true),
            new MenuItem("Americano", "39K", "2", true),
            new MenuItem("Mocha", "52K", "3", false),
        }),
        new MenuSection("Trà", "leaf", "#22C55E", true, new[]
        {
            new MenuItem("Trà sen vàng", "42K", "2", true),
            new MenuItem("Trà đào cam sả", "39K", "2", true),
            new MenuItem("Trà sữa", "38K", "3", true),
        }),
        new MenuSection("Đồ ăn", "utensils", "#F59E0B", true, new[]
        {
            new MenuItem("Croissant", "35K", "1", true),
            new MenuItem("Bánh mì", "28K", "2", true),
            new MenuItem("Tiramisu", "45K", "1", false),
        }),
    };
}
