bookapp/templates/bible_comparison.html

{% extends "base.html" %}

{% block content %}
<style>
    .diff-changed { background-color: #fff3cd; transition: background 0.5s; }
    .diff-added { background-color: #d1e7dd; transition: background 0.5s; }
    .diff-removed { background-color: #f8d7da; text-decoration: line-through; opacity: 0.7; transition: background 0.5s; }
    .select-checkbox { transform: scale(1.2); cursor: pointer; }
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-balance-scale me-2"></i>Review Changes</h2>
</div>

<div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>Review the AI's proposed changes below. You can accept them, discard them, or ask for further refinements on the <strong>New Draft</strong>.
</div>

<!-- Actions Bar -->
<div class="card shadow-sm mb-4 sticky-top" style="top: 20px; z-index: 100;">
    <div class="card-body bg-light">
        <div class="row align-items-center">
            <div class="col-md-6">
                <form id="refineForm" onsubmit="submitRefine(event)" class="d-flex">
                    <input type="hidden" name="source" value="draft">
                    <input type="hidden" name="selected_keys" id="refineSelectedKeys">
                    <input type="text" name="instruction" class="form-control me-2" placeholder="Refine this draft further (e.g. 'Fix the name spelling')..." required>
                    <button type="submit" class="btn btn-warning text-nowrap"><i class="fas fa-magic me-1"></i> Refine Draft</button>
                </form>
            </div>
            <div class="col-md-6 text-end">
                <form action="/project/{{ project.id }}/refine_bible/confirm" method="POST" class="d-inline">
                    <div class="form-check form-switch d-inline-block me-3 align-middle">
                        <input class="form-check-input" type="checkbox" id="syncScroll" checked>
                        <label class="form-check-label small" for="syncScroll">Sync Scroll</label>
                    </div>
                    <button type="submit" name="action" value="decline" class="btn btn-outline-danger me-2"><i class="fas fa-times me-1"></i> Discard</button>
                    <button type="submit" name="action" value="accept" class="btn btn-success"><i class="fas fa-check me-1"></i> Accept Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% macro render_bible(bible) %}
    <div class="mb-3">
        <h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Metadata</h6>
        <dl class="row small mb-0">
            <dt class="col-sm-4">Title</dt><dd class="col-sm-8" data-diff-key="meta.title">{{ bible.project_metadata.title }}</dd>
            <dt class="col-sm-4">Genre</dt><dd class="col-sm-8" data-diff-key="meta.genre">{{ bible.project_metadata.genre }}</dd>
            <dt class="col-sm-4">Tone</dt><dd class="col-sm-8" data-diff-key="meta.tone">{{ bible.project_metadata.style.tone }}</dd>
        </dl>
    </div>

    <div class="mb-3">
        <h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Characters ({{ bible.characters|length }})</h6>
        <ul class="list-unstyled small">
            {% for c in bible.characters %}
            <li class="mb-2" data-diff-key="char.{{ loop.index0 }}">
                <strong data-diff-key="char.{{ loop.index0 }}.name">{{ c.name }}</strong> <span class="badge bg-light text-dark border" data-diff-key="char.{{ loop.index0 }}.role">{{ c.role }}</span><br>
                <span class="text-muted" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>

    <div class="mb-3">
        <h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Plot Structure</h6>
        {% for book in bible.books %}
            <div class="mb-2" data-diff-key="book.{{ book.book_number }}">
                <strong data-diff-key="book.{{ book.book_number }}.title">Book {{ book.book_number }}: {{ book.title }}</strong>
                <p class="fst-italic small text-muted mb-1" data-diff-key="book.{{ book.book_number }}.instr">{{ book.manual_instruction }}</p>
                <ol class="small ps-3 mb-0">
                    {% for beat in book.plot_beats %}
                    <li data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}">{{ beat }}</li>
                    {% endfor %}
                </ol>
            </div>
        {% endfor %}
    </div>
{% endmacro %}

<div class="row">
    <!-- ORIGINAL -->
    <div class="col-md-6">
        <div class="card border-secondary mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Original</h5>
            </div>
            <div class="card-body bg-light" id="original-col" style="max-height: 800px; overflow-y: auto;">
                {{ render_bible(original) }}
            </div>
        </div>
    </div>

    <!-- NEW DRAFT -->
    <div class="col-md-6">
        <div class="card border-success mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">New Draft</h5>
            </div>
            <div class="card-body bg-white" id="new-col" style="max-height: 800px; overflow-y: auto;">
                {{ render_bible(new) }}
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
let refinePollInterval = null;

function showLoading(form) {
    const btn = form.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Refining...';
}

document.addEventListener('DOMContentLoaded', function() {
    const original = document.getElementById('original-col');
    const newDraft = document.getElementById('new-col');

    // 1. Highlight Differences
    const newElements = newDraft.querySelectorAll('[data-diff-key]');
    newElements.forEach(el => {
        const key = el.getAttribute('data-diff-key');
        const origEl = original.querySelector(`[data-diff-key="${key}"]`);
        
        if (!origEl) {
            el.classList.add('diff-added');
            el.title = "New item added";
        } else if (el.innerText.trim() !== origEl.innerText.trim()) {
            el.classList.add('diff-changed');
            origEl.classList.add('diff-changed');
            el.title = "Changed from original";
        }
    });

    // Check for removed items
    const origElements = original.querySelectorAll('[data-diff-key]');
    origElements.forEach(el => {
        const key = el.getAttribute('data-diff-key');
        const newEl = newDraft.querySelector(`[data-diff-key="${key}"]`);
        if (!newEl) {
            el.classList.add('diff-removed');
            el.title = "Removed in new draft";
        }
    });

    // 2. Sync Scroll
    let isSyncingLeft = false;
    let isSyncingRight = false;

    original.onscroll = function() {
        if (!isSyncingLeft && document.getElementById('syncScroll').checked) {
            isSyncingRight = true;
            newDraft.scrollTop = this.scrollTop;
        }
        isSyncingLeft = false;
    };

    newDraft.onscroll = function() {
        if (!isSyncingRight && document.getElementById('syncScroll').checked) {
            isSyncingLeft = true;
            original.scrollTop = this.scrollTop;
        }
        isSyncingRight = false;
    };
});
</script>
{% endblock %}