{% 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>
    <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
            <h2 class="text-2xl font-semibold text-gray-900 break-words">{{ 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 not edit_mode %}
        <a href="/sources/{{ source.id }}?edit=1"
           class="shrink-0 px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-colors">
            Edit
        </a>
        {% endif %}
    </div>
</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 %}
{% if error %}
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-800 rounded text-sm">
    {{ error }}
</div>
{% endif %}

{% if edit_mode %}
<!-- Edit mode: domain / title / focus. URL is intentionally read-only -->
<form hx-post="/sources/{{ source.id }}/edit"
      hx-target="body"
      hx-swap="innerHTML"
      class="mb-8 bg-white rounded-lg border border-gray-200 p-5 space-y-4">
    <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">URL <span class="font-normal normal-case text-gray-400">(read-only — dedupe key)</span></label>
        <input type="text" value="{{ source.url }}" disabled
               class="w-full px-3 py-2 border border-gray-200 bg-gray-50 text-gray-500 text-sm rounded">
    </div>
    <div>
        <label for="edit-title" class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Title</label>
        <input type="text" id="edit-title" name="title" value="{{ source.title or '' }}"
               class="w-full px-3 py-2 border border-gray-300 text-sm rounded focus:outline-none focus:ring-2 focus:ring-indigo-300">
    </div>
    <div>
        <label for="edit-domain" class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Domain</label>
        <select id="edit-domain" name="domain"
                class="w-full px-3 py-2 border border-gray-300 text-sm rounded focus:outline-none focus:ring-2 focus:ring-indigo-300">
            {% for d in domains %}
            <option value="{{ d }}" {% if d == source.domain %}selected{% endif %}>{{ d }}</option>
            {% endfor %}
        </select>
    </div>
    <div>
        <label for="edit-focus" class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Focus</label>
        <textarea id="edit-focus" name="focus" rows="3"
                  class="w-full px-3 py-2 border border-gray-300 text-sm rounded focus:outline-none focus:ring-2 focus:ring-indigo-300">{{ source.focus or '' }}</textarea>
    </div>
    <div class="flex gap-2 pt-1">
        <button type="submit"
                class="px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded hover:bg-indigo-700 transition-colors">
            Save
        </button>
        <a href="/sources/{{ source.id }}"
           class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-semibold rounded hover:bg-gray-50 transition-colors">
            Cancel
        </a>
    </div>
</form>
{% else %}
<!-- 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 %}

<!-- Actions row: accept/reject (when analyzed) + retry (always) -->
<div class="flex flex-wrap gap-3 mb-8">
    {% if source.status == 'analyzed' %}
    <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>
    {% endif %}

    <!-- Re-run: full reset → PENDING. Re-pulls and re-processes from scratch. -->
    <button hx-post="/sources/{{ source.id }}/retry"
            hx-vals='{"mode": "full"}'
            hx-target="body"
            hx-swap="innerHTML"
            hx-confirm="Re-run this source from scratch? Status will reset to PENDING and the pipeline will re-pull{% if source.source_type == 'video' %} and re-transcribe (expensive){% endif %}."
            class="px-5 py-2 bg-amber-500 text-white text-sm font-semibold rounded hover:bg-amber-600 transition-colors">
        Re-run from scratch
    </button>

    {% if source.has_transcript %}
    <!-- Light retry: skip the re-pull, just re-run LLM extraction. Works
         for any source with stored body text (videos have transcripts,
         articles have the trafilatura-extracted body). -->
    <button hx-post="/sources/{{ source.id }}/retry"
            hx-vals='{"mode": "extract"}'
            hx-target="body"
            hx-swap="innerHTML"
            hx-confirm="Re-extract only — keep the existing transcript/body and re-run the LLM extraction?"
            class="px-5 py-2 bg-amber-100 text-amber-800 text-sm font-semibold rounded hover:bg-amber-200 border border-amber-300 transition-colors">
        Re-extract only
    </button>
    {% endif %}
</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 %}