@*
    EN: Karaoke Happy Hour — Time-based pricing display, active promotions, countdown timer.
    VI: Happy Hour Karaoke — Hiển thị giá theo giờ, khuyến mãi đang áp dụng, đồng hồ đếm ngược.
*@
@page "/pos/{ShopId:guid}/karaoke/happy-hour"
@layout PosLayout
@inherits PosBase
@inject WebClientTpos.Client.Services.PosDataService DataService

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);flex-shrink:0;">
        <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;">Happy Hour & Khuyến mãi</span>
    </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
    {
    <div style="flex:1;overflow-y:auto;padding:16px;">
        @* ═══ ACTIVE HAPPY HOUR / HAPPY HOUR ĐANG ÁP DỤNG ═══ *@
        <div style="background:linear-gradient(135deg,rgba(255,92,0,.2),rgba(245,158,11,.15));
                    border-radius:var(--pos-radius);padding:24px;margin-bottom:16px;text-align:center;
                    border:1px solid rgba(255,92,0,.3);">
            <div style="font-size:12px;font-weight:600;color:var(--pos-warning);text-transform:uppercase;letter-spacing:1px;">
                HAPPY HOUR ĐANG DIỄN RA
            </div>
            <div style="font-size:36px;font-weight:700;color:var(--pos-orange-primary);margin:8px 0;font-variant-numeric:tabular-nums;">
                01:45:30
            </div>
            <div style="font-size:13px;color:var(--pos-text-secondary);">
                Kết thúc lúc 19:00 — Giảm 30% giá phòng
            </div>
        </div>

        @* ═══ TIME-BASED RATES / GIÁ THEO KHUNG GIỜ ═══ *@
        <div style="margin-bottom:20px;">
            <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Bảng giá theo khung giờ</div>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;">
                @foreach (var rate in _timeRates)
                {
                    <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;
                                border:1px solid @(rate.IsActive ? "var(--pos-orange-primary)" : "var(--pos-border-subtle)");">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                            <span style="font-size:14px;font-weight:600;">@rate.TimeSlot</span>
                            @if (rate.IsActive)
                            {
                                <span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;
                                             background:rgba(34,197,94,.15);color:#22C55E;">Đang áp dụng</span>
                            }
                        </div>
                        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
                            @foreach (var price in rate.Prices)
                            {
                                <div style="text-align:center;padding:8px;background:var(--pos-bg-interactive);border-radius:8px;">
                                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-bottom:4px;">@price.Type</div>
                                    <div style="font-size:13px;font-weight:600;color:@(rate.IsActive ? "var(--pos-orange-primary)" : "var(--pos-text-primary)");">
                                        @FormatPrice(price.Amount)
                                    </div>
                                </div>
                            }
                        </div>
                        @if (rate.Discount > 0)
                        {
                            <div style="font-size:12px;color:var(--pos-warning);margin-top:8px;font-weight:500;">
                                <i data-lucide="tag" style="width:12px;height:12px;display:inline;"></i>
                                Giảm @rate.Discount% giá phòng
                            </div>
                        }
                    </div>
                }
            </div>
        </div>

        @* ═══ ACTIVE PROMOTIONS / KHUYẾN MÃI ĐANG ÁP DỤNG ═══ *@
        <div>
            <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Khuyến mãi đang áp dụng</div>
            <div style="display:flex;flex-direction:column;gap:10px;">
                @foreach (var promo in _promotions)
                {
                    <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;
                                display:flex;align-items:center;gap:14px;border:1px solid var(--pos-border-subtle);">
                        <div style="width:44px;height:44px;border-radius:12px;background:@promo.BgColor;
                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i data-lucide="@promo.Icon" style="width:20px;height:20px;color:@promo.FgColor;"></i>
                        </div>
                        <div style="flex:1;">
                            <div style="font-size:14px;font-weight:600;">@promo.Title</div>
                            <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">@promo.Description</div>
                        </div>
                        <div style="text-align:right;flex-shrink:0;">
                            <div style="font-size:14px;font-weight:700;color:var(--pos-orange-primary);">@promo.Value</div>
                            <div style="font-size:11px;color:var(--pos-text-tertiary);">@promo.ValidUntil</div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
    }
</div>

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

    // EN: Time-based rates — pricing dynamically built from real room rates
    // VI: Giá theo khung giờ — giá được xây dựng động từ giá phòng thực
    private List<TimeRate> _timeRates = new();

    // EN: Active promotions — kept static until promotions API is available
    // VI: Khuyến mãi đang áp dụng — giữ tĩnh cho đến khi có promotions API
    private readonly List<Promotion> _promotions = new()
    {
        new("Sinh nhật vui vẻ", "Giảm 50% phòng cho khách sinh nhật", "-50%",
            "Đến 31/03", "cake", "rgba(255,92,0,.15)", "#FF5C00"),
        new("Combo bia + phòng", "2 giờ Standard + 1 két bia Tiger", "350,000₫",
            "Đến 28/02", "wine", "rgba(245,158,11,.15)", "#F59E0B"),
        new("Thành viên Gold", "Giảm thêm 15% cho thành viên Gold", "-15%",
            "Thường trực", "crown", "rgba(59,130,246,.15)", "#3B82F6"),
        new("Nhóm 10+", "Miễn phí 1 giờ cho nhóm từ 10 khách", "Free 1h",
            "Đến 15/03", "users", "rgba(34,197,94,.15)", "#22C55E"),
    };

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

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

            // EN: Group rooms by zone/type and calculate average hourly rate per type
            // VI: Nhóm phòng theo khu vực/loại và tính giá trung bình mỗi loại
            var roomTypes = tables
                .GroupBy(t => t.Zone ?? "Standard")
                .Select(g => new RoomPrice(g.Key, g.Average(t => t.HourlyRate)))
                .Where(rp => rp.Amount > 0)
                .OrderBy(rp => rp.Amount)
                .ToList();

            // EN: If no rooms have hourly rates, use a reasonable fallback
            // VI: Nếu không có phòng nào có giá theo giờ, dùng giá mặc định
            if (!roomTypes.Any())
            {
                roomTypes = tables
                    .GroupBy(t => t.Zone ?? "Standard")
                    .Select(g => new RoomPrice(g.Key, 0))
                    .ToList();
            }

            // EN: Build time slots with dynamic pricing from real room rates
            // VI: Tạo khung giờ với giá động từ giá phòng thực
            var now = DateTime.Now.Hour;
            _timeRates = new List<TimeRate>
            {
                new("08:00 – 12:00", now >= 8 && now < 12, 30,
                    roomTypes.Select(rp => new RoomPrice(rp.Type, Math.Round(rp.Amount * 0.7m, -3))).ToList()),
                new("12:00 – 17:00", now >= 12 && now < 17, 20,
                    roomTypes.Select(rp => new RoomPrice(rp.Type, Math.Round(rp.Amount * 0.8m, -3))).ToList()),
                new("17:00 – 22:00", now >= 17 && now < 22, 0,
                    roomTypes.Select(rp => new RoomPrice(rp.Type, rp.Amount)).ToList()),
                new("22:00 – 02:00", now >= 22 || now < 2, 10,
                    roomTypes.Select(rp => new RoomPrice(rp.Type, Math.Round(rp.Amount * 0.9m, -3))).ToList()),
            };
        }
        catch
        {
            // EN: Fallback to empty rates on error / VI: Dùng giá rỗng khi lỗi
            _timeRates = new();
        }
        finally
        {
            _isLoading = false;
        }
    }

    // EN: Models / VI: Mô hình dữ liệu
    private record RoomPrice(string Type, decimal Amount);
    private record TimeRate(string TimeSlot, bool IsActive, int Discount, List<RoomPrice> Prices);
    private record Promotion(string Title, string Description, string Value, string ValidUntil,
        string Icon, string BgColor, string FgColor);
}
