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

{% block title %}{{ item.title }} — {{ 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>

<div class="flex justify-between items-start mb-6">
    <div>
        <h1 class="text-3xl font-bold">{{ item.title }}</h1>
        {% if item.item_type %}<div class="badge badge-outline mt-2">{{ item.item_type }}</div>{% endif %}
        {% if item.file_type %}<div class="badge badge-ghost mt-2 ml-1">{{ item.file_type }}</div>{% endif %}
    </div>
    <div class="flex gap-2">
        {% if item.s3_key %}
        <a href="{% url 'library:item-download' uid=item.uid %}" class="btn btn-sm btn-outline btn-primary" title="Download original file">
            ↓ Download
        </a>
        {% endif %}
        <a href="{% url 'library:item-edit' uid=item.uid %}" class="btn btn-sm btn-outline">Edit</a>
        <form method="post" action="{% url 'library:item-reembed' uid=item.uid %}" class="inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-outline btn-secondary" title="Re-embed this item">
                ↻ Re-embed
            </button>
        </form>
        <a href="{% url 'library:item-delete' uid=item.uid %}" class="btn btn-sm btn-error btn-outline">Delete</a>
    </div>
</div>

<!-- Embedding Status -->
<div class="mb-6">
    <div class="flex items-center gap-3">
        <span class="font-medium">Embedding Status:</span>
        {% if item.embedding_status == "completed" %}
            <span class="badge badge-success">Completed</span>
        {% elif item.embedding_status == "processing" %}
            <span class="badge badge-warning">Processing</span>
        {% elif item.embedding_status == "failed" %}
            <span class="badge badge-error">Failed</span>
        {% else %}
            <span class="badge badge-ghost">Pending</span>
        {% endif %}

        {% if item.embedding_model_name %}
            <span class="text-sm opacity-60">Model: {{ item.embedding_model_name }}</span>
        {% endif %}
    </div>
    {% if item.error_message %}
    <div class="alert alert-error mt-2">
        <span>{{ item.error_message }}</span>
    </div>
    {% endif %}
</div>

<!-- Item Metadata -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">File Size</div>
        <div class="stat-value text-lg">{{ item.file_size|default:0|intcomma }} bytes</div>
    </div>
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">Chunks</div>
        <div class="stat-value text-lg">{{ item.chunk_count|default:0 }}</div>
    </div>
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">Images</div>
        <div class="stat-value text-lg">{{ item.image_count|default:0 }}</div>
    </div>
    <div class="stat bg-base-200 rounded-lg">
        <div class="stat-title">Concepts</div>
        <div class="stat-value text-lg">{{ concepts|length }}</div>
    </div>
</div>

<!-- Concepts -->
{% if concepts %}
<div class="mb-6">
    <h2 class="text-xl font-bold mb-3">Referenced Concepts</h2>
    <div class="flex flex-wrap gap-2">
        {% for concept in concepts %}
        <div class="badge badge-lg badge-primary badge-outline">
            {{ concept.name }}
            {% if concept.concept_type %}
            <span class="ml-1 opacity-60 text-xs">({{ concept.concept_type }})</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Images -->
{% if images %}
<div class="mb-6">
    <h2 class="text-xl font-bold mb-3">Images ({{ images|length }})</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {% for img in images %}
        <div class="card bg-base-200">
            <div class="flex flex-col md:flex-row">
                {% if img.s3_key %}
                <a href="{% url 'library:image-serve' uid=img.uid %}" target="_blank" rel="noopener" class="flex-shrink-0">
                    <img src="{% url 'library:image-serve' uid=img.uid %}" alt="{{ img.description|default:'Image' }}" class="rounded-lg object-cover w-full md:w-48 h-40" loading="lazy" />
                </a>
                {% endif %}
                <div class="card-body p-3 flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="badge badge-primary badge-sm">{{ img.image_type|default:"image" }}</span>
                        {% if img.analysis_status == "completed" %}
                            <span class="badge badge-success badge-xs">analyzed</span>
                        {% elif img.analysis_status == "failed" %}
                            <span class="badge badge-error badge-xs">analysis failed</span>
                        {% elif img.analysis_status == "skipped" %}
                            <span class="badge badge-ghost badge-xs">no vision model</span>
                        {% endif %}
                        {% if img.vision_model_name %}
                            <span class="text-xs opacity-40">{{ img.vision_model_name }}</span>
                        {% endif %}
                    </div>
                    {% if img.description %}
                    <p class="text-sm mt-2">{{ img.description }}</p>
                    {% endif %}
                    {% if img.ocr_text %}
                    <div class="collapse collapse-arrow bg-base-300 mt-2">
                        <input type="checkbox" />
                        <div class="collapse-title text-xs font-medium py-1 min-h-0">
                            Extracted Text (OCR)
                        </div>
                        <div class="collapse-content">
                            <p class="text-xs whitespace-pre-wrap opacity-70">{{ img.ocr_text }}</p>
                        </div>
                    </div>
                    {% endif %}
                    {% if not img.description and not img.ocr_text %}
                    <a href="{% url 'library:image-serve' uid=img.uid %}" target="_blank" rel="noopener" class="text-xs opacity-40 mt-1 flex items-center gap-1">
                        <span>🔍</span> Click to view full image
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Chunks Preview -->
{% if chunks %}
<div class="mb-6">
    <h2 class="text-xl font-bold mb-3">Chunks ({{ chunks|length }})</h2>
    <div class="space-y-2">
        {% for chunk in chunks|slice:":10" %}
        <div class="collapse collapse-arrow bg-base-200">
            <input type="checkbox" />
            <div class="collapse-title font-medium">
                Chunk {{ chunk.chunk_index }} <span class="text-sm opacity-60">({{ chunk.chunk_size }} chars)</span>
                {% if chunk.embedding %}
                <span class="badge badge-success badge-xs ml-2">embedded</span>
                {% else %}
                <span class="badge badge-ghost badge-xs ml-2">no vector</span>
                {% endif %}
            </div>
            <div class="collapse-content">
                <p class="text-sm whitespace-pre-wrap">{{ chunk.text_preview }}</p>
            </div>
        </div>
        {% endfor %}
        {% if chunks|length > 10 %}
        <p class="text-sm opacity-60">… and {{ chunks|length|add:"-10" }} more chunks</p>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}