@extends('parts.container')

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.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:3px 10px; border-radius:12px; font-size:13px; font-weight:600; }
    .detail-card { background: var(--bs-body-bg, #fff); border:1px solid #e5e7eb; border-radius:8px; padding:20px; margin-bottom:20px; }
    .detail-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f3f4f6; }
    .detail-row:last-child { border-bottom:none; }
    .detail-label { font-weight:600; color:#6b7280; font-size:13px; }
    .detail-value { font-size:13px; }
    .section-title { font-size:15px; font-weight:700; margin-bottom:12px; color:#374151; }
</style>
@endsection

@section('content')
@php
    $device = $data['device'];
    $statusMap = ['pending_approval'=>'Pending Approval','active'=>'Active','revoked'=>'Revoked','suspended'=>'Suspended'];
    $heartbeatMap = ['online'=>'Online','busy'=>'Busy','low_battery'=>'Low Battery','sim_error'=>'SIM Error','maintenance'=>'Maintenance'];
    $isStale = !$device->last_heartbeat_at || now()->diffInMinutes($device->last_heartbeat_at) > 3;
    $liveStatus = $isStale ? 'offline' : ($device->last_seen_status ?? 'offline');
    $liveStatusLabel = $heartbeatMap[$liveStatus] ?? 'Offline';
@endphp

<div class="row layout-spacing">
    <div class="col-lg-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <a href="{{ route('automation-devices.index') }}" class="btn btn-outline-secondary btn-sm me-2">&larr; Back to Devices</a>
                <h4 class="d-inline-block mb-0">Device: {{ $device->device_id }}</h4>
            </div>
            <div>
                @if($device->status === 'pending_approval')
                    <button class="btn btn-success btn-sm me-2" onclick="approveDevice()">Approve</button>
                @endif
                @if($device->status === 'active')
                    <button class="btn btn-warning btn-sm me-2" onclick="sendCommand('pause')">Pause</button>
                    <button class="btn btn-danger btn-sm me-2" onclick="revokeDevice()">Revoke</button>
                @endif
                @if($device->status === 'revoked' || $device->status === 'suspended')
                    <button class="btn btn-success btn-sm me-2" onclick="approveDevice()">Re-activate</button>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row layout-spacing">
    <!-- Left column: Identity + Status -->
    <div class="col-lg-4">
        <div class="detail-card">
            <div class="section-title">Registration Status</div>
            <div class="detail-row">
                <span class="detail-label">Status</span>
                <span><span class="badge badge-{{ $device->status }}">{{ $statusMap[$device->status] ?? $device->status }}</span></span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Live Status</span>
                <span><span class="badge badge-{{ $liveStatus }}">{{ $liveStatusLabel }}</span></span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Last Heartbeat</span>
                <span class="detail-value">{{ $device->last_heartbeat_at ? $device->last_heartbeat_at->format('Y-m-d H:i:s') : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Token Issued</span>
                <span class="detail-value">{{ $device->token_issued_at ? $device->token_issued_at->format('Y-m-d H:i:s') : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Token Expires</span>
                <span class="detail-value">{{ $device->token_expires_at ? $device->token_expires_at->format('Y-m-d H:i:s') : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Registered</span>
                <span class="detail-value">{{ $device->created_at->format('Y-m-d H:i:s') }}</span>
            </div>
        </div>

        <div class="detail-card">
            <div class="section-title">Linked Provider</div>
            @php $linked = $data['device']->merchantAccount; @endphp
            <div class="detail-row">
                <span class="detail-label">Provider</span>
                <span class="detail-value">
                    @if($linked)
                        <strong>{{ $linked->name }}</strong>
                    @else
                        <span class="text-muted">Not linked</span>
                    @endif
                </span>
            </div>
            <div class="mt-3">
                <select class="form-control form-control-sm mb-2" id="providerSelect">
                    <option value="">— Unlink provider —</option>
                    @foreach($data['automationProviders'] as $p)
                        <option value="{{ $p->uuid }}" {{ ($linked && $linked->uuid === $p->uuid) ? 'selected' : '' }}>
                            {{ $p->name }}
                        </option>
                    @endforeach
                </select>
                <button class="btn btn-outline-primary btn-sm w-100" onclick="saveProviderLink()">
                    Save Provider Link
                </button>
            </div>
        </div>

        <div class="detail-card">
            <div class="section-title">Polling Settings</div>
            <div class="detail-row">
                <span class="detail-label">Poll Interval</span>
                <span class="detail-value">{{ $device->poll_interval_seconds }}s</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Heartbeat Interval</span>
                <span class="detail-value">{{ $device->heartbeat_interval_seconds }}s</span>
            </div>
            <div class="mt-3">
                <button class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#settingsModal">
                    Edit Polling Settings
                </button>
            </div>
        </div>

        <div class="detail-card">
            <div class="section-title">Send Command</div>
            <div class="d-flex gap-2 flex-wrap">
                <button class="btn btn-outline-warning btn-sm" onclick="sendCommand('pause')">Pause</button>
                <button class="btn btn-outline-success btn-sm" onclick="sendCommand('resume')">Resume</button>
                <button class="btn btn-outline-danger btn-sm" onclick="sendCommand('force_logout')">Force Logout</button>
            </div>
            <small class="text-muted mt-2 d-block">Commands are delivered on the next heartbeat.</small>
        </div>
    </div>

    <!-- Middle column: Device Details + SIM Health -->
    <div class="col-lg-4">
        <div class="detail-card">
            <div class="section-title">Device Details</div>
            <div class="detail-row">
                <span class="detail-label">Manufacturer</span>
                <span class="detail-value">{{ $device->manufacturer ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Model</span>
                <span class="detail-value">{{ $device->model ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">OS Version</span>
                <span class="detail-value">{{ $device->os_version ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">App Version</span>
                <span class="detail-value">{{ $device->app_version ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Android ID</span>
                <span class="detail-value" style="font-family:monospace;font-size:12px">{{ $device->android_id ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Wi-Fi MAC</span>
                <span class="detail-value" style="font-family:monospace;font-size:12px">{{ $device->wifi_mac_address ?? '—' }}</span>
            </div>
        </div>

        <div class="detail-card">
            <div class="section-title">SIM &amp; Network</div>
            <div class="detail-row">
                <span class="detail-label">MSISDN</span>
                <span class="detail-value">{{ $device->msisdn ?? '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Network Operator</span>
                <span class="detail-value">{{ $device->network_operator ? ucfirst($device->network_operator) : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Signal (dBm)</span>
                <span class="detail-value">{{ $device->network_signal_dbm !== null ? $device->network_signal_dbm . ' dBm' : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">SIM Balance</span>
                <span class="detail-value">{{ $device->sim_balance !== null ? number_format($device->sim_balance, 2) . ' TZS' : '—' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Battery</span>
                <span class="detail-value">
                    {{ $device->battery_level !== null ? $device->battery_level . '%' : '—' }}
                    @if($device->is_charging) <span class="text-success ms-1">&#9889; Charging</span> @endif
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Active Transaction</span>
                <span class="detail-value">{{ $device->current_transaction_id ?? '—' }}</span>
            </div>
        </div>
    </div>

    <!-- Right column: Pending Commands -->
    <div class="col-lg-4">
        <div class="detail-card">
            <div class="section-title">Pending Commands</div>
            @php $cmds = $device->pending_commands ?? []; @endphp
            @if(count($cmds) === 0)
                <p class="text-muted mb-0">No pending commands.</p>
            @else
                <ul class="mb-0">
                    @foreach($cmds as $cmd)
                        <li><code>{{ $cmd }}</code></li>
                    @endforeach
                </ul>
            @endif
        </div>

        <div class="detail-card">
            <div class="section-title">Recent Automation Transactions</div>
            <div id="recentTxns">
                <p class="text-muted">Loading...</p>
            </div>
        </div>
    </div>
</div>

<!-- Edit Polling Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Polling Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label>Poll Interval (seconds)</label>
                    <input type="number" id="pollInterval" class="form-control" value="{{ $device->poll_interval_seconds }}" min="5" max="300" />
                </div>
                <div class="form-group">
                    <label>Heartbeat Interval (seconds)</label>
                    <input type="number" id="heartbeatInterval" class="form-control" value="{{ $device->heartbeat_interval_seconds }}" min="10" max="600" />
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" onclick="saveSettings()">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const DEVICE_ID = {{ $device->id }};

function approveDevice() {
    if (!confirm('Approve this device?')) return;
    fetch(`/admin/automation-devices/${DEVICE_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');
        location.reload();
    }).catch(err => alert(err.message));
}

function revokeDevice() {
    if (!confirm('Revoke this device? It will stop receiving transactions.')) return;
    fetch(`/admin/automation-devices/${DEVICE_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');
        location.reload();
    }).catch(err => alert(err.message));
}

function sendCommand(cmd) {
    if (!confirm(`Send command "${cmd}" to this device?`)) return;
    fetch(`/admin/automation-devices/${DEVICE_ID}/command`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ command: cmd })
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Failed');
        alert(`Command "${cmd}" queued. It will be delivered on the next heartbeat.`);
        location.reload();
    }).catch(err => alert(err.message));
}

function saveProviderLink() {
    const uuid = document.getElementById('providerSelect').value;
    fetch(`/admin/automation-devices/${DEVICE_ID}/settings`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ merchant_account_uuid: uuid || null })
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Failed');
        location.reload();
    }).catch(err => alert(err.message));
}

function saveSettings() {
    const poll = parseInt(document.getElementById('pollInterval').value);
    const heartbeat = parseInt(document.getElementById('heartbeatInterval').value);
    fetch(`/admin/automation-devices/${DEVICE_ID}/settings`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ poll_interval_seconds: poll, heartbeat_interval_seconds: heartbeat })
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Failed');
        bootstrap.Modal.getInstance(document.getElementById('settingsModal')).hide();
        location.reload();
    }).catch(err => alert(err.message));
}

// Load recent automation transactions for this device
function loadRecentTransactions() {
    fetch(`/admin/transactions/list?automation_device_id=${DEVICE_ID}&limit=10`)
        .then(r => r.json())
        .then(resp => {
            const txns = (resp.data || resp.transactions || []).slice(0, 10);
            const el = document.getElementById('recentTxns');
            if (!txns.length) {
                el.innerHTML = '<p class="text-muted mb-0">No automation transactions yet.</p>';
                return;
            }
            const rows = txns.map(t => `
                <div class="detail-row">
                    <span class="detail-value" style="font-size:12px">${t.uuid || t.transaction_id || '—'}</span>
                    <span><span class="badge badge-${t.automation_status || 'pending'}" style="font-size:11px">${t.automation_status || 'pending'}</span></span>
                </div>
            `).join('');
            el.innerHTML = rows;
        })
        .catch(() => {
            document.getElementById('recentTxns').innerHTML = '<p class="text-muted mb-0">Could not load transactions.</p>';
        });
}

loadRecentTransactions();
</script>
@endsection