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

{% block title %}False Positive Profile — IETF Draft Analyzer{% endblock %}

{% block extra_head %}<script src="/static/js/plotly.min.js"></script>{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-white">False Positive Profile</h1>
    <p class="text-slate-400 text-sm mt-1">Analysis of {{ data.count }} drafts flagged as false positives — documents that matched AI/agent search keywords but were determined not to be genuinely about AI agent infrastructure.</p>
</div>

<!-- Stats Panel -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="stat-card rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-500 to-red-400"></div>
        <div class="text-xs text-slate-500 uppercase tracking-wider">False Positives</div>
        <div class="text-2xl font-bold text-white mt-1">{{ data.count }}</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-500 to-yellow-400"></div>
        <div class="text-xs text-slate-500 uppercase tracking-wider">% of All Drafts</div>
        <div class="text-2xl font-bold text-white mt-1">{{ data.pct_of_total }}%</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-blue-400"></div>
        <div class="text-xs text-slate-500 uppercase tracking-wider">% of Rated</div>
        <div class="text-2xl font-bold text-white mt-1">{{ data.pct_of_rated }}%</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-500 to-green-400"></div>
        <div class="text-xs text-slate-500 uppercase tracking-wider">Total Rated</div>
        <div class="text-2xl font-bold text-white mt-1">{{ data.total_rated }}</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-purple-400"></div>
        <div class="text-xs text-slate-500 uppercase tracking-wider">Total Drafts</div>
        <div class="text-2xl font-bold text-white mt-1">{{ data.total_drafts }}</div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Box Plots: FP vs Non-FP -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-1">Rating Distributions: FP vs Non-FP</h2>
        <p class="text-xs text-slate-500 mb-3">Box plots comparing each rating dimension between false positives (red) and genuine AI/agent drafts (blue). Shows what rating patterns distinguish false positives.</p>
        <div id="boxPlots" style="height: 400px;"></div>
    </div>

    <!-- Source distribution -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-1">False Positives by Source</h2>
        <p class="text-xs text-slate-500 mb-3">Which standards bodies produce the most false positives in our search results.</p>
        <div id="sourcePie" style="height: 400px;"></div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Category distribution -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-1">Categories Assigned to False Positives</h2>
        <p class="text-xs text-slate-500 mb-3">Categories that the classifier assigned to false positive drafts before they were flagged. Shows which categories are most prone to false matches.</p>
        <div id="catBar" style="height: 400px;"></div>
    </div>

    <!-- Top Terms -->
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-1">Top Terms in FP Abstracts</h2>
        <p class="text-xs text-slate-500 mb-3">Most frequent words in false positive titles and abstracts (stop words excluded). These terms trigger AI/agent keyword matches but appear in unrelated contexts.</p>
        <div id="termBar" style="height: 400px;"></div>
    </div>
</div>

<!-- FP Table -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
    <div class="p-4 border-b border-slate-800">
        <h2 class="text-sm font-semibold text-slate-300">All False Positives</h2>
        <p class="text-xs text-slate-500 mt-1">Complete list of flagged drafts. Click a name to view details.</p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-800 text-left text-xs text-slate-500">
                    <th class="px-4 py-3 font-medium">#</th>
                    <th class="px-4 py-3 font-medium">Draft</th>
                    <th class="px-4 py-3 font-medium">Title</th>
                    <th class="px-4 py-3 font-medium text-center">Source</th>
                    <th class="px-4 py-3 font-medium text-center">Relevance</th>
                    <th class="px-4 py-3 font-medium">Categories</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/50">
                {% for fp in data.fp_list %}
                <tr class="hover:bg-slate-800/50 transition">
                    <td class="px-4 py-3 text-slate-500 font-mono text-xs">{{ loop.index }}</td>
                    <td class="px-4 py-3">
                        <a href="/drafts/{{ fp.name }}" class="text-blue-400 hover:text-blue-300 transition text-xs font-mono">{{ fp.name | replace('draft-', '') | truncate(40) }}</a>
                    </td>
                    <td class="px-4 py-3 text-slate-300 text-xs max-w-xs truncate">{{ fp.title }}</td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase bg-slate-800 text-slate-400">{{ fp.source }}</span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="{% if fp.relevance >= 3 %}text-yellow-400{% else %}text-slate-500{% endif %}">{{ fp.relevance }}</span>
                    </td>
                    <td class="px-4 py-3">
                        {% for cat in fp.categories[:2] %}
                        <span class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-400">{{ cat }}</span>
                        {% endfor %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
const PLOTLY_LAYOUT = {
    paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)',
    font: { color: '#94a3b8', family: 'Inter, system-ui, sans-serif', size: 12 },
    margin: { t: 20, r: 20, b: 40, l: 50 },
    xaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
    yaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
};
const CFG = { responsive: true, displayModeBar: false };

const fpData = {{ data | tojson }};

// Box plots: FP vs Non-FP
const dims = ['novelty', 'maturity', 'overlap', 'momentum', 'relevance'];
const dimLabels = ['Novelty', 'Maturity', 'Overlap', 'Momentum', 'Relevance'];
const boxTraces = [];
dims.forEach((d, i) => {
    boxTraces.push({
        y: fpData.nonfp_dims[d], name: dimLabels[i] + ' (non-FP)',
        type: 'box', marker: { color: '#3b82f6' }, boxmean: true,
        legendgroup: dimLabels[i], showlegend: i === 0,
    });
    boxTraces.push({
        y: fpData.fp_dims[d], name: dimLabels[i] + ' (FP)',
        type: 'box', marker: { color: '#ef4444' }, boxmean: true,
        legendgroup: dimLabels[i], showlegend: i === 0,
    });
});
Plotly.newPlot('boxPlots', boxTraces, {
    ...PLOTLY_LAYOUT,
    boxmode: 'group',
    showlegend: true,
    legend: { font: { size: 10, color: '#94a3b8' }, orientation: 'h', y: 1.1 },
    yaxis: { ...PLOTLY_LAYOUT.yaxis, range: [0.5, 5.5], dtick: 1, title: 'Rating' },
    margin: { t: 40, r: 10, b: 30, l: 50 },
}, CFG);

// Source pie
const srcLabels = Object.keys(fpData.fp_sources);
const srcValues = Object.values(fpData.fp_sources);
const srcColors = {
    'ietf': '#3b82f6', 'iso': '#22c55e', 'itu': '#eab308',
    'w3c': '#a855f7', 'etsi': '#ef4444', 'nist': '#06b6d4',
};
Plotly.newPlot('sourcePie', [{
    labels: srcLabels.map(s => s.toUpperCase()),
    values: srcValues,
    type: 'pie',
    marker: { colors: srcLabels.map(s => srcColors[s] || '#64748b') },
    textinfo: 'label+value',
    textfont: { color: '#e2e8f0', size: 12 },
    hovertemplate: '%{label}: %{value} drafts (%{percent})<extra></extra>',
    hole: 0.4,
}], {
    ...PLOTLY_LAYOUT,
    showlegend: false,
    margin: { t: 10, r: 10, b: 10, l: 10 },
}, CFG);

// Category bar
const catLabels = Object.keys(fpData.fp_categories);
const catValues = Object.values(fpData.fp_categories);
Plotly.newPlot('catBar', [{
    x: catValues,
    y: catLabels,
    type: 'bar',
    orientation: 'h',
    marker: { color: '#ef4444', opacity: 0.7 },
    hovertemplate: '%{y}: %{x} drafts<extra></extra>',
}], {
    ...PLOTLY_LAYOUT,
    xaxis: { ...PLOTLY_LAYOUT.xaxis, title: 'Draft Count' },
    yaxis: { ...PLOTLY_LAYOUT.yaxis, autorange: 'reversed' },
    margin: { t: 10, r: 10, b: 40, l: 180 },
}, CFG);

// Top terms bar
const terms = fpData.top_terms;
const termLabels = terms.map(t => t[0]);
const termValues = terms.map(t => t[1]);
Plotly.newPlot('termBar', [{
    x: termValues,
    y: termLabels,
    type: 'bar',
    orientation: 'h',
    marker: { color: '#f59e0b', opacity: 0.7 },
    hovertemplate: '%{y}: %{x} occurrences<extra></extra>',
}], {
    ...PLOTLY_LAYOUT,
    xaxis: { ...PLOTLY_LAYOUT.xaxis, title: 'Occurrences' },
    yaxis: { ...PLOTLY_LAYOUT.yaxis, autorange: 'reversed' },
    margin: { t: 10, r: 10, b: 40, l: 120 },
}, CFG);
</script>
{% endblock %}
