{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto">
    <div class="flex items-center space-x-3 mb-6">
        <div class="p-3 bg-minhaj-orange rounded-lg text-white">
            <i class="fab fa-whatsapp text-3xl"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pengaturan WhatsApp Gateway</h1>
            <p class="text-gray-600">Pilih dan konfigurasi jalur pengiriman notifikasi.</p>
        </div>
    </div>

    <form method="POST">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <div class="lg:col-span-2 space-y-6">
                
                <div class="bg-white shadow-md rounded-xl overflow-hidden border border-gray-100 transition-all" id="card_baileys">
                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
                        <div class="flex items-center">
                            <input type="radio" name="active_provider" value="baileys" id="radio_baileys" 
                                   class="w-5 h-5 text-minhaj-blue focus:ring-minhaj-blue border-gray-300"
                                   {% if config.active_provider == 'baileys' %}checked{% endif %}
                                   onchange="toggleProvider('baileys')">
                            <label for="radio_baileys" class="ml-3 block text-lg font-bold text-gray-800 cursor-pointer">
                                Baileys API (Self-Hosted)
                            </label>
                        </div>
                        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Recommended</span>
                    </div>
                    <div class="p-6 space-y-4 opacity-100" id="form_baileys">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Base URL</label>
                            <div class="flex">
                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
                                    http://
                                </span>
                                <input type="text" name="baileys_url" id="baileys_url" value="{{ config.baileys_url }}" 
                                       placeholder="10.122.25.172:5000"
                                       class="flex-1 block w-full px-4 py-2 border border-gray-300 rounded-r-md focus:ring-minhaj-blue focus:border-minhaj-blue sm:text-sm">
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Default: 10.122.25.172:5000</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">API Key (Optional)</label>
                            <input type="password" name="baileys_key" id="baileys_key" value="{{ config.baileys_key }}" 
                                   placeholder="Kosongkan jika tidak ada auth"
                                   class="block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-minhaj-blue focus:border-minhaj-blue sm:text-sm">
                        </div>
                        <div class="pt-2">
                            <button type="button" onclick="checkEndpoint()" class="text-sm text-minhaj-blue hover:text-blue-800 font-medium flex items-center">
                                <i class="fas fa-plug mr-1"></i> Test Endpoint Connection
                            </button>
                            <div id="endpointResult" class="text-xs mt-2 hidden"></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white shadow-md rounded-xl overflow-hidden border border-gray-100 transition-all" id="card_whacenter">
                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
                        <div class="flex items-center">
                            <input type="radio" name="active_provider" value="whacenter" id="radio_whacenter"
                                   class="w-5 h-5 text-minhaj-blue focus:ring-minhaj-blue border-gray-300"
                                   {% if config.active_provider == 'whacenter' %}checked{% endif %}
                                   onchange="toggleProvider('whacenter')">
                            <label for="radio_whacenter" class="ml-3 block text-lg font-bold text-gray-800 cursor-pointer">
                                Whacenter API
                            </label>
                        </div>
                        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">Third Party</span>
                    </div>
                    <div class="p-6 space-y-4" id="form_whacenter">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Device ID</label>
                            <input type="text" name="whacenter_id" value="{{ config.whacenter_id }}" 
                                   placeholder="Contoh: 3e4r5t6y..."
                                   class="block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-minhaj-blue focus:border-minhaj-blue sm:text-sm font-mono">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-minhaj-blue text-white px-6 py-3 rounded-lg hover:bg-blue-800 transition shadow-lg font-bold">
                        <i class="fas fa-save mr-2"></i> Simpan Konfigurasi
                    </button>
                </div>
            </div>

            <div class="lg:col-span-1">
                <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200 sticky top-24">
                    <div class="bg-minhaj-teal px-6 py-4 border-b border-teal-600">
                        <h3 class="text-lg font-bold text-white"><i class="fas fa-paper-plane mr-2"></i>Simulasi Kirim</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-3 mb-2">
                            <p class="text-xs text-blue-700" id="activeInfo">
                                Menggunakan: <strong>{{ config.active_provider|capitalize }}</strong>
                            </p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase mb-1">Nomor Tujuan</label>
                            <input type="text" id="testNumber" placeholder="08123456789" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase mb-1">Pesan</label>
                            <textarea id="testMessage" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md">Tes notifikasi dari Minhaj Pustaka.</textarea>
                        </div>
                        
                        <button type="button" onclick="sendTestMessage()" id="btnTest" class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition shadow-md font-bold">
                            <i class="fab fa-whatsapp mr-2"></i> Kirim Sekarang
                        </button>

                        <div id="testResult" class="hidden mt-4 p-3 rounded-lg text-xs border break-words"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    // UI Logic to highlight active provider
    function toggleProvider(provider) {
        const baileysCard = document.getElementById('card_baileys');
        const whacenterCard = document.getElementById('card_whacenter');
        const info = document.getElementById('activeInfo');

        if (provider === 'baileys') {
            baileysCard.classList.add('ring-2', 'ring-minhaj-blue');
            whacenterCard.classList.remove('ring-2', 'ring-minhaj-blue');
            baileysCard.classList.remove('opacity-50');
            whacenterCard.classList.add('opacity-50');
            info.innerHTML = "Menggunakan: <strong>Baileys API</strong>";
        } else {
            whacenterCard.classList.add('ring-2', 'ring-minhaj-blue');
            baileysCard.classList.remove('ring-2', 'ring-minhaj-blue');
            whacenterCard.classList.remove('opacity-50');
            baileysCard.classList.add('opacity-50');
            info.innerHTML = "Menggunakan: <strong>Whacenter API</strong>";
        }
    }

    // Initialize UI state
    document.addEventListener('DOMContentLoaded', () => {
        toggleProvider('{{ config.active_provider }}');
    });

    // Function to check Baileys Endpoint
    async function checkEndpoint() {
        const url = document.getElementById('baileys_url').value;
        const key = document.getElementById('baileys_key').value;
        const resDiv = document.getElementById('endpointResult');
        
        resDiv.classList.remove('hidden');
        resDiv.innerHTML = '<span class="text-gray-500"><i class="fas fa-spinner fa-spin"></i> Checking...</span>';

        try {
            const response = await fetch('/settings/check-endpoint', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ url: "http://" + url.replace("http://", ""), key: key })
            });
            const data = await response.json();
            
            if(data.success) {
                resDiv.innerHTML = `<span class="text-green-600 font-bold"><i class="fas fa-check-circle"></i> ${data.message}</span>`;
            } else {
                resDiv.innerHTML = `<span class="text-red-600 font-bold"><i class="fas fa-times-circle"></i> ${data.message}</span>`;
            }
        } catch (e) {
            resDiv.innerHTML = `<span class="text-red-600">Connection Error</span>`;
        }
    }

    // Function to send test message
    async function sendTestMessage() {
        const number = document.getElementById('testNumber').value;
        const message = document.getElementById('testMessage').value;
        const btn = document.getElementById('btnTest');
        const resDiv = document.getElementById('testResult');

        if(!number) { alert('Isi nomor tujuan!'); return; }

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
        resDiv.classList.add('hidden');

        try {
            const response = await fetch('/settings/test-send', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ number, message })
            });
            const data = await response.json();

            resDiv.classList.remove('hidden');
            if(data.success) {
                resDiv.className = "mt-4 p-3 rounded-lg text-xs border bg-green-50 border-green-200 text-green-800";
                resDiv.innerHTML = `<strong>SUKSES:</strong> ${data.message}`;
            } else {
                resDiv.className = "mt-4 p-3 rounded-lg text-xs border bg-red-50 border-red-200 text-red-800";
                resDiv.innerHTML = `<strong>GAGAL:</strong> ${data.message}`;
            }
        } catch (e) {
            alert('Error sending request');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fab fa-whatsapp mr-2"></i> Kirim Sekarang';
        }
    }
</script>
{% endblock %}