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

@*
    EN: Admin Dashboard — overview of business metrics, stores, alerts, and recent activity.
    VI: Dashboard Admin — tổng quan chỉ số kinh doanh, cửa hàng, cảnh báo, hoạt động gần đây.
    Design: pencil-design/src/pages/tPOS/admin/admin-dashboard.pen
*@

<PageTitle>Dashboard — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Dashboard</h1>
        <p class="admin-topbar__subtitle">Tổng quan kinh doanh • @GetTodayFormatted()</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm kiếm..." @bind="SearchQuery" />
        </div>
        <button class="admin-icon-btn" title="Thông báo">
            <i data-lucide="bell"></i>
            <span class="admin-icon-btn__dot"></span>
        </button>
        <button class="admin-btn-primary" @onclick="@(() => NavigateTo("stores/create"))">
            <i data-lucide="plus"></i>
            <span>Tạo cửa hàng</span>
        </button>
    </div>
</div>

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

    @* ── KPI ROW ── *@
    <div class="admin-kpi-row">
        @* KPI 1: Tổng doanh thu *@
        <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">128.5M</div>
            <div class="admin-kpi-card__label">Tổng doanh thu</div>
        </div>

        @* KPI 2: Tổng đơn hàng *@
        <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 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">1,247</div>
            <div class="admin-kpi-card__label">Tổng đơn hàng</div>
        </div>

        @* KPI 3: Cửa hàng hoạt động *@
        <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="store" style="color:#8B5CF6;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <span>3 online</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">3</div>
            <div class="admin-kpi-card__label">Cửa hàng hoạt động</div>
        </div>

        @* KPI 4: Nhân viên online *@
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(236,72,153,0.125);">
                    <i data-lucide="users" style="color:#EC4899;"></i>
                </div>
                <div class="admin-kpi-card__badge admin-kpi-card__badge--up">
                    <i data-lucide="arrow-up"></i>
                    <span>+22.7%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">12</div>
            <div class="admin-kpi-card__label">Nhân viên online</div>
        </div>
    </div>

    @* ── BOTTOM ROW: Store Overview + Right Column ── *@
    <div style="display:flex;gap:24px;flex:1;min-height:0;">

        @* ── LEFT: Store Overview ── *@
        <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>
                    Cửa hàng của bạn
                </h3>
                <a href="/admin/stores" class="admin-panel__action">Quản lý tất cả →</a>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @* Store 1: Coffee House Q1 *@
                <div class="admin-store-card">
                    <div class="admin-store-card__top">
                        <div class="admin-store-card__info">
                            <div class="admin-store-card__avatar" style="background-color:rgba(255,92,0,0.125);">
                                <i data-lucide="coffee" style="color:var(--admin-orange-primary);"></i>
                            </div>
                            <div>
                                <div class="admin-store-card__name">Coffee House Q1</div>
                                <div class="admin-store-card__type">Café • 123 Nguyễn Huệ, Q1</div>
                            </div>
                        </div>
                        <div class="admin-status-badge admin-status-badge--online">
                            <span class="admin-status-badge__dot"></span>
                            Đang mở
                        </div>
                    </div>
                    <div class="admin-store-card__stats">
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">45.2M</div>
                            <div class="admin-store-stat__label">Doanh thu</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">342</div>
                            <div class="admin-store-stat__label">Đơn hàng</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">5</div>
                            <div class="admin-store-stat__label">Nhân viên</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">48</div>
                            <div class="admin-store-stat__label">Sản phẩm</div>
                        </div>
                    </div>
                </div>

                @* Store 2: Nhà hàng Q3 *@
                <div class="admin-store-card">
                    <div class="admin-store-card__top">
                        <div class="admin-store-card__info">
                            <div class="admin-store-card__avatar" style="background-color:rgba(59,130,246,0.125);">
                                <i data-lucide="utensils" style="color:#3B82F6;"></i>
                            </div>
                            <div>
                                <div class="admin-store-card__name">Nhà hàng Q3</div>
                                <div class="admin-store-card__type">Restaurant • 456 Lê Văn Sỹ, Q3</div>
                            </div>
                        </div>
                        <div class="admin-status-badge admin-status-badge--online">
                            <span class="admin-status-badge__dot"></span>
                            Đang mở
                        </div>
                    </div>
                    <div class="admin-store-card__stats">
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">62.8M</div>
                            <div class="admin-store-stat__label">Doanh thu</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">185</div>
                            <div class="admin-store-stat__label">Đơn hàng</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">8</div>
                            <div class="admin-store-stat__label">Nhân viên</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">72</div>
                            <div class="admin-store-stat__label">Sản phẩm</div>
                        </div>
                    </div>
                </div>

                @* Store 3: Karaoke Star Q7 *@
                <div class="admin-store-card">
                    <div class="admin-store-card__top">
                        <div class="admin-store-card__info">
                            <div class="admin-store-card__avatar" style="background-color:rgba(139,92,246,0.125);">
                                <i data-lucide="mic" style="color:#8B5CF6;"></i>
                            </div>
                            <div>
                                <div class="admin-store-card__name">Karaoke Star Q7</div>
                                <div class="admin-store-card__type">Karaoke • 789 Nguyễn Thị Thập, Q7</div>
                            </div>
                        </div>
                        <div class="admin-status-badge admin-status-badge--setup">
                            <span class="admin-status-badge__dot"></span>
                            Thiết lập
                        </div>
                    </div>
                    <div class="admin-store-card__stats">
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">--</div>
                            <div class="admin-store-stat__label">Doanh thu</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">--</div>
                            <div class="admin-store-stat__label">Đơn hàng</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">0</div>
                            <div class="admin-store-stat__label">Nhân viên</div>
                        </div>
                        <div class="admin-store-stat">
                            <div class="admin-store-stat__value">0</div>
                            <div class="admin-store-stat__label">Sản phẩm</div>
                        </div>
                    </div>
                    <button class="admin-store-card__cta admin-store-card__cta--warning">
                        <i data-lucide="settings" style="width:14px;height:14px;"></i>
                        Hoàn tất thiết lập
                    </button>
                </div>
            </div>
        </div>

        @* ── RIGHT COLUMN: Alerts + Activity ── *@
        <div style="width:380px;display:flex;flex-direction:column;gap:20px;">
            @* Alerts Panel *@
            <div class="admin-panel">
                <div class="admin-panel__header">
                    <h3 class="admin-panel__title">
                        <i data-lucide="alert-triangle" style="color:#F59E0B;"></i>
                        Cảnh báo
                        <span class="admin-badge-count admin-badge-count--danger">4</span>
                    </h3>
                </div>
                <div class="admin-panel__body">
                    <div class="admin-alert-list">
                        <div class="admin-alert-item admin-alert-item--danger">
                            <i data-lucide="package-x" style="color:#EF4444;"></i>
                            <div class="admin-alert-item__text">
                                <div class="admin-alert-item__title">5 sản phẩm sắp hết hàng</div>
                                <div class="admin-alert-item__sub">Coffee House Q1</div>
                            </div>
                        </div>
                        <div class="admin-alert-item admin-alert-item--warning">
                            <i data-lucide="clock" style="color:#F59E0B;"></i>
                            <div class="admin-alert-item__text">
                                <div class="admin-alert-item__title">Ca tối thiếu 1 nhân viên</div>
                                <div class="admin-alert-item__sub">Nhà hàng Q3 • Ngày mai</div>
                            </div>
                        </div>
                        <div class="admin-alert-item admin-alert-item--info">
                            <i data-lucide="printer" style="color:#3B82F6;"></i>
                            <div class="admin-alert-item__text">
                                <div class="admin-alert-item__title">Máy in mất kết nối</div>
                                <div class="admin-alert-item__sub">Coffee House Q1 • Kitchen</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @* Recent Activity Panel *@
            <div class="admin-panel" style="flex:1;">
                <div class="admin-panel__header">
                    <h3 class="admin-panel__title">
                        <i data-lucide="activity" style="color:#22C55E;"></i>
                        Hoạt động gần đây
                    </h3>
                </div>
                <div class="admin-panel__body">
                    <div class="admin-activity-list">
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#22C55E;"></span>
                            <div class="admin-activity-item__text">
                                <div class="admin-activity-item__title">Đơn #2847 hoàn thành</div>
                                <div class="admin-activity-item__time">Coffee House Q1 • 2 phút trước</div>
                            </div>
                        </div>
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#3B82F6;"></span>
                            <div class="admin-activity-item__text">
                                <div class="admin-activity-item__title">Nguyễn Văn A clock-in</div>
                                <div class="admin-activity-item__time">Nhà hàng Q3 • 5 phút trước</div>
                            </div>
                        </div>
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#F59E0B;"></span>
                            <div class="admin-activity-item__text">
                                <div class="admin-activity-item__title">Nhập kho 15 sản phẩm</div>
                                <div class="admin-activity-item__time">Coffee House Q1 • 12 phút trước</div>
                            </div>
                        </div>
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#8B5CF6;"></span>
                            <div class="admin-activity-item__text">
                                <div class="admin-activity-item__title">Cập nhật menu buổi tối</div>
                                <div class="admin-activity-item__time">Nhà hàng Q3 • 28 phút trước</div>
                            </div>
                        </div>
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#EC4899;"></span>
                            <div class="admin-activity-item__text">
                                <div class="admin-activity-item__title">Khách VIP mới: Trần Thị B</div>
                                <div class="admin-activity-item__time">Hệ thống • 45 phút trước</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
