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

@*
    EN: Store list — all stores with tabs, search, filter.
    VI: Danh sách cửa hàng — tất cả cửa hàng với tabs, tìm kiếm, lọc.
    Design: pencil-design/src/pages/tPOS/admin/store-list.pen
*@

<PageTitle>Quản lý cửa hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Quản lý cửa hàng</h1>
        <p class="admin-topbar__subtitle">Tạo và quản lý tất cả cửa hàng trong hệ thống</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="filter"></i>
            <span>Bộ lọc</span>
        </button>
        <div class="admin-search" style="width:260px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm cửa hàng..." @bind="SearchQuery" />
        </div>
        <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>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_activeTab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "all")">
        Tất cả
        <span class="admin-tab__badge admin-tab__badge--active">5</span>
    </button>
    <button class="admin-tab @(_activeTab == "active" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "active")">
        Hoạt động
        <span class="admin-tab__badge">3</span>
    </button>
    <button class="admin-tab @(_activeTab == "setup" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "setup")">
        Thiết lập
        <span class="admin-tab__badge">1</span>
    </button>
    <button class="admin-tab @(_activeTab == "paused" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "paused")">
        Tạm dừng
        <span class="admin-tab__badge">1</span>
    </button>
</div>

@* ═══ STORE LIST ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:16px;padding:28px 32px;">

    @* Store 1: Coffee House Q1 — Active *@
    <div class="admin-store-list-card" @onclick="@(() => NavigateTo("stores/1"))">
        <div class="admin-store-list-card__left">
            <div class="admin-store-card__avatar" style="width:52px;height:52px;background-color:rgba(255,92,0,0.125);border-radius:14px;">
                <i data-lucide="coffee" style="color:var(--admin-orange-primary);width:24px;height:24px;"></i>
            </div>
            <div class="admin-store-list-card__info">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="font-size:16px;font-weight:600;">Coffee House Q1</span>
                    <div class="admin-status-badge admin-status-badge--online">
                        <span class="admin-status-badge__dot"></span>
                        Hoạt động
                    </div>
                </div>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">Café • 123 Nguyễn Huệ, Q1, TP.HCM</span>
            </div>
        </div>
        <div class="admin-store-list-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 class="admin-store-list-card__actions">
            <button class="admin-icon-btn" title="Cài đặt" @onclick:stopPropagation @onclick="@(() => NavigateTo("stores/1/settings"))">
                <i data-lucide="settings"></i>
            </button>
            <button class="admin-icon-btn" title="Xem chi tiết">
                <i data-lucide="chevron-right"></i>
            </button>
        </div>
    </div>

    @* Store 2: Nhà hàng Q3 — Active *@
    <div class="admin-store-list-card" @onclick="@(() => NavigateTo("stores/2"))">
        <div class="admin-store-list-card__left">
            <div class="admin-store-card__avatar" style="width:52px;height:52px;background-color:rgba(59,130,246,0.125);border-radius:14px;">
                <i data-lucide="utensils" style="color:#3B82F6;width:24px;height:24px;"></i>
            </div>
            <div class="admin-store-list-card__info">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="font-size:16px;font-weight:600;">Nhà hàng Q3</span>
                    <div class="admin-status-badge admin-status-badge--online">
                        <span class="admin-status-badge__dot"></span>
                        Hoạt động
                    </div>
                </div>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">Restaurant • 456 Lê Văn Sỹ, Q3, TP.HCM</span>
            </div>
        </div>
        <div class="admin-store-list-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 class="admin-store-list-card__actions">
            <button class="admin-icon-btn" title="Cài đặt" @onclick:stopPropagation @onclick="@(() => NavigateTo("stores/2/settings"))">
                <i data-lucide="settings"></i>
            </button>
            <button class="admin-icon-btn" title="Xem chi tiết">
                <i data-lucide="chevron-right"></i>
            </button>
        </div>
    </div>

    @* Store 3: Café Thủ Đức — Active *@
    <div class="admin-store-list-card" @onclick="@(() => NavigateTo("stores/3"))">
        <div class="admin-store-list-card__left">
            <div class="admin-store-card__avatar" style="width:52px;height:52px;background-color:rgba(236,72,153,0.125);border-radius:14px;">
                <i data-lucide="coffee" style="color:#EC4899;width:24px;height:24px;"></i>
            </div>
            <div class="admin-store-list-card__info">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="font-size:16px;font-weight:600;">Café Thủ Đức</span>
                    <div class="admin-status-badge admin-status-badge--online">
                        <span class="admin-status-badge__dot"></span>
                        Hoạt động
                    </div>
                </div>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">Café • 12 Võ Văn Ngân, Thủ Đức</span>
            </div>
        </div>
        <div class="admin-store-list-card__stats">
            <div class="admin-store-stat">
                <div class="admin-store-stat__value">20.5M</div>
                <div class="admin-store-stat__label">Doanh thu</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value">156</div>
                <div class="admin-store-stat__label">Đơn hàng</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value">3</div>
                <div class="admin-store-stat__label">Nhân viên</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value">35</div>
                <div class="admin-store-stat__label">Sản phẩm</div>
            </div>
        </div>
        <div class="admin-store-list-card__actions">
            <button class="admin-icon-btn" title="Cài đặt" @onclick:stopPropagation @onclick="@(() => NavigateTo("stores/3/settings"))">
                <i data-lucide="settings"></i>
            </button>
            <button class="admin-icon-btn" title="Xem chi tiết">
                <i data-lucide="chevron-right"></i>
            </button>
        </div>
    </div>

    @* Store 4: Karaoke Star Q7 — Setup *@
    <div class="admin-store-list-card" @onclick="@(() => NavigateTo("stores/4"))">
        <div class="admin-store-list-card__left">
            <div class="admin-store-card__avatar" style="width:52px;height:52px;background-color:rgba(139,92,246,0.125);border-radius:14px;">
                <i data-lucide="mic" style="color:#8B5CF6;width:24px;height:24px;"></i>
            </div>
            <div class="admin-store-list-card__info">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="font-size:16px;font-weight:600;">Karaoke Star Q7</span>
                    <div class="admin-status-badge admin-status-badge--setup">
                        <span class="admin-status-badge__dot"></span>
                        Thiết lập
                    </div>
                </div>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">Karaoke • 789 Nguyễn Thị Thập, Q7</span>
            </div>
        </div>
        <div class="admin-store-list-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>
        <div class="admin-store-list-card__actions">
            <button class="admin-btn-primary" style="font-size:12px;padding:6px 12px;" @onclick:stopPropagation @onclick="@(() => NavigateTo("stores/4/settings"))">
                <i data-lucide="settings" style="width:14px;height:14px;"></i>
                Hoàn tất thiết lập
            </button>
        </div>
    </div>

    @* Store 5: Spa Garden Q2 — Paused *@
    <div class="admin-store-list-card admin-store-list-card--paused" @onclick="@(() => NavigateTo("stores/5"))">
        <div class="admin-store-list-card__left">
            <div class="admin-store-card__avatar" style="width:52px;height:52px;background-color:rgba(245,158,11,0.125);border-radius:14px;">
                <i data-lucide="sparkles" style="color:#F59E0B;width:24px;height:24px;"></i>
            </div>
            <div class="admin-store-list-card__info">
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="font-size:16px;font-weight:600;">Spa Garden Q2</span>
                    <div class="admin-status-badge admin-status-badge--paused">
                        <span class="admin-status-badge__dot"></span>
                        Tạm dừng
                    </div>
                </div>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">Spa • 321 Nguyễn Đình Chiểu, Q2</span>
            </div>
        </div>
        <div class="admin-store-list-card__stats">
            <div class="admin-store-stat">
                <div class="admin-store-stat__value" style="opacity:0.5;">12.1M</div>
                <div class="admin-store-stat__label">Doanh thu</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value" style="opacity:0.5;">89</div>
                <div class="admin-store-stat__label">Đơn hàng</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value" style="opacity:0.5;">2</div>
                <div class="admin-store-stat__label">Nhân viên</div>
            </div>
            <div class="admin-store-stat">
                <div class="admin-store-stat__value" style="opacity:0.5;">24</div>
                <div class="admin-store-stat__label">Sản phẩm</div>
            </div>
        </div>
        <div class="admin-store-list-card__actions">
            <button class="admin-btn-secondary" style="font-size:12px;padding:6px 12px;" @onclick:stopPropagation>
                <i data-lucide="play" style="width:14px;height:14px;"></i>
                Kích hoạt lại
            </button>
        </div>
    </div>
</div>

@code {
    private string _activeTab = "all";
}
