<?php
// modules/pasarguard/widgets/psg_nodes.php
?>

<div id="psg_nodes_section" class="hidden"> 
    <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden border-t-8 border-t-emerald-500 mb-6">
        <div class="bg-gray-50 dark:bg-slate-700/40 border-b border-gray-100 dark:border-slate-600 p-4 flex justify-between items-center">
            <h2 class="text-base font-black text-emerald-800 dark:text-emerald-400 flex items-center gap-2">
                <span>🌐</span> وضعیت سرورهای متصل (Nodes)
            </h2>
            <button onclick="loadPsgNodes()" class="bg-emerald-100 hover:bg-emerald-200 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300 p-2 rounded-xl transition flex items-center gap-2">
                <span id="nodes_refresh_icon" class="text-sm">🔄</span>
            </button>
        </div>

        <div class="p-5">
            <div id="nodes_loading" class="py-8 text-center text-gray-500 font-bold text-sm">در حال استعلام وضعیت نودها...</div>
            <div id="nodes_error" class="hidden py-3 text-center text-rose-500 font-bold text-xs bg-rose-50 dark:bg-rose-900/20 rounded-xl border border-rose-100 dark:border-rose-800"></div>
            
            <div id="nodes_container" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <!-- کارت‌های نودها -->
            </div>
        </div>
    </div>
</div>

<script>
    function loadPsgNodes() {
        if ($('#psg_nodes_section').hasClass('hidden')) return;

        $('#nodes_refresh_icon').addClass('animate-spin');
        
        $.ajax({
            url: 'pasarguard_api.php?ajax_call=nodes',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                $('#nodes_refresh_icon').removeClass('animate-spin');
                $('#nodes_loading, #nodes_error').addClass('hidden');
                
                if (res.error) {
                    $('#nodes_error').html('❌ ' + res.error).removeClass('hidden');
                    return;
                }

                let nodesList = Array.isArray(res) ? res : (res.nodes || res.data || []);
                let html = '';

                if (nodesList.length === 0) {
                    html = '<div class="col-span-full text-center py-6 bg-gray-50 dark:bg-slate-900/40 rounded-2xl border-2 border-dashed border-gray-200 dark:border-slate-700 text-gray-500 font-bold text-xs">هیچ نود متصلی در سرور اصلی یافت نشد.</div>';
                } else {
                    nodesList.forEach(node => {
                        let isConnected = (node.status === 'connected' || node.status === 'active' || node.is_connected === true);
                        let statusColor = isConnected ? 'bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800' : 'bg-rose-50 border-rose-200 dark:bg-rose-900/20 dark:border-rose-800';
                        let statusText = isConnected ? 'متصل' : 'عدم اتصال';
                        let pingHtml = node.ping ? `<span class="text-[10px] font-mono font-black text-emerald-600 bg-white dark:bg-slate-800 px-2 py-0.5 rounded-md border border-emerald-100 dark:border-emerald-900" dir="ltr">${node.ping} ms</span>` : '';

                        html += `
                        <div class="border ${statusColor} p-4 rounded-2xl flex flex-col justify-between transition hover:shadow-md">
                            <div class="flex justify-between items-start mb-2">
                                <div class="flex flex-col">
                                    <h3 class="font-bold text-gray-800 dark:text-slate-200 text-sm mb-1">${node.name || 'Node ' + (node.id || '')}</h3>
                                    <div class="flex items-center gap-1.5">
                                        <span class="flex h-2 w-2 relative">
                                            ${isConnected ? '<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>' : ''}
                                            <span class="relative inline-flex rounded-full h-2 w-2 ${isConnected ? 'bg-emerald-500' : 'bg-rose-500'}"></span>
                                        </span>
                                        <span class="text-[10px] font-bold ${isConnected ? 'text-emerald-700 dark:text-emerald-400' : 'text-rose-700 dark:text-rose-400'}">${statusText}</span>
                                    </div>
                                </div>
                                ${pingHtml}
                            </div>
                            <div class="mt-2 pt-2 border-t border-gray-100 dark:border-slate-700/50 flex flex-col">
                                <span class="text-[9px] font-bold text-gray-400 uppercase">IP Address</span>
                                <div class="text-xs font-mono font-bold text-gray-600 dark:text-gray-300" dir="ltr">${node.address || node.ip || 'Hidden IP'}</div>
                            </div>
                        </div>`;
                    });
                }

                $('#nodes_container').html(html).removeClass('hidden');
            },
            error: function() {
                $('#nodes_refresh_icon').removeClass('animate-spin');
                $('#nodes_loading').addClass('hidden');
                $('#nodes_error').html('❌ خطا در برقراری ارتباط').removeClass('hidden');
            }
        });
    }
</script>