@*
    EN: Karaoke Room Session — Active room timer, F&B orders, extend/end session, total.
    VI: Phiên phòng Karaoke — Đồng hồ phòng, đơn F&B, gia hạn/kết thúc, tổng cộng.
*@
@page "/pos/karaoke/room-session"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;overflow:hidden;">
    @* ═══ SESSION DETAILS (LEFT) / CHI TIẾT PHIÊN (TRÁI) ═══ *@
    <div class="pos-product-panel" style="padding:16px;overflow-y:auto;">
        @* EN: Back + Room header / VI: Quay lại + Tiêu đề phòng *@
        <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>
            <div>
                <div style="font-size:18px;font-weight:700;">Phòng VIP 2</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Deluxe • 20 người • Tầng 3</div>
            </div>
        </div>

        @* ═══ TIMER SECTION / KHU VỰC ĐỒNG HỒ ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:24px;
                    text-align:center;margin-bottom:16px;">
            <div style="font-size:12px;color:var(--pos-text-tertiary);font-weight:600;margin-bottom:8px;">
                THỜI GIAN SỬ DỤNG
            </div>
            <div style="font-size:48px;font-weight:700;color:var(--pos-orange-primary);font-variant-numeric:tabular-nums;">
                02:30:15
            </div>
            <div style="display:flex;justify-content:center;gap:24px;margin-top:12px;font-size:13px;color:var(--pos-text-secondary);">
                <span>Bắt đầu: <b>19:30</b></span>
                <span>Dự kiến: <b>22:00</b></span>
                <span>Còn lại: <b style="color:#22C55E;">00:29:45</b></span>
            </div>
        </div>

        @* ═══ ROOM RATE / GIÁ PHÒNG ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;margin-bottom:16px;">
            <div style="font-size:13px;font-weight:600;margin-bottom:12px;">Giá phòng</div>
            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                <span style="color:var(--pos-text-secondary);">Loại phòng</span>
                <span>Deluxe</span>
            </div>
            <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(200_000)</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>2.5 giờ</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:14px;font-weight:600;
                        padding-top:8px;border-top:1px solid var(--pos-border-subtle);">
                <span>Tiền phòng</span>
                <span style="color:var(--pos-orange-primary);">@FormatPrice(500_000)</span>
            </div>
        </div>

        @* ═══ ACTION BUTTONS / NÚT HÀNH ĐỘNG ═══ *@
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
            <button style="padding:14px 8px;border-radius:var(--pos-radius);background:rgba(59,130,246,.15);
                           border:none;color:#3B82F6;cursor:pointer;font-size:13px;font-weight:500;"
                    @onclick="() => _showExtend = !_showExtend">
                <i data-lucide="clock" style="width:18px;height:18px;display:block;margin:0 auto 4px;"></i>
                Gia hạn
            </button>
            <button style="padding:14px 8px;border-radius:var(--pos-radius);background:rgba(34,197,94,.15);
                           border:none;color:#22C55E;cursor:pointer;font-size:13px;font-weight:500;"
                    @onclick="@(() => NavigateTo("karaoke/order-fnb"))">
                <i data-lucide="utensils" style="width:18px;height:18px;display:block;margin:0 auto 4px;"></i>
                Gọi F&B
            </button>
            <button style="padding:14px 8px;border-radius:var(--pos-radius);background:rgba(239,68,68,.15);
                           border:none;color:#EF4444;cursor:pointer;font-size:13px;font-weight:500;"
                    @onclick="() => _showEnd = !_showEnd">
                <i data-lucide="square" style="width:18px;height:18px;display:block;margin:0 auto 4px;"></i>
                Kết thúc
            </button>
        </div>

        @* EN: Extend time dialog / VI: Dialog gia hạn *@
        @if (_showExtend)
        {
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;margin-top:12px;">
                <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Gia hạn thêm</div>
                <div style="display:flex;gap:8px;">
                    @foreach (var mins in new[] { 30, 60, 90, 120 })
                    {
                        <button style="flex:1;padding:10px;border-radius:8px;background:var(--pos-bg-interactive);
                                       border:none;color:var(--pos-text-primary);cursor:pointer;font-size:13px;">
                            @(mins)p
                        </button>
                    }
                </div>
            </div>
        }
    </div>

    @* ═══ F&B ORDER PANEL (RIGHT) / PANEL ĐƠN F&B (PHẢI) ═══ *@
    <div class="pos-cart-panel">
        <div class="pos-cart-header">
            <span class="pos-cart-header__title">Đơn F&B</span>
            <span style="font-size:12px;color:var(--pos-text-tertiary);">@_fnbItems.Count món</span>
        </div>

        <div class="pos-cart-items">
            @foreach (var item in _fnbItems)
            {
                <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>
                    <div class="pos-cart-item__qty">
                        <button @onclick="() => item.Qty = Math.Max(0, item.Qty - 1)">−</button>
                        <span style="font-size:14px;font-weight:600;min-width:20px;text-align:center;">@item.Qty</span>
                        <button @onclick="() => item.Qty++">+</button>
                    </div>
                </div>
            }
        </div>

        <div class="pos-cart-footer">
            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                <span style="color:var(--pos-text-secondary);">Tiền phòng</span>
                <span>@FormatPrice(500_000)</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;">
                <span style="color:var(--pos-text-secondary);">Tiền F&B</span>
                <span>@FormatPrice(_fnbItems.Sum(i => i.Price * i.Qty))</span>
            </div>
            <div class="pos-cart-total">
                <span class="pos-cart-total__label">Tổng cộng</span>
                <span class="pos-cart-total__value">@FormatPrice(500_000 + _fnbItems.Sum(i => i.Price * i.Qty))</span>
            </div>
            <button class="pos-btn-checkout">
                <i data-lucide="credit-card" style="width:18px;height:18px;"></i> Thanh toán
            </button>
        </div>
    </div>
</div>

@code {
    // EN: UI toggles / VI: Bật tắt giao diện
    private bool _showExtend;
    private bool _showEnd;

    // EN: Demo F&B items / VI: Mục F&B mẫu
    private readonly List<FnbItem> _fnbItems = new()
    {
        new("Bia Tiger lon", 35_000, 6), new("Trái cây dĩa lớn", 150_000, 1),
        new("Khô mực nướng", 85_000, 2), new("Coca-Cola", 20_000, 4),
        new("Đậu phộng rang", 30_000, 2), new("Nước suối", 10_000, 3),
    };

    private class FnbItem(string name, decimal price, int qty)
    {
        public string Name { get; set; } = name;
        public decimal Price { get; set; } = price;
        public int Qty { get; set; } = qty;
    }
}
