{% extends "base.html" %}

{% block extra_head %}
<style>
    .ldr-chunks-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .ldr-chunks-header {
        background: var(--card-bg, #1e1e2d);
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid var(--border-color, #333);
    }

    .ldr-chunks-header h1 {
        margin: 0 0 10px 0;
        color: var(--text-primary, #e4e4e4);
    }

    .ldr-chunks-stats {
        color: var(--text-secondary, #999);
        font-size: 14px;
    }

    .ldr-collection-section {
        background: var(--card-bg, #1e1e2d);
        border: 1px solid var(--border-color, #333);
        border-radius: 8px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .ldr-collection-header {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color, #333);
    }

    .ldr-collection-header h2 {
        margin: 0;
        color: var(--text-primary, #e4e4e4);
        font-size: 18px;
    }

    .ldr-collection-header .ldr-chunk-count {
        color: var(--text-secondary, #999);
        font-size: 14px;
        margin-top: 5px;
    }

    .ldr-chunk {
        border-bottom: 1px solid var(--border-color, #2a2a3a);
        padding: 20px;
    }

    .ldr-chunk:last-child {
        border-bottom: none;
    }

    .ldr-chunk-meta {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .ldr-chunk-meta-item {
        color: var(--text-secondary, #999);
        font-size: 13px;
    }

    .ldr-chunk-meta-item strong {
        color: var(--text-primary, #e4e4e4);
    }

    .ldr-chunk-text {
        background: var(--input-bg, #1a1a1a);
        border: 1px solid var(--border-color, #333);
        border-radius: 4px;
        padding: 15px;
        color: var(--text-primary, #e4e4e4);
        line-height: 1.6;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: 'Courier New', monospace;
        font-size: 14px;
    }

    .ldr-embedding-info {
        margin-top: 10px;
        padding: 10px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 4px;
        font-size: 12px;
        color: var(--text-secondary, #999);
    }

    .ldr-embedding-info strong {
        color: var(--text-primary, #e4e4e4);
    }

    .ldr-back-button {
        display: inline-block;
        padding: 10px 20px;
        background: var(--button-secondary-bg, #6c757d);
        color: white;
        text-decoration: none;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .ldr-back-button:hover {
        background: var(--button-secondary-hover, #545b62);
        color: white;
    }

    .ldr-no-chunks {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary, #999);
    }
</style>
{% endblock %}

{% block content %}
<div class="ldr-chunks-container">
    <a href="/library/document/{{ document.id }}" class="ldr-back-button">
        <i class="fas fa-arrow-left"></i> Back to Document
    </a>

    <div class="ldr-chunks-header">
        <h1><i class="fas fa-puzzle-piece"></i> Document Chunks</h1>
        <div class="ldr-chunks-stats">
            <strong>Document:</strong> {{ document.filename or document.title or "Untitled" }}<br>
            <strong>Total Chunks:</strong> {{ total_chunks }} chunk{{ 's' if total_chunks != 1 else '' }} across {{ chunks_by_collection|length }} collection{{ 's' if chunks_by_collection|length != 1 else '' }}
        </div>
    </div>

    {% if chunks_by_collection %}
        {% for collection_name, collection_data in chunks_by_collection.items() %}
        <div class="ldr-collection-section">
            <div class="ldr-collection-header">
                <h2>{{ collection_data.name }}</h2>
                <div class="ldr-chunk-count">
                    {{ collection_data.chunks|length }} chunk{{ 's' if collection_data.chunks|length != 1 else '' }}
                </div>
            </div>

            {% for chunk in collection_data.chunks %}
            <div class="ldr-chunk">
                <div class="ldr-chunk-meta">
                    <div class="ldr-chunk-meta-item">
                        <strong>Chunk #{{ chunk.index + 1 }}</strong>
                    </div>
                    <div class="ldr-chunk-meta-item">
                        <strong>Words:</strong> {{ chunk.word_count }}
                    </div>
                    <div class="ldr-chunk-meta-item">
                        <strong>Position:</strong> {{ chunk.start_char }}-{{ chunk.end_char }}
                    </div>
                    <div class="ldr-chunk-meta-item">
                        <strong>ID:</strong> <code>{{ chunk.id }}</code>
                    </div>
                </div>

                <div class="ldr-chunk-text">{{ chunk.text }}</div>

                <div class="ldr-embedding-info">
                    <i class="fas fa-brain"></i>
                    <strong>Embedding:</strong> {{ chunk.embedding_model }} ({{ chunk.embedding_model_type }})
                    {% if chunk.embedding_dimension %}
                    | <strong>Dimension:</strong> {{ chunk.embedding_dimension }}
                    {% endif %}
                    | <strong>Created:</strong> {{ chunk.created_at.strftime('%Y-%m-%d %H:%M') if chunk.created_at else 'N/A' }}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    {% else %}
        <div class="ldr-no-chunks">
            <i class="fas fa-inbox" style="font-size: 48px; margin-bottom: 20px; display: block;"></i>
            <p>No chunks found for this document.</p>
            <p>The document may not be indexed yet.</p>
        </div>
    {% endif %}
</div>
{% endblock %}
