@page "/admin/pricing"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Pricing rules — time-based, happy hour, combo, loyalty discounts.
    VI: Quy tắc giá — theo giờ, happy hour, combo, giảm giá loyalty.
    Design: pencil-design/src/pages/tPOS/admin/pricing-rules.pen
*@

<PageTitle>Quy tắc giá — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Quy tắc giá</h1>
        <p class="admin-topbar__subtitle">Quản lý khuyến mãi, combo, giá theo giờ</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Tạo quy tắc</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_ruleTab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _ruleTab = "all")">
        Tất cả <span class="admin-tab__badge admin-tab__badge--active">@_pricingRules.Count</span>
    </button>
    <button class="admin-tab @(_ruleTab == "happyhour" ? "admin-tab--active" : "")" @onclick="@(() => _ruleTab = "happyhour")">
        <i data-lucide="clock"></i> Happy Hour
    </button>
    <button class="admin-tab @(_ruleTab == "combo" ? "admin-tab--active" : "")" @onclick="@(() => _ruleTab = "combo")">
        <i data-lucide="package"></i> Combo
    </button>
    <button class="admin-tab @(_ruleTab == "loyalty" ? "admin-tab--active" : "")" @onclick="@(() => _ruleTab = "loyalty")">
        <i data-lucide="heart"></i> Loyalty
    </button>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:16px;">
    @foreach (var rule in _pricingRules)
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <div style="display:flex;align-items:center;gap:12px;">
                    <div class="admin-kpi-card__icon" style="width:40px;height:40px;border-radius:10px;background-color:@(rule.Color)20;">
                        <i data-lucide="@rule.Icon" style="color:@rule.Color;width:20px;height:20px;"></i>
                    </div>
                    <div>
                        <div style="font-size:15px;font-weight:600;">@rule.Name</div>
                        <div style="font-size:12px;color:var(--admin-text-tertiary);">@rule.Desc</div>
                    </div>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                    <div class="admin-status-badge @(rule.Active ? "admin-status-badge--online" : "admin-status-badge--offline")">
                        <span class="admin-status-badge__dot"></span>
                        @(rule.Active ? "Đang hoạt động" : "Tắt")
                    </div>
                    <button class="admin-icon-btn" style="width:32px;height:32px;">
                        <i data-lucide="edit-2" style="width:14px;height:14px;"></i>
                    </button>
                </div>
            </div>
            <div class="admin-panel__body" style="padding:12px 20px;">
                <div style="display:flex;gap:24px;font-size:13px;">
                    <div>
                        <span style="color:var(--admin-text-tertiary);">Loại: </span>
                        <span style="font-weight:600;">@rule.Type</span>
                    </div>
                    <div>
                        <span style="color:var(--admin-text-tertiary);">Giảm: </span>
                        <span style="font-weight:600;color:#22C55E;">@rule.Discount</span>
                    </div>
                    <div>
                        <span style="color:var(--admin-text-tertiary);">Áp dụng: </span>
                        <span style="font-weight:600;">@rule.AppliesTo</span>
                    </div>
                    <div>
                        <span style="color:var(--admin-text-tertiary);">Thời gian: </span>
                        <span style="font-weight:600;">@rule.Schedule</span>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    private string _ruleTab = "all";

    private record PricingRule(string Name, string Desc, string Type, string Discount, string AppliesTo, string Schedule, string Icon, string Color, bool Active);
    private readonly List<PricingRule> _pricingRules = new()
    {
        new("Happy Hour Chiều", "Giảm giá đồ uống từ 14h-16h", "Happy Hour", "-20%", "Tất cả cà phê", "14:00 – 16:00 hàng ngày", "clock", "#FF5C00", true),
        new("Combo Sáng", "Combo cà phê + bánh mì", "Combo", "-15K", "Espresso + Bánh mì", "07:00 – 10:00 T2-T6", "package", "#3B82F6", true),
        new("Sinh nhật Loyalty", "Giảm giá cho khách hàng sinh nhật", "Loyalty", "-30%", "Khách hàng thành viên", "Cả ngày", "heart", "#EC4899", true),
        new("Weekend Brunch", "Giảm giá cuối tuần cho đồ ăn", "Happy Hour", "-25%", "Danh mục Đồ ăn", "09:00 – 13:00 T7-CN", "sun", "#F59E0B", false),
        new("Mua 5 tặng 1", "Tích điểm mua 5 ly tặng 1", "Loyalty", "1 miễn phí", "Tất cả đồ uống", "Không giới hạn", "gift", "#8B5CF6", true),
    };
}
