{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card shadow">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-check-circle me-2"></i>Review Bible & Story Beats</h4>
                <a href="/project/{{ project.id }}" class="btn btn-light btn-sm fw-bold">Looks Good, Start Writing <i class="fas fa-arrow-right ms-1"></i></a>
            </div>
            <div class="card-body">
                <p class="text-muted">The AI has generated your characters and plot structure. Review them below and refine if needed.</p>
                
                <!-- Refinement Bar -->
                <form id="refineForm" onsubmit="submitRefine(event); return false;" action="javascript:void(0);" class="mb-4">
                    <div class="input-group shadow-sm">
                        <span class="input-group-text bg-warning text-dark"><i class="fas fa-magic"></i></span>
                        <input type="text" name="instruction" class="form-control" placeholder="AI Instruction: e.g. 'Change the ending of Book 1', 'Add a plot point about the ring', 'Make the tone darker'" required>
                        <button type="submit" class="btn btn-warning">Refine with AI</button>
                    </div>
                </form>

                <!-- Characters Section -->
                <h5 class="text-primary border-bottom pb-2 mb-3">👥 Characters</h5>
                <div class="table-responsive mb-4">
                    <table class="table table-hover table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 20%">Name</th>
                                <th style="width: 20%">Role</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in bible.characters %}
                            <tr>
                                <td class="fw-bold">{{ c.name }}</td>
                                <td><span class="badge bg-secondary">{{ c.role }}</span></td>
                                <td class="small">{{ c.description }}</td>
                            </tr>
                            {% else %}
                            <tr><td colspan="3" class="text-center text-muted">No characters generated.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Books & Beats Section -->
                <h5 class="text-primary border-bottom pb-2 mb-3">📚 Plot Structure</h5>
                {% for book in bible.books %}
                <div class="card mb-4 border-light bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-dark">
                            <span class="badge bg-dark me-2">Book {{ book.book_number }}</span>
                            {{ book.title }}
                        </h5>
                        <p class="card-text text-muted fst-italic border-start border-4 border-warning ps-3 mb-3">
                            {{ book.manual_instruction }}
                        </p>
                        
                        <h6 class="fw-bold mt-3">Plot Beats:</h6>
                        <ol class="list-group list-group-numbered">
                            {% for beat in book.plot_beats %}
                            <li class="list-group-item bg-white">{{ beat }}</li>
                            {% else %}
                            <li class="list-group-item text-muted">No plot beats generated.</li>
                            {% endfor %}
                        </ol>
                    </div>
                </div>
                {% endfor %}

                <div class="d-grid gap-2 mt-4">
                    <a href="/project/{{ project.id }}" class="btn btn-success btn-lg">
                        <i class="fas fa-check me-2"></i>Finalize & Go to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
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;
    
    fetch(`/project/{{ project.id }}/refine_bible`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ instruction: instruction, source: 'original' })
    })
    .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 Bible...</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();
            
            setInterval(() => {
                fetch(`/task_status/${data.task_id}`).then(r => r.json()).then(status => {
                    if (status.status === 'completed') window.location.href = `/project/{{ project.id }}/bible_comparison`;
                });
            }, 2000);
        }
    })
    .catch(err => {
        alert("Request failed: " + err);
        const btn = form.querySelector('button[type="submit"]');
        btn.disabled = false;
        btn.innerHTML = 'Refine with AI';
    });
}
</script>
{% endblock %}