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

{% block title %}{{ idea.title }} — Idea Detail{% endblock %}

{% block extra_head %}
<style>
    .idea-type-protocol    { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
    .idea-type-mechanism   { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
    .idea-type-framework   { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
    .idea-type-architecture { background: rgba(234, 179, 8, 0.15); color: #facc15; border-color: rgba(234, 179, 8, 0.3); }
    .idea-type-default     { background: rgba(100, 116, 139, 0.15); color: #94a3b8; border-color: rgba(100, 116, 139, 0.3); }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/idea-analysis" class="text-blue-400 hover:text-blue-300 transition">Idea Analysis</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">{{ idea.title[:60] }}{% if idea.title|length > 60 %}...{% endif %}</span>
</nav>

<!-- Idea Header -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <div class="flex items-start justify-between gap-4 mb-4">
        <h1 class="text-xl font-bold text-white">{{ idea.title }}</h1>
        <div class="flex items-center gap-2 flex-shrink-0">
            {% if idea.type %}
            {% set type_lower = idea.type|lower %}
            <span class="px-2.5 py-1 rounded-full text-xs font-medium border
                {% if type_lower == 'protocol' %}idea-type-protocol
                {% elif type_lower == 'mechanism' %}idea-type-mechanism
                {% elif type_lower == 'framework' %}idea-type-framework
                {% elif type_lower == 'architecture' %}idea-type-architecture
                {% else %}idea-type-default{% endif %}">
                {{ idea.type }}
            </span>
            {% endif %}
            {% if idea.novelty_score is not none and idea.novelty_score %}
            <span class="px-2 py-1 rounded text-xs font-mono
                {% if idea.novelty_score >= 4 %}bg-green-500/20 text-green-400
                {% elif idea.novelty_score >= 3 %}bg-amber-500/20 text-amber-400
                {% elif idea.novelty_score >= 2 %}bg-orange-500/20 text-orange-400
                {% else %}bg-red-500/20 text-red-400{% endif %}"
                title="Novelty score">N:{{ idea.novelty_score }}</span>
            {% endif %}
        </div>
    </div>

    {% if idea.description %}
    <div class="mb-4">
        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Description</h3>
        <p class="text-sm text-slate-300 leading-relaxed">{{ idea.description }}</p>
    </div>
    {% endif %}

    <!-- Source Draft -->
    <div class="bg-slate-800/50 rounded-lg p-4">
        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Source Draft</h3>
        <a href="/drafts/{{ idea.draft_name }}" class="text-sm text-blue-400 hover:text-blue-300 transition">
            {{ idea.draft_title or idea.draft_name }}
        </a>
        <span class="text-xs text-slate-500 font-mono ml-2">{{ idea.draft_name }}</span>
        {% if idea.draft_date %}
        <span class="text-xs text-slate-600 ml-2">{{ idea.draft_date }}</span>
        {% endif %}
        {% if idea.categories %}
        <div class="flex flex-wrap gap-1 mt-2">
            {% for cat in idea.categories[:3] %}
            <span class="px-2 py-0.5 rounded-full text-[10px] bg-slate-700/60 text-slate-400 border border-slate-600">{{ cat }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Similar Ideas -->
{% if idea.similar %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
    <h2 class="text-sm font-semibold text-slate-300 mb-4 flex items-center gap-2">
        <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
        Most Similar Ideas <span class="text-slate-600 font-normal">(by embedding cosine similarity)</span>
    </h2>
    <div class="space-y-3">
        {% for sim in idea.similar %}
        <a href="/ideas/{{ sim.id }}" class="block bg-slate-800/30 rounded-lg border border-slate-800/50 hover:border-slate-700 p-4 transition group">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <h3 class="text-sm font-medium text-slate-200 group-hover:text-blue-400 transition">{{ sim.title }}</h3>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="text-xs text-slate-500 font-mono">{{ sim.draft_name }}</span>
                        {% if sim.type %}
                        {% set st = sim.type|lower %}
                        <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium border
                            {% if st == 'protocol' %}idea-type-protocol
                            {% elif st == 'mechanism' %}idea-type-mechanism
                            {% elif st == 'framework' %}idea-type-framework
                            {% elif st == 'architecture' %}idea-type-architecture
                            {% else %}idea-type-default{% endif %}">
                            {{ sim.type }}
                        </span>
                        {% endif %}
                    </div>
                </div>
                <span class="flex-shrink-0 px-2 py-1 rounded text-xs font-mono
                    {% if sim.similarity >= 0.9 %}bg-green-500/20 text-green-400
                    {% elif sim.similarity >= 0.8 %}bg-emerald-500/20 text-emerald-400
                    {% elif sim.similarity >= 0.7 %}bg-amber-500/20 text-amber-400
                    {% else %}bg-slate-500/20 text-slate-400{% endif %}"
                    title="Cosine similarity">{{ sim.similarity }}</span>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% else %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
    <h2 class="text-sm font-semibold text-slate-300 mb-2">Similar Ideas</h2>
    <p class="text-sm text-slate-500">No embeddings available for this idea. Run the embedding pipeline to enable similarity search.</p>
</div>
{% endif %}
{% endblock %}