@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><i class="fa fa-sync-alt"></i> System Update</h3>
        </div>
        <div class="card-body">
            <p class="text-muted">
                Pulls the latest code from GitHub (<code>master</code>), runs migrations &amp; seeders,
                fixes file permissions, and rebuilds the cache. Visible to the primary admin only.
            </p>

            <form id="systemUpdateForm" action="{{ route('system.update') }}" method="POST">
                @csrf
                <input type="hidden" name="device_id" id="su_device_id">
                <input type="hidden" name="local_ip" id="su_local_ip">
                <button type="submit" class="btn btn-warning">
                    <i class="fa fa-cloud-download-alt"></i> Update System Now
                </button>
            </form>

            @if (session('system_update_output'))
                <div class="mt-3">
                    <label class="font-weight-bold">
                        Last run output
                        ({{ session('system_update_status') === 'success' ? 'success' : 'failed' }}):
                    </label>
                    <pre
                        style="background:#1e1e1e;color:#d4d4d4;padding:12px;max-height:480px;overflow:auto;font-size:12px;">{{ session('system_update_output') }}</pre>
                </div>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><i class="fa fa-history"></i> Update Click History</h3>
        </div>
        <div class="card-body">
            <p class="text-muted">
                Every time the <strong>Update System Now</strong> button is clicked, the user, their device,
                IP address, LAN IP and (when on the same network) MAC address are recorded here.
            </p>
            <div class="table-responsive">
                <table id="updateLogTable" class="display table table-bordered" style="width: 100% !important;">
                    <thead style="background:#78716c;color:#FFFFFF;">
                        <tr class="text-center">
                            <th scope="col">#</th>
                            <th scope="col">User</th>
                            <th scope="col">Device</th>
                            <th scope="col">IP Address</th>
                            <th scope="col">Local IP</th>
                            <th scope="col">MAC Address</th>
                            <th scope="col">Device ID</th>
                            <th scope="col">Status</th>
                            <th scope="col">Clicked At</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white">
                        @foreach ($logs as $log)
                            <tr>
                                <td>{{ $log->id }}</td>
                                <td>{{ $log->user_name ?? ('User #' . $log->user_id) }}</td>
                                <td>{{ $log->device_label ?? '-' }}</td>
                                <td>{{ $log->ip_address ?? '-' }}</td>
                                <td>{{ $log->local_ip ?? '-' }}</td>
                                <td>{{ $log->mac_address ?? '-' }}</td>
                                <td title="{{ $log->device_id }}">
                                    {{ $log->device_id ? \Illuminate\Support\Str::limit($log->device_id, 12) : '-' }}
                                </td>
                                <td class="text-center">
                                    @if ($log->status === 'success')
                                        <span class="badge badge-success px-2 py-1">Success</span>
                                    @elseif ($log->status === 'error')
                                        <span class="badge badge-danger px-2 py-1">Failed</span>
                                    @else
                                        <span class="badge badge-secondary px-2 py-1">Pending</span>
                                    @endif
                                </td>
                                <td>{{ $log->created_at ? $log->created_at->format('d M Y, h:i A') : '-' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(function () {
            $('#updateLogTable').DataTable({
                responsive: true,
                "iDisplayLength": 25,
                'order': [
                    [0, "desc"]
                ]
            });

            // Persistent per-device id (kept in localStorage so the same browser
            // on the same machine is recognised across clicks).
            function deviceId() {
                try {
                    var id = localStorage.getItem('su_device_id');
                    if (!id) {
                        id = (window.crypto && crypto.randomUUID)
                            ? crypto.randomUUID()
                            : 'dev-' + Date.now().toString(16) + '-' + Math.random().toString(16).slice(2);
                        localStorage.setItem('su_device_id', id);
                    }
                    return id;
                } catch (e) {
                    return '';
                }
            }

            // Best-effort LAN/private IP via WebRTC ICE candidates. Modern
            // browsers may mask it as an mDNS *.local name, in which case we
            // simply store nothing.
            function localIp(timeoutMs) {
                return new Promise(function (resolve) {
                    try {
                        var RTC = window.RTCPeerConnection || window.webkitRTCPeerConnection;
                        if (!RTC) return resolve('');
                        var pc = new RTC({ iceServers: [] });
                        var found = '';
                        pc.createDataChannel('');
                        pc.onicecandidate = function (e) {
                            if (!e || !e.candidate || !e.candidate.candidate) return;
                            var m = e.candidate.candidate.match(/(\d{1,3}(?:\.\d{1,3}){3})/);
                            if (m && !found && m[1] !== '0.0.0.0') found = m[1];
                        };
                        pc.createOffer().then(function (o) { return pc.setLocalDescription(o); }).catch(function () {});
                        setTimeout(function () {
                            try { pc.close(); } catch (e) {}
                            resolve(found);
                        }, timeoutMs);
                    } catch (e) {
                        resolve('');
                    }
                });
            }

            $('#su_device_id').val(deviceId());

            var submitting = false;
            $('#systemUpdateForm').on('submit', function (e) {
                if (submitting) return true; // second pass: let it through
                e.preventDefault();
                if (!confirm('Run system update now? The site may be briefly unavailable.')) {
                    return false;
                }
                var form = this;
                localIp(1500).then(function (ip) {
                    if (ip) $('#su_local_ip').val(ip);
                    submitting = true;
                    form.submit();
                });
                return false;
            });
        });
    </script>
@endsection