@using WebClientTpos.Client.Services
@using WebClientTpos.Client.Pages.Admin.Shop
@inject IJSRuntime JS

@* ═══ TIME-BASED PRICING ═══ *@
<div class="admin-panel" style="margin-bottom:16px;">
    <div class="admin-panel__header" style="display:flex;justify-content:space-between;align-items:center;">
        <h3 class="admin-panel__title"><i data-lucide="clock" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>Bảng giá theo khung giờ</h3>
        <button class="admin-btn-primary" style="font-size:12px;padding:6px 14px;" @onclick="ToggleTimeSlotForm">
            <i data-lucide="@(_showTimeSlotForm ? "x" : "plus")" style="width:14px;height:14px;margin-right:4px;"></i>@(_showTimeSlotForm ? "Đóng" : "Thêm khung giờ")
        </button>
    </div>
    <div class="admin-panel__body">
        @if (_showTimeSlotForm)
        {
            <div style="margin-bottom:16px;padding:16px;border-radius:10px;border:1px solid rgba(245,158,11,0.3);background:var(--admin-bg-elevated);">
                <div style="font-weight:600;font-size:13px;margin-bottom:8px;">@(_editingSlotIdx >= 0 ? "Chỉnh sửa khung giờ" : "Thêm khung giờ mới")</div>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Khung giờ *</label><input type="text" @bind="_slotTimeRange" placeholder="VD: 08:00 – 12:00" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Giảm giá (%)</label><input type="number" @bind="_slotDiscount" min="0" max="100" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div></div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:8px;">
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Standard (VNĐ)</label><input type="number" @bind="_slotStandard" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">VIP (VNĐ)</label><input type="number" @bind="_slotVip" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Deluxe (VNĐ)</label><input type="number" @bind="_slotDeluxe" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                </div>
                <div style="display:flex;gap:8px;margin-top:12px;">
                    <button class="admin-btn-primary" style="padding:8px 16px;font-size:12px;" @onclick="SaveTimeSlot"><i data-lucide="check" style="width:14px;height:14px;margin-right:4px;"></i>Lưu</button>
                    <button @onclick='() => _showTimeSlotForm = false' style="padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:transparent;color:var(--admin-text-secondary);cursor:pointer;font-size:12px;"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
                </div>
            </div>
        }

        @if (!_timeSlots.Any())
        {
            <div style="text-align:center;padding:40px;color:var(--admin-text-tertiary);">
                <i data-lucide="clock" style="width:36px;height:36px;margin:0 auto 12px;display:block;opacity:0.3;"></i>
                <p>Chưa có khung giờ nào. Nhấn "Thêm khung giờ" để bắt đầu.</p>
            </div>
        }
        else
        {
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;">
                @for (var i = 0; i < _timeSlots.Count; i++)
                {
                    var idx = i;
                    var slot = _timeSlots[i];
                    var isActive = IsActiveSlot(slot.TimeRange);
                    <div style="background:var(--admin-bg-elevated);border-radius:12px;padding:16px;border:1px solid @(isActive ? "var(--admin-orange-primary)" : "var(--admin-border-subtle)");position:relative;">
                        <div style="position:absolute;top:8px;right:8px;display:flex;gap:4px;">
                            <button @onclick='() => EditSlot(idx)' style="background:rgba(59,130,246,0.1);border:none;border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;"><i data-lucide="pencil" style="color:#3B82F6;width:11px;height:11px;"></i></button>
                            <button @onclick='() => DeleteSlot(idx)' style="background:rgba(239,68,68,0.1);border:none;border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;"><i data-lucide="trash-2" style="color:#EF4444;width:11px;height:11px;"></i></button>
                        </div>
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                            <span style="font-size:14px;font-weight:600;">@slot.TimeRange</span>
                            @if (isActive)
                            {
                                <span style="font-size:10px;padding:2px 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;">
                            <div style="text-align:center;padding:8px;background:var(--admin-bg-main);border-radius:8px;">
                                <div style="font-size:10px;color:var(--admin-text-tertiary);margin-bottom:2px;">Standard</div>
                                <div style="font-size:13px;font-weight:600;color:@(isActive ? "var(--admin-orange-primary)" : "var(--admin-text-primary)");">@ShopHelpers.FormatVND(slot.Standard)</div>
                            </div>
                            <div style="text-align:center;padding:8px;background:var(--admin-bg-main);border-radius:8px;">
                                <div style="font-size:10px;color:var(--admin-text-tertiary);margin-bottom:2px;">VIP</div>
                                <div style="font-size:13px;font-weight:600;color:@(isActive ? "var(--admin-orange-primary)" : "var(--admin-text-primary)");">@ShopHelpers.FormatVND(slot.Vip)</div>
                            </div>
                            <div style="text-align:center;padding:8px;background:var(--admin-bg-main);border-radius:8px;">
                                <div style="font-size:10px;color:var(--admin-text-tertiary);margin-bottom:2px;">Deluxe</div>
                                <div style="font-size:13px;font-weight:600;color:@(isActive ? "var(--admin-orange-primary)" : "var(--admin-text-primary)");">@ShopHelpers.FormatVND(slot.Deluxe)</div>
                            </div>
                        </div>
                        @if (slot.Discount > 0)
                        {
                            <div style="font-size:12px;color:var(--admin-orange-primary);margin-top:8px;font-weight:500;display:flex;align-items:center;gap:4px;">
                                <i data-lucide="tag" style="width:12px;height:12px;"></i>Giảm @slot.Discount% giá phòng
                            </div>
                        }
                    </div>
                }
            </div>
        }
    </div>
</div>

@* ═══ PROMOTIONS ═══ *@
<div class="admin-panel">
    <div class="admin-panel__header" style="display:flex;justify-content:space-between;align-items:center;">
        <h3 class="admin-panel__title"><i data-lucide="gift" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>Khuyến mãi</h3>
        <button class="admin-btn-primary" style="font-size:12px;padding:6px 14px;" @onclick="TogglePromoForm">
            <i data-lucide="@(_showPromoForm ? "x" : "plus")" style="width:14px;height:14px;margin-right:4px;"></i>@(_showPromoForm ? "Đóng" : "Thêm khuyến mãi")
        </button>
    </div>
    <div class="admin-panel__body">
        @if (_showPromoForm)
        {
            <div style="margin-bottom:16px;padding:16px;border-radius:10px;border:1px solid rgba(245,158,11,0.3);background:var(--admin-bg-elevated);">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Tên *</label><input type="text" @bind="_promoTitle" placeholder="VD: Sinh nhật vui vẻ" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Giá trị</label><input type="text" @bind="_promoValue" placeholder="VD: -50%, 350,000₫" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                </div>
                <div style="display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:8px;">
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Mô tả</label><input type="text" @bind="_promoDesc" placeholder="Chi tiết khuyến mãi" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                    <div><label style="font-size:12px;font-weight:600;display:block;margin-bottom:4px;">Hết hạn</label><input type="text" @bind="_promoExpiry" placeholder="VD: 31/03, Thường trực" style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:var(--admin-bg-elevated);color:var(--admin-text-primary);" /></div>
                </div>
                <div style="display:flex;gap:8px;margin-top:12px;">
                    <button class="admin-btn-primary" style="padding:8px 16px;font-size:12px;" @onclick="SavePromo"><i data-lucide="check" style="width:14px;height:14px;margin-right:4px;"></i>Lưu</button>
                    <button @onclick='() => _showPromoForm = false' style="padding:8px 12px;border-radius:8px;border:1px solid var(--admin-border-subtle);background:transparent;color:var(--admin-text-secondary);cursor:pointer;font-size:12px;"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
                </div>
            </div>
        }

        @if (!_promotions.Any())
        {
            <div style="text-align:center;padding:40px;color:var(--admin-text-tertiary);">
                <i data-lucide="gift" style="width:36px;height:36px;margin:0 auto 12px;display:block;opacity:0.3;"></i>
                <p>Chưa có khuyến mãi nào.</p>
            </div>
        }
        else
        {
            <div style="display:flex;flex-direction:column;gap:10px;">
                @for (var i = 0; i < _promotions.Count; i++)
                {
                    var idx = i;
                    var promo = _promotions[i];
                    var iconColors = new[] { ("#FF5C00", "rgba(255,92,0,.15)"), ("#F59E0B", "rgba(245,158,11,.15)"), ("#3B82F6", "rgba(59,130,246,.15)"), ("#22C55E", "rgba(34,197,94,.15)") };
                    var color = iconColors[idx % iconColors.Length];
                    var icons = new[] { "cake", "wine", "crown", "users" };
                    <div style="background:var(--admin-bg-elevated);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px;border:1px solid var(--admin-border-subtle);">
                        <div style="width:44px;height:44px;border-radius:12px;background:@color.Item2;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i data-lucide="@icons[idx % icons.Length]" style="width:20px;height:20px;color:@color.Item1;"></i>
                        </div>
                        <div style="flex:1;">
                            <div style="font-size:14px;font-weight:600;">@promo.Title</div>
                            <div style="font-size:12px;color:var(--admin-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(--admin-orange-primary);">@promo.Value</div>
                            <div style="font-size:11px;color:var(--admin-text-tertiary);">@promo.ValidUntil</div>
                        </div>
                        <button @onclick='() => DeletePromo(idx)' style="background:rgba(239,68,68,0.1);border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;">
                            <i data-lucide="trash-2" style="color:#EF4444;width:12px;height:12px;"></i>
                        </button>
                    </div>
                }
            </div>
        }
    </div>
</div>

@code {
    [Parameter] public Guid ShopId { get; set; }

    // Time slots
    private List<TimeSlotConfig> _timeSlots = new();
    private bool _showTimeSlotForm;
    private int _editingSlotIdx = -1;
    private string _slotTimeRange = "";
    private int _slotDiscount;
    private decimal _slotStandard = 80000;
    private decimal _slotVip = 150000;
    private decimal _slotDeluxe = 200000;

    // Promotions
    private List<PromoConfig> _promotions = new();
    private bool _showPromoForm;
    private string _promoTitle = "";
    private string _promoDesc = "";
    private string _promoValue = "";
    private string _promoExpiry = "";

    private string StorageKey => $"happy_hour_{ShopId}";

    protected override async Task OnInitializedAsync()
    {
        await LoadFromStorage();
        if (!_timeSlots.Any())
        {
            _timeSlots = new()
            {
                new("08:00 – 12:00", 30, 50000, 100000, 140000),
                new("12:00 – 17:00", 20, 60000, 120000, 160000),
                new("17:00 – 22:00", 0, 80000, 150000, 200000),
                new("22:00 – 02:00", 10, 70000, 130000, 180000),
            };
            _promotions = new()
            {
                new("Sinh nhật vui vẻ", "Giảm 50% phòng cho khách sinh nhật", "-50%", "Đến 31/03"),
                new("Combo phòng + đồ uống", "2 giờ Standard + 1 két đồ uống", "350,000₫", "Đến 28/02"),
                new("Thành viên Gold", "Giảm thêm 15% cho thành viên Gold", "-15%", "Thường trực"),
                new("Nhóm 10+", "Miễn phí 1 giờ cho nhóm từ 10 khách", "Free 1h", "Đến 15/03"),
            };
            await SaveToStorage();
        }
    }

    private bool IsActiveSlot(string timeRange)
    {
        try
        {
            var parts = timeRange.Split('–', '—', '-');
            if (parts.Length != 2) return false;
            var now = DateTime.Now.TimeOfDay;
            var start = TimeSpan.Parse(parts[0].Trim());
            var end = TimeSpan.Parse(parts[1].Trim());
            if (end < start) return now >= start || now < end;
            return now >= start && now < end;
        }
        catch { return false; }
    }

    private void ToggleTimeSlotForm()
    {
        _showTimeSlotForm = !_showTimeSlotForm;
        if (_showTimeSlotForm) { _editingSlotIdx = -1; _slotTimeRange = ""; _slotDiscount = 0; _slotStandard = 80000; _slotVip = 150000; _slotDeluxe = 200000; }
    }

    private void EditSlot(int idx)
    {
        var slot = _timeSlots[idx];
        _editingSlotIdx = idx;
        _slotTimeRange = slot.TimeRange;
        _slotDiscount = slot.Discount;
        _slotStandard = slot.Standard;
        _slotVip = slot.Vip;
        _slotDeluxe = slot.Deluxe;
        _showTimeSlotForm = true;
    }

    private async Task SaveTimeSlot()
    {
        if (string.IsNullOrWhiteSpace(_slotTimeRange)) return;
        var slot = new TimeSlotConfig(_slotTimeRange.Trim(), _slotDiscount, _slotStandard, _slotVip, _slotDeluxe);
        if (_editingSlotIdx >= 0 && _editingSlotIdx < _timeSlots.Count)
            _timeSlots[_editingSlotIdx] = slot;
        else
            _timeSlots.Add(slot);
        _showTimeSlotForm = false;
        await SaveToStorage();
    }

    private async Task DeleteSlot(int idx)
    {
        if (idx >= 0 && idx < _timeSlots.Count) { _timeSlots.RemoveAt(idx); await SaveToStorage(); }
    }

    private void TogglePromoForm()
    {
        _showPromoForm = !_showPromoForm;
        if (_showPromoForm) { _promoTitle = ""; _promoDesc = ""; _promoValue = ""; _promoExpiry = ""; }
    }

    private async Task SavePromo()
    {
        if (string.IsNullOrWhiteSpace(_promoTitle)) return;
        _promotions.Add(new PromoConfig(_promoTitle.Trim(), _promoDesc.Trim(), _promoValue.Trim(), _promoExpiry.Trim()));
        _showPromoForm = false;
        await SaveToStorage();
    }

    private async Task DeletePromo(int idx)
    {
        if (idx >= 0 && idx < _promotions.Count) { _promotions.RemoveAt(idx); await SaveToStorage(); }
    }

    private async Task SaveToStorage()
    {
        try
        {
            var data = System.Text.Json.JsonSerializer.Serialize(new HappyHourData(_timeSlots, _promotions));
            await JS.InvokeVoidAsync("localStorage.setItem", StorageKey, data);
        }
        catch { }
    }

    private async Task LoadFromStorage()
    {
        try
        {
            var json = await JS.InvokeAsync<string?>("localStorage.getItem", StorageKey);
            if (!string.IsNullOrEmpty(json))
            {
                var data = System.Text.Json.JsonSerializer.Deserialize<HappyHourData>(json);
                if (data != null) { _timeSlots = data.TimeSlots ?? new(); _promotions = data.Promotions ?? new(); }
            }
        }
        catch { }
    }

    private record TimeSlotConfig(string TimeRange, int Discount, decimal Standard, decimal Vip, decimal Deluxe);
    private record PromoConfig(string Title, string Description, string Value, string ValidUntil);
    private record HappyHourData(List<TimeSlotConfig> TimeSlots, List<PromoConfig> Promotions);
}
