@extends('parts.container')

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
<style>
    .badge-pending   { background:#f59e0b; color:#fff; }
    .badge-active    { background:#10b981; color:#fff; }
    .badge-revoked   { background:#ef4444; color:#fff; }
    .badge-suspended { background:#6b7280; color:#fff; }
    .badge-online    { background:#10b981; color:#fff; }
    .badge-busy      { background:#3b82f6; color:#fff; }
    .badge-low_battery  { background:#f59e0b; color:#fff; }
    .badge-sim_error    { background:#ef4444; color:#fff; }
    .badge-maintenance  { background:#6b7280; color:#fff; }
    .badge-offline   { background:#9ca3af; color:#fff; }
    .badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:12px; font-weight:600; }
</style>
@endsection

@section('content')
<div class="row layout-spacing">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-header d-flex justify-content-between align-items-center px-3 pt-3">
                <h4 class="mb-0">Automation Devices</h4>
                <div class="d-flex gap-2">
                    <select id="filterStatus" class="form-control form-control-sm" style="width:160px">
                        <option value="">All Statuses</option>
                        <option value="pending_approval">Pending Approval</option>
                        <option value="active">Active</option>
                        <option value="revoked">Revoked</option>
                        <option value="suspended">Suspended</option>
                    </select>
                </div>
            </div>
            <div class="widget-content widget-content-area">
                <div class="table-responsive">
                    <table class="table style-3 dt-table-hover" id="devicesTable">
                        <thead>
                            <tr>
                                <th>Device / MSISDN</th>
                                <th>Linked Provider</th>
                                <th>Model</th>
                                <th>App Version</th>
                                <th>Status</th>
                                <th>Last Seen</th>
                                <th>Last Heartbeat</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let devicesTable = null;

function statusBadge(s) {
    const map = {
        pending_approval: 'Pending Approval',
        active: 'Active',
        revoked: 'Revoked',
        suspended: 'Suspended',
    };
    return `<span class="badge badge-${s}">${map[s] || s}</span>`;
}

function heartbeatBadge(s) {
    const map = {
        online: 'Online',
        busy: 'Busy',
        low_battery: 'Low Battery',
        sim_error: 'SIM Error',
        maintenance: 'Maintenance',
    };
    const key = s || 'offline';
    return `<span class="badge badge-${key}">${map[key] || 'Offline'}</span>`;
}

function fmtDate(d) {
    if (!d) return '—';
    const dt = new Date(d);
    return dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
}

function isStale(ts) {
    if (!ts) return true;
    return (Date.now() - new Date(ts).getTime()) > 3 * 60 * 1000; // > 3 min = stale
}

function loadDevices() {
    const status = document.getElementById('filterStatus').value;
    let url = '/admin/automation-devices/list';
    if (status) url += '?status=' + status;

    fetch(url)
        .then(r => r.json())
        .then(resp => {
            if (!resp.success) throw new Error('Failed to load devices');
            const data = resp.data || [];

            if (!devicesTable) {
                devicesTable = $('#devicesTable').DataTable({
                    data,
                    columns: [
                        { data: null, render: r => `<div><strong>${r.device_id}</strong><br><small class="text-muted">${r.msisdn || '—'}</small></div>` },
                        { data: null, render: r => r.merchant_account ? r.merchant_account.name : `<span class="text-muted">Not linked</span>` },
                        { data: null, render: r => `${r.manufacturer || ''} ${r.model || ''}`.trim() || '—' },
                        { data: 'app_version', render: v => v || '—' },
                        { data: 'status', render: statusBadge },
                        { data: null, render: r => {
                            if (isStale(r.last_heartbeat_at)) return heartbeatBadge('offline');
                            return heartbeatBadge(r.last_seen_status);
                        }},
                        { data: 'last_heartbeat_at', render: fmtDate },
                        { data: null, orderable: false, searchable: false, render: r => {
                            const approveBtn = r.status === 'pending_approval'
                                ? `<button class="btn btn-success btn-sm me-1" onclick="approveDevice(${r.id})">Approve</button>`
                                : '';
                            const revokeBtn = r.status === 'active'
                                ? `<button class="btn btn-danger btn-sm me-1" onclick="revokeDevice(${r.id})">Revoke</button>`
                                : '';
                            return `
                                ${approveBtn}
                                ${revokeBtn}
                                <a href="/admin/automation-devices/${r.id}" class="btn btn-primary btn-sm">View</a>
                            `;
                        }},
                    ],
                    dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                         "<'table-responsive'tr>" +
                         "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                    stripeClasses: [],
                    lengthMenu: [10, 25, 50],
                    pageLength: 25,
                    order: [[6, 'desc']],
                });
            } else {
                devicesTable.clear();
                devicesTable.rows.add(data);
                devicesTable.draw();
            }
        })
        .catch(err => alert(err.message));
}

function approveDevice(id) {
    if (!confirm('Approve this device? It will start receiving transactions.')) return;
    fetch(`/admin/automation-devices/${id}/approve`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Failed');
        loadDevices();
    }).catch(err => alert(err.message));
}

function revokeDevice(id) {
    if (!confirm('Revoke this device? It will no longer receive transactions.')) return;
    fetch(`/admin/automation-devices/${id}/revoke`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Failed');
        loadDevices();
    }).catch(err => alert(err.message));
}

document.getElementById('filterStatus').addEventListener('change', loadDevices);

loadDevices();
</script>
@endsection