{% extends "admin/base.html" %}

{% block title %}Live System Flow{% endblock %}
{% block header_title %}System Architecture Flow{% endblock %}

{% block content %}

<div class="card-style h-[80vh] flex flex-col p-0 overflow-hidden bg-[#030305] border border-white/10 relative">
    <div class="p-4 border-b border-white/10 flex justify-between items-center bg-black/40 z-20">
        <div class="flex items-center gap-3">
            <h2 class="text-white font-bold tracking-tight">Live Request Flow</h2>
            <div id="active-count" class="px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-400 text-[10px] font-black uppercase">0 Active</div>
        </div>
        <span id="connection-status" class="text-[10px] px-3 py-1 rounded border border-red-500/30 text-red-400 font-bold">OFFLINE</span>
    </div>

    <!-- Floating Tooltip -->
    <div id="particle-tooltip" class="absolute pointer-events-none opacity-0 transition-opacity duration-200 z-50 bg-black/90 border border-indigo-500/50 p-3 rounded-xl shadow-2xl backdrop-blur-md">
        <div id="tooltip-title" class="text-[10px] font-black text-indigo-400 uppercase mb-1">Request Trace</div>
        <div class="space-y-1.5">
            <div class="flex justify-between gap-8"><span class="text-[9px] text-gray-500 uppercase">Model:</span> <span id="tt-model" class="text-[11px] text-white font-bold">...</span></div>
            <div class="flex justify-between gap-8"><span class="text-[9px] text-gray-500 uppercase">User:</span> <span id="tt-user" class="text-[11px] text-indigo-300">...</span></div>
            <div id="tt-stats-row" class="pt-1 mt-1 border-t border-white/5 flex gap-4">
                <div class="flex flex-col"><span class="text-[8px] text-gray-600 uppercase">TTFT</span> <span id="tt-ttft" class="text-[10px] text-amber-400 font-mono">--</span></div>
                <div class="flex flex-col"><span class="text-[8px] text-gray-600 uppercase">Speed</span> <span id="tt-tps" class="text-[10px] text-emerald-400 font-mono">--</span></div>
            </div>
        </div>
    </div>

    <div id="canvas-container" class="flex-grow relative cursor-crosshair">
        <!-- Overlay for Labeling (Kept for CSS positioning if needed, but drawing trash in PIXI for overlapping) -->
    </div>
</div>

<script src="{{ url_for('static', path='vendor/pixi.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('canvas-container');
    const statusEl = document.getElementById('connection-status');
    const countEl = document.getElementById('active-count');
    const tooltip = document.getElementById('particle-tooltip');

    const particles = new Map();
    const trails = new Map();
    const serverNodes = new Map();
    
    const app = new PIXI.Application();
    let glowLayer, particleLayer, trailLayer, uiLayer;

    // --- HIGH-FIDELITY PROCEDURAL LOGOS ---
    function drawIcon(g, type, color) {
        g.clear();
        const strokeColor = 0xffffff;
        
        switch(type) {
            case 'hub': // Fortress Shield (Official Style)
                g.moveTo(0, -15).lineTo(12, -8).lineTo(12, 5).bezierCurveTo(12, 12, 0, 18, 0, 18).bezierCurveTo(0, 18, -12, 12, -12, 5).lineTo(-12, -8).closePath()
                 .fill({color, alpha: 0.9}).stroke({width: 2, color: strokeColor});
                // Inner "L"
                g.moveTo(-4, -4).lineTo(-4, 6).lineTo(4, 6).stroke({width: 2, color: strokeColor});
                break;

            case 'ollama': // The Llama Mascot
                // Head/Face
                g.ellipse(0, 0, 10, 13).fill({color, alpha: 0.9}).stroke({width: 1, color: strokeColor});
                // Ears
                g.poly([-8, -10, -5, -18, -2, -10], true).fill(color);
                g.poly([8, -10, 5, -18, 2, -10], true).fill(color);
                // Snout area
                g.circle(0, 5, 4).fill({color: 0x000000, alpha: 0.2});
                break;

            case 'vllm': // Fast "V" Chevron
                g.poly([-12, -10, 0, 12, 12, -10, 8, -10, 0, 4, -8, -10], true).fill({color: 0xf97316, alpha: 0.9}).stroke({width: 1, color: strokeColor});
                // Speed lines
                g.rect(-15, -5, 4, 1).fill(0xffffff);
                g.rect(-18, 0, 5, 1).fill(0xffffff);
                break;

            case 'cloud': // Multi-Node Cloud
                g.circle(0, 0, 8).circle(-7, 3, 6).circle(7, 3, 6).rect(-8, 5, 16, 4).fill({color: 0x3b82f6, alpha: 0.8}).stroke({width: 1, color: strokeColor});
                break;

            case 'workflow': // Logic Engine (Pulsing Brain-Graph)
                g.circle(0, 0, 12).fill({color: 0xa855f7, alpha: 0.2}).stroke({width: 1, color: 0xa855f7, dash:[2,2]});
                g.circle(0, 0, 6).fill(0xa855f7);
                // Connection dots
                g.circle(8, -8, 3).fill(0xffffff);
                g.circle(-8, 8, 3).fill(0xffffff);
                g.circle(8, 8, 3).fill(0xffffff);
                break;

            default: // Generic compute node
                g.poly([0,-12, 11,-6, 11,6, 0,12, -11,6, -11,-6], true).fill({color, alpha: 0.8}).stroke({width:1, color: strokeColor});
        }
    }

    function createMiniWorkflowVisual() {
        const container = new PIXI.Container();
        for(let i=0; i<3; i++) {
            const dot = new PIXI.Graphics().circle(0, 0, 2).fill(0xa855f7);
            dot.x = (i - 1) * 8;
            dot.y = 15; // Offset below particle
            container.addChild(dot);
        }
        return container;
    }

    // --- NODE DISCOVERY ---
    async function initNodes() {
        serverNodes.set('gateway', { name: 'Gateway', x: 100, y: app.screen.height / 2, type: 'hub' });

        try {
            const resp = await fetch("{{ url_for('admin_get_server_nodes') }}");
            const activeServers = await resp.json();
            
            const padding = 120;
            const availableHeight = app.screen.height - (padding * 2);
            const step = activeServers.length > 1 ? availableHeight / (activeServers.length - 1) : 0;

            activeServers.forEach((srv, i) => {
                serverNodes.set(srv.name, {
                    name: srv.name,
                    x: app.screen.width - 200,
                    y: activeServers.length === 1 ? app.screen.height / 2 : padding + (i * step),
                    type: srv.type || 'ollama'
                });
            });
            
            drawNodeStaticMarkers();
        } catch (e) { console.error(e); }
    }

    function drawNodeStaticMarkers() {
        uiLayer.removeChildren();
        
        // Background Grid
        const grid = new PIXI.Graphics();
        for(let i=0; i<app.screen.width; i+=50) {
            grid.moveTo(i, 0).lineTo(i, app.screen.height).stroke({width:1, color:0xffffff, alpha:0.02});
        }
        for(let j=0; j<app.screen.height; j+=50) {
            grid.moveTo(0, j).lineTo(app.screen.width, j).stroke({width:1, color:0xffffff, alpha:0.02});
        }
        uiLayer.addChild(grid);

        // --- DISPOSAL ZONE (Internal PIXI Drawing) ---
        const trashHeight = 60;
        const trash = new PIXI.Graphics()
            .rect(0, app.screen.height - trashHeight, app.screen.width, trashHeight)
            .fill({color: 0xef4444, alpha: 0.05})
            .moveTo(0, app.screen.height - trashHeight).lineTo(app.screen.width, app.screen.height - trashHeight)
            .stroke({width: 1, color: 0xffffff, alpha: 0.05});
        uiLayer.addChild(trash);

        const trashLabel = new PIXI.Text({
            text: "DISPOSAL ZONE • AUTO-PURGE ACTIVE",
            style: { fontFamily: 'monospace', fontSize: 9, fill: 0x374151, fontWeight: '900', letterSpacing: 4 }
        });
        trashLabel.anchor.set(0.5, 0.5);
        trashLabel.x = app.screen.width / 2;
        trashLabel.y = app.screen.height - (trashHeight / 2);
        uiLayer.addChild(trashLabel);

        serverNodes.forEach(node => {
            const container = new PIXI.Container();
            container.x = node.x; container.y = node.y;

            // Wiring (Gateway to Node)
            if (node.type !== 'hub') {
                const gateway = serverNodes.get('gateway');
                const wire = new PIXI.Graphics()
                    .moveTo(gateway.x, gateway.y)
                    .bezierCurveTo(gateway.x + 200, gateway.y, node.x - 200, node.y, node.x, node.y)
                    .stroke({width: 1, color: 0x6366f1, alpha: 0.1});
                uiLayer.addChild(wire);
            }

            const iconG = new PIXI.Graphics();
            drawIcon(iconG, node.type, node.type === 'hub' ? 0x6366f1 : 0x10b981);
            container.addChild(iconG);

            const label = new PIXI.Text({
                text: node.name.toUpperCase(),
                style: { fontFamily: 'monospace', fontSize: 10, fill: 0x4b5563, fontWeight: '900' }
            });
            label.anchor.set(node.type === 'hub' ? 1 : 0, 0.5);
            label.x = node.type === 'hub' ? -30 : 30;
            uiLayer.addChild(container);
            uiLayer.addChild(label);
        });
    }

    app.init({
        resizeTo: container,
        background: '#030305',
        antialias: true,
        resolution: window.devicePixelRatio || 1,
        autoDensity: true
    }).then(() => {
        container.appendChild(app.canvas);

        trailLayer = new PIXI.Container();
        glowLayer = new PIXI.Container();
        particleLayer = new PIXI.Container();
        uiLayer = new PIXI.Container();

        app.stage.addChild(trailLayer);
        app.stage.addChild(glowLayer);
        app.stage.addChild(particleLayer);
        app.stage.addChild(uiLayer);

        initNodes();
        startEngine();
        connectSSE();

        // Hover detection
        app.stage.interactive = true;
        app.stage.hitArea = app.screen;
        app.stage.on('mousemove', handleHover);
    });

    function handleHover(event) {
        const mouseX = event.global.x;
        const mouseY = event.global.y;
        let found = false;

        particles.forEach(p => {
            const dx = p.x - mouseX;
            const dy = p.y - mouseY;
            if (Math.sqrt(dx*dx + dy*dy) < 15) {
                found = true;
                tooltip.style.opacity = '1';
                tooltip.style.left = `${mouseX + 20}px`;
                tooltip.style.top = `${mouseY - 40}px`;
                document.getElementById('tt-model').textContent = p.model;
                document.getElementById('tt-user').textContent = p.sender;
                document.getElementById('tt-ttft').textContent = p.ttft ? `${p.ttft}ms` : '--';
                document.getElementById('tt-tps').textContent = p.tps ? `${p.tps} t/s` : '--';
            }
        });

        if (!found) tooltip.style.opacity = '0';
    }

    function startEngine() {
        app.ticker.add(() => {
            renderParticles();
            renderTrails();
            updateStats();
        });
    }

    function updateStats() {
        let active = 0;
        particles.forEach(p => { if (p.state !== 'disposed') active++; });
        countEl.textContent = `${active} Active`;
    }

    function createParticle(id, data = {}) {
        if (particles.has(id)) return;

        const isWorkflow = data.req_type === 'REQ' || data.model.includes('flow');
        const color = isWorkflow ? 0xa855f7 : (data.req_type === 'EMBED' ? 0xf59e0b : 0x6366f1);

        const core = new PIXI.Graphics().circle(0, 0, 5).fill(0xffffff).stroke({width:2, color});
        const glow = new PIXI.Graphics().circle(0, 0, 15).fill({ color, alpha: 0.2 });

        particleLayer.addChild(core);
        glowLayer.addChild(glow);

        const pObj = {
            id,
            x: 50,
            y: app.screen.height / 2,
            state: 'queued',
            targetServer: 'gateway',
            sender: data.sender || "anon",
            model: data.model || "unknown",
            ttft: data.ttft || 0,
            tps: data.tps || 0,
            opacity: 1,
            isWorkflow,
            core,
            glow
        };

        if(isWorkflow) {
            pObj.miniMap = createMiniWorkflowVisual();
            particleLayer.addChild(pObj.miniMap);
        }

        particles.set(id, pObj);
        trails.set(id, []);
    }

    function updateRouting(p) {
        const target = serverNodes.get(p.targetServer) || serverNodes.get('gateway');
        
        if (p.state === 'queued') {
            p.x += 3;
            p.y += Math.sin(p.x * 0.05) * 2;
            if (p.x > 180) p.state = 'routing';
        }

        if (p.state === 'routing') {
            // Cubic Bezier-like curve for organic movement
            const dx = target.x - p.x;
            const dy = target.y - p.y;
            
            p.x += dx * 0.06;
            p.y += dy * 0.06 + Math.sin(p.x * 0.02) * 5;

            if (Math.abs(dx) < 8 && Math.abs(dy) < 8) {
                p.state = 'processing';
            }
        }

        if (p.state === 'processing') {
            // Orbiting the target node
            const time = performance.now() * 0.005;
            p.x = target.x + Math.cos(time + p.id.charCodeAt(0)) * 15;
            p.y = target.y + Math.sin(time + p.id.charCodeAt(0)) * 15;
            
            // If it's a workflow, pulsate the core
            p.core.scale.set(1 + Math.sin(time * 2) * 0.2);
        }

        if (p.state === 'disposed') {
            // Stronger pull towards bottom center
            const trashY = app.screen.height - 30;
            const targetX = p.x + 50; 

            p.y += (trashY - p.y) * 0.12;
            p.x += (targetX - p.x) * 0.05;
            
            p.opacity -= 0.02;
            
            if (p.opacity <= 0) {
                particleLayer.removeChild(p.core);
                glowLayer.removeChild(p.glow);
                // REPAIR MISSION: property name is 'miniMap', not 'wfIcon'
                if(p.miniMap) particleLayer.removeChild(p.miniMap);
                particles.delete(p.id);
                trails.delete(p.id);
            }
        }
    }

    function renderParticles() {
        const time = performance.now() * 0.01;
        particles.forEach((p) => {
            updateRouting(p);
            p.core.x = p.x; p.core.y = p.y;
            p.glow.x = p.x; p.glow.y = p.y;
            
            if(p.miniMap) {
                p.miniMap.x = p.x; p.miniMap.y = p.y;
                p.miniMap.alpha = p.opacity;
                // Animate dots in mini-map
                p.miniMap.children.forEach((c, i) => {
                    c.alpha = 0.3 + Math.sin(time + i) * 0.7;
                });
            }

            p.core.alpha = p.opacity;
            p.glow.alpha = p.opacity * 0.3;

            const t = trails.get(p.id);
            if (t) {
                t.push({ x: p.x, y: p.y });
                if (t.length > 25) t.shift();
            }
        });
    }

    function renderTrails() {
        trailLayer.removeChildren();
        trails.forEach((trail, id) => {
            const p = particles.get(id);
            if (!p || trail.length < 2) return;

            const g = new PIXI.Graphics();
            for (let i = 1; i < trail.length; i++) {
                const alpha = (i / trail.length) * p.opacity * 0.5;
                g.moveTo(trail[i-1].x, trail[i-1].y);
                g.lineTo(trail[i].x, trail[i].y);
                g.stroke({ width: 2, color: 0x6366f1, alpha });
            }
            trailLayer.addChild(g);
        });
    }

    function connectSSE() {
        const evtSource = new EventSource("{{ url_for('sse_events') }}");

        evtSource.onopen = () => {
            statusEl.innerHTML = "● CLUSTER CONNECTED";
            statusEl.className = "text-[10px] px-3 py-1 rounded border border-green-500/30 text-green-400 font-bold";
        };

        evtSource.onmessage = (e) => {
            const msg = JSON.parse(e.data);

            if (msg.type === "snapshot") {
                msg.data.active.forEach(r => createParticle(r.id, r));
            }

            if (msg.type === "received") {
                createParticle(msg.id, msg);
            }

            const p = particles.get(msg.id);
            if (!p) return;

            if (msg.server && msg.server !== 'none') p.targetServer = msg.server;
            if (msg.ttft) p.ttft = msg.ttft;
            if (msg.tps) p.tps = msg.tps;

            if (msg.type === "assigned" || msg.type === "active") {
                p.state = 'routing';
            }

            if (msg.type === "completed" || msg.type === "error") {
                p.state = 'disposed';
                if (msg.type === "error") p.glow.tint = 0xef4444;
            }
        };

        evtSource.onerror = () => {
            statusEl.innerHTML = "● GATEWAY TIMEOUT";
            statusEl.className = "text-[10px] px-3 py-1 rounded border border-red-500/30 text-red-400 font-bold";
        };
    }
});
</script>

{% endblock %}