@extends('layouts.admin')

@section('title', 'Test Notifikasi (Debug)')

@section('content')
<div class="max-w-4xl">
    {{-- Config Overview --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {{-- SMTP Status --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">SMTP Email</h3>
                <span id="smtp-status" class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-500">Belum dicek</span>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Host</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['host'] ?: '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Port</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['port'] ?: '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Encryption</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['encryption'] ?: '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Username</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['username'] ?: '-' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Password</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['has_password'] ? '****** (set)' : 'KOSONG' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">From</span>
                    <span class="font-medium text-gray-800">{{ $config['smtp']['from_address'] ?: '-' }} ({{ $config['smtp']['from_name'] }})</span>
                </div>
            </div>
            <button onclick="testSmtp()" id="btn-test-smtp" class="mt-4 w-full bg-indigo-50 text-indigo-600 px-4 py-2.5 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-indigo-300">
                Cek Koneksi SMTP
            </button>
            <div id="smtp-result" class="mt-3 hidden"></div>
        </div>

        {{-- Fonnte Status --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">WhatsApp (Fonnte)</h3>
                <span id="fonnte-status" class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-500">Belum dicek</span>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">API Key</span>
                    <span class="font-medium text-gray-800">{{ $config['fonnte']['has_key'] ? 'Tersedia' : 'KOSONG' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Sumber</span>
                    <span class="font-medium text-gray-800">{{ $config['fonnte']['key_source'] }}</span>
                </div>
            </div>
            <button onclick="testFonnte()" id="btn-test-fonnte" class="mt-4 w-full bg-indigo-50 text-indigo-600 px-4 py-2.5 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-indigo-300">
                Cek Koneksi Fonnte
            </button>
            <div id="fonnte-result" class="mt-3 hidden"></div>
        </div>
    </div>

    {{-- Test Send Forms --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {{-- Test Email --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Kirim Test Email</h3>
            <form id="form-test-email" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email Tujuan</label>
                    <input type="email" name="email" value="admin@bursakerja.online" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                    <input type="text" name="subject" value="[TEST] Email dari Bursa Kerja" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
                    <textarea name="message" rows="3" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">Ini adalah pesan test dari halaman debug Bursa Kerja. Jika Anda menerima email ini, berarti konfigurasi SMTP sudah benar.</textarea>
                </div>
                <button type="submit" id="btn-send-email" class="w-full bg-indigo-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-indigo-800">
                    Kirim Test Email
                </button>
            </form>
            <div id="email-result" class="mt-3 hidden"></div>
        </div>

        {{-- Test WhatsApp --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Kirim Test WhatsApp</h3>
            <form id="form-test-wa" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nomor WhatsApp</label>
                    <input type="text" name="phone" placeholder="08xxxxxxxxxx" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                    <p class="text-xs text-gray-400 mt-1">Format: 08xxx atau 628xxx</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
                    <textarea name="message" rows="3" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">*[TEST] Bursa Kerja*

Ini adalah pesan test dari halaman debug Bursa Kerja. Jika Anda menerima pesan ini, berarti konfigurasi WhatsApp Fonnte sudah benar.</textarea>
                </div>
                <button type="submit" id="btn-send-wa" class="w-full bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-green-800">
                    Kirim Test WhatsApp
                </button>
            </form>
            <div id="wa-result" class="mt-3 hidden"></div>
        </div>
    </div>

    {{-- Integration Check --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Audit Integrasi Notifikasi</h3>
        <p class="text-sm text-gray-500 mb-4">Daftar semua titik di aplikasi yang mengirim notifikasi Email + WhatsApp secara otomatis:</p>
        <div class="space-y-3">
            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">1. Pelamar Submit Lamaran</p>
                        <p class="text-xs text-gray-500 mt-1">File: ApplicantController@submitApplication</p>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Email + WA</span>
                </div>
                <p class="text-xs text-gray-400 mt-2">Trigger: Pelamar mengirim lamaran baru &rarr; status "applied"</p>
            </div>

            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">2. Pelamar Submit Formulir Tahapan</p>
                        <p class="text-xs text-gray-500 mt-1">File: ApplicantController@submitStageForm</p>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Email + WA</span>
                </div>
                <p class="text-xs text-gray-400 mt-2">Trigger: Pelamar mengisi formulir tahap &rarr; status "stageN_form_filled"</p>
            </div>

            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">3. Admin Ubah Status Lamaran</p>
                        <p class="text-xs text-gray-500 mt-1">File: Admin\ApplicationController@updateStatus</p>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Email + WA</span>
                </div>
                <p class="text-xs text-gray-400 mt-2">Trigger: Admin update status &rarr; lolos tahap / diterima / ditolak</p>
            </div>

            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">4. Admin Bulk Update Status</p>
                        <p class="text-xs text-gray-500 mt-1">File: Admin\ApplicationController@bulkUpdate</p>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Email + WA</span>
                </div>
                <p class="text-xs text-gray-400 mt-2">Trigger: Admin update status massal &rarr; notifikasi per pelamar</p>
            </div>

            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">5. Auto Advance (Scheduler)</p>
                        <p class="text-xs text-gray-500 mt-1">File: Commands\ProcessAutoAdvance</p>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Email + WA</span>
                </div>
                <p class="text-xs text-gray-400 mt-2">Trigger: Cron job loloskan pelamar otomatis berdasarkan jadwal di pengaturan</p>
            </div>
        </div>

        <div class="mt-4 p-4 bg-indigo-50 rounded-lg">
            <p class="text-sm text-indigo-800 font-medium">Semua titik di atas menggunakan NotificationService::send() yang mengirim via Email (SMTP) dan WhatsApp (Fonnte) secara bersamaan.</p>
            <p class="text-xs text-indigo-600 mt-1">Config dibaca dari: Database Settings &rarr; fallback ke .env</p>
        </div>
    </div>

    {{-- Debug Log --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-800">Debug Log</h3>
            <button onclick="clearLog()" class="text-xs text-gray-400 hover:text-gray-600">Clear</button>
        </div>
        <div id="debug-log" class="bg-gray-900 text-green-400 rounded-lg p-4 font-mono text-xs max-h-80 overflow-y-auto">
            <p class="text-gray-500">Belum ada log. Klik tombol test untuk mulai...</p>
        </div>
    </div>
</div>

@push('scripts')
<script>
const csrfToken = '{{ csrf_token() }}';
let logStarted = false;

function addLog(message, type = 'info') {
    const log = document.getElementById('debug-log');
    if (!logStarted) {
        log.innerHTML = '';
        logStarted = true;
    }
    const time = new Date().toLocaleTimeString('id-ID');
    const colors = { info: 'text-green-400', error: 'text-red-400', warn: 'text-yellow-400', debug: 'text-gray-400' };
    const prefix = { info: '[OK]', error: '[ERROR]', warn: '[WARN]', debug: '[DEBUG]' };
    log.innerHTML += `<p class="${colors[type]}">${time} ${prefix[type]} ${message}</p>`;
    log.scrollTop = log.scrollHeight;
}

function clearLog() {
    document.getElementById('debug-log').innerHTML = '<p class="text-gray-500">Log dibersihkan.</p>';
    logStarted = false;
}

function showResult(elId, success, message) {
    const el = document.getElementById(elId);
    el.classList.remove('hidden');
    el.className = el.className.replace(/bg-\w+-50 border-\w+-200 text-\w+-700/g, '');
    if (success) {
        el.className = `mt-3 p-3 rounded-lg text-sm bg-green-50 border border-green-200 text-green-700`;
    } else {
        el.className = `mt-3 p-3 rounded-lg text-sm bg-red-50 border border-red-200 text-red-700`;
    }
    el.textContent = message;
}

function setStatus(elId, success) {
    const el = document.getElementById(elId);
    el.className = `px-3 py-1 text-xs font-medium rounded-full ${success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`;
    el.textContent = success ? 'Terhubung' : 'Gagal';
}

async function testSmtp() {
    const btn = document.getElementById('btn-test-smtp');
    btn.disabled = true;
    btn.textContent = 'Mengecek...';
    addLog('Menguji koneksi SMTP...');

    try {
        const res = await fetch('{{ route("admin.test.smtp") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        });
        const data = await res.json();

        if (data.debug) {
            Object.entries(data.debug).forEach(([k, v]) => addLog(`  SMTP ${k}: ${JSON.stringify(v)}`, 'debug'));
        }
        addLog(data.message, data.success ? 'info' : 'error');
        showResult('smtp-result', data.success, data.message);
        setStatus('smtp-status', data.success);
    } catch (e) {
        addLog('Fetch error: ' + e.message, 'error');
        showResult('smtp-result', false, 'Network error: ' + e.message);
    }

    btn.disabled = false;
    btn.textContent = 'Cek Koneksi SMTP';
}

async function testFonnte() {
    const btn = document.getElementById('btn-test-fonnte');
    btn.disabled = true;
    btn.textContent = 'Mengecek...';
    addLog('Menguji koneksi Fonnte...');

    try {
        const res = await fetch('{{ route("admin.test.fonnte") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        });
        const data = await res.json();

        if (data.debug) {
            Object.entries(data.debug).forEach(([k, v]) => addLog(`  Fonnte ${k}: ${JSON.stringify(v)}`, 'debug'));
        }
        addLog(data.message, data.success ? 'info' : 'error');
        showResult('fonnte-result', data.success, data.message);
        setStatus('fonnte-status', data.success);
    } catch (e) {
        addLog('Fetch error: ' + e.message, 'error');
        showResult('fonnte-result', false, 'Network error: ' + e.message);
    }

    btn.disabled = false;
    btn.textContent = 'Cek Koneksi Fonnte';
}

document.getElementById('form-test-email').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btn-send-email');
    btn.disabled = true;
    btn.textContent = 'Mengirim...';

    const formData = new FormData(this);
    addLog(`Mengirim test email ke ${formData.get('email')}...`);

    try {
        const res = await fetch('{{ route("admin.test.email") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();

        if (data.debug) {
            Object.entries(data.debug).forEach(([k, v]) => addLog(`  Email ${k}: ${JSON.stringify(v)}`, 'debug'));
        }
        addLog(data.message, data.success ? 'info' : 'error');
        showResult('email-result', data.success, data.message);
    } catch (e) {
        addLog('Fetch error: ' + e.message, 'error');
        showResult('email-result', false, 'Network error: ' + e.message);
    }

    btn.disabled = false;
    btn.textContent = 'Kirim Test Email';
});

document.getElementById('form-test-wa').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btn-send-wa');
    btn.disabled = true;
    btn.textContent = 'Mengirim...';

    const formData = new FormData(this);
    addLog(`Mengirim test WA ke ${formData.get('phone')}...`);

    try {
        const res = await fetch('{{ route("admin.test.whatsapp") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(Object.fromEntries(formData)),
        });
        const data = await res.json();

        if (data.debug) {
            Object.entries(data.debug).forEach(([k, v]) => addLog(`  WA ${k}: ${JSON.stringify(v)}`, 'debug'));
        }
        addLog(data.message, data.success ? 'info' : 'error');
        showResult('wa-result', data.success, data.message);
    } catch (e) {
        addLog('Fetch error: ' + e.message, 'error');
        showResult('wa-result', false, 'Network error: ' + e.message);
    }

    btn.disabled = false;
    btn.textContent = 'Kirim Test WhatsApp';
});

// Auto-check connections on page load
window.addEventListener('load', () => {
    setTimeout(testSmtp, 500);
    setTimeout(testFonnte, 1000);
});
</script>
@endpush
@endsection