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

@*
    EN: Financial Overview — revenue KPIs, expense breakdown, recent transactions.
    VI: Tổng quan tài chính — KPI doanh thu, phân tích chi phí, giao dịch gần đây.
    Design: pencil-design/src/pages/tPOS/admin/financial-overview.pen
*@

<PageTitle>Tài chính — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Tổng quan tài chính</h1>
        <p class="admin-topbar__subtitle">Tháng 02/2025 • Tất cả cửa hàng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="calendar"></i>
            <span>02/2025</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(239,68,68,0.125);">
                    <i data-lucide="trending-down" style="color:#EF4444;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--down">
                    <i data-lucide="arrow-up"></i>
                    <span>+5.3%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">142.5M</div>
            <div class="admin-kpi-card__label">Tổng chi phí</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="wallet" style="color:#3B82F6;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+24.1%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">114.3M</div>
            <div class="admin-kpi-card__label">Lợi nhuận ròng</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="percent" style="color:#8B5CF6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">44.5%</div>
            <div class="admin-kpi-card__label">Biên lợi nhuận</div>
        </div>
    </div>

    @* ── BOTTOM: Expense Breakdown + Transactions ── *@
    <div style="display:flex;gap:24px;flex:1;min-height:0;">

        @* ── LEFT: Expense Breakdown ── *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="pie-chart" style="color:var(--admin-orange-primary);"></i>
                    Phân tích chi phí
                </h3>
                <a href="/admin/finance/expenses" class="admin-panel__action">Chi tiết →</a>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @foreach (var exp in _expenses)
                {
                    <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:@exp.Color;"></div>
                            <span style="font-size:13px;">@exp.Category</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:16px;">
                            <span style="font-size:13px;font-weight:600;">@exp.Amount</span>
                            <span style="font-size:11px;color:var(--admin-text-tertiary);">@exp.Percent</span>
                        </div>
                    </div>
                }
            </div>
        </div>

        @* ── RIGHT: Recent Transactions ── *@
        <div class="admin-panel" style="flex:1.2;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="receipt" style="color:#22C55E;"></i>
                    Giao dịch gần đây
                </h3>
            </div>
            <div class="admin-panel__body" style="padding:0;">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Mã GD</th>
                            <th>Mô tả</th>
                            <th>Cửa hàng</th>
                            <th>Loại</th>
                            <th style="text-align:right;">Số tiền</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var tx in _transactions)
                        {
                            <tr>
                                <td style="font-weight:600;">@tx.Code</td>
                                <td>@tx.Desc</td>
                                <td style="color:var(--admin-text-tertiary);">@tx.Store</td>
                                <td>
                                    <div class="admin-status-badge @(tx.IsIncome ? "admin-status-badge--online" : "admin-status-badge--offline")" style="font-size:10px;padding:2px 8px;">
                                        @(tx.IsIncome ? "Thu" : "Chi")
                                    </div>
                                </td>
                                <td style="text-align:right;font-weight:600;color:@(tx.IsIncome ? "#22C55E" : "#EF4444");">@tx.Amount</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@code {
    private record ExpenseItem(string Category, string Amount, string Percent, string Color);
    private readonly ExpenseItem[] _expenses = new[]
    {
        new ExpenseItem("Nguyên vật liệu", "52.4M", "36.8%", "#FF5C00"),
        new ExpenseItem("Lương nhân viên", "38.6M", "27.1%", "#3B82F6"),
        new ExpenseItem("Thuê mặt bằng", "28.0M", "19.6%", "#8B5CF6"),
        new ExpenseItem("Tiện ích (điện, nước)", "12.5M", "8.8%", "#F59E0B"),
        new ExpenseItem("Marketing", "6.2M", "4.3%", "#EC4899"),
        new ExpenseItem("Khác", "4.8M", "3.4%", "#22C55E"),
    };

    private record TransactionItem(string Code, string Desc, string Store, bool IsIncome, string Amount);
    private readonly TransactionItem[] _transactions = new[]
    {
        new TransactionItem("GD-2851", "Doanh thu bán hàng", "Coffee House Q1", true, "+8.5M"),
        new TransactionItem("GD-2850", "Nhập nguyên liệu", "Coffee House Q1", false, "-3.2M"),
        new TransactionItem("GD-2849", "Doanh thu bán hàng", "Nhà hàng Q3", true, "+12.4M"),
        new TransactionItem("GD-2848", "Tiền thuê T2/2025", "Nhà hàng Q3", false, "-15.0M"),
        new TransactionItem("GD-2847", "Doanh thu bán hàng", "Coffee House Q1", true, "+6.8M"),
        new TransactionItem("GD-2846", "Lương nhân viên", "Tất cả", false, "-38.6M"),
    };
}
