@page "/admin/system/devices"
@layout AdminLayout
@inherits AdminBase
@inject PosDataService DataService
@using WebClientTpos.Client.Services

<PageTitle>Thiết bị — aPOS Admin</PageTitle>

<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ị đã đăng ký</p>
    </div>
</div>

<div class="admin-content" style="display:flex;flex-direction:column;gap:20px;">
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
        <div class="admin-stat-card">
            <div class="admin-stat-card__icon" style="background:rgba(34,197,94,0.1);"><i data-lucide="monitor-smartphone" style="color:#22C55E;"></i></div>
            <div class="admin-stat-card__content"><span class="admin-stat-card__value">@_devices.Count(d => d.IsActive)</span><span class="admin-stat-card__label">Đang hoạt động</span></div>
        </div>
        <div class="admin-stat-card">
            <div class="admin-stat-card__icon" style="background:rgba(239,68,68,0.1);"><i data-lucide="monitor-off" style="color:#EF4444;"></i></div>
            <div class="admin-stat-card__content"><span class="admin-stat-card__value">@_devices.Count(d => !d.IsActive)</span><span class="admin-stat-card__label">Không hoạt động</span></div>
        </div>
    </div>

    @if (IsLoading)
    {
        <div style="text-align:center;padding:48px;"><div class="spinner-small" style="width:32px;height:32px;margin:0 auto 16px;"></div></div>
    }
    else if (!_devices.Any())
    {
        <div style="text-align:center;padding:60px 20px;">
            <div style="width:80px;height:80px;border-radius:24px;background:rgba(59,130,246,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;"><i data-lucide="tablet-smartphone" style="width:36px;height:36px;color:#3B82F6;"></i></div>
            <h2 style="font-size:20px;font-weight:700;margin:0 0 8px;color:var(--pos-text-primary, #FFF);">Chưa có thiết bị</h2>
            <p style="font-size:14px;color:var(--admin-text-tertiary);margin:0;">Thiết bị sẽ tự động đăng ký khi nhân viên đăng nhập</p>
        </div>
    }
    else
    {
        <div class="admin-panel">
            <div class="admin-panel__body" style="padding:0;">
                <table class="admin-table" style="width:100%;"><thead><tr>
                    <th style="padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;color:var(--admin-text-tertiary);">Thiết bị</th>
                    <th style="padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;color:var(--admin-text-tertiary);">Nền tảng</th>
                    <th style="padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;color:var(--admin-text-tertiary);">Nhân viên</th>
                    <th style="padding:12px 16px;text-align:center;font-size:12px;text-transform:uppercase;color:var(--admin-text-tertiary);">Trạng thái</th>
                    <th style="padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;color:var(--admin-text-tertiary);">Ngày đăng ký</th>
                </tr></thead><tbody>
                    @foreach (var d in _devices)
                    {
                        <tr style="border-top:1px solid var(--admin-border-subtle);">
                            <td style="padding:12px 16px;font-size:12px;font-family:monospace;">@(d.DeviceToken?[..Math.Min(12, d.DeviceToken.Length)] ?? "—")...</td>
                            <td style="padding:12px 16px;font-weight:600;">@(d.Platform ?? "—")</td>
                            <td style="padding:12px 16px;font-size:14px;">@(d.StaffCode ?? "—")</td>
                            <td style="padding:12px 16px;text-align:center;">
                                <span class="admin-status-badge @(d.IsActive ? "admin-status-badge--online" : "admin-status-badge--offline")" style="font-size:11px;padding:2px 10px;"><span class="admin-status-badge__dot" style="width:5px;height:5px;"></span>@(d.IsActive ? "Active" : "Inactive")</span>
                            </td>
                            <td style="padding:12px 16px;font-size:13px;color:var(--admin-text-tertiary);">@d.CreatedAt.ToString("dd/MM/yyyy")</td>
                        </tr>
                    }
                </tbody></table>
            </div>
        </div>
    }
</div>

@code {
    private List<PosDataService.DeviceInfo> _devices = new();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        IsLoading = true;
        try { _devices = await DataService.GetDevicesAsync(); }
        catch { } finally { IsLoading = false; }
    }
}
