@*
    EN: Karaoke POS Mobile — Single column room list, tap to open room session.
    VI: POS Karaoke Mobile — Danh sách phòng cột đơn, nhấn để mở phiên phòng.
*@
@page "/pos/karaoke/mobile"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
        <span style="font-size:18px;font-weight:700;">Phòng Karaoke</span>
        <span style="font-size:12px;color:var(--pos-text-tertiary);">@_rooms.Count(r => r.Status == "available") phòng trống</span>
    </div>

    @* EN: Zone filter / VI: Lọc khu vực *@
    <div class="pos-category-tabs" style="padding:0 16px 12px;">
        @foreach (var zone in _zones)
        {
            <button class="pos-category-tab @(zone == _activeZone ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeZone = zone"
                    style="padding:10px 16px;font-size:13px;">
                @zone
            </button>
        }
    </div>

    @* ═══ ROOM LIST / DANH SÁCH PHÒNG ═══ *@
    <div style="flex:1;overflow-y:auto;padding:0 16px 16px;">
        @foreach (var room in FilteredRooms)
        {
            <div @onclick="() => OpenRoom(room)"
                 style="display:flex;align-items:center;gap:12px;padding:14px;
                        background:var(--pos-bg-elevated);border-radius:var(--pos-radius);
                        margin-bottom:8px;cursor:pointer;border:1px solid var(--pos-border-subtle);">
                @* EN: Status indicator / VI: Chỉ báo trạng thái *@
                <div style="width:48px;height:48px;border-radius:12px;background:@GetStatusBg(room.Status);
                            display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="@GetStatusIcon(room.Status)" style="width:20px;height:20px;color:@GetStatusFg(room.Status);"></i>
                </div>

                @* EN: Room info / VI: Thông tin phòng *@
                <div style="flex:1;min-width:0;">
                    <div style="font-size:15px;font-weight:600;">@room.Name</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                        @room.Type • @room.Capacity người
                    </div>
                </div>

                @* EN: Status + timer / VI: Trạng thái + giờ *@
                <div style="text-align:right;flex-shrink:0;">
                    <div style="font-size:12px;font-weight:600;color:@GetStatusFg(room.Status);">
                        @GetStatusLabel(room.Status)
                    </div>
                    @if (room.Status == "occupied" && room.SessionStart.HasValue)
                    {
                        <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">
                            @((DateTime.Now - room.SessionStart.Value).ToString(@"h\:mm"))
                        </div>
                    }
                </div>

                <i data-lucide="chevron-right" style="width:16px;height:16px;color:var(--pos-text-tertiary);flex-shrink:0;"></i>
            </div>
        }
    </div>

    @* ═══ BOTTOM ACTIONS / THANH HÀNH ĐỘNG ═══ *@
    <div style="padding:12px 16px;border-top:1px solid var(--pos-border-subtle);flex-shrink:0;
                display:flex;gap:8px;">
        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                       border:none;color:var(--pos-text-primary);cursor:pointer;font-size:13px;font-weight:500;"
                @onclick="@(() => NavigateTo("karaoke/room-map"))">
            <i data-lucide="layout-grid" style="width:16px;height:16px;display:inline;"></i> Sơ đồ
        </button>
        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                       border:none;color:var(--pos-text-primary);cursor:pointer;font-size:13px;font-weight:500;"
                @onclick="@(() => NavigateTo("karaoke/service-display"))">
            <i data-lucide="bell" style="width:16px;height:16px;display:inline;"></i> Gọi phục vụ
        </button>
    </div>
</div>

@code {
    // EN: Zone filter / VI: Bộ lọc khu vực
    private string _activeZone = "Tất cả";
    private readonly string[] _zones = { "Tất cả", "Tầng 1", "Tầng 2", "VIP" };

    // EN: Demo rooms / VI: Phòng mẫu
    private readonly List<RoomInfo> _rooms = new()
    {
        new("R01","Phòng 101",8,"Standard","available","Tầng 1",null),
        new("R02","Phòng 102",6,"occupied","Standard","Tầng 1",DateTime.Now.AddHours(-1.5)),
        new("R03","Phòng 103",10,"reserved","Standard","Tầng 1",null),
        new("R04","Phòng 201",12,"available","VIP","Tầng 2",null),
        new("R05","Phòng 202",8,"occupied","VIP","Tầng 2",DateTime.Now.AddMinutes(-45)),
        new("R06","Phòng 203",6,"cleaning","Standard","Tầng 2",null),
        new("R07","VIP 1",15,"available","Deluxe","VIP",null),
        new("R08","VIP 2",20,"occupied","Deluxe","VIP",DateTime.Now.AddHours(-2)),
        new("R09","VIP 3",15,"reserved","Deluxe","VIP",null),
    };

    private IEnumerable<RoomInfo> FilteredRooms =>
        _activeZone == "Tất cả" ? _rooms : _rooms.Where(r => r.Zone == _activeZone);

    private void OpenRoom(RoomInfo room) => NavigateTo("karaoke/room-session");

    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 GetStatusIcon(string s) => s switch
    {
        "available" => "mic", "occupied" => "music",
        "reserved" => "calendar-clock", "cleaning" => "sparkles", _ => "help-circle"
    };

    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 Zone, DateTime? SessionStart);
}
