{% extends "base.html" %}
{% set active_page = "monitor" %}

{% block title %}Monitor — IETF Draft Analyzer{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-white">Live Monitor</h1>
    <p class="text-slate-400 text-sm mt-1">Track automated monitoring runs and pipeline status</p>
</div>

<div id="monitor-app"></div>

{% endblock %}

{% block extra_scripts %}
<script>
const PLOTLY_LAYOUT = {
    paper_bgcolor: 'transparent',
    plot_bgcolor: 'transparent',
    font: { color: '#94a3b8', family: 'Inter, system-ui, sans-serif', size: 12 },
    margin: { t: 30, r: 20, b: 40, l: 40 },
    xaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
    yaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
};
const PLOTLY_CONFIG = { responsive: true, displayModeBar: false };
const PALETTE = [
    '#3b82f6', '#ef4444', '#22c55e', '#a855f7', '#f59e0b',
    '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#8b5cf6',
];

const data = {{ status | tojson }};
const app = document.getElementById('monitor-app');

// Status banner
const lastRun = data.last_run;
let bannerColor, bannerBorder, bannerText;
if (!lastRun) {
    bannerColor = 'text-slate-400';
    bannerBorder = 'border-slate-700';
    bannerText = 'No monitoring runs recorded yet. Run <code class="text-slate-300">ietf monitor run</code> to start.';
} else if (lastRun.status === 'completed') {
    bannerColor = 'text-green-400';
    bannerBorder = 'border-green-500/30';
    bannerText = 'Last run completed successfully';
} else if (lastRun.status === 'failed') {
    bannerColor = 'text-red-400';
    bannerBorder = 'border-red-500/30';
    bannerText = 'Last run failed: ' + (lastRun.error_message || 'unknown error');
} else {
    bannerColor = 'text-yellow-400';
    bannerBorder = 'border-yellow-500/30';
    bannerText = 'A monitoring run is currently in progress...';
}

let html = `
<div class="stat-card rounded-xl border ${bannerBorder} p-4 mb-6">
    <div class="flex items-center gap-3">
        <div class="w-3 h-3 rounded-full ${lastRun && lastRun.status === 'completed' ? 'bg-green-500' : lastRun && lastRun.status === 'failed' ? 'bg-red-500' : lastRun && lastRun.status === 'running' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-600'}"></div>
        <span class="${bannerColor} font-medium">${bannerText}</span>
    </div>
</div>
`;

// Stat cards row
const lastTime = lastRun ? (lastRun.started_at || '').replace('T', ' ').slice(0, 19) : '-';
const lastDuration = lastRun && lastRun.duration_seconds ? lastRun.duration_seconds.toFixed(1) + 's' : '-';
const lastNew = lastRun ? lastRun.new_drafts_found : 0;
const totalRuns = data.total_runs;

html += `
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-2xl font-bold text-slate-200">${totalRuns}</div>
        <div class="text-xs text-slate-400 mt-1">Total Runs</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-sm font-mono font-bold text-slate-200 truncate">${lastTime}</div>
        <div class="text-xs text-slate-400 mt-1">Last Run</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-2xl font-bold text-slate-200">${lastDuration}</div>
        <div class="text-xs text-slate-400 mt-1">Duration</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-2xl font-bold text-blue-400">${lastNew}</div>
        <div class="text-xs text-slate-400 mt-1">New Drafts (Last Run)</div>
    </div>
</div>
`;

// Unprocessed counts
const up = data.unprocessed;
function warnColor(n) { return n > 0 ? 'text-yellow-400 border-yellow-500/30' : 'text-green-400 border-green-500/30'; }

html += `
<h2 class="text-lg font-semibold text-white mb-3">Unprocessed Drafts</h2>
<div class="grid grid-cols-3 gap-4 mb-8">
    <div class="stat-card rounded-xl border ${up.unrated > 0 ? 'border-yellow-500/30' : 'border-green-500/30'} p-4">
        <div class="text-2xl font-bold ${up.unrated > 0 ? 'text-yellow-400' : 'text-green-400'}">${up.unrated}</div>
        <div class="text-xs text-slate-400 mt-1">Unrated</div>
    </div>
    <div class="stat-card rounded-xl border ${up.unembedded > 0 ? 'border-yellow-500/30' : 'border-green-500/30'} p-4">
        <div class="text-2xl font-bold ${up.unembedded > 0 ? 'text-yellow-400' : 'text-green-400'}">${up.unembedded}</div>
        <div class="text-xs text-slate-400 mt-1">Un-embedded</div>
    </div>
    <div class="stat-card rounded-xl border ${up.no_ideas > 0 ? 'border-yellow-500/30' : 'border-green-500/30'} p-4">
        <div class="text-2xl font-bold ${up.no_ideas > 0 ? 'text-yellow-400' : 'text-green-400'}">${up.no_ideas}</div>
        <div class="text-xs text-slate-400 mt-1">No Ideas</div>
    </div>
</div>
`;

// Pipeline progress
const pl = data.pipeline || {};
const cost = data.cost || {};
if (pl.total_drafts) {
    const pctRated = Math.round((pl.rated / pl.total_drafts) * 100);
    const pctEmbedded = Math.round((pl.embedded / pl.total_drafts) * 100);
    const pctIdeas = Math.round((pl.with_ideas / pl.total_drafts) * 100);

    function progressBar(pct, color) {
        return `<div class="w-full bg-slate-800 rounded-full h-2.5 mt-1.5">
            <div class="h-2.5 rounded-full ${color}" style="width: ${pct}%"></div>
        </div>`;
    }

    html += `
    <h2 class="text-lg font-semibold text-white mb-3">Pipeline Progress</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="flex justify-between items-baseline">
                <span class="text-xs text-slate-400">Rated</span>
                <span class="text-sm font-bold text-blue-400">${pl.rated} / ${pl.total_drafts}</span>
            </div>
            ${progressBar(pctRated, 'bg-blue-500')}
            <div class="text-xs text-slate-600 mt-1 text-right">${pctRated}%</div>
        </div>
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="flex justify-between items-baseline">
                <span class="text-xs text-slate-400">Embedded</span>
                <span class="text-sm font-bold text-purple-400">${pl.embedded} / ${pl.total_drafts}</span>
            </div>
            ${progressBar(pctEmbedded, 'bg-purple-500')}
            <div class="text-xs text-slate-600 mt-1 text-right">${pctEmbedded}%</div>
        </div>
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="flex justify-between items-baseline">
                <span class="text-xs text-slate-400">Ideas Extracted</span>
                <span class="text-sm font-bold text-green-400">${pl.with_ideas} / ${pl.total_drafts}</span>
            </div>
            ${progressBar(pctIdeas, 'bg-green-500')}
            <div class="text-xs text-slate-600 mt-1 text-right">${pctIdeas}%</div>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="text-2xl font-bold text-slate-200">${pl.total_drafts}</div>
            <div class="text-xs text-slate-400 mt-1">Total Documents</div>
        </div>
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="text-2xl font-bold text-slate-200">${pl.idea_total}</div>
            <div class="text-xs text-slate-400 mt-1">Total Ideas</div>
        </div>
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="text-2xl font-bold text-slate-200">${pl.gap_count}</div>
            <div class="text-xs text-slate-400 mt-1">Gaps Identified</div>
        </div>
        <div class="stat-card rounded-xl border border-slate-800 p-4">
            <div class="text-xl font-bold text-amber-400">$${cost.estimated_usd || '0.00'}</div>
            <div class="text-xs text-slate-400 mt-1">Est. API Cost</div>
            <div class="text-xs text-slate-600 mt-0.5">${(cost.input_tokens || 0).toLocaleString()} in / ${(cost.output_tokens || 0).toLocaleString()} out</div>
        </div>
    </div>
    `;
}

// New drafts over time chart
const runs = data.runs.slice().reverse(); // chronological order
if (runs.length > 1) {
    html += `
    <h2 class="text-lg font-semibold text-white mb-3">New Drafts Found Over Time</h2>
    <div id="monitor-chart" class="bg-slate-900/50 rounded-xl border border-slate-800 p-4 mb-8" style="height:300px"></div>
    `;
}

// Run history table
if (data.runs.length > 0) {
    html += `
    <h2 class="text-lg font-semibold text-white mb-3">Run History</h2>
    <div class="bg-slate-900/50 rounded-xl border border-slate-800 overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-800 text-slate-400 text-xs uppercase">
                    <th class="px-4 py-3 text-left">#</th>
                    <th class="px-4 py-3 text-left">Started</th>
                    <th class="px-4 py-3 text-right">Duration</th>
                    <th class="px-4 py-3 text-center">Status</th>
                    <th class="px-4 py-3 text-right">New Drafts</th>
                    <th class="px-4 py-3 text-right">Analyzed</th>
                    <th class="px-4 py-3 text-right">Embedded</th>
                    <th class="px-4 py-3 text-right">Ideas</th>
                </tr>
            </thead>
            <tbody>`;

    for (const r of data.runs) {
        const statusBadge = r.status === 'completed'
            ? '<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-500/20 text-green-400">completed</span>'
            : r.status === 'failed'
            ? '<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500/20 text-red-400">failed</span>'
            : '<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-500/20 text-yellow-400">running</span>';
        const started = (r.started_at || '').replace('T', ' ').slice(0, 19);
        const dur = r.duration_seconds ? r.duration_seconds.toFixed(1) + 's' : '-';
        html += `
                <tr class="border-b border-slate-800/50 hover:bg-slate-800/30">
                    <td class="px-4 py-2.5 text-slate-500">${r.id}</td>
                    <td class="px-4 py-2.5 font-mono text-xs text-slate-300">${started}</td>
                    <td class="px-4 py-2.5 text-right text-slate-400">${dur}</td>
                    <td class="px-4 py-2.5 text-center">${statusBadge}</td>
                    <td class="px-4 py-2.5 text-right text-slate-300">${r.new_drafts_found}</td>
                    <td class="px-4 py-2.5 text-right text-slate-300">${r.drafts_analyzed}</td>
                    <td class="px-4 py-2.5 text-right text-slate-300">${r.drafts_embedded}</td>
                    <td class="px-4 py-2.5 text-right text-slate-300">${r.ideas_extracted}</td>
                </tr>`;
    }
    html += `
            </tbody>
        </table>
    </div>`;
}

app.innerHTML = html;

// Render chart
if (runs.length > 1) {
    const x = runs.map(r => (r.started_at || '').slice(0, 19));
    const y = runs.map(r => r.new_drafts_found || 0);
    Plotly.newPlot('monitor-chart', [{
        x: x,
        y: y,
        type: 'scatter',
        mode: 'lines+markers',
        fill: 'tozeroy',
        line: { color: PALETTE[0], width: 2 },
        marker: { color: PALETTE[0], size: 6 },
        fillcolor: PALETTE[0] + '30',
    }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Run Date', font: { size: 11 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'New Drafts', font: { size: 11 } } },
    }, PLOTLY_CONFIG);
}
</script>
{% endblock %}