@page "/admin/finance/revenue"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Revenue Analytics — revenue by store, category, time period, top products.
    VI: Phân tích doanh thu — doanh thu theo cửa hàng, danh mục, kỳ, sản phẩm bán chạy.
    Design: pencil-design/src/pages/tPOS/admin/revenue-analytics.pen
*@

<PageTitle>Phân tích doanh thu — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Phân tích doanh thu</h1>
        <p class="admin-topbar__subtitle">Tháng 02/2025 • So sánh theo cửa hàng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="calendar"></i>
            <span>Tháng này</span>
        </button>
        <button class="admin-btn-secondary">
            <i data-lucide="filter"></i>
            <span>Bộ lọc</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="download"></i>
            <span>Xuất báo cáo</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:24px;">

    @* KPI Row *@
    <div class="admin-kpi-row">
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(34,197,94,0.125);">
                    <i data-lucide="trending-up" style="color:#22C55E;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+18.2%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">256.8M</div>
            <div class="admin-kpi-card__label">Tổng doanh thu</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(59,130,246,0.125);">
                    <i data-lucide="shopping-bag" style="color:#3B82F6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">132K</div>
            <div class="admin-kpi-card__label">Giá trị đơn TB</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(255,92,0,0.125);">
                    <i data-lucide="store" style="color:var(--admin-orange-primary);"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">Nhà hàng Q3</div>
            <div class="admin-kpi-card__label">Cửa hàng dẫn đầu</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(139,92,246,0.125);">
                    <i data-lucide="bar-chart-3" style="color:#8B5CF6;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+12.4%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">+18.2%</div>
            <div class="admin-kpi-card__label">Tỷ lệ tăng trưởng</div>
        </div>
    </div>

    @* Revenue by Store + Revenue by Category *@
    <div style="display:flex;gap:24px;">
        @* Revenue by Store *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="store" style="color:var(--admin-orange-primary);"></i>
                    Doanh thu theo cửa hàng
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @foreach (var s in _storeRevenue)
                {
                    <div style="display:flex;align-items:center;gap:12px;padding:10px 14px;background-color:var(--admin-bg-interactive);border-radius:var(--admin-radius-md);">
                        <div style="width:36px;height:36px;border-radius:var(--admin-radius-md);background-color:@(s.BgColor);display:flex;align-items:center;justify-content:center;">
                            <i data-lucide="@s.Icon" style="color:@s.IconColor;width:18px;height:18px;"></i>
                        </div>
                        <div style="flex:1;">
                            <div style="font-size:13px;font-weight:600;">@s.Name</div>
                            <div style="font-size:11px;color:var(--admin-text-tertiary);">@s.Orders đơn hàng</div>
                        </div>
                        <div style="text-align:right;">
                            <div style="font-size:14px;font-weight:700;color:var(--admin-orange-primary);">@s.Revenue</div>
                            <div style="font-size:11px;color:#22C55E;">@s.Growth</div>
                        </div>
                    </div>
                }
            </div>
        </div>

        @* Revenue by Category *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="layers" style="color:#3B82F6;"></i>
                    Doanh thu theo danh mục
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:10px;">
                @foreach (var c in _categoryRevenue)
                {
                    <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background-color:var(--admin-bg-interactive);border-radius:var(--admin-radius-md);">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div style="width:8px;height:8px;border-radius:50%;background-color:@c.Color;"></div>
                            <span style="font-size:13px;">@c.Category</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:16px;">
                            <span style="font-size:13px;font-weight:600;">@c.Amount</span>
                            <span style="font-size:11px;color:var(--admin-text-tertiary);">@c.Percent</span>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>

    @* Top-selling Products Table *@
    <div class="admin-panel">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="trophy" style="color:#F59E0B;"></i>
                Sản phẩm bán chạy nhất
            </h3>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Sản phẩm</th>
                        <th>Danh mục</th>
                        <th>Số lượng bán</th>
                        <th style="text-align:right;">Doanh thu</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var p in _topProducts)
                    {
                        <tr>
                            <td style="font-weight:700;color:var(--admin-orange-primary);">@p.Rank</td>
                            <td style="font-weight:600;">@p.Name</td>
                            <td style="color:var(--admin-text-tertiary);">@p.Category</td>
                            <td>@p.Sold</td>
                            <td style="text-align:right;font-weight:600;">@p.Revenue</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private record StoreRevItem(string Name, string Icon, string IconColor, string BgColor, string Revenue, string Orders, string Growth);
    private readonly StoreRevItem[] _storeRevenue = new[]
    {
        new StoreRevItem("Nhà hàng Q3", "utensils", "#3B82F6", "rgba(59,130,246,0.125)", "128.4M", "842", "+22.1%"),
        new StoreRevItem("Coffee House Q1", "coffee", "#FF5C00", "rgba(255,92,0,0.125)", "96.2M", "1,024", "+15.3%"),
        new StoreRevItem("Karaoke Star Q7", "mic", "#8B5CF6", "rgba(139,92,246,0.125)", "32.2M", "156", "+8.7%"),
    };

    private record CategoryRevItem(string Category, string Amount, string Percent, string Color);
    private readonly CategoryRevItem[] _categoryRevenue = new[]
    {
        new CategoryRevItem("Đồ uống", "108.5M", "42.2%", "#FF5C00"),
        new CategoryRevItem("Đồ ăn", "82.3M", "32.1%", "#3B82F6"),
        new CategoryRevItem("Dịch vụ phòng", "32.2M", "12.5%", "#8B5CF6"),
        new CategoryRevItem("Khác", "33.8M", "13.2%", "#22C55E"),
    };

    private record TopProductItem(string Rank, string Name, string Category, string Sold, string Revenue);
    private readonly TopProductItem[] _topProducts = new[]
    {
        new TopProductItem("1", "Espresso", "Cà phê", "1,024", "35.8M"),
        new TopProductItem("2", "Cappuccino", "Cà phê", "856", "38.5M"),
        new TopProductItem("3", "Phở bò đặc biệt", "Đồ ăn", "742", "44.5M"),
        new TopProductItem("4", "Latte", "Cà phê", "631", "30.9M"),
        new TopProductItem("5", "Trà sen vàng", "Trà", "520", "21.8M"),
    };
}
