@*
    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/karaoke/happy-hour"
@layout PosLayout
@inherits PosBase

<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>

    <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: Time-based rates / VI: Giá theo khung giờ
    private readonly List<TimeRate> _timeRates = new()
    {
        new("08:00 – 12:00", true, 30, new() {
            new("Standard", 50_000), new("VIP", 100_000), new("Deluxe", 140_000) }),
        new("12:00 – 17:00", false, 20, new() {
            new("Standard", 60_000), new("VIP", 120_000), new("Deluxe", 160_000) }),
        new("17:00 – 22:00", false, 0, new() {
            new("Standard", 80_000), new("VIP", 150_000), new("Deluxe", 200_000) }),
        new("22:00 – 02:00", false, 10, new() {
            new("Standard", 70_000), new("VIP", 130_000), new("Deluxe", 180_000) }),
    };

    // EN: Active promotions / VI: Khuyến mãi đang áp dụng
    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", "party-popper", "rgba(255,92,0,.15)", "#FF5C00"),
        new("Combo bia + phòng", "2 giờ Standard + 1 két bia Tiger", "350,000₫",
            "Đến 28/02", "beer", "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"),
    };

    // 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);
}
