@*
    EN: Karaoke POS Desktop — Room map grid + session panel for karaoke room management.
    VI: POS Karaoke Desktop — Lưới sơ đồ phòng + panel phiên hát cho quản lý phòng karaoke.
*@
@page "/pos/karaoke"
@layout PosLayout
@inherits PosBase

@* ═══ ROOM MAP PANEL (LEFT) / PANEL SƠ ĐỒ PHÒNG (TRÁI) ═══ *@
<div class="pos-product-panel" style="padding:16px;overflow-y:auto;">
    @* EN: Floor/zone tabs / VI: Tab tầng/khu vực *@
    <div class="pos-category-tabs">
        @foreach (var zone in _zones)
        {
            <button class="pos-category-tab @(zone == _activeZone ? "pos-category-tab--active" : "")"
                    @onclick="() => _activeZone = zone">
                @zone
            </button>
        }
    </div>

    @* ═══ ROOM GRID / LƯỚI PHÒNG ═══ *@
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:8px 0;">
        @foreach (var room in FilteredRooms)
        {
            <div @onclick="() => SelectRoom(room)"
                 style="background:@GetStatusColor(room.Status);border-radius:var(--pos-radius);
                        padding:16px;text-align:center;cursor:pointer;
                        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,.6);margin-bottom:4px;">
                    @room.Type
                </div>
                <div style="font-size:20px;font-weight:700;">@room.Name</div>
                <div style="font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;">
                    <i data-lucide="users" style="width:12px;height:12px;display:inline;"></i> @room.Capacity người
                </div>
                <div style="font-size:11px;margin-top:6px;font-weight:600;text-transform:uppercase;">
                    @GetStatusLabel(room.Status)
                </div>
                @if (room.Status == "occupied" && room.SessionStart.HasValue)
                {
                    <div style="font-size:11px;margin-top:4px;color:rgba(255,255,255,.5);">
                        <i data-lucide="clock" style="width:10px;height:10px;display:inline;"></i>
                        @((DateTime.Now - room.SessionStart.Value).ToString(@"hh\:mm"))
                    </div>
                }
            </div>
        }
    </div>
</div>

@* ═══ SESSION PANEL (RIGHT) / PANEL PHIÊN HÁT (PHẢI) ═══ *@
<div class="pos-cart-panel">
    @if (SelectedRoom is not null)
    {
        <div class="pos-cart-header">
            <span class="pos-cart-header__title">@SelectedRoom.Name</span>
            <span style="font-size:12px;color:var(--pos-text-tertiary);">@SelectedRoom.Type • @SelectedRoom.Capacity người</span>
        </div>

        <div class="pos-cart-items">
            @if (SelectedRoom.Status == "occupied")
            {
                @* EN: Session timer / VI: Đồng hồ phiên *@
                <div style="text-align:center;padding:16px;">
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-bottom:4px;">THỜI GIAN SỬ DỤNG</div>
                    <div style="font-size:32px;font-weight:700;color:var(--pos-orange-primary);">
                        @((DateTime.Now - SelectedRoom.SessionStart!.Value).ToString(@"hh\:mm\:ss"))
                    </div>
                </div>

                @* EN: F&B orders / VI: Đơn F&B *@
                <div style="padding:0 8px;">
                    <div style="font-size:12px;color:var(--pos-text-tertiary);padding:8px 0;font-weight:600;">ĐƠN F&B</div>
                    @foreach (var item in _demoFnbItems)
                    {
                        <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:13px;font-weight:600;">x@item.Qty</span>
                        </div>
                    }
                </div>
            }
            else
            {
                <div style="text-align:center;padding:32px 16px;color:var(--pos-text-tertiary);font-size:13px;">
                    Phòng trống — Nhấn để mở phiên mới
                </div>
            }
        </div>

        <div class="pos-cart-footer">
            <div class="pos-cart-total">
                <span class="pos-cart-total__label">Tổng cộng</span>
                <span class="pos-cart-total__value">
                    @FormatPrice(SelectedRoom.Status == "occupied"
                        ? _roomRate + _demoFnbItems.Sum(i => i.Price * i.Qty)
                        : 0)
                </span>
            </div>
            @if (SelectedRoom.Status == "available")
            {
                <button class="pos-btn-checkout" @onclick="@(() => NavigateTo("karaoke/room-select"))">
                    <i data-lucide="play" style="width:18px;height:18px;"></i> Mở phiên
                </button>
            }
            else if (SelectedRoom.Status == "occupied")
            {
                <button class="pos-btn-checkout" @onclick="@(() => NavigateTo("karaoke/room-session"))">
                    <i data-lucide="receipt" style="width:18px;height:18px;"></i> Xem chi tiết
                </button>
            }
        </div>
    }
    else
    {
        <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--pos-text-tertiary);font-size:14px;">
            Chọn phòng để bắt đầu
        </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: Selected room / VI: Phòng đang chọn
    private RoomInfo? SelectedRoom { get; set; }

    // EN: Demo room rate / VI: Giá phòng mẫu
    private readonly decimal _roomRate = 150_000;

    // EN: Demo room data / VI: Dữ liệu 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,"occupied","Standard","Tầng 1",DateTime.Now.AddMinutes(-45)),
        new("R04","Phòng 104",4,"reserved","Standard","Tầng 1",null),
        new("R05","Phòng 201",12,"available","VIP","Tầng 2",null),
        new("R06","Phòng 202",8,"occupied","VIP","Tầng 2",DateTime.Now.AddHours(-2)),
        new("R07","Phòng 203",6,"cleaning","Standard","Tầng 2",null),
        new("R08","Phòng VIP 1",15,"available","Deluxe","VIP",null),
        new("R09","Phòng VIP 2",20,"occupied","Deluxe","VIP",DateTime.Now.AddHours(-3)),
        new("R10","Phòng VIP 3",15,"reserved","Deluxe","VIP",null),
    };

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

    // EN: Demo F&B items / VI: Mục F&B mẫu
    private readonly List<FnbItem> _demoFnbItems = new()
    {
        new("Bia Tiger", 35_000, 6), new("Trái cây dĩa", 120_000, 1),
        new("Khô mực nướng", 85_000, 2), new("Nước ngọt", 20_000, 4),
    };

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

    private static string GetStatusColor(string status) => status 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 GetStatusLabel(string status) => status switch
    {
        "available" => "Trống", "occupied" => "Đang hát",
        "reserved" => "Đã đặt", "cleaning" => "Đang dọn", _ => status
    };

    // EN: Models / VI: Mô hình dữ liệu
    private record RoomInfo(string Id, string Name, int Capacity, string Status, string Type, string Zone, DateTime? SessionStart);
    private record FnbItem(string Name, decimal Price, int Qty);
}
