@*
    EN: Karaoke Room Map — Floor plan with rooms by floor/zone, color-coded status.
    VI: Sơ đồ phòng Karaoke — Mặt bằng phòng theo tầng/khu, mã màu trạng thái.
*@
@page "/pos/{ShopId:guid}/karaoke/room-map"
@layout PosLayout
@inherits PosBase
@inject WebClientTpos.Client.Services.PosDataService DataService

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ TOOLBAR / THANH CÔNG CỤ ═══ *@
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
                border-bottom:1px solid var(--pos-border-subtle);flex-shrink:0;">
        <div style="display:flex;align-items:center;gap:12px;">
            <button style="background:var(--pos-bg-interactive);border:none;color:var(--pos-text-primary);
                           padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;"
                    @onclick="@(() => NavigateTo("karaoke"))">
                <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i> Quay lại
            </button>
            <span style="font-size:16px;font-weight:700;">Sơ đồ phòng</span>
        </div>

        @* EN: Status legend / VI: Chú giải trạng thái *@
        <div style="display:flex;gap:16px;font-size:12px;">
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:3px;background:#22C55E;"></span> Trống
            </span>
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:3px;background:#FF5C00;"></span> Đang hát
            </span>
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:3px;background:#3B82F6;"></span> Đã đặt
            </span>
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:3px;background:#F59E0B;"></span> Đang dọn
            </span>
        </div>
    </div>

    @if (_isLoading)
    {
        <div style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--pos-text-tertiary);">
            Đang tải...
        </div>
    }
    else if (_loadError)
    {
        <div style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--pos-text-tertiary);">
            Không thể tải dữ liệu
        </div>
    }
    else
    {
    @* ═══ FLOOR TABS / TAB TẦNG ═══ *@
    <div class="pos-category-tabs">
        @foreach (var floor in _floors)
        {
            <button class="pos-category-tab @(floor == _activeFloor ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeFloor = floor">
                @floor
            </button>
        }
    </div>

    @* ═══ FLOOR PLAN GRID / LƯỚI MẶT BẰNG ═══ *@
    <div style="flex:1;overflow-y:auto;padding:16px;">
        @foreach (var zone in GetZonesForFloor(_activeFloor))
        {
            <div style="margin-bottom:24px;">
                <div style="font-size:13px;font-weight:600;color:var(--pos-text-tertiary);margin-bottom:12px;
                            text-transform:uppercase;letter-spacing:1px;">
                    @zone
                </div>
                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;">
                    @foreach (var room in _rooms.Where(r => r.Floor == _activeFloor && r.Zone == zone))
                    {
                        <div @onclick="() => SelectRoom(room)"
                             style="background:@GetStatusBg(room.Status);border-radius:var(--pos-radius);
                                    padding:16px;text-align:center;cursor:pointer;position:relative;
                                    border:2px solid @(_selectedRoom?.Id == room.Id ? "var(--pos-orange-primary)" : "transparent");
                                    transition:all .2s ease;">
                            <div style="font-size:11px;font-weight:600;color:rgba(255,255,255,.5);">@room.Type</div>
                            <div style="font-size:18px;font-weight:700;margin:4px 0;">@room.Name</div>
                            <div style="font-size:12px;color:rgba(255,255,255,.6);">@room.Capacity người</div>
                            <div style="font-size:11px;font-weight:600;margin-top:6px;color:@GetStatusFg(room.Status);">
                                @GetStatusLabel(room.Status)
                            </div>
                            @if (room.Status == "occupied" && room.Timer != null)
                            {
                                <div style="font-size:11px;color:var(--pos-orange-primary);margin-top:2px;">@room.Timer</div>
                            }
                        </div>
                    }
                </div>
            </div>
        }
    </div>

    @* ═══ SUMMARY BAR / THANH TÓM TẮT ═══ *@
    <div style="padding:12px 16px;border-top:1px solid var(--pos-border-subtle);flex-shrink:0;
                display:flex;gap:16px;font-size:13px;color:var(--pos-text-secondary);">
        <span>Tổng: <b style="color:var(--pos-text-primary);">@_rooms.Count</b></span>
        <span>Trống: <b style="color:#22C55E;">@_rooms.Count(r => r.Status == "available")</b></span>
        <span>Đang hát: <b style="color:#FF5C00;">@_rooms.Count(r => r.Status == "occupied")</b></span>
        <span>Đã đặt: <b style="color:#3B82F6;">@_rooms.Count(r => r.Status == "reserved")</b></span>
        <span>Đang dọn: <b style="color:#F59E0B;">@_rooms.Count(r => r.Status == "cleaning")</b></span>
    </div>
    }
</div>

@code {

    // EN: Loading state / VI: Trạng thái tải
    private bool _isLoading = true;
    private bool _loadError;

    // EN: Floor filter / VI: Bộ lọc tầng
    private string _activeFloor = "";
    private string[] _floors = Array.Empty<string>();
    private RoomInfo? _selectedRoom;

    // EN: Room data loaded from DB / VI: Dữ liệu phòng tải từ DB
    private List<RoomInfo> _rooms = new();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        try
        {
            var tables = await DataService.GetTablesAsync(ShopId);

            _rooms = tables.Select(t => new RoomInfo(
                t.Id.ToString(),
                t.TableNumber,
                t.Capacity,
                t.Zone ?? "Standard",
                t.Status,
                t.Zone ?? "Tầng 1",
                t.Zone ?? "Khu A",
                t.StartedAt.HasValue ? (DateTime.Now - t.StartedAt.Value).ToString(@"h\:mm") : null
            )).ToList();

            _floors = _rooms.Select(r => r.Floor).Distinct().ToArray();
            if (_floors.Length > 0)
                _activeFloor = _floors[0];
        }
        catch
        {
            _loadError = true;
        }
        finally
        {
            _isLoading = false;
        }
    }

    private IEnumerable<string> GetZonesForFloor(string floor) =>
        _rooms.Where(r => r.Floor == floor).Select(r => r.Zone).Distinct();

    private void SelectRoom(RoomInfo room) => _selectedRoom = room;

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

    private static string GetStatusFg(string s) => s switch
    {
        "available" => "#22C55E", "occupied" => "#FF5C00",
        "reserved" => "#3B82F6", "cleaning" => "#F59E0B", _ => "#ADADB0"
    };

    private static string GetStatusLabel(string s) => s switch
    {
        "available" => "Trống", "occupied" => "Đang hát",
        "reserved" => "Đã đặt", "cleaning" => "Đang dọn", _ => s
    };

    private record RoomInfo(string Id, string Name, int Capacity, string Type, string Status, string Floor, string Zone, string? Timer);
}
