{% extends "themis/base.html" %}
{% load humanize %}

{% block title %}Embedding Pipeline — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'library:library-list' %}" class="btn btn-ghost btn-sm">← Libraries</a>
</div>

<h1 class="text-3xl font-bold mb-6">Embedding Pipeline Dashboard</h1>

<!-- System Models -->
<div class="card bg-base-200 mb-6">
    <div class="card-body">
        <h2 class="card-title">System Models</h2>
        <div class="overflow-x-auto">
            <table class="table">
                <tbody>
                    <tr>
                        <th class="w-48">Embedding Model</th>
                        <td>
                            {% if system_embedding_model %}
                                <span class="font-semibold">{{ system_embedding_model.api.name }}: {{ system_embedding_model.name }}</span>
                                {% if system_embedding_model.vector_dimensions %}
                                    <span class="badge badge-info badge-sm ml-2">{{ system_embedding_model.vector_dimensions }}d</span>
                                {% endif %}
                                {% if system_embedding_model.supports_multimodal %}
                                    <span class="badge badge-accent badge-sm ml-1">Multimodal</span>
                                {% endif %}
                                {% include "library/_model_health_badge.html" with h=model_health.embedding %}
                            {% else %}
                                <div class="flex items-center gap-2">
                                    <span class="badge badge-error">NOT CONFIGURED</span>
                                    <span class="text-sm opacity-60">Set via <a href="/admin/llm_manager/llmmodel/" class="link link-primary">Admin → LLM Models</a> → Action: "Set as System Embedding Model"</span>
                                </div>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Chat Model</th>
                        <td>
                            {% if system_chat_model %}
                                <span class="font-semibold">{{ system_chat_model.api.name }}: {{ system_chat_model.name }}</span>
                                {% include "library/_model_health_badge.html" with h=model_health.chat %}
                            {% else %}
                                <span class="text-sm opacity-60">Not configured — concept extraction disabled</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Reranker Model</th>
                        <td>
                            {% if system_reranker_model %}
                                <span class="font-semibold">{{ system_reranker_model.api.name }}: {{ system_reranker_model.name }}</span>
                                {% include "library/_model_health_badge.html" with h=model_health.reranker %}
                            {% else %}
                                <span class="text-sm opacity-60">Not configured — Phase 3</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Vision Model</th>
                        <td>
                            {% if system_vision_model %}
                                <span class="font-semibold">{{ system_vision_model.api.name }}: {{ system_vision_model.name }}</span>
                                {% if system_vision_model.supports_vision %}
                                    <span class="badge badge-accent badge-sm ml-1">Vision</span>
                                {% endif %}
                                {% include "library/_model_health_badge.html" with h=model_health.vision %}
                            {% else %}
                                <span class="text-sm opacity-60">Not configured — image analysis disabled</span>
                            {% endif %}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if not neo4j_available %}
<div class="alert alert-warning mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
    <span>Neo4j is not available. Item counts and graph statistics cannot be loaded.</span>
</div>
{% endif %}

<!-- Embedding Status -->
{% if neo4j_available %}
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">Total Items</div>
        <div class="stat-value text-lg">{{ total_items }}</div>
    </div>
    {% for status, count in status_counts.items %}
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">
            {% if status == "completed" %}✓ Completed
            {% elif status == "processing" %}⟳ Processing
            {% elif status == "failed" %}✗ Failed
            {% elif status == "pending" %}◦ Pending
            {% else %}{{ status }}{% endif %}
        </div>
        <div class="stat-value text-lg
            {% if status == 'completed' %} text-success
            {% elif status == 'processing' %} text-warning
            {% elif status == 'failed' %} text-error
            {% endif %}">
            {{ count }}
        </div>
        {% if total_items > 0 %}
        <div class="stat-desc">{% widthratio count total_items 100 %}% of items</div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Actions -->
{% if status_counts.pending and status_counts.pending > 0 %}
<div class="card bg-base-200 mb-6">
    <div class="card-body">
        <h2 class="card-title">Actions</h2>
        <form method="post" action="{% url 'library:embed-all-pending' %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary"
                    onclick="return confirm('Queue embedding for {{ status_counts.pending }} pending items?')">
                Embed All Pending Items ({{ status_counts.pending }})
            </button>
            <p class="text-sm opacity-60 mt-2">
                This will queue Celery tasks for all pending items that have uploaded files.
            </p>
        </form>
    </div>
</div>
{% endif %}

<!-- Knowledge Graph Nodes -->
{% if neo4j_available %}
<div class="card bg-base-200 mb-6">
    <div class="card-body">
        <h2 class="card-title">Knowledge Graph</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            {% for label, count in node_counts.items %}
            <div class="stat bg-base-100 rounded-lg p-3">
                <div class="stat-title text-xs">{{ label }}</div>
                <div class="stat-value text-base">{{ count|intcomma }}</div>
            </div>
            {% endfor %}
        </div>
        {% if total_chunks > 0 %}
        <div class="mt-4">
            <div class="flex items-center gap-2">
                <span class="font-medium">Chunks with embeddings:</span>
                <span>{{ embedded_chunks|intcomma }} / {{ total_chunks|intcomma }}</span>
                <progress class="progress progress-primary w-48"
                          value="{{ embedded_chunks }}"
                          max="{{ total_chunks }}"></progress>
                <span class="text-sm opacity-60">{% widthratio embedded_chunks total_chunks 100 %}%</span>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Quick Links -->
<div class="card bg-base-200">
    <div class="card-body">
        <h2 class="card-title">Quick Links</h2>
        <div class="flex flex-wrap gap-2">
            <a href="{% url 'library:library-list' %}" class="btn btn-outline btn-sm">Libraries</a>
            <a href="/llm/" class="btn btn-outline btn-sm">LLM Manager</a>
            <a href="/admin/llm_manager/llmmodel/" class="btn btn-outline btn-sm">Admin: LLM Models</a>
            <a href="/admin/llm_manager/llmusage/" class="btn btn-outline btn-sm">Admin: Usage</a>
        </div>
    </div>
</div>
{% endblock %}