@*
    EN: Restaurant POS Tablet — Touch-optimized table map with order sidebar.
    VI: POS Nhà hàng Tablet — Sơ đồ bàn tối ưu cảm ứng với sidebar đặt món.
*@
@page "/pos/restaurant/tablet"
@layout PosLayout
@inherits PosBase

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

    @* ═══ TABLE MAP / SƠ ĐỒ BÀN ═══ *@
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:12px 0;">
        @foreach (var t in FilteredTables)
        {
            <div @onclick="() => _selected = t"
                 style="background:@StatusBg(t.Status);border-radius:var(--pos-radius);padding:20px;
                        text-align:center;cursor:pointer;min-height:100px;display:flex;flex-direction:column;
                        align-items:center;justify-content:center;gap:6px;
                        border:3px solid @(_selected?.Id == t.Id ? "var(--pos-orange-primary)" : "transparent");
                        transition:all .2s ease;">
                <span style="font-size:22px;font-weight:700;">@t.Name</span>
                <span style="font-size:13px;color:rgba(255,255,255,.65);">@t.Seats chỗ</span>
                <span style="font-size:12px;font-weight:600;margin-top:4px;">@StatusLabel(t.Status)</span>
            </div>
        }
    </div>
</div>

@* ═══ ORDER SIDEBAR / SIDEBAR ĐẶT MÓN ═══ *@
<div class="pos-cart-panel" style="width:340px;min-width:340px;">
    @if (_selected is not null)
    {
        <div class="pos-cart-header">
            <span class="pos-cart-header__title">@_selected.Name — @_selected.Seats chỗ</span>
        </div>

        <div class="pos-cart-items">
            @if (_selected.Status == "occupied")
            {
                @foreach (var item in _items)
                {
                    <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:14px;font-weight:600;">x@item.Qty</span>
                    </div>
                }
            }
            else
            {
                <div style="text-align:center;padding:40px 16px;color:var(--pos-text-tertiary);">
                    Bàn trống — Chạm để tạo đơn
                </div>
            }
        </div>

        <div class="pos-cart-footer">
            <div class="pos-cart-total">
                <span class="pos-cart-total__label">Tổng</span>
                <span class="pos-cart-total__value">@FormatPrice(_selected.Status == "occupied" ? _items.Sum(i => i.Price * i.Qty) : 0)</span>
            </div>
            <button class="pos-btn-checkout" style="height:52px;font-size:16px;"
                    @onclick="@(() => NavigateTo("restaurant/waiter-pad"))">
                <i data-lucide="utensils"></i> Gọi món
            </button>
        </div>
    }
    else
    {
        <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--pos-text-tertiary);font-size:15px;padding:20px;">
            Chọn bàn trên sơ đồ
        </div>
    }
</div>

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

    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", "VIP"),
        new("T05","Bàn 5", 8, "available", "VIP"),        new("T06","Bàn 6", 4, "available", "Ngoài trời"),
        new("T07","Bàn 7", 4, "occupied", "Ngoài trời"), new("T08","Bàn 8", 2, "available", "Ngoài trời"),
        new("T09","Bàn 9", 10, "reserved", "VIP"),       new("T10","Bàn 10", 6, "occupied", "Trong nhà"),
    };

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

    private readonly List<OrderItem> _items = new()
    {
        new("Bún bò Huế", 80_000, 1), new("Nem rán", 50_000, 2),
        new("Cá kho tộ", 120_000, 1), new("Nước mía", 15_000, 2),
    };

    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 TableInfo(string Id, string Name, int Seats, string Status, string Section);
    private record OrderItem(string Name, decimal Price, int Qty);
}
