{% extends "base.html" %}

{% block title %}{{ source.title }} — second-brain{% endblock %}

{% block content %}
<!-- Back + title -->
<div class="mb-6">
    <a href="/" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 mb-3">
        <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Back to sources
    </a>
    <h2 class="text-2xl font-semibold text-gray-900">{{ source.title }}</h2>
    <a href="{{ source.url }}" target="_blank"
       class="text-sm text-indigo-500 hover:text-indigo-700 break-all">{{ source.url }}</a>
</div>

{% if flash %}
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-800 rounded text-sm">
    {{ flash }}
</div>
{% endif %}

<!-- Meta row -->
<div class="flex flex-wrap gap-2 mb-6">
    {% set status_colors = {
        'pending':     'bg-gray-100 text-gray-700',
        'pulled':      'bg-blue-100 text-blue-700',
        'transcribed': 'bg-yellow-100 text-yellow-700',
        'analyzed':    'bg-orange-100 text-orange-700',
        'accepted':    'bg-green-100 text-green-700',
        'published':   'bg-purple-100 text-purple-700',
        'failed':      'bg-red-100 text-red-700'
    } %}
    <span class="px-3 py-1 rounded-full text-sm font-medium
        {{ status_colors.get(source.status, 'bg-gray-100 text-gray-700') }}">
        {{ source.status }}
    </span>
    <span class="px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700">
        {{ source.domain }}
    </span>
    <span class="px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700">
        {{ source.source_type }}
    </span>
    <span class="px-3 py-1 text-sm text-gray-500">
        added {{ source.ingested_at }}
    </span>
</div>

{% if source.focus %}
<div class="mb-6 bg-indigo-50 border border-indigo-100 rounded p-3 text-sm text-indigo-800">
    <span class="font-medium">Focus:</span> {{ source.focus }}
</div>
{% endif %}

{% if source.error_message %}
<div class="mb-6 bg-red-50 border border-red-200 rounded p-3 text-sm text-red-800">
    <span class="font-medium">Error:</span> {{ source.error_message }}
</div>
{% endif %}

<!-- Accept / Reject actions (only when analyzed) -->
{% if source.status == 'analyzed' %}
<div class="flex gap-3 mb-8">
    <button hx-post="/sources/{{ source.id }}/accept"
            hx-target="body"
            hx-swap="innerHTML"
            class="px-5 py-2 bg-green-600 text-white text-sm font-semibold rounded hover:bg-green-700 transition-colors">
        Accept
    </button>
    <button hx-post="/sources/{{ source.id }}/reject"
            hx-target="body"
            hx-swap="innerHTML"
            class="px-5 py-2 bg-red-500 text-white text-sm font-semibold rounded hover:bg-red-600 transition-colors">
        Reject
    </button>
</div>
{% endif %}

<!-- Extraction results -->
{% if extraction %}
<div class="space-y-5">

    <!-- Summary -->
    {% if extraction.summary %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Summary</h3>
        <p class="text-gray-800 leading-relaxed">{{ extraction.summary }}</p>
    </div>
    {% endif %}

    <!-- Key points -->
    {% if extraction.key_points %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Key Points</h3>
        <ul class="space-y-2">
            {% for pt in extraction.key_points %}
            <li class="flex gap-2 text-gray-800 text-sm">
                <span class="text-indigo-400 mt-0.5">•</span>
                <span>{{ pt }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Claims -->
    {% if extraction.claims %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Claims</h3>
        <ul class="space-y-2">
            {% for c in extraction.claims %}
            <li class="flex gap-2 text-gray-800 text-sm">
                <span class="text-amber-400 mt-0.5">→</span>
                <span>{{ c }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Entities -->
    {% if extraction.entities %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Entities</h3>
        <div class="flex flex-wrap gap-2">
            {% for e in extraction.entities %}
            <span class="px-2.5 py-1 bg-gray-100 text-gray-700 rounded text-sm">{{ e }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Open questions -->
    {% if extraction.open_questions %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Open Questions</h3>
        <ul class="space-y-2">
            {% for q in extraction.open_questions %}
            <li class="flex gap-2 text-gray-800 text-sm">
                <span class="text-teal-400 mt-0.5">?</span>
                <span>{{ q }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Contradictions -->
    {% if extraction.contradictions %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Contradictions</h3>
        <ul class="space-y-2">
            {% for ct in extraction.contradictions %}
            <li class="flex gap-2 text-gray-800 text-sm">
                <span class="text-red-400 mt-0.5">✗</span>
                <span>{{ ct }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Token usage footer -->
    {% if extraction.input_tokens or extraction.output_tokens %}
    <p class="text-xs text-gray-400 text-right">
        tokens: {{ extraction.input_tokens or 0 }} in / {{ extraction.output_tokens or 0 }} out
    </p>
    {% endif %}

</div>
{% else %}
<div class="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
    <p class="text-gray-400">No extraction yet.</p>
    <p class="text-gray-400 text-sm mt-1">Run <code class="bg-gray-100 px-1 rounded">second-brain process</code> to analyze this source.</p>
</div>
{% endif %}
{% endblock %}