{% extends "base.html" %}

{% block content %}
<div class="row g-4">
    {% if not view_mode %}
    <!-- Dashboard Mode: Generate & Gallery -->
    
    {% if is_admin and query %}
    <!-- Studio: Create New Report (Admin Only) -->
    <div class="col-md-5">
        <div class="card shadow-sm border-0 bg-white h-100">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="card-title mb-0">
                    <i class="bi bi-magic me-2"></i>{{ 'Edit Report Recipe' if edit_id else 'Report Studio' }}
                </h5>
            </div>
            <div class="card-body p-4">
                <form id="report-form" hx-post="{{ url_for('main.reports_generate') }}" hx-swap="none" hx-on::after-request="handleGenerateResponse(event)">
                    <input type="hidden" name="query" value="{{ query }}">
                    <input type="hidden" name="source" value="{{ source | default('query') }}">
                    <input type="hidden" name="semantic_source" value="{{ semantic_source | default('title') }}">
                    <input type="hidden" name="case" value="{{ case_mode | default('insensitive') }}">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-uppercase">Source Query</label>
                        <div class="bg-light p-2 rounded font-monospace small border">`{{ query }}`</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold small text-uppercase">Report Source</label>
                        <div class="d-flex flex-wrap gap-2 small">
                            <span class="badge bg-light text-dark border">{{ source | default('query') }}</span>
                            {% if source | default('query') == 'semantic' %}
                            <span class="badge bg-light text-dark border">semantic source: {{ semantic_source | default('title') }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold small text-uppercase">Reference Detail</label>
                        <div class="btn-group w-100" role="group" aria-label="Reference detail">
                            <input type="radio" class="btn-check" name="include_abstract" id="abstract-on" value="1" autocomplete="off" {% if include_abstract | default(true) %}checked{% endif %}>
                            <label class="btn btn-outline-secondary" for="abstract-on">
                                <i class="bi bi-card-text me-1"></i> Abstracts
                            </label>
                            <input type="radio" class="btn-check" name="include_abstract" id="abstract-off" value="0" autocomplete="off" {% if not (include_abstract | default(true)) %}checked{% endif %}>
                            <label class="btn btn-outline-secondary" for="abstract-off">
                                <i class="bi bi-list-ul me-1"></i> No Abstracts
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="title" class="form-label fw-bold small text-uppercase">Report Title</label>
                        <input type="text" id="title" name="title" class="form-control" placeholder="e.g., Wang Review 2026" required onkeyup="syncFilename()" value="{{ edit_title }}">
                    </div>

                    <div class="mb-3">
                        <label for="filename" class="form-label fw-bold small text-uppercase">Filename (Slug)</label>
                        <div class="input-group input-group-sm">
                            <input type="text" id="filename" name="filename" class="form-control font-monospace" placeholder="auto-generated" value="{{ edit_filename }}">
                            <span class="input-group-text">.qmd</span>
                        </div>
                        {% if edit_id %}
                        <div class="form-text">Keep this slug to regenerate the existing report, or change it to create a new report.</div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <label for="intro" class="form-label fw-bold small text-uppercase">Introduction / Research Notes</label>
                        <textarea id="intro" name="intro" class="form-control" rows="8" placeholder="Markdown supported. Explain the context or goals of this extract...">{{ edit_intro }}</textarea>
                        {% if edit_id %}
                        <div class="form-text">Regeneration uses the saved recipe and can overwrite manual edits made directly in the QMD if the slug is unchanged.</div>
                        {% endif %}
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg shadow-sm">
                            <span class="indicator-label"><i class="bi bi-file-earmark-plus me-2"></i>{{ 'Regenerate Report' if edit_id else 'Generate Report' }}</span>
                            <span class="htmx-indicator spinner-border spinner-border-sm ms-2" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Gallery: Existing Reports -->
    <div class="{{ 'col-md-7' if (is_admin and query) else 'col-12' }}">
        <div class="card shadow-sm border-0 bg-white h-100">
            <div class="card-header bg-dark text-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0"><i class="bi bi-collection-play me-2"></i>Research Archive</h5>
                <span class="badge bg-secondary">{{ reports|length }} Reports</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light sticky-top" style="z-index: 10;">
                            <tr class="small text-uppercase text-muted">
                                <th class="ps-4 py-3">Date</th>
                                <th>Report Title</th>
                                <th class="text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for report in reports %}
                            <tr id="report-row-{{ report.id }}">
                                <td class="ps-4 small text-muted">{{ report.date }}</td>
                                <td>
                                    <div class="fw-bold text-dark">{{ report.title }}</div>
                                    <div class="small text-muted font-monospace" style="font-size: 0.7rem;">
                                        {{ report.name }}{% if report.source %} · {{ report.source }}{% endif %}
                                    </div>
                                </td>
                                <td class="text-end pe-4">
                                    <div class="btn-group btn-group-sm shadow-sm">
                                        {% if is_admin and report.has_meta %}
                                        <a href="{{ url_for('main.reports_page', edit=report.id) }}" class="btn btn-outline-success" title="Reload Report Studio from saved recipe">
                                            <i class="bi bi-pencil-square me-1"></i> Edit
                                        </a>
                                        {% elif is_admin %}
                                        <button class="btn btn-outline-secondary disabled opacity-50" disabled title="No saved report metadata for this older report">
                                            <i class="bi bi-pencil-square me-1"></i> Edit
                                        </button>
                                        {% endif %}
                                        <a href="{{ url_for('main.reports_view', report_id=report.id) }}" class="btn btn-outline-primary" title="View Integrated HTML">
                                            <i class="bi bi-eye-fill me-1"></i> HTML
                                        </a>
                                        <a href="{{ url_for('main.reports_raw', report_id=report.id) }}" class="btn btn-outline-secondary" title="View Raw QMD" target="_blank">
                                            <i class="bi bi-filetype-md me-1"></i> QMD
                                        </a>
                                        {% if is_admin %}
                                        <a href="{{ url_for('main.reports_pdf', report_id=report.id) }}" class="btn btn-outline-info" title="Build & Download PDF (Tectonic)">
                                            <i class="bi bi-file-pdf-fill me-1"></i> PDF
                                        </a>
                                        <button class="btn btn-outline-danger" 
                                                hx-post="{{ url_for('main.reports_delete', report_id=report.id) }}"
                                                hx-confirm="Delete report '{{ report.id }}' and all associated files?"
                                                hx-target="#report-row-{{ report.id }}"
                                                hx-swap="delete"
                                                title="Delete Report">
                                            <i class="bi bi-trash3"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox display-1 d-block mb-3 opacity-25"></i>
                                    No reports found. Generate one from the Query screen.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <!-- View Mode: Integrated HTML Fragment -->
    <div class="col-12">
        <div class="card shadow-sm border-0 bg-white">
            <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('main.reports_page') }}" class="text-decoration-none">Reports</a></li>
                        <li class="breadcrumb-item active">{{ report_title }}</li>
                    </ol>
                </nav>
                <div class="btn-group btn-group-sm">
                    <button onclick="window.print()" class="btn btn-outline-secondary"><i class="bi bi-printer me-1"></i> Print</button>
                    {% if is_admin %}
                    <a href="{{ url_for('main.reports_pdf', report_id=request.path.split('/')[-1]) }}" class="btn btn-outline-info"><i class="bi bi-file-pdf me-1"></i> PDF</a>
                    {% endif %}
                </div>
            </div>
            <div class="card-body p-5 report-content-wrapper">
                <div class="report-body">
                    {{ report_html | safe }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
function syncFilename() {
    const title = document.getElementById('title').value;
    const filename = document.getElementById('filename');
    if (title && filename) {
        filename.value = title.toLowerCase()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/(^-|-$)/g, '');
    }
}

function handleGenerateResponse(evt) {
    if (evt.detail.xhr.status === 200) {
        const res = JSON.parse(evt.detail.xhr.responseText);
        window.location.href = "{{ url_for('main.reports_page') }}";
    } else {
        alert("Error generating report: " + evt.detail.xhr.responseText);
    }
}
</script>

<style>
    .report-content-wrapper {
        max-width: 900px;
        margin: 0 auto;
        font-family: serif;
        line-height: 1.6;
    }
    .report-body h1, .report-body h2, .report-body h3 { 
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        font-weight: 800; 
        border-bottom: 2px solid #eee; 
        padding-bottom: 0.5rem; 
        margin-bottom: 1.5rem; 
    }
    .report-body h2 { font-weight: 700; margin-top: 2.5rem; color: #444; border-bottom-width: 1px; }
    .report-body h3 { font-size: 1.15rem; margin-top: 2rem; border-bottom-width: 1px; }
    
    .report-body code { background: #f8f9fa; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; }
    
    .report-body blockquote { 
        border-left: 4px solid #eee; 
        padding-left: 1.25rem; 
        color: #212529; 
        font-style: normal !important; /* No italics */
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    .report-body blockquote p { font-style: normal !important; }
    
    /* References styling */
    .report-body p { margin-bottom: 1rem; }
    .report-body hr { margin: 2rem 0; border-top: 2px solid #dee2e6; opacity: 1; }
    .report-body img { max-width: 100%; height: auto; display: block; margin: 1rem auto 2rem; background: transparent; }
    .report-body table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 0.9rem; }
    .report-body th { border-bottom: 2px solid #adb5bd; padding: 0.55rem 0.65rem; text-align: left; background: #f8f9fa; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; }
    .report-body td { border-bottom: 1px solid #dee2e6; padding: 0.55rem 0.65rem; vertical-align: top; font-family: inherit; font-weight: 400; }
    .report-body .cluster-summary-table { table-layout: fixed; }
    .report-body .cluster-summary-table .cluster-col { width: 4.5rem; }
    .report-body .cluster-summary-table .theme-col { width: 22%; }
    .report-body .cluster-summary-table .count-col { width: 5rem; }
    .report-body .cluster-summary-table .sample-col { width: auto; }
    .report-body .cluster-summary-table ul { margin: 0; padding-left: 1.1rem; }
    .report-body a { text-decoration: none; color: var(--primary-color); }
    .report-body a:hover { text-decoration: underline; }
</style>
{% endblock %}