@*
    EN: Restaurant POS Desktop — Table map grid + order panel for dine-in service.
    VI: POS Nhà hàng Desktop — Lưới sơ đồ bàn + panel đặt món cho phục vụ tại chỗ.
*@
@page "/pos/restaurant"
@layout PosLayout
@inherits PosBase

<div class="pos-product-panel" style="padding:16px;overflow-y:auto;">
    @* ═══ SECTION TABS / TAB KHU VỰC ═══ *@
    <div class="pos-category-tabs">
        @foreach (var section in _sections)
        {
            <button class="pos-category-tab @(section == _activeSection ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeSection = section">
                @(section)
            </button>
        }
    </div>

    @* ═══ TABLE MAP GRID / LƯỚI SƠ ĐỒ BÀN ═══ *@
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:8px 0;">
        @foreach (var table in FilteredTables)
        {
            <div @onclick="() => SelectTable(table)"
                 style="background:@GetStatusColor(table.Status);border-radius:var(--pos-radius);
                        padding:16px;text-align:center;cursor:pointer;border:2px solid @(SelectedTable?.Id == table.Id ? "var(--pos-orange-primary)" : "transparent");
                        transition:all .2s ease;">
                <div style="font-size:20px;font-weight:700;">@table.Name</div>
                <div style="font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;">@table.Seats chỗ</div>
                <div style="font-size:11px;margin-top:6px;font-weight:600;text-transform:uppercase;">
                    @GetStatusLabel(table.Status)
                </div>
            </div>
        }
    </div>
</div>

@* ═══ ORDER PANEL (RIGHT) / PANEL ĐẶT MÓN (PHẢI) ═══ *@
<div class="pos-cart-panel">
    @if (SelectedTable is not null)
    {
        <div class="pos-cart-header">
            <span class="pos-cart-header__title">@SelectedTable.Name</span>
            <span style="font-size:12px;color:var(--pos-text-tertiary);">@SelectedTable.Seats chỗ</span>
        </div>

        <div class="pos-cart-items">
            @if (SelectedTable.Status == "occupied")
            {
                @foreach (var item in _demoOrderItems)
                {
                    <div class="pos-cart-item">
                        <div class="pos-cart-item__info">
                            <span class="pos-cart-item__name">@item.Name</span>
                            <span class="pos-cart-item__price">@FormatPrice(item.Price)</span>
                        </div>
                        <span style="font-size:13px;font-weight:600;">x@item.Qty</span>
                    </div>
                }
            }
            else
            {
                <div style="text-align:center;padding:32px 16px;color:var(--pos-text-tertiary);font-size:13px;">
                    Bàn trống — Nhấn để mở đơn mới
                </div>
            }
        </div>

        <div class="pos-cart-footer">
            <div class="pos-cart-total">
                <span class="pos-cart-total__label">Tổng cộng</span>
                <span class="pos-cart-total__value">@FormatPrice(SelectedTable.Status == "occupied" ? _demoOrderItems.Sum(i => i.Price * i.Qty) : 0)</span>
            </div>
            <button class="pos-btn-checkout" @onclick="@(() => NavigateTo("restaurant/table-detail"))">
                <i data-lucide="receipt"></i> Xem hóa đơn
            </button>
        </div>
    }
    else
    {
        <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--pos-text-tertiary);font-size:14px;">
            Chọn bàn để bắt đầu
        </div>
    }
</div>

@code {
    // EN: Active section filter / VI: Bộ lọc khu vực
    private string _activeSection = "Tất cả";
    private readonly string[] _sections = { "Tất cả", "Trong nhà", "Ngoài trời", "VIP" };

    // EN: Selected table reference / VI: Bàn đang chọn
    private TableInfo? SelectedTable { get; set; }

    // EN: Demo table data / VI: Dữ liệu bàn mẫu
    private readonly List<TableInfo> _tables = new()
    {
        new("T01","Bàn 1", 4, "available", "Trong nhà"), new("T02","Bàn 2", 2, "occupied", "Trong nhà"),
        new("T03","Bàn 3", 6, "occupied", "Trong nhà"),  new("T04","Bàn 4", 4, "reserved", "Trong nhà"),
        new("T05","Bàn 5", 2, "available", "Trong nhà"), new("T06","Bàn 6", 8, "available", "VIP"),
        new("T07","Bàn 7", 4, "occupied", "Ngoài trời"), new("T08","Bàn 8", 4, "available", "Ngoài trời"),
        new("T09","Bàn 9", 10, "reserved", "VIP"),       new("T10","Bàn 10", 2, "available", "Ngoài trời"),
        new("T11","Bàn 11", 6, "occupied", "VIP"),        new("T12","Bàn 12", 4, "available", "Trong nhà"),
    };

    private IEnumerable<TableInfo> FilteredTables =>
        _activeSection == "Tất cả" ? _tables : _tables.Where(t => t.Section == _activeSection);

    // EN: Demo order items for occupied tables / VI: Món mẫu cho bàn đang phục vụ
    private readonly List<OrderItem> _demoOrderItems = new()
    {
        new("Phở bò tái", 75_000, 2), new("Gỏi cuốn", 45_000, 1),
        new("Cơm tấm sườn", 65_000, 1), new("Trà đá", 10_000, 3),
    };

    private void SelectTable(TableInfo table) => SelectedTable = table;

    private static string GetStatusColor(string status) => status switch
    {
        "available" => "rgba(34,197,94,.15)", "occupied" => "rgba(255,92,0,.18)",
        "reserved" => "rgba(59,130,246,.18)", _ => "var(--pos-bg-interactive)"
    };

    private static string GetStatusLabel(string status) => status switch
    {
        "available" => "Trống", "occupied" => "Đang phục vụ", "reserved" => "Đã đặt", _ => status
    };

    private record TableInfo(string Id, string Name, int Seats, string Status, string Section);
    private record OrderItem(string Name, decimal Price, int Qty);
}
