<style>
  /* Markup classes — match what the AI emits */
  .good    { color: #3fb950; font-weight: 600; }                        /* green(text)   */
  .bad     { color: #f85149; font-weight: 600; }                        /* red(text)     */
  .summary { color: #1f6feb; font-weight: 600; text-transform: uppercase; } /* summary(text) */

  .section { background: #161b22; padding: 12px; margin-bottom: 12px; border-radius: 6px; }
  .section h3    { color: #f0f6fc; margin: 0 0 8px 0; font-size: 15px; }
  .section .body { color: #c9d1d9; line-height: 1.6; white-space: pre-wrap; }
</style>

<div id="subnet"    class="section"><h3>Subnet Chain</h3><div class="body"></div></div>
<div id="tech"      class="section"><h3>Tech</h3><div class="body"></div></div>
<div id="twitter"   class="section"><h3>Twitter</h3><div class="body"></div></div>
<div id="sentiment" class="section"><h3>Sentiment</h3><div class="body"></div></div>

/**
 * Incremental parser for `green(...)`, `red(...)`, `summary(...)` markup.
 * Handles:
 *   - tokens split across SSE chunks (keeps up to N trailing chars in buffer)
 *   - nested parentheses inside the content (tracks `parenDepth`)
 *   - HTML escaping of the surrounding text
 *
 * Usage:
 *   const parser = new StreamColorParser();
 *   el.insertAdjacentHTML('beforeend', parser.processChunk(chunk));  // per delta
 *   el.insertAdjacentHTML('beforeend', parser.flush());               // on done
 */
class StreamColorParser {
    constructor() {
        this.buffer = '';
        this.currentClass = null;   // active span class, or null when outside a marker
        this.parenDepth = 0;
    }

    // Tokens the AI emits → CSS class the parser wraps them in.
    static PATTERNS = [
        { tag: 'green(',   cls: 'good' },
        { tag: 'red(',     cls: 'bad'  },
        { tag: 'summary(', cls: 'summary' },
    ];

    // Longest marker prefix we might see partially at the end of buffer.
    // Used to decide how many trailing chars to hold back on each chunk.
    static MAX_MARKER_LEN = 8; // 'summary(' is 8 chars — the longest token

    processChunk(chunk) {
        this.buffer += chunk;
        let html = '';
        while (this.buffer.length) {
            const r = this.currentClass ? this._inside() : this._findStart();
            html += r.html;
            if (r.done) break;
        }
        return html;
    }

    // We're inside a colored region — emit chars until we hit the matching ')'.
    _inside() {
        let html = '', i = 0;
        while (i < this.buffer.length) {
            const c = this.buffer[i];
            if (c === '(') {
                this.parenDepth++;
                html += this._esc(c); i++;
            } else if (c === ')') {
                if (this.parenDepth === 0) {
                    // End of marker — close the span and resume normal parsing.
                    html += '</span>';
                    this.currentClass = null;
                    this.buffer = this.buffer.slice(i + 1);
                    return { html, done: false };
                }
                this.parenDepth--;
                html += this._esc(c); i++;
            } else {
                html += this._esc(c); i++;
            }
        }
        this.buffer = '';
        return { html, done: true };
    }

    // Looking for the next marker start; emit plain escaped text before it.
    _findStart() {
        const lower = this.buffer.toLowerCase();
        let best = null, bestIdx = this.buffer.length;
        for (const p of StreamColorParser.PATTERNS) {
            const idx = lower.indexOf(p.tag);
            if (idx !== -1 && idx < bestIdx) { best = p; bestIdx = idx; }
        }
        if (best) {
            const html = this._esc(this.buffer.slice(0, bestIdx))
                       + `<span class="${best.cls}">`;
            this.currentClass = best.cls;
            this.parenDepth = 0;
            this.buffer = this.buffer.slice(bestIdx + best.tag.length);
            return { html, done: false };
        }
        // No marker in view — emit everything except the last few chars,
        // which might be the prefix of a marker split across the next chunk.
        const safe = Math.max(0, this.buffer.length - StreamColorParser.MAX_MARKER_LEN);
        const html = safe > 0 ? this._esc(this.buffer.slice(0, safe)) : '';
        this.buffer = this.buffer.slice(safe);
        return { html, done: true };
    }

    // Call when the stream ends — emits any remaining buffered text and
    // closes an unterminated span (shouldn't happen with well-formed output).
    flush() {
        const html = this._esc(this.buffer) + (this.currentClass ? '</span>' : '');
        this.buffer = ''; this.currentClass = null; this.parenDepth = 0;
        return html;
    }

    _esc(t) {
        return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
}

const API_KEY = 'A-xxxxx-xxxxx-xxxxx';
const BASE    = 'https://air-scope.ai/bittensor/api/v1/analysis';

async function streamAnalysis(identifier, params = {}) {
    const qs  = new URLSearchParams(params).toString();
    const url = `${BASE}/${encodeURIComponent(identifier)}${qs ? '?' + qs : ''}`;

    const resp = await fetch(url, {
        headers: { 'X-API-Key': API_KEY, 'Accept': 'text/event-stream' }
    });
    if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);

    const parsers = {};   // section -> StreamColorParser
    const bodies  = {};   // section -> DOM body element
    const reader  = resp.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    const getBody = (section) => {
        if (!bodies[section]) {
            const card = document.getElementById(section);
            bodies[section]  = card ? card.querySelector('.body') : null;
            parsers[section] = new StreamColorParser();
        }
        return bodies[section];
    };

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += decoder.decode(value, { stream: true });

        // SSE messages are separated by a blank line (\n\n).
        let idx;
        while ((idx = buffer.indexOf('\n\n')) !== -1) {
            const msg = buffer.slice(0, idx);
            buffer   = buffer.slice(idx + 2);
            if (!msg.startsWith('data: ')) continue;

            const event = JSON.parse(msg.slice(6));
            const { type, section } = event;

            if (type === 'delta' && section) {
                // Incremental: parse chunk → colored HTML → append.
                const body = getBody(section);
                if (body) body.insertAdjacentHTML('beforeend',
                    parsers[section].processChunk(event.content || ''));
            } else if (type === 'done' && section && parsers[section]) {
                // Flush any trailing buffered text once the section finishes.
                const body = getBody(section);
                if (body) body.insertAdjacentHTML('beforeend', parsers[section].flush());
            } else if (type === 'metadata' && section) {
                // event.data.combined_data = raw section data (price, validators, ...)
                console.log(`[${section}] metadata`, event.data);
            } else if (type === 'error') {
                console.error(`[${event.section || 'stream'}]`, event.message);
            }
        }
    }
}

// Usage — identifier can be a netuid, SN-prefixed form, or subnet name.
streamAnalysis(1,     { sections: 'subnet,tech,twitter,sentiment' });
streamAnalysis('SN18');
streamAnalysis('apex');

const resp = await fetch(
    `${BASE}/1?streaming=false`,
    { headers: { 'X-API-Key': API_KEY } }
);
const data = await resp.json();

for (const [name, section] of Object.entries(data.sections)) {
    if (section.analysis) {
        const p    = new StreamColorParser();
        const html = p.processChunk(section.analysis) + p.flush();
        document.querySelector(`#${name} .body`).innerHTML = html;
    }
    if (section.metadata) console.log(`[${name}] raw:`, section.metadata);
}