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

@*
    EN: Modifier groups — manage add-on groups (Sugar, Ice, Topping) with options & pricing.
    VI: Nhóm modifier — quản lý nhóm tùy chọn (Đường, Đá, Topping) với options & giá.
    Design: pencil-design/src/pages/tPOS/admin/modifier-groups.pen
*@

<PageTitle>Nhóm Modifier — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Nhóm Modifier</h1>
        <p class="admin-topbar__subtitle">Quản lý tùy chọn thêm cho sản phẩm</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-primary" @onclick="@(() => _showCreate = !_showCreate)">
            <i data-lucide="plus"></i>
            <span>Tạo nhóm mới</span>
        </button>
    </div>
</div>

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

    @foreach (var group in _modifierGroups)
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <div style="display:flex;align-items:center;gap:12px;">
                    <h3 class="admin-panel__title">
                        <i data-lucide="@group.Icon" style="color:@group.Color;"></i>
                        @group.Name
                    </h3>
                    <span class="admin-tab__badge">@group.Options.Length tùy chọn</span>
                    <span style="font-size:11px;color:var(--admin-text-tertiary);">
                        @(group.Required ? "Bắt buộc" : "Không bắt buộc") • @(group.Multi ? "Nhiều lựa chọn" : "Một lựa chọn")
                    </span>
                </div>
                <div style="display:flex;gap:8px;">
                    <button class="admin-icon-btn" style="width:32px;height:32px;">
                        <i data-lucide="edit-2" style="width:14px;height:14px;"></i>
                    </button>
                    <button class="admin-icon-btn" style="width:32px;height:32px;">
                        <i data-lucide="trash-2" style="width:14px;height:14px;color:#EF4444;"></i>
                    </button>
                </div>
            </div>
            <div class="admin-panel__body" style="padding:0;">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Tùy chọn</th>
                            <th>Giá thêm</th>
                            <th>Mặc định</th>
                            <th style="width:60px;">Trạng thái</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var opt in group.Options)
                        {
                            <tr>
                                <td style="font-weight:500;">@opt.Name</td>
                                <td style="color:@(opt.Price == "0" ? "var(--admin-text-tertiary)" : "#22C55E");">
                                    @(opt.Price == "0" ? "Miễn phí" : $"+{opt.Price}")
                                </td>
                                <td>
                                    @if (opt.IsDefault)
                                    {
                                        <span style="font-size:11px;color:var(--admin-orange-primary);font-weight:600;">Mặc định</span>
                                    }
                                </td>
                                <td>
                                    <MudSwitch T="bool" Value="opt.Active" Color="Color.Primary" />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    }
</div>

@code {
    private bool _showCreate = false;

    private record ModOption(string Name, string Price, bool IsDefault, bool Active);
    private record ModGroup(string Name, string Icon, string Color, bool Required, bool Multi, ModOption[] Options);
    private readonly ModGroup[] _modifierGroups = new[]
    {
        new ModGroup("Mức đường", "droplet", "#FF5C00", true, false, new[]
        {
            new ModOption("100% đường", "0", true, true),
            new ModOption("70% đường", "0", false, true),
            new ModOption("50% đường", "0", false, true),
            new ModOption("30% đường", "0", false, true),
            new ModOption("Không đường", "0", false, true),
        }),
        new ModGroup("Mức đá", "snowflake", "#3B82F6", true, false, new[]
        {
            new ModOption("Đá bình thường", "0", true, true),
            new ModOption("Ít đá", "0", false, true),
            new ModOption("Nhiều đá", "0", false, true),
            new ModOption("Không đá", "0", false, true),
        }),
        new ModGroup("Topping", "layers", "#8B5CF6", false, true, new[]
        {
            new ModOption("Trân châu đen", "8K", false, true),
            new ModOption("Trân châu trắng", "8K", false, true),
            new ModOption("Thạch", "10K", false, true),
            new ModOption("Kem phô mai", "15K", false, true),
            new ModOption("Shot espresso", "12K", false, true),
            new ModOption("Sữa tươi", "5K", false, true),
        }),
        new ModGroup("Loại sữa", "milk", "#22C55E", false, false, new[]
        {
            new ModOption("Sữa đặc", "0", true, true),
            new ModOption("Sữa tươi", "5K", false, true),
            new ModOption("Sữa yến mạch", "12K", false, true),
            new ModOption("Sữa hạnh nhân", "12K", false, false),
        }),
    };
}
