{% 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; }
    .diff-moved { background-color: #cff4fc; 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); return false;" action="javascript:void(0);" 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" id="btnRefine" 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">
                    <input type="hidden" name="selected_keys" id="confirmSelectedKeys">
                    <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="button" class="btn btn-outline-secondary me-2" id="btnSelectAll" style="display:none;"><i class="fas fa-check-square me-1"></i> Select All</button>
                    <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_selected" class="btn btn-outline-success me-2" id="btnAcceptSelected" disabled><i class="fas fa-check-double me-1"></i> Accept Selected</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"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.title"><span data-diff-key="meta.title">{{ bible.project_metadata.title }}</span></dd>
            <dt class="col-sm-4">Genre</dt><dd class="col-sm-8"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.genre"><span data-diff-key="meta.genre">{{ bible.project_metadata.genre }}</span></dd>
            <dt class="col-sm-4">Tone</dt><dd class="col-sm-8"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.tone"><span data-diff-key="meta.tone">{{ bible.project_metadata.style.tone }}</span></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 }}" data-stable-id="char:{{ c.name|e }}">
                <input type="checkbox" class="select-checkbox me-2 d-none" value="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 ms-4" 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 }}" data-stable-id="book:{{ book.title|e }}">
                <input type="checkbox" class="select-checkbox me-2 d-none" value="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 ms-4" 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><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}" data-stable-id="beat:{{ beat|e }}">{{ beat }}</span></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...';
}

function submitRefine(event) {
    event.preventDefault();
    const form = event.target;
    showLoading(form);
    
    const instruction = form.querySelector('input[name="instruction"]').value;
    const source = form.querySelector('input[name="source"]').value;
    const selectedKeys = form.querySelector('input[name="selected_keys"]').value;
    
    fetch(`/project/{{ project.id }}/refine_bible`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ instruction: instruction, source: source, selected_keys: selectedKeys })
    })
    .then(res => res.json())
    .then(data => {
        if (data.task_id) {
            const modalHtml = `
            <div class="modal fade" id="refineProgressModal" tabindex="-1" data-bs-backdrop="static">
                <div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-body text-center p-4">
                    <div class="spinner-border text-warning mb-3" style="width: 3rem; height: 3rem;"></div>
                    <h4>Refining Draft...</h4><p class="text-muted">The AI is processing your changes.</p>
                </div></div></div>
            </div>`;
            document.body.insertAdjacentHTML('beforeend', modalHtml);
            const modal = new bootstrap.Modal(document.getElementById('refineProgressModal'));
            modal.show();
            
            refinePollInterval = setInterval(() => {
                fetch(`/task_status/${data.task_id}`)
                    .then(r => r.json())
                    .then(status => {
                        if (status.status === 'completed') {
                            clearInterval(refinePollInterval);
                            if (status.success === false) {
                                alert("Refinement failed: " + (status.error || "Check logs"));
                            }
                            window.location.reload();
                        }
                    })
                    .catch(e => console.error(e));
            }, 2000);
        }
    })
    .catch(err => {
        alert("Request failed: " + err);
        const btn = form.querySelector('button[type="submit"]');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-magic me-1"></i> Refine Draft';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const original = document.getElementById('original-col');
    const newDraft = document.getElementById('new-col');
    const confirmInput = document.getElementById('confirmSelectedKeys');
    const refineInput = document.getElementById('refineSelectedKeys');
    const btnAcceptSelected = document.getElementById('btnAcceptSelected');
    const btnRefine = document.getElementById('btnRefine');
    const btnSelectAll = document.getElementById('btnSelectAll');

    function findCounterpart(el, contextRoot) {
        const key = el.getAttribute('data-diff-key');
        const stableParent = el.closest('[data-stable-id]');
        if (stableParent) {
            const stableId = stableParent.getAttribute('data-stable-id');
            const otherParent = contextRoot.querySelector(`[data-stable-id="${stableId.replace(/"/g, '\\"')}"]`);
            if (otherParent) {
                const parentKey = stableParent.getAttribute('data-diff-key');
                if (key.startsWith(parentKey)) {
                    const suffix = key.substring(parentKey.length);
                    const otherParentKey = otherParent.getAttribute('data-diff-key');
                    return contextRoot.querySelector(`[data-diff-key="${otherParentKey + suffix}"]`);
                }
                return otherParent;
            }
            return null;
        }
        return contextRoot.querySelector(`[data-diff-key="${key}"]`);
    }

    // 1. Highlight Differences
    const newElements = newDraft.querySelectorAll('[data-diff-key]');
    newElements.forEach(el => {
        const key = el.getAttribute('data-diff-key');
        const origEl = findCounterpart(el, original);
        
        // Find associated checkbox (it might be a sibling or parent wrapper)
        // In our macro, checkbox is usually a sibling of the span with data-diff-key
        let checkbox = el.parentElement.querySelector(`input[value="${key}"]`);
        if (!checkbox) {
             // Try finding it in the parent li/div if the key matches the container
             // Also handle nested keys: char.0.name -> char.0
             let parentKey = key;
             if (key.startsWith('char.') && key.split('.').length > 2) {
                 parentKey = key.split('.').slice(0, 2).join('.');
             } else if (key.startsWith('book.') && key.split('.').length === 3 && key.split('.')[2] !== 'beat') {
                 // book.1.title -> book.1 (but book.1.beat.0 stays book.1.beat.0)
                 parentKey = key.split('.').slice(0, 2).join('.');
             }
             
             const container = el.closest('li, div');
             checkbox = container ? container.querySelector(`input[value="${parentKey}"]`) : null;
        }
        
        if (!origEl) {
            el.classList.add('diff-added');
            el.title = "New item added";
            if (checkbox) {
                checkbox.classList.remove('d-none');
                checkbox.checked = true;
            }
        } else if (el.getAttribute('data-diff-key') !== origEl.getAttribute('data-diff-key')) {
            // Moved (Index changed but content matched by ID)
            el.classList.add('diff-moved');
            el.title = "Moved from original position";
            if (checkbox) {
                checkbox.classList.remove('d-none');
                checkbox.checked = true;
            }
        } else if (el.innerText.trim() !== origEl.innerText.trim()) {
            el.classList.add('diff-changed');
            origEl.classList.add('diff-changed');
            el.title = "Changed from original";
            if (checkbox) {
                checkbox.classList.remove('d-none');
                checkbox.checked = true;
            }
        }
    });

    // Check for removed items
    const origElements = original.querySelectorAll('[data-diff-key]');
    origElements.forEach(el => {
        const newEl = findCounterpart(el, newDraft);
        if (!newEl) {
            el.classList.add('diff-removed');
            el.title = "Removed in new draft";
        }
    });
    
    // Show Select All if there are visible checkboxes
    if (newDraft.querySelector('.select-checkbox:not(.d-none)')) {
        btnSelectAll.style.display = 'inline-block';
    }

    function updateSelectionState() {
        const checkboxes = newDraft.querySelectorAll('.select-checkbox:checked');
        const keys = Array.from(checkboxes).map(cb => cb.value);
        const jsonKeys = JSON.stringify(keys);
        
        confirmInput.value = jsonKeys;
        refineInput.value = jsonKeys;
        
        const count = keys.length;
        
        // Update Accept Button
        btnAcceptSelected.disabled = count === 0;
        btnAcceptSelected.innerHTML = count > 0 ? 
            `<i class="fas fa-check-double me-1"></i> Accept ${count} Selected` : 
            `<i class="fas fa-check-double me-1"></i> Accept Selected`;
            
        // Update Refine Button
        btnRefine.innerHTML = count > 0 ? 
            `<i class="fas fa-magic me-1"></i> Refine ${count} Selected` : 
            `<i class="fas fa-magic me-1"></i> Refine Draft`;
    }

    // 2. Handle Checkbox Selection
    newDraft.addEventListener('change', function(e) {
        if (e.target.classList.contains('select-checkbox')) {
            updateSelectionState();
        }
    });

    btnSelectAll.addEventListener('click', function() {
        const checkboxes = newDraft.querySelectorAll('.select-checkbox:not(.d-none)');
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        checkboxes.forEach(cb => cb.checked = !allChecked);
        updateSelectionState();
    });
    
    // Initialize state with default selections
    updateSelectionState();

    // 3. 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 %}