@*
    EN: Full Table Map — Drag arrangement, sections (Indoor/Outdoor/VIP), merge/split tables.
    VI: Sơ đồ bàn đầy đủ — Kéo thả sắp xếp, khu vực (Trong nhà/Ngoài trời/VIP), gộp/tách bàn.
*@
@page "/pos/restaurant/table-map"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ TOOLBAR / THANH CÔNG CỤ ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
        <button class="pos-category-tab pos-category-tab--active" @onclick="@(() => NavigateTo("restaurant"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="flex:1;font-size:16px;font-weight:700;">Quản lý sơ đồ bàn</span>
        <div style="display:flex;gap:8px;">
            <button class="pos-category-tab" @onclick="MergeTables"><i data-lucide="merge" style="width:14px;"></i> Gộp bàn</button>
            <button class="pos-category-tab" @onclick="SplitTable"><i data-lucide="split" style="width:14px;"></i> Tách bàn</button>
            <button class="pos-category-tab" @onclick="AddTable"><i data-lucide="plus" style="width:14px;"></i> Thêm bàn</button>
        </div>
    </div>

    @* ═══ SECTION TABS / TAB KHU VỰC ═══ *@
    <div class="pos-category-tabs">
        @foreach (var s in _sections)
        {
            <button class="pos-category-tab @(s == _activeSection ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeSection = s">@s</button>
        }
    </div>

    @* ═══ TABLE GRID / LƯỚI BÀN ═══ *@
    <div style="flex:1;overflow-y:auto;padding:16px;">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;">
            @foreach (var t in FilteredTables)
            {
                <div @onclick="() => ToggleSelect(t)"
                     style="background:@StatusBg(t.Status);border-radius:var(--pos-radius);padding:16px;
                            text-align:center;cursor:grab;position:relative;
                            border:2px solid @(_selectedIds.Contains(t.Id) ? "var(--pos-orange-primary)" : "transparent");
                            transition:all .2s ease;">
                    @if (_selectedIds.Contains(t.Id))
                    {
                        <div style="position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;
                                    background:var(--pos-orange-primary);display:flex;align-items:center;justify-content:center;">
                            <i data-lucide="check" style="width:12px;color:#fff;"></i>
                        </div>
                    }
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-bottom:4px;">@t.Section</div>
                    <div style="font-size:20px;font-weight:700;">@t.Name</div>
                    <div style="font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;">@t.Seats chỗ · @t.Shape</div>
                    <div style="font-size:11px;font-weight:600;margin-top:6px;color:@StatusTextColor(t.Status);">
                        @StatusLabel(t.Status)
                    </div>
                </div>
            }
        </div>
    </div>

    @* ═══ FOOTER STATS / THỐNG KÊ ═══ *@
    <div style="padding:10px 16px;border-top:1px solid var(--pos-border-subtle);display:flex;gap:20px;font-size:12px;color:var(--pos-text-secondary);">
        <span>Tổng: <b>@_tables.Count</b> bàn</span>
        <span style="color:var(--pos-success);">Trống: @_tables.Count(t => t.Status == "available")</span>
        <span style="color:var(--pos-orange-primary);">Đang PV: @_tables.Count(t => t.Status == "occupied")</span>
        <span style="color:var(--pos-info);">Đã đặt: @_tables.Count(t => t.Status == "reserved")</span>
        @if (_selectedIds.Count > 0)
        {
            <span style="margin-left:auto;color:var(--pos-orange-primary);font-weight:600;">Đã chọn: @_selectedIds.Count bàn</span>
        }
    </div>
</div>

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

    private readonly List<MapTable> _tables = new()
    {
        new("T01","Bàn 1", 4, "available", "Trong nhà", "Vuông"),  new("T02","Bàn 2", 2, "occupied", "Trong nhà", "Tròn"),
        new("T03","Bàn 3", 6, "occupied", "Trong nhà", "Chữ nhật"),new("T04","Bàn 4", 4, "reserved", "VIP", "Tròn"),
        new("T05","Bàn 5", 8, "available", "VIP", "Chữ nhật"),     new("T06","Bàn 6", 4, "available", "Ngoài trời", "Vuông"),
        new("T07","Bàn 7", 4, "occupied", "Ngoài trời", "Vuông"),  new("T08","Bàn 8", 2, "available", "Ngoài trời", "Tròn"),
        new("T09","Bàn 9", 10, "reserved", "VIP", "Chữ nhật"),     new("T10","Bàn 10", 6, "occupied", "Trong nhà", "Vuông"),
        new("T11","Bàn 11", 4, "available", "Trong nhà", "Tròn"),  new("T12","Bàn 12", 2, "available", "Ngoài trời", "Tròn"),
    };

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

    private void ToggleSelect(MapTable t)
    {
        if (!_selectedIds.Add(t.Id)) _selectedIds.Remove(t.Id);
    }

    private void MergeTables() => _selectedIds.Clear();
    private void SplitTable() => _selectedIds.Clear();
    private void AddTable() { /* placeholder */ }

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

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

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

    private record MapTable(string Id, string Name, int Seats, string Status, string Section, string Shape);
}
