@page "/admin/stores/{Id}"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Store detail — overview with KPIs, revenue chart, recent orders, and staff.
    VI: Chi tiết cửa hàng — tổng quan KPI, biểu đồ doanh thu, đơn gần đây, nhân viên.
    Design: pencil-design/src/pages/tPOS/admin/store-detail.pen
*@

<PageTitle>@_storeName — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <button class="admin-icon-btn" style="margin-right:8px;" @onclick="@(() => NavigateTo("stores"))">
            <i data-lucide="arrow-left"></i>
        </button>
        <div>
            <h1 class="admin-topbar__title">@_storeName</h1>
            <p class="admin-topbar__subtitle">@_storeType • @_storeAddress</p>
        </div>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-status-badge admin-status-badge--online">
            <span class="admin-status-badge__dot"></span>
            Đang mở
        </div>
        <button class="admin-btn-secondary" @onclick="@(() => NavigateTo($"stores/{Id}/settings"))">
            <i data-lucide="settings"></i>
            <span>Cài đặt</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="monitor"></i>
            <span>Mở POS</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>+15.3%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">45.2M</div>
            <div class="admin-kpi-card__label">Doanh thu 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(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>+8.7%</span>
                </div>
            </div>
            <div class="admin-kpi-card__value">342</div>
            <div class="admin-kpi-card__label">Đơn hàng 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(139,92,246,0.125);">
                    <i data-lucide="banknote" style="color:#8B5CF6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">132K</div>
            <div class="admin-kpi-card__label">Giá trị TB / đơn</div>
        </div>

        <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="star" style="color:#EC4899;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">4.7</div>
            <div class="admin-kpi-card__label">Đánh giá TB</div>
        </div>
    </div>

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

        @* LEFT: Revenue Chart Placeholder *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="bar-chart-2" style="color:var(--admin-orange-primary);"></i>
                    Doanh thu 7 ngày gần nhất
                </h3>
                <div style="display:flex;gap:8px;">
                    <button class="admin-tab admin-tab--active" style="padding:6px 12px;font-size:12px;">7 ngày</button>
                    <button class="admin-tab" style="padding:6px 12px;font-size:12px;">30 ngày</button>
                    <button class="admin-tab" style="padding:6px 12px;font-size:12px;">Tùy chọn</button>
                </div>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                @* Chart placeholder — bar chart *@
                <div style="display:flex;align-items:flex-end;gap:12px;height:200px;padding:16px 0;">
                    @foreach (var bar in _chartData)
                    {
                        <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;">
                            <div style="width:100%;background:linear-gradient(180deg,var(--admin-orange-primary),rgba(255,92,0,0.4));border-radius:6px 6px 0 0;height:@(bar.Percent)%;min-height:8px;transition:height 0.3s;"></div>
                            <span style="font-size:10px;color:var(--admin-text-tertiary);">@bar.Label</span>
                        </div>
                    }
                </div>
            </div>
        </div>

        @* RIGHT COLUMN *@
        <div style="width:380px;display:flex;flex-direction:column;gap:20px;">

            @* Recent Orders *@
            <div class="admin-panel">
                <div class="admin-panel__header">
                    <h3 class="admin-panel__title">
                        <i data-lucide="shopping-bag" style="color:#3B82F6;"></i>
                        Đơn gần nhất
                    </h3>
                    <a href="/admin/reports" class="admin-panel__action">Tất cả →</a>
                </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 style="display:flex;justify-content:space-between;">
                                    <span class="admin-activity-item__title">#2847</span>
                                    <span style="font-size:13px;font-weight:600;color:var(--admin-orange-primary);">185K</span>
                                </div>
                                <div class="admin-activity-item__time">Hoàn thành • 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 style="display:flex;justify-content:space-between;">
                                    <span class="admin-activity-item__title">#2846</span>
                                    <span style="font-size:13px;font-weight:600;color:var(--admin-orange-primary);">92K</span>
                                </div>
                                <div class="admin-activity-item__time">Đang pha chế • 5 phút trước</div>
                            </div>
                        </div>
                        <div class="admin-activity-item">
                            <span class="admin-activity-dot" style="background-color:#22C55E;"></span>
                            <div class="admin-activity-item__text">
                                <div style="display:flex;justify-content:space-between;">
                                    <span class="admin-activity-item__title">#2845</span>
                                    <span style="font-size:13px;font-weight:600;color:var(--admin-orange-primary);">240K</span>
                                </div>
                                <div class="admin-activity-item__time">Hoàn thành • 12 phút trước</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @* Staff On Shift *@
            <div class="admin-panel" style="flex:1;">
                <div class="admin-panel__header">
                    <h3 class="admin-panel__title">
                        <i data-lucide="users" style="color:#22C55E;"></i>
                        Nhân viên đang ca (@_staffOnShift.Count)
                    </h3>
                </div>
                <div class="admin-panel__body">
                    <div class="admin-activity-list">
                        @foreach (var staff in _staffOnShift)
                        {
                            <div class="admin-activity-item">
                                <div class="admin-user-avatar" style="width:32px;height:32px;font-size:11px;">@staff.Initials</div>
                                <div class="admin-activity-item__text">
                                    <span class="admin-activity-item__title">@staff.Name</span>
                                    <span class="admin-activity-item__time">@staff.Role • từ @staff.StartTime</span>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public string Id { get; set; } = "1";

    private string _storeName = "Coffee House Q1";
    private string _storeType = "Café";
    private string _storeAddress = "123 Nguyễn Huệ, Q1, TP.HCM";

    private record ChartBar(string Label, int Percent);
    private readonly List<ChartBar> _chartData = new()
    {
        new("T2", 65), new("T3", 78), new("T4", 55), new("T5", 82),
        new("T6", 90), new("T7", 95), new("CN", 72)
    };

    private record StaffInfo(string Name, string Initials, string Role, string StartTime);
    private readonly List<StaffInfo> _staffOnShift = new()
    {
        new("Trần Minh", "TM", "Barista", "07:00"),
        new("Lê Thảo", "LT", "Thu ngân", "07:30"),
        new("Nguyễn Hà", "NH", "Phục vụ", "08:00"),
    };
}
