{% 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>
        <button class="btn btn-outline-info me-2" onclick="optimizeModels()">
            <i class="fas fa-sync me-2"></i>Find New Models
        </button>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newProjectModal">
            <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>
                <a href="/project/{{ p.id }}" class="btn btn-outline-primary stretched-link">Open Project</a>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12 text-center py-5">
        <h4 class="text-muted">No projects yet. Start writing!</h4>
    </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>
{% 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 %}