{% extends "base.html" %}

{% block content %}
<div class="row mb-3">
    <div class="col">
        <a href="/" class="btn btn-secondary">&larr; Back</a>
        <span class="h3 ms-3">{{ document.filename }}</span>
        {% if selected_version %}
        <span class="badge bg-secondary ms-2">{{ selected_version.status }}</span>
        {% endif %}
    </div>
</div>

<!-- Version Controls -->
<div class="row mb-3">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <label for="versionSelect" class="form-label">Version:</label>
                        <select class="form-select" id="versionSelect" onchange="changeVersion()">
                            {% if document.versions %}
                            {% for version in document.versions|reverse %}
                            <option value="{{ version.id }}" {% if selected_version and version.id==selected_version.id
                                %}selected{% endif %}>
                                Version {{ version.version_number }} - {{ version.status }} ({{
                                version.created_at.strftime('%Y-%m-%d %H:%M') }})
                            </option>
                            {% endfor %}
                            {% else %}
                            <option value="">No versions available</option>
                            {% endif %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-primary" onclick="reprocessDocument()">
                            <i class="bi bi-arrow-clockwise"></i> Re-process Document
                        </button>
                    </div>
                    {% if selected_version %}
                    <div class="col-md-4 text-end">
                        <small class="text-muted">
                            Pages: {{ selected_version.page_count }}<br>
                            Created: {{ selected_version.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-2">
        <div class="list-group" id="pageList">
            {% if selected_version and selected_version.pages %}
            {% for page in selected_version.pages %}
            <a href="#" class="list-group-item list-group-item-action page-link-item" data-page-id="{{ page.id }}"
                data-page-number="{{ page.page_number }}" data-image-path="{{ page.image_path }}"
                data-latency="{{ page.llm_latency_seconds }}" data-tokens="{{ page.token_count }}">
                <div class="d-flex justify-content-between align-items-center">
                    <span>Page {{ page.page_number }}</span>
                    {% if page.token_count > 0 %}
                    <small class="text-muted" style="font-size: 0.75em;">
                        {{ "%.1f"|format(page.llm_latency_seconds) }}s | {{ page.token_count }}t
                    </small>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
            {% endif %}
        </div>
    </div>
    <div class="col-md-10">
        <div class="row" id="viewer" style="display:none;">
            <div class="col-md-6">
                <div class="position-relative" id="imageContainer">
                    <img id="pageImage" src="" class="img-fluid border" style="width: 100%;">
                    <div id="overlays"></div>
                </div>
                <div class="card mt-3" id="overlayPreviewCard" style="display:none;">
                    <div class="card-header">
                        Overlay Preview Image
                    </div>
                    <div class="card-body text-center">
                        <img id="overlayPreviewImage" src="" class="img-fluid border" alt="Overlay preview">
                    </div>
                </div>
                <div class="alert alert-light text-muted mt-3" id="overlayPreviewPlaceholder" role="alert">
                    Select a page to generate a rendered overlay image preview.
                </div>
                <!-- Bounding Box Info Panel -->
                <div id="bboxInfo" class="card mt-3" style="display:none;">
                    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                        <span>Selected Element Info</span>
                        <button class="btn btn-sm btn-light" onclick="closeBboxInfo()">×</button>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <strong>Type:</strong> <span id="bboxType" class="badge bg-secondary"></span>
                            </div>
                            <div class="col-6">
                                <strong>ID:</strong> <span id="bboxId" class="text-muted"></span>
                            </div>
                        </div>
                        <div class="mt-2">
                            <strong>Coordinates (pixels):</strong>
                            <div class="row mt-1">
                                <div class="col-3"><small class="text-muted">X Min:</small> <code id="bboxXmin"></code>
                                </div>
                                <div class="col-3"><small class="text-muted">Y Min:</small> <code id="bboxYmin"></code>
                                </div>
                                <div class="col-3"><small class="text-muted">X Max:</small> <code id="bboxXmax"></code>
                                </div>
                                <div class="col-3"><small class="text-muted">Y Max:</small> <code id="bboxYmax"></code>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <strong>Raw Coordinates (LLM):</strong>
                            <div class="small text-muted" id="bboxRawValues"></div>
                        </div>
                        <div class="mt-2">
                            <strong>Translated Coordinates (px):</strong>
                            <div class="small text-muted" id="bboxTranslatedValues"></div>
                        </div>
                        <div class="mt-2">
                            <strong>Coordinate Space:</strong>
                            <div class="small text-muted" id="bboxCoordinateSpace"></div>
                        </div>
                        <div class="mt-2">
                            <strong>Dimensions:</strong>
                            <span id="bboxDimensions" class="text-muted"></span>
                        </div>
                        <div class="mt-2">
                            <strong>Text:</strong>
                            <div id="bboxText" class="bg-light p-2 mt-1 rounded"
                                style="max-height: 100px; overflow-y: auto; font-size: 0.9em;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Markdown Analysis
                    </div>
                    <div class="card-body overflow-auto" style="max-height: 800px;">
                        <pre id="markdownContent" class="bg-light p-3"></pre>
                    </div>
                </div>
            </div>
        </div>
        <div id="placeholder" class="text-center mt-5 text-muted">
            {% if selected_version and selected_version.pages %}
            Select a page to view analysis
            {% elif selected_version and selected_version.status == 'processing' %}
            Processing in progress...
            {% elif selected_version and selected_version.status == 'failed' %}
            Processing failed: {{ selected_version.error_message }}
            {% else %}
            No version available. Click "Re-process Document" to start processing.
            {% endif %}
        </div>
    </div>
</div>

<script>
    function changeVersion() {
        const versionId = document.getElementById('versionSelect').value;
        if (versionId) {
            window.location.href = `/documents/{{ document.id }}?version_id=${versionId}`;
        }
    }

    function reprocessDocument() {
        if (confirm('Are you sure you want to re-process this document? This will create a new version.')) {
            fetch('/process/{{ document.id }}', {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    alert('Processing started! The page will reload.');
                    window.location.reload();
                })
                .catch(error => {
                    alert('Error starting processing: ' + error);
                });
        }
    }
</script>
{% endblock %}