@*
    EN: Restaurant POS Mobile — Single-column table list view, tap to order.
    VI: POS Nhà hàng Mobile — Danh sách bàn cột đơn, chạm để đặt món.
*@
@page "/pos/restaurant/mobile"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;justify-content:space-between;">
        <span style="font-size:16px;font-weight:700;">Sơ đồ bàn</span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">@_tables.Count bàn</span>
    </div>

    @* ═══ SECTION FILTER / LỌC KHU VỰC ═══ *@
    <div class="pos-category-tabs" style="padding:8px 12px;">
        @foreach (var s in _sections)
        {
            <button class="pos-category-tab @(s == _activeSection ? "pos-category-tab--active" : "")"
                    style="font-size:12px;padding:6px 12px;" @onclick="() => _activeSection = s">@s</button>
        }
    </div>

    @* ═══ TABLE LIST / DANH SÁCH BÀN ═══ *@
    <div style="flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px;">
        @foreach (var t in FilteredTables)
        {
            <div @onclick="() => OpenTable(t)"
                 style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:14px 16px;
                        display:flex;align-items:center;gap:12px;cursor:pointer;
                        border-left:4px solid @StatusColor(t.Status);">
                @* EN: Table number badge / VI: Badge số bàn *@
                <div style="width:44px;height:44px;border-radius:10px;background:@StatusBg(t.Status);
                            display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;">
                    @t.Number
                </div>
                <div style="flex:1;">
                    <div style="font-size:14px;font-weight:600;">@t.Name</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                        @t.Seats chỗ · @t.Section
                    </div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:11px;font-weight:600;color:@StatusColor(t.Status);">
                        @StatusLabel(t.Status)
                    </div>
                    @if (t.Status == "occupied")
                    {
                        <div style="font-size:13px;font-weight:700;color:var(--pos-orange-primary);margin-top:2px;">
                            @FormatPrice(t.Amount)
                        </div>
                    }
                </div>
                <i data-lucide="chevron-right" style="color:var(--pos-text-tertiary);width:16px;"></i>
            </div>
        }
    </div>

    @* ═══ BOTTOM STATS / THỐNG KÊ DƯỚI ═══ *@
    <div style="padding:12px 16px;border-top:1px solid var(--pos-border-subtle);display:flex;justify-content:space-around;
                background:var(--pos-bg-elevated);font-size:12px;">
        <div style="text-align:center;">
            <div style="font-weight:700;font-size:16px;color:var(--pos-success);">@_tables.Count(t => t.Status == "available")</div>
            <div style="color:var(--pos-text-tertiary);">Trống</div>
        </div>
        <div style="text-align:center;">
            <div style="font-weight:700;font-size:16px;color:var(--pos-orange-primary);">@_tables.Count(t => t.Status == "occupied")</div>
            <div style="color:var(--pos-text-tertiary);">Đang phục vụ</div>
        </div>
        <div style="text-align:center;">
            <div style="font-weight:700;font-size:16px;color:var(--pos-info);">@_tables.Count(t => t.Status == "reserved")</div>
            <div style="color:var(--pos-text-tertiary);">Đã đặt</div>
        </div>
    </div>
</div>

@code {
    private string _activeSection = "Tất cả";
    private readonly string[] _sections = { "Tất cả", "Trong nhà", "Ngoài trời", "VIP" };

    // EN: Demo tables / VI: Bàn mẫu
    private readonly List<MobileTable> _tables = new()
    {
        new(1, "Bàn 1", 4, "available", "Trong nhà", 0),
        new(2, "Bàn 2", 2, "occupied", "Trong nhà", 195_000),
        new(3, "Bàn 3", 6, "occupied", "Trong nhà", 420_000),
        new(4, "Bàn 4", 4, "reserved", "VIP", 0),
        new(5, "Bàn 5", 8, "available", "VIP", 0),
        new(6, "Bàn 6", 4, "occupied", "Ngoài trời", 310_000),
        new(7, "Bàn 7", 4, "available", "Ngoài trời", 0),
        new(8, "Bàn 8", 10, "reserved", "VIP", 0),
        new(9, "Bàn 9", 2, "available", "Trong nhà", 0),
        new(10, "Bàn 10", 4, "occupied", "Ngoài trời", 175_000),
    };

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

    private void OpenTable(MobileTable t) => NavigateTo("restaurant/waiter-pad");

    private static string StatusColor(string s) => s switch
    {
        "available" => "var(--pos-success)", "occupied" => "var(--pos-orange-primary)",
        "reserved" => "var(--pos-info)", _ => "var(--pos-text-tertiary)"
    };

    private static string StatusBg(string s) => s 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 StatusLabel(string s) => s switch
    {
        "available" => "Trống", "occupied" => "Đang phục vụ", "reserved" => "Đã đặt", _ => s
    };

    private record MobileTable(int Number, string Name, int Seats, string Status, string Section, decimal Amount);
}
