<?php
// admin/monitor_api.php
session_start();
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') { header("Location: ../auth/login_page.php"); exit; }
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xieqa NOC Monitor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body { background-color: #0f172a; color: #e2e8f0; font-family: 'Segoe UI', sans-serif; }
        .router-brain { background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid #334155; border-radius: 12px; padding: 10px; text-align: center; width: 200px; transition: all 0.3s ease; }
        .router-brain.active { border-color: #0ea5e9; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); }
        
        .api-node { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px; height: 100%; transition: all 0.3s; position: relative; }
        .api-node.dimmed { opacity: 0.35; filter: grayscale(100%); }
        .slot-title { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
        .health-bar-bg { background: #334155; height: 4px; border-radius: 4px; overflow: hidden; }
        .health-bar-fill { height: 100%; transition: width 0.5s ease; }
        
        /* EFEK ANIMASI LOADING AI AGENT */
        @keyframes pulse-gemini { 0% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.4); } 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.9); } }
        @keyframes pulse-groq { 0% { box-shadow: 0 0 5px rgba(249, 115, 22, 0.4); } 100% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.9); } }
        @keyframes pulse-internal { 0% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.4); } 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.9); } }
        @keyframes spin-agent { 100% { transform: rotate(360deg); } }

        .node-active-gemini { border-color: #06b6d4; animation: pulse-gemini 0.8s infinite alternate; transform: scale(1.03); z-index: 10; background: #164e63; }
        .node-active-groq { border-color: #f97316; animation: pulse-groq 0.8s infinite alternate; transform: scale(1.03); z-index: 10; background: #7c2d12; }
        .node-active-internal { border-color: #a855f7; animation: pulse-internal 0.8s infinite alternate; transform: scale(1.03); z-index: 10; background: #4c1d95; }

        .agent-icon { font-size: 1.2rem; line-height: 1; color: #475569; transition: all 0.3s ease; }
        .node-active-gemini .agent-icon { color: #06b6d4; animation: spin-agent 1.5s linear infinite; }
        .node-active-groq .agent-icon { color: #f97316; animation: spin-agent 1.5s linear infinite; }
        .node-active-internal .agent-icon { color: #a855f7; animation: spin-agent 1.5s linear infinite; }
    </style>
</head>
<body>
<div class="container-fluid p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold m-0"><i class="bi bi-activity text-info"></i> XIEQA NOC CENTER</h4>
            <small class="text-secondary">Monitoring Real-Time Dynamic Gateway</small>
        </div>
        <div class="router-brain" id="router-core">
            <h6 class="m-0 fw-bold"><i class="bi bi-hdd-network-fill text-info"></i> ROUTER ACTIVE</h6>
            <small id="router-status" style="font-size: 0.7rem;">Standby...</small>
        </div>
    </div>

    <div class="row justify-content-center mb-4"><div class="col-md-4" id="internal-container"></div></div>

    <div class="row g-3">
        <div class="col-lg-6">
            <h6 class="text-info fw-bold mb-3 text-center" style="letter-spacing: 1px;"><i class="bi bi-google"></i> GEMINI CLUSTER</h6>
            <div class="row g-2" id="gemini-container"></div>
        </div>
        <div class="col-lg-6">
            <h6 class="text-warning fw-bold mb-3 text-center" style="letter-spacing: 1px;"><i class="bi bi-cpu"></i> GROQ CLUSTER</h6>
            <div class="row g-2" id="groq-container"></div>
        </div>
    </div>
</div>

<script>
    async function fetchLiveStatus() {
        try {
            const res = await (await fetch('../api/api_monitor.php')).json();
            if (res.status === 'success') updateUI(res);
        } catch (e) {}
    }

    function updateUI(data) {
        const core = document.getElementById('router-core');
        data.router_active ? core.classList.add('active') : core.classList.remove('active');
        document.getElementById('router-status').innerHTML = data.router_active ? "<span class='text-info fw-bold'>MENGIRIM DATA...</span>" : "Standby";

        let gem = '', groq = '', cache = '';
        data.data.forEach(api => {
            let activeClass = '';
            let dimmed = '';
            let color = '#10b981';
            let iconHTML = '<i class="bi bi-gear-wide-connected agent-icon"></i>';
            let badgeHTML = `<span class="badge bg-success" style="font-size:0.5rem;">${api.health_label}</span>`;

            // Atur Warna & Ikon Dasar
            if (api.health_label === 'KOSONG') { dimmed = 'dimmed'; color = '#475569'; iconHTML = '<i class="bi bi-box agent-icon" style="color:#475569;"></i>'; badgeHTML = `<span class="badge bg-secondary" style="font-size:0.5rem;">KOSONG</span>`; }
            else if (api.health_label === 'INVALID') { color = '#ef4444'; iconHTML = '<i class="bi bi-exclamation-triangle-fill agent-icon text-danger"></i>'; badgeHTML = `<span class="badge bg-danger" style="font-size:0.5rem;">MATI</span>`; }
            else if (api.health_label === 'LIMIT') { color = '#f59e0b'; badgeHTML = `<span class="badge bg-warning text-dark" style="font-size:0.5rem;">COOLDOWN (${api.sisa_cooldown}s)</span>`; }
            else if (api.health_label === 'MEMORI AKTIF') { color = '#a855f7'; iconHTML = '<i class="bi bi-database-fill-check agent-icon"></i>'; }

            // JIKA SLOT SEDANG BEKERJA MEMPROSES DATA
            if (api.is_active) {
                activeClass = `node-active-${api.provider}`;
                badgeHTML = `<span class="badge bg-info text-dark shadow-sm" style="font-size:0.55rem;"><div class="spinner-grow spinner-grow-sm me-1" style="width: 0.6rem; height: 0.6rem;" role="status"></div>WORKING</span>`;
            }

            let card = `
                <div class="${api.provider === 'internal' ? 'col-12' : 'col-6 col-xl-4'}">
                    <div class="api-node ${activeClass} ${dimmed}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex align-items-center gap-2">
                                ${iconHTML}
                                <span class="slot-title">${api.slot_id.replace(/_/g, ' ')}</span>
                            </div>
                            <div>${badgeHTML}</div>
                        </div>
                        <div class="d-flex justify-content-between align-items-end mt-1">
                            <div class="fw-bold" style="font-size:0.65rem; color: #cbd5e1;">${api.provider.toUpperCase()} ENGINE</div>
                            <div class="fw-bold" style="font-size:0.65rem; color:${color};">${api.health_percent}%</div>
                        </div>
                        <div class="health-bar-bg mt-1"><div class="health-bar-fill" style="width:${api.health_percent}%; background:${color}"></div></div>
                    </div>
                </div>`;
            if (api.provider === 'gemini') gem += card; else if (api.provider === 'groq') groq += card; else cache += card;
        });
        document.getElementById('gemini-container').innerHTML = gem;
        document.getElementById('groq-container').innerHTML = groq;
        document.getElementById('internal-container').innerHTML = cache;
    }
    setInterval(fetchLiveStatus, 1000); // Sinkronisasi setiap 1 detik
</script>
</body>
</html>