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

@*
    EN: Device management — list of POS terminals, printers, scanners with status (online/offline), store assignment, last seen, battery.
    VI: Quản lý thiết bị — danh sách máy POS, máy in, máy quét với trạng thái, gán cửa hàng, lần cuối kết nối, pin.
    Design: pencil-design/src/pages/tPOS/admin/device-management.pen
*@

<PageTitle>Quản lý thiết bị — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Quản lý thiết bị</h1>
        <p class="admin-topbar__subtitle">@_devices.Count thiết bị • @_devices.Count(d => d.Status == "online") đang hoạt động</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search" style="width:200px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm thiết bị..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Thêm thiết bị</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">@_devices.Count</span>
    </button>
    <button class="admin-tab @(_activeTab == "online" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "online")">
        Online <span class="admin-tab__badge">@_devices.Count(d => d.Status == "online")</span>
    </button>
    <button class="admin-tab @(_activeTab == "offline" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "offline")">
        Offline <span class="admin-tab__badge">@_devices.Count(d => d.Status == "offline")</span>
    </button>
</div>

@* ═══ DEVICE GRID ═══ *@
<div class="admin-content" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;">
    @foreach (var dev in FilteredDevices)
    {
        <div class="admin-staff-card">
            <div class="admin-staff-card__header">
                <div class="admin-kpi-card__icon" style="width:48px;height:48px;border-radius:12px;background-color:@(dev.IconColor)20;">
                    <i data-lucide="@dev.Icon" style="color:@dev.IconColor;width:22px;height:22px;"></i>
                </div>
                <div class="admin-status-badge @(dev.Status == "online" ? "admin-status-badge--online" : "admin-status-badge--offline")">
                    <span class="admin-status-badge__dot"></span>
                    @(dev.Status == "online" ? "Online" : "Offline")
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:16px;font-weight:600;">@dev.Name</span>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">@dev.Type • @dev.Store</span>
            </div>
            <div style="display:flex;gap:8px;">
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@dev.LastSeen</div>
                    <div class="admin-store-stat__label">Lần cuối</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value" style="color:@dev.BatteryColor;">@dev.Battery</div>
                    <div class="admin-store-stat__label">Pin</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@dev.Serial</div>
                    <div class="admin-store-stat__label">S/N</div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    private string _activeTab = "all";

    private List<DeviceItem> FilteredDevices => _activeTab == "all"
        ? _devices
        : _devices.Where(d => d.Status == _activeTab).ToList();

    private record DeviceItem(string Name, string Type, string Icon, string IconColor, string Store,
        string Status, string LastSeen, string Battery, string BatteryColor, string Serial);

    private readonly List<DeviceItem> _devices = new()
    {
        new("POS Terminal #01", "Máy POS", "monitor", "#3B82F6", "Coffee House Q1", "online", "Vừa xong", "85%", "#22C55E", "POS-001"),
        new("POS Terminal #02", "Máy POS", "monitor", "#3B82F6", "Nhà hàng Q3", "online", "Vừa xong", "92%", "#22C55E", "POS-002"),
        new("Máy in bếp", "Máy in", "printer", "#8B5CF6", "Coffee House Q1", "offline", "2 giờ", "—", "var(--admin-text-tertiary)", "PRT-001"),
        new("Máy in bill", "Máy in", "printer", "#8B5CF6", "Coffee House Q1", "online", "Vừa xong", "—", "var(--admin-text-tertiary)", "PRT-002"),
        new("Máy quét QR", "Scanner", "scan-line", "#22C55E", "Nhà hàng Q3", "online", "5 phút", "68%", "#F59E0B", "SCN-001"),
        new("Tablet Order #01", "Tablet", "tablet", "#F59E0B", "Nhà hàng Q3", "online", "Vừa xong", "45%", "#EF4444", "TAB-001"),
        new("POS Terminal #03", "Máy POS", "monitor", "#3B82F6", "Karaoke Star Q7", "offline", "3 ngày", "0%", "#EF4444", "POS-003"),
        new("Máy in bill #02", "Máy in", "printer", "#8B5CF6", "Nhà hàng Q3", "online", "Vừa xong", "—", "var(--admin-text-tertiary)", "PRT-003"),
    };
}
