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

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

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-white">Extracted Ideas</h1>
    <p class="text-slate-400 text-sm mt-1">{{ data.total }} technical ideas extracted from rated drafts</p>
</div>

<!-- Stats header -->
<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-3xl font-bold text-blue-400">{{ data.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-3xl font-bold text-purple-400">{{ data.by_type | length }}</div>
        <div class="text-xs text-slate-400 mt-1">Idea Types</div>
    </div>
    {% set top_type = data.by_type.keys() | list %}
    {% if top_type %}
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-lg font-bold text-green-400 truncate">{{ top_type[0] }}</div>
        <div class="text-xs text-slate-400 mt-1">Most Common Type</div>
    </div>
    <div class="stat-card rounded-xl border border-slate-800 p-4">
        <div class="text-3xl font-bold text-amber-400">{{ data.by_type[top_type[0]] }}</div>
        <div class="text-xs text-slate-400 mt-1">{{ top_type[0] }} Count</div>
    </div>
    {% endif %}
</div>

<!-- Chart -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-5 mb-6">
    <h2 class="text-sm font-semibold text-slate-300 mb-3">Ideas by Type</h2>
    <div id="ideasChart" style="height: 350px;"></div>
</div>

<!-- Ideas list -->
<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
    <div class="p-4 border-b border-slate-800 flex flex-col sm:flex-row gap-3">
        <input type="text" id="ideaSearch" placeholder="Search ideas by title, description, or draft name..."
            class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-blue-500">
        <select id="typeFilter"
            class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
            <option value="">All Types</option>
            {% for t in data.by_type %}
            <option value="{{ t }}">{{ t }} ({{ data.by_type[t] }})</option>
            {% endfor %}
        </select>
    </div>
    <div class="px-4 py-2 border-b border-slate-800/50 text-xs text-slate-500">
        <span id="visibleCount">{{ data.ideas | length }}</span> ideas shown
    </div>
    <div class="divide-y divide-slate-800/50 max-h-[600px] overflow-y-auto" id="ideaList">
        {% for idea in data.ideas %}
        <div class="idea-item px-4 py-3 hover:bg-slate-800/50 transition"
             data-search="{{ (idea.title or '')|lower }} {{ (idea.description or '')|lower }} {{ (idea.draft_name or '')|lower }}"
             data-type="{{ idea.type|default('other', true)|lower }}">
            <div class="flex items-center gap-2 mb-1 flex-wrap">
                <span class="text-sm font-medium text-slate-200">{{ idea.title }}</span>
                {% if idea.type %}
                <span class="px-2 py-0.5 rounded text-[10px] font-medium bg-blue-500/20 text-blue-400 whitespace-nowrap">{{ idea.type }}</span>
                {% endif %}
            </div>
            <p class="text-xs text-slate-500 leading-relaxed">{{ idea.description }}</p>
            <a href="/drafts/{{ idea.draft_name }}" class="text-[10px] text-slate-600 hover:text-blue-400 transition mt-1 inline-block font-mono">{{ idea.draft_name }}</a>
        </div>
        {% endfor %}
    </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: 10, r: 20, b: 40, l: 140 },
    xaxis: { gridcolor: '#1e293b', title: 'Count' },
    yaxis: { gridcolor: '#1e293b' },
};

const byType = {{ data.by_type | tojson }};
const types = Object.keys(byType).reverse();
const counts = types.map(t => byType[t]);

// Color gradient from blue to purple
const barColors = types.map((_, i) => {
    const ratio = i / Math.max(types.length - 1, 1);
    const r = Math.round(59 + ratio * (168 - 59));
    const g = Math.round(130 + ratio * (85 - 130));
    const b = Math.round(246 + ratio * (247 - 246));
    return `rgb(${r},${g},${b})`;
});

Plotly.newPlot('ideasChart', [{
    y: types, x: counts,
    type: 'bar', orientation: 'h',
    marker: { color: barColors },
    hovertemplate: '<b>%{y}</b>: %{x} ideas<extra></extra>',
}], PLOTLY_LAYOUT, { responsive: true, displayModeBar: false });

// Search and filter
function filterIdeas() {
    const q = document.getElementById('ideaSearch').value.toLowerCase().trim();
    const typeFilter = document.getElementById('typeFilter').value.toLowerCase();
    let visible = 0;
    document.querySelectorAll('.idea-item').forEach(el => {
        const matchesSearch = !q || el.dataset.search.includes(q);
        const matchesType = !typeFilter || el.dataset.type === typeFilter;
        const show = matchesSearch && matchesType;
        el.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('visibleCount').textContent = visible;
}

document.getElementById('ideaSearch').addEventListener('input', filterIdeas);
document.getElementById('typeFilter').addEventListener('change', filterIdeas);
</script>
{% endblock %}