@extends('backend.app')

@section('title', 'System Health')

@push('style')
    <style>
        .sh-stat {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 1.25rem;
            background: #fff;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: box-shadow .25s, border-color .25s;
        }

        .sh-stat:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
        }

        .sh-icon {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .sh-ok      { background: #e6f9ef; color: #16a34a; }
        .sh-warn    { background: #fff4e0; color: #d97706; }
        .sh-down    { background: #fde8e8; color: #dc2626; }
        .sh-unknown { background: #eef0f3; color: #6c757d; }

        .sh-label {
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #6c757d;
            font-weight: 600;
        }

        .sh-value {
            font-size: 1.15rem;
            font-weight: 600;
            line-height: 1.3;
        }

        .sh-sub {
            font-size: .75rem;
            color: #8b929a;
        }

        .sh-table td {
            padding: .5rem .75rem;
            vertical-align: middle;
            border-color: #f1f3f5;
        }

        .sh-table td:first-child {
            color: #6c757d;
            width: 42%;
        }

        .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .82rem;
            word-break: break-all;
        }

        .sh-log {
            list-style: none;
            margin: 0;
            padding: 0;
            max-height: 260px;
            overflow-y: auto;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .8rem;
        }

        .sh-log li {
            padding: .35rem 0;
            border-bottom: 1px solid #f1f3f5;
            display: flex;
            gap: .6rem;
        }

        .sh-log li:last-child { border-bottom: 0; }
        .sh-t { color: #adb5bd; flex: 0 0 auto; }
        .sh-ok-text { color: #16a34a; }
        .sh-err-text { color: #dc2626; }

        .sh-env-banner {
            border-radius: 12px;
            padding: .85rem 1.15rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .75rem 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid transparent;
        }

        .sh-env-local  { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
        .sh-env-server { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-body">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                    <div>
                        <h4 class="fw-bold mb-1">System Health</h4>
                        <p class="text-muted mb-0">
                            Queue worker, scheduler, and integrations — tested live against the machine serving this page.
                        </p>
                    </div>
                    <div class="d-flex gap-2">
                        <button id="btn-run-all" class="btn btn-primary btn-sm">
                            <i class="fas fa-play me-1"></i> Run all checks
                        </button>
                        <button id="btn-refresh" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-rotate me-1"></i> Refresh
                        </button>
                    </div>
                </div>

                {{-- Which machine am I looking at? --}}
                <div class="sh-env-banner {{ $server['is_local'] ? 'sh-env-local' : 'sh-env-server' }}">
                    <span>
                        <i class="fas {{ $server['is_local'] ? 'fa-laptop-code' : 'fa-server' }} me-2"></i>
                        <strong>{{ $server['is_local'] ? 'Local environment' : 'Server environment' }}</strong>
                    </span>
                    <span class="mono">{{ $server['hostname'] }}</span>
                    <span>env: <strong>{{ $server['environment'] }}</strong></span>
                    <span>{{ $server['server_software'] }}</span>
                    <span>PHP {{ $server['php_version'] }} · Laravel {{ $server['laravel_version'] }}</span>
                    <span id="server-time">{{ $server['server_time'] }} ({{ $server['timezone'] }})</span>
                </div>

                {{-- At-a-glance --}}
                <div class="row g-3 mb-4">
                    @foreach ([
                        ['key' => 'queue',     'label' => 'Queue worker',    'icon' => 'fa-layer-group'],
                        ['key' => 'cron',      'label' => 'Scheduler · cron','icon' => 'fa-clock'],
                        ['key' => 'db',        'label' => 'Database',        'icon' => 'fa-database'],
                        ['key' => 'whatsapp',  'label' => 'WhatsApp · Twilio','icon' => 'fa-whatsapp', 'brand' => true],
                        ['key' => 'mail',      'label' => 'Mail · SMTP',     'icon' => 'fa-envelope'],
                        ['key' => 'stripe',    'label' => 'Payments · Stripe','icon' => 'fa-credit-card'],
                    ] as $card)
                        <div class="col-xl-2 col-md-4 col-sm-6">
                            <div class="sh-stat">
                                <div class="sh-icon sh-unknown" id="stat-icon-{{ $card['key'] }}">
                                    <i class="{{ ($card['brand'] ?? false) ? 'fab' : 'fas' }} {{ $card['icon'] }}"></i>
                                </div>
                                <div>
                                    <div class="sh-label">{{ $card['label'] }}</div>
                                    <div class="sh-value" id="stat-{{ $card['key'] }}">Checking…</div>
                                    <div class="sh-sub" id="sub-{{ $card['key'] }}">&nbsp;</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row g-3 mb-3">
                    {{-- Queue --}}
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">Queue worker</h5>
                                <button id="btn-queue" class="btn btn-sm btn-primary">Test queue</button>
                            </div>
                            <div class="card-body p-0">
                                <table class="table sh-table mb-0">
                                    <tbody>
                                        <tr><td>Connection</td><td class="mono" id="queue-connection">—</td></tr>
                                        <tr><td>Pending jobs</td><td id="queue-pending">—</td></tr>
                                        <tr><td>Notification queue</td><td id="queue-notifications">—</td></tr>
                                        <tr><td>Failed jobs</td><td id="queue-failed">—</td></tr>
                                        <tr><td>Oldest waiting job</td><td id="queue-oldest">—</td></tr>
                                        <tr><td>Last test</td><td id="queue-result">not tested</td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer text-muted small">
                                Booking confirmations, reminders and all WhatsApp sends run here. The test job must be
                                picked up by <span class="mono">queue:work</span> within 10 seconds.
                            </div>
                        </div>
                    </div>

                    {{-- Scheduler --}}
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">Scheduler</h5>
                                <span id="cron-badge" class="badge bg-secondary">checking…</span>
                            </div>
                            <div class="card-body p-0">
                                <table class="table sh-table mb-0">
                                    <tbody>
                                        <tr><td>Heartbeat</td><td id="cron-heartbeat">—</td></tr>
                                        <tr><td>Expected</td><td>every 60 seconds</td></tr>
                                        <tr><td>Command</td><td class="mono" id="cron-command">—</td></tr>
                                        <tr><td>Checked at</td><td id="status-time">—</td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer text-muted small">
                                Drives 1-hour reminders, day-before reminders, follow-ups, trial and renewal
                                notices, and weekly performance alerts.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    {{-- Integrations --}}
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">External services</h5>
                                <button id="btn-mail" class="btn btn-sm btn-outline-primary">Send test email</button>
                            </div>
                            <div class="card-body p-0">
                                <table class="table sh-table mb-0">
                                    <tbody>
                                        <tr><td>Twilio endpoint</td><td id="wa-endpoint">—</td></tr>
                                        <tr><td>WhatsApp sender</td><td class="mono" id="wa-from">—</td></tr>
                                        <tr><td>Templates</td><td id="wa-templates">—</td></tr>
                                        <tr><td>Mailer</td><td class="mono" id="mail-mailer">—</td></tr>
                                        <tr><td>SMTP host</td><td class="mono" id="mail-host">—</td></tr>
                                        <tr><td>Stripe</td><td id="stripe-mode">—</td></tr>
                                        <tr><td>Stripe webhook</td><td id="stripe-webhook">—</td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer text-muted small">
                                Reachability is a TCP connection test from <em>this</em> server — it detects firewall and
                                DNS problems without spending API quota.
                            </div>
                        </div>
                    </div>

                    {{-- Infrastructure --}}
                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-header"><h5 class="card-title mb-0">Infrastructure</h5></div>
                            <div class="card-body p-0">
                                <table class="table sh-table mb-0">
                                    <tbody>
                                        <tr><td>Database</td><td class="mono" id="db-target">—</td></tr>
                                        <tr><td>DB version</td><td class="mono" id="db-version">—</td></tr>
                                        <tr><td>DB latency</td><td id="db-latency">—</td></tr>
                                        <tr><td>Cache driver</td><td class="mono" id="cache-driver">—</td></tr>
                                        <tr><td>Disk usage</td><td id="disk-usage">—</td></tr>
                                        <tr><td>Storage writable</td><td id="storage-writable">—</td></tr>
                                        <tr>
                                            <td>Debug mode</td>
                                            <td>
                                                <span class="badge {{ $server['debug'] ? 'bg-warning text-dark' : 'bg-success' }}">
                                                    {{ $server['debug'] ? 'on' : 'off' }}
                                                </span>
                                                @if ($server['debug'] && !$server['is_local'])
                                                    <span class="text-danger small ms-1">should be off in production</span>
                                                @endif
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Activity --}}
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Activity</h5>
                        <button id="btn-clear-log" class="btn btn-sm btn-outline-secondary">Clear</button>
                    </div>
                    <div class="card-body">
                        <ul id="event-log" class="sh-log">
                            <li class="sh-log-empty text-muted">Checks will report here.</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        const shCfg = {
            statusUrl: "{{ route('system-health.status') }}",
            testQueueUrl: "{{ route('system-health.test-queue') }}",
            testMailUrl: "{{ route('system-health.test-mail') }}",
            csrf: "{{ csrf_token() }}",
        };

        const $id = (id) => document.getElementById(id);

        const post = (url) => fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': shCfg.csrf, 'Accept': 'application/json' },
        });

        const ICON = { ok: 'sh-ok', warn: 'sh-warn', down: 'sh-down', unknown: 'sh-unknown' };

        function setStat(key, state, text, sub) {
            $id('stat-' + key).textContent = text;
            const icon = $id('stat-icon-' + key);
            icon.className = 'sh-icon ' + ICON[state];
            if (sub !== undefined) {
                $id('sub-' + key).textContent = sub || ' ';
            }
        }

        function log(message, kind) {
            const list = $id('event-log');
            list.querySelector('.sh-log-empty')?.remove();
            const li = document.createElement('li');
            const time = document.createElement('span');
            time.className = 'sh-t';
            time.textContent = new Date().toLocaleTimeString();
            const text = document.createElement('span');
            if (kind === 'ok') { text.className = 'sh-ok-text'; message = '✓ ' + message; }
            if (kind === 'err') { text.className = 'sh-err-text'; message = '✗ ' + message; }
            text.textContent = message;
            li.append(time, text);
            list.prepend(li);
        }

        const yesNo = (v) => v
            ? '<span class="badge bg-success">yes</span>'
            : '<span class="badge bg-danger">no</span>';

        // ---- Queue test ------------------------------------------------------
        async function testQueue() {
            $id('queue-result').innerHTML = '<span class="text-muted">dispatching…</span>';

            let token;
            try {
                const res = await (await post(shCfg.testQueueUrl)).json();
                if (!res.success) throw new Error(res.message || 'dispatch failed');
                token = res.token;
            } catch (e) {
                $id('queue-result').innerHTML = '<span class="text-danger">could not dispatch</span>';
                log('Queue test could not be dispatched: ' + e.message, 'err');
                return;
            }

            log('Queue test job dispatched');

            let waited = 0;
            const poll = setInterval(async () => {
                waited++;
                const status = await (await fetch(shCfg.statusUrl + '?token=' + token, {
                    headers: { 'Accept': 'application/json' }
                })).json();

                applyStatus(status);

                if (status.queue.test_seen) {
                    clearInterval(poll);
                    $id('queue-result').innerHTML =
                        '<span class="text-success">picked up in ' + waited + 's</span>';
                    setStat('queue', 'ok', 'Running', 'worker active');
                    log('Queue worker processed the test job in ' + waited + 's', 'ok');
                } else if (waited >= 10) {
                    clearInterval(poll);
                    $id('queue-result').innerHTML =
                        '<span class="text-danger">not picked up in 10s</span>';
                    setStat('queue', 'down', 'Not running', 'no worker');
                    log('Queue worker did not pick up the job — is queue:work running?', 'err');
                }
            }, 1000);
        }

        // ---- Mail test -------------------------------------------------------
        async function testMail() {
            const btn = $id('btn-mail');
            btn.disabled = true;
            const original = btn.innerHTML;
            btn.innerHTML = 'Sending…';

            try {
                const res = await (await post(shCfg.testMailUrl)).json();
                if (res.success) {
                    log(res.message, 'ok');
                    Swal.fire({ title: 'Sent', text: res.message, icon: 'success', confirmButtonColor: '#7367f0' });
                } else {
                    log(res.message, 'err');
                    Swal.fire({ title: 'Failed', text: res.message, icon: 'error', confirmButtonColor: '#ea5455' });
                }
            } catch (e) {
                log('Mail test failed: ' + e.message, 'err');
            } finally {
                btn.disabled = false;
                btn.innerHTML = original;
            }
        }

        // ---- Status ----------------------------------------------------------
        function applyStatus(s) {
            $id('status-time').textContent = new Date(s.time).toLocaleTimeString();
            $id('server-time').textContent = s.server.server_time + ' (' + s.server.timezone + ')';

            // Queue
            $id('queue-connection').textContent = s.queue.connection;
            $id('queue-pending').textContent = s.queue.pending_jobs ?? 'n/a';
            $id('queue-notifications').textContent = s.queue.notification_jobs ?? 'n/a';
            $id('queue-failed').textContent = s.queue.failed_jobs ?? 'n/a';

            const oldest = s.queue.oldest_pending_seconds;
            $id('queue-oldest').innerHTML = oldest === null || oldest === undefined
                ? '<span class="text-muted">nothing waiting</span>'
                : (oldest > 120
                    ? '<span class="text-danger">' + oldest + 's — worker may be down</span>'
                    : oldest + 's');

            if (s.queue.failed_jobs > 0) {
                $id('sub-queue').textContent = s.queue.failed_jobs + ' failed';
            }

            // Scheduler
            const badge = $id('cron-badge');
            $id('cron-command').textContent = s.scheduler.command;
            if (s.scheduler.healthy) {
                setStat('cron', 'ok', 'Running', s.scheduler.seconds_ago + 's ago');
                badge.textContent = 'running';
                badge.className = 'badge bg-success';
                $id('cron-heartbeat').textContent = s.scheduler.seconds_ago + 's ago';
            } else {
                setStat('cron', 'down', 'Not running', 'no heartbeat');
                badge.textContent = 'not running';
                badge.className = 'badge bg-danger';
                $id('cron-heartbeat').innerHTML = s.scheduler.last_heartbeat
                    ? '<span class="text-danger">' + new Date(s.scheduler.last_heartbeat).toLocaleString() + '</span>'
                    : '<span class="text-danger">never</span>';
            }

            // Database
            if (s.database.healthy) {
                setStat('db', 'ok', 'Connected', s.database.latency_ms + ' ms');
                $id('db-target').textContent = s.database.host + ':' + s.database.port + '/' + s.database.name;
                $id('db-version').textContent = s.database.version ?? '—';
                $id('db-latency').textContent = s.database.latency_ms + ' ms';
            } else {
                setStat('db', 'down', 'Unreachable', 'check credentials');
                $id('db-target').innerHTML = '<span class="text-danger">' + (s.database.error ?? 'error') + '</span>';
            }

            // Cache + storage
            $id('cache-driver').innerHTML = s.cache.driver +
                (s.cache.healthy ? '' : ' <span class="badge bg-danger ms-1">read/write failed</span>');
            $id('storage-writable').innerHTML = yesNo(s.storage.healthy);
            $id('disk-usage').textContent = s.storage.free_gb !== null && s.storage.free_gb !== undefined
                ? s.storage.free_gb + ' GB free of ' + s.storage.total_gb + ' GB (' + s.storage.used_percent + '% used)'
                : 'n/a';

            // WhatsApp
            $id('wa-from').textContent = s.whatsapp.from ?? 'not set';
            $id('wa-templates').innerHTML =
                '<span class="badge bg-success">' + s.whatsapp.approved_templates + ' approved</span> ' +
                '<span class="badge bg-danger">' + s.whatsapp.rejected_templates + ' rejected</span>';

            if (!s.whatsapp.configured) {
                setStat('whatsapp', 'down', 'Not configured', 'missing credentials');
                $id('wa-endpoint').innerHTML = '<span class="text-danger">' + (s.whatsapp.error ?? '') + '</span>';
            } else if (s.whatsapp.reachable) {
                setStat('whatsapp', s.whatsapp.enabled ? 'ok' : 'warn',
                    s.whatsapp.enabled ? 'Ready' : 'Disabled',
                    s.whatsapp.enabled ? 'api.twilio.com' : 'switched off in settings');
                $id('wa-endpoint').innerHTML = 'api.twilio.com:443 ' + yesNo(true);
            } else {
                setStat('whatsapp', 'down', 'Unreachable', 'blocked from this server');
                $id('wa-endpoint').innerHTML = 'api.twilio.com:443 ' + yesNo(false);
            }

            // Mail
            $id('mail-mailer').textContent = s.mail.mailer;
            $id('mail-host').innerHTML = s.mail.host
                ? s.mail.host + ':' + s.mail.port + ' ' + (s.mail.reachable === null ? '' : yesNo(s.mail.reachable))
                : '<span class="text-muted">n/a</span>';

            if (s.mail.healthy) {
                setStat('mail', s.mail.mailer === 'smtp' ? 'ok' : 'warn',
                    s.mail.mailer === 'smtp' ? 'Reachable' : s.mail.mailer,
                    s.mail.host ?? 'no socket test');
            } else {
                setStat('mail', 'down', 'Unreachable', s.mail.host ?? '');
            }

            // Stripe
            $id('stripe-mode').innerHTML = s.stripe.configured
                ? '<span class="badge ' + (s.stripe.mode === 'live' ? 'bg-success' : 'bg-secondary') + '">'
                    + s.stripe.mode + ' mode</span>'
                : '<span class="badge bg-danger">not configured</span>';
            $id('stripe-webhook').innerHTML = yesNo(s.stripe.webhook_configured);

            if (!s.stripe.configured) {
                setStat('stripe', 'down', 'Not configured', 'no secret key');
            } else if (s.stripe.reachable) {
                setStat('stripe', 'ok', 'Reachable', s.stripe.mode + ' mode');
            } else {
                setStat('stripe', 'down', 'Unreachable', 'blocked from this server');
            }
        }

        async function refreshStatus() {
            try {
                const status = await (await fetch(shCfg.statusUrl, {
                    headers: { 'Accept': 'application/json' }
                })).json();
                applyStatus(status);
            } catch (e) {
                log('Could not read status: ' + e.message, 'err');
            }
        }

        // ---- Toolbar ---------------------------------------------------------
        $id('btn-queue').addEventListener('click', testQueue);
        $id('btn-mail').addEventListener('click', testMail);
        $id('btn-refresh').addEventListener('click', () => { refreshStatus(); log('Status refreshed'); });
        $id('btn-run-all').addEventListener('click', () => {
            log('Running all checks');
            refreshStatus();
            testQueue();
        });
        $id('btn-clear-log').addEventListener('click', () => {
            $id('event-log').innerHTML = '<li class="sh-log-empty text-muted">Checks will report here.</li>';
        });

        // First load: answer without being asked
        refreshStatus();
        testQueue();
        setInterval(refreshStatus, 15000);
    </script>
@endpush