@*
    EN: Karaoke Room Select — Filter by type/capacity, available rooms, price per hour, start session.
    VI: Chọn phòng Karaoke — Lọc theo loại/sức chứa, phòng trống, giá/giờ, bắt đầu phiên.
*@
@page "/pos/karaoke/room-select"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;overflow:hidden;">
    @* ═══ ROOM SELECTION (LEFT) / CHỌN PHÒNG (TRÁI) ═══ *@
    <div class="pos-product-panel" style="padding:16px;overflow-y:auto;">
        @* EN: Header / VI: Tiêu đề *@
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
            <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>
            </button>
            <span style="font-size:16px;font-weight:700;">Chọn phòng</span>
            <span style="font-size:12px;color:var(--pos-text-tertiary);">@FilteredRooms.Count() phòng trống</span>
        </div>

        @* EN: Type filter / VI: Lọc loại phòng *@
        <div class="pos-category-tabs" style="padding:0 0 12px;">
            @foreach (var type in _types)
            {
                <button class="pos-category-tab @(type == _activeType ? "pos-category-tab--active" : "")"
                        @onclick="() => _activeType = type">
                    @type
                </button>
            }
        </div>

        @* EN: Capacity filter / VI: Lọc sức chứa *@
        <div style="display:flex;gap:8px;margin-bottom:16px;">
            <span style="font-size:12px;color:var(--pos-text-tertiary);padding:8px 0;">Sức chứa:</span>
            @foreach (var cap in _capacities)
            {
                <button style="padding:6px 14px;border-radius:8px;font-size:12px;cursor:pointer;border:none;
                               background:@(_selectedCapacity == cap ? "var(--pos-orange-primary)" : "var(--pos-bg-interactive)");
                               color:@(_selectedCapacity == cap ? "#FFF" : "var(--pos-text-secondary)");"
                        @onclick="() => _selectedCapacity = _selectedCapacity == cap ? null : cap">
                    @cap+ người
                </button>
            }
        </div>

        @* ═══ AVAILABLE ROOMS GRID / LƯỚI PHÒNG TRỐNG ═══ *@
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;">
            @foreach (var room in FilteredRooms)
            {
                <div @onclick="() => _selectedRoom = room"
                     style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;
                            cursor:pointer;border:2px solid @(_selectedRoom?.Id == room.Id ? "var(--pos-orange-primary)" : "var(--pos-border-subtle)");
                            transition:all .2s ease;">
                    <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;">
                        <div style="font-size:16px;font-weight:700;">@room.Name</div>
                        <span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;
                                     background:rgba(34,197,94,.15);color:#22C55E;">Trống</span>
                    </div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-bottom:4px;">
                        @room.Type • @room.Capacity người
                    </div>
                    <div style="font-size:14px;font-weight:600;color:var(--pos-orange-primary);">
                        @FormatPrice(room.PricePerHour)/giờ
                    </div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">
                        @room.Zone
                    </div>
                </div>
            }
        </div>
    </div>

    @* ═══ SESSION SETUP (RIGHT) / THIẾT LẬP PHIÊN (PHẢI) ═══ *@
    <div class="pos-cart-panel">
        @if (_selectedRoom is not null)
        {
            <div class="pos-cart-header">
                <span class="pos-cart-header__title">Mở phiên mới</span>
            </div>

            <div class="pos-cart-items" style="padding:16px;">
                @* EN: Selected room info / VI: Thông tin phòng chọn *@
                <div style="background:var(--pos-bg-interactive);border-radius:var(--pos-radius);padding:16px;margin-bottom:16px;">
                    <div style="font-size:16px;font-weight:700;margin-bottom:4px;">@_selectedRoom.Name</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">@_selectedRoom.Type • @_selectedRoom.Capacity người</div>
                </div>

                @* EN: Duration select / VI: Chọn thời lượng *@
                <div style="margin-bottom:16px;">
                    <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Thời lượng</div>
                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
                        @foreach (var hours in new[] { 1, 2, 3 })
                        {
                            <button style="padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
                                           border:none;background:@(_selectedHours == hours ? "var(--pos-orange-primary)" : "var(--pos-bg-interactive)");
                                           color:@(_selectedHours == hours ? "#FFF" : "var(--pos-text-secondary)");"
                                    @onclick="() => _selectedHours = hours">
                                @hours giờ
                            </button>
                        }
                    </div>
                </div>

                @* EN: Guests / VI: Số khách *@
                <div style="margin-bottom:16px;">
                    <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Số khách</div>
                    <div style="display:flex;align-items:center;gap:12px;">
                        <button style="width:36px;height:36px;border-radius:8px;border:1px solid var(--pos-border-default);
                                       background:transparent;color:var(--pos-text-primary);cursor:pointer;font-size:16px;"
                                @onclick="() => _guests = Math.Max(1, _guests - 1)">−</button>
                        <span style="font-size:18px;font-weight:600;min-width:30px;text-align:center;">@_guests</span>
                        <button style="width:36px;height:36px;border-radius:8px;border:1px solid var(--pos-border-default);
                                       background:transparent;color:var(--pos-text-primary);cursor:pointer;font-size:16px;"
                                @onclick="() => _guests++">+</button>
                    </div>
                </div>

                @* EN: Price summary / VI: Tóm tắt giá *@
                <div style="border-top:1px solid var(--pos-border-subtle);padding-top:12px;">
                    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                        <span style="color:var(--pos-text-secondary);">Giá/giờ</span>
                        <span>@FormatPrice(_selectedRoom.PricePerHour)</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                        <span style="color:var(--pos-text-secondary);">Số giờ</span>
                        <span>@_selectedHours giờ</span>
                    </div>
                </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.PricePerHour * _selectedHours)</span>
                </div>
                <button class="pos-btn-checkout" @onclick="@(() => NavigateTo("karaoke/room-session"))">
                    <i data-lucide="play" style="width:18px;height:18px;"></i> Bắt đầu phiên
                </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 để tiếp tục
            </div>
        }
    </div>
</div>

@code {
    // EN: Filters / VI: Bộ lọc
    private string _activeType = "Tất cả";
    private readonly string[] _types = { "Tất cả", "Standard", "VIP", "Deluxe" };
    private readonly int[] _capacities = { 4, 8, 12, 15 };
    private int? _selectedCapacity;
    private RoomInfo? _selectedRoom;
    private int _selectedHours = 2;
    private int _guests = 4;

    // EN: Available rooms / VI: Phòng trống
    private readonly List<RoomInfo> _rooms = new()
    {
        new("R01","Phòng 101",8,"Standard",80_000,"Tầng 1"),
        new("R04","Phòng 104",4,"Standard",60_000,"Tầng 1"),
        new("R05","Phòng 201",12,"VIP",150_000,"Tầng 2"),
        new("R07","Phòng 203",6,"Standard",80_000,"Tầng 2"),
        new("R08","VIP 1",15,"Deluxe",200_000,"VIP"),
        new("R11","VIP 3",20,"Deluxe",250_000,"VIP"),
        new("R09","Phòng 204",6,"Standard",70_000,"Tầng 2"),
    };

    private IEnumerable<RoomInfo> FilteredRooms
    {
        get
        {
            var result = _rooms.AsEnumerable();
            if (_activeType != "Tất cả") result = result.Where(r => r.Type == _activeType);
            if (_selectedCapacity.HasValue) result = result.Where(r => r.Capacity >= _selectedCapacity.Value);
            return result;
        }
    }

    private record RoomInfo(string Id, string Name, int Capacity, string Type, decimal PricePerHour, string Zone);
}
