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

@*
    EN: Expense Management — expense categories, add expense form, approval status.
    VI: Quản lý chi phí — danh mục chi phí, thêm chi phí, trạng thái duyệt.
    Design: pencil-design/src/pages/tPOS/admin/expense-management.pen
*@

<PageTitle>Quản lý chi phí — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Quản lý chi phí</h1>
        <p class="admin-topbar__subtitle">Tháng 02/2025 • @_expenses.Length khoản chi</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search" style="width:220px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm chi phí..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Thêm chi phí</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_tab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "all")">
        Tất cả <span class="admin-tab__badge @(_tab == "all" ? "admin-tab__badge--active" : "")">@_expenses.Length</span>
    </button>
    <button class="admin-tab @(_tab == "pending" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "pending")">
        Chờ duyệt <span class="admin-tab__badge">3</span>
    </button>
    <button class="admin-tab @(_tab == "approved" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "approved")">
        Đã duyệt <span class="admin-tab__badge">4</span>
    </button>
    <button class="admin-tab @(_tab == "rejected" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "rejected")">
        Từ chối <span class="admin-tab__badge">1</span>
    </button>
</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(239,68,68,0.125);">
                    <i data-lucide="credit-card" style="color:#EF4444;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">142.5M</div>
            <div class="admin-kpi-card__label">Tổng chi phí tháng</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(245,158,11,0.125);">
                    <i data-lucide="clock" style="color:#F59E0B;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">18.2M</div>
            <div class="admin-kpi-card__label">Chờ duyệt</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="repeat" style="color:#8B5CF6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">68.0M</div>
            <div class="admin-kpi-card__label">Chi phí định kỳ</div>
        </div>
    </div>

    @* Expense Table *@
    <div class="admin-panel">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="list" style="color:var(--admin-orange-primary);"></i>
                Danh sách chi phí
            </h3>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Mô tả</th>
                        <th>Danh mục</th>
                        <th>Cửa hàng</th>
                        <th>Ngày</th>
                        <th>Trạng thái</th>
                        <th style="text-align:right;">Số tiền</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in _expenses)
                    {
                        <tr>
                            <td style="font-weight:600;">@item.Desc</td>
                            <td style="color:var(--admin-text-tertiary);">@item.Category</td>
                            <td>@item.Store</td>
                            <td style="color:var(--admin-text-tertiary);">@item.Date</td>
                            <td>
                                <div class="admin-status-badge @GetStatusClass(item.Status)" style="font-size:10px;padding:2px 8px;">
                                    <span class="admin-status-badge__dot"></span>
                                    @item.Status
                                </div>
                            </td>
                            <td style="text-align:right;font-weight:600;color:#EF4444;">-@item.Amount</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private string _tab = "all";

    private string GetStatusClass(string status) => status switch
    {
        "Đã duyệt" => "admin-status-badge--online",
        "Chờ duyệt" => "admin-status-badge--setup",
        "Từ chối" => "admin-status-badge--offline",
        _ => ""
    };

    private record ExpenseRow(string Desc, string Category, string Store, string Date, string Status, string Amount);
    private readonly ExpenseRow[] _expenses = new[]
    {
        new ExpenseRow("Nhập cà phê Arabica", "Nguyên vật liệu", "Coffee House Q1", "12/02", "Đã duyệt", "8.5M"),
        new ExpenseRow("Tiền thuê T2/2025", "Mặt bằng", "Nhà hàng Q3", "01/02", "Đã duyệt", "15.0M"),
        new ExpenseRow("Sửa máy pha cà phê", "Bảo trì", "Coffee House Q1", "10/02", "Chờ duyệt", "3.2M"),
        new ExpenseRow("Tiền điện T1/2025", "Tiện ích", "Nhà hàng Q3", "05/02", "Đã duyệt", "4.8M"),
        new ExpenseRow("Quảng cáo Facebook", "Marketing", "Tất cả", "08/02", "Chờ duyệt", "6.2M"),
        new ExpenseRow("Đồng phục nhân viên", "Vận hành", "Coffee House Q1", "07/02", "Đã duyệt", "2.4M"),
        new ExpenseRow("Mua bàn ghế mới", "Trang thiết bị", "Nhà hàng Q3", "09/02", "Chờ duyệt", "8.8M"),
        new ExpenseRow("In menu mới", "Marketing", "Tất cả", "06/02", "Từ chối", "1.5M"),
    };
}
