{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2><i class="fas fa-layer-group me-2"></i>Your Projects</h2>
        <p class="text-muted">Manage your book series and generation tasks.</p>
    </div>
    <div class="col-md-4 text-end">
        <a href="/personas" class="btn btn-outline-secondary me-2">
            <i class="fas fa-users me-2"></i>Personas
        </a>
        <a href="/system/status" class="btn btn-outline-secondary me-2">
            <i class="fas fa-server me-2"></i>System Status
        </a>
        {% if current_user.is_admin %}
        <button class="btn btn-outline-info me-2" onclick="optimizeModels()" data-bs-toggle="tooltip" title="Check API limits and select the best AI models for Logic, Writing, and Art.">
            <i class="fas fa-sync me-2"></i>Find New Models
        </button>
        {% endif %}
        <button class="btn btn-outline-primary me-2" data-bs-toggle="modal" data-bs-target="#importProjectModal" data-bs-toggle="tooltip" title="Upload a bible.json file to restore a project.">
            <i class="fas fa-file-upload me-2"></i>Import Bible
        </button>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newProjectModal" data-bs-toggle="tooltip" title="Start the Wizard to create a new book series from scratch.">
            <i class="fas fa-plus me-2"></i>New Project
        </button>
    </div>
</div>

<div class="row">
    {% for p in projects %}
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">{{ p.name }}</h5>
                <p class="card-text text-muted small">Created: {{ p.created_at.strftime('%Y-%m-%d') }}</p>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <a href="/project/{{ p.id }}" class="btn btn-outline-primary">Open Project</a>
                    <button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal{{ p.id }}" title="Delete project">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal for {{ p.name }} -->
    <div class="modal fade" id="deleteModal{{ p.id }}" tabindex="-1">
        <div class="modal-dialog">
            <form class="modal-content" action="/project/{{ p.id }}/delete" method="POST">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Delete Project</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Permanently delete <strong>{{ p.name }}</strong> and all its runs and generated files?</p>
                    <p class="text-danger fw-bold mb-0">This cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </div>
            </form>
        </div>
    </div>
    {% else %}
    <div class="col-12 text-center py-5">
        <h4 class="text-muted mb-3">No projects yet. Start writing!</h4>
        <div class="alert alert-info d-inline-block text-start" style="max-width: 600px;">
            <h5><i class="fas fa-info-circle me-2"></i>How to use BookApp:</h5>
            <ol class="mb-0">
                <li>Click <strong>New Project</strong> to launch the AI Wizard.</li>
                <li>Describe your idea, and the AI will plan your characters and plot.</li>
                <li>Review the "Bible" (the plan), then click <strong>Generate</strong>.</li>
                <li>Read the book, edit it, and export to EPUB/Kindle.</li>
            </ol>
        </div>
    </div>
    {% endfor %}
</div>

<!-- New Project Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" action="/project/setup" method="POST" onsubmit="showLoading(this)">
            <div class="modal-header">
                <h5 class="modal-title">New Project Wizard</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Describe your story idea, and the AI will suggest a title, genre, and structure for you.</p>
                <div class="mb-3">
                    <label class="form-label">Story Concept / Idea</label>
                    <textarea name="concept" class="form-control" rows="6" placeholder="e.g. A detective in 1920s London discovers magic is real..." required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="analyzeBtn">Analyze & Next <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </form>
    </div>
</div>

<!-- Import Project Modal -->
<div class="modal fade" id="importProjectModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" action="/project/import" method="POST" enctype="multipart/form-data">
            <div class="modal-header">
                <h5 class="modal-title">Import Existing Bible</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Upload a <code>bible.json</code> file to create a new project from it.</p>
                <div class="mb-3">
                    <label class="form-label">Bible JSON File</label>
                    <input type="file" name="bible_file" class="form-control" accept=".json" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Import Project</button>
            </div>
        </form>
    </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>AI Analyzing...';
}

function optimizeModels() {
    if (!confirm("This will check for rate limits and re-select the best available models. Continue?")) return;
    
    const btn = event.target.closest('button');
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Optimizing...';
    
    fetch('/system/optimize_models', { method: 'POST' })
        .then(response => {
            if (response.ok) {
                window.location.reload(); // Reload to see flashed message
            } else {
                alert('Optimization request failed.');
            }
        }).catch(err => {
            alert('Network error during optimization.');
        }).finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        });
}
</script>
{% endblock %}