{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0"><i class="fas fa-magic me-2"></i>Project Setup</h4>
            </div>
            <div class="card-body">
                <p class="text-muted">The AI has analyzed your concept. Review and edit the suggestions below before creating your project.</p>
                
                <form method="POST" onsubmit="showLoading(this)">
                    <input type="hidden" name="concept" value="{{ concept }}">
                    <input type="hidden" name="persona_key" id="persona_key_input" value="{{ persona_key|default('') }}">
                    
                    <!-- Refinement Bar -->
                    <div class="input-group mb-4 shadow-sm">
                        <span class="input-group-text bg-warning text-dark" data-bs-toggle="tooltip" title="Ask AI to change the suggestions"><i class="fas fa-magic"></i></span>
                        <input type="text" name="refine_instruction" class="form-control" placeholder="AI Instruction: e.g. 'Make it a trilogy', 'Change genre to Cyberpunk', 'Make the tone darker'">
                        <button type="submit" formaction="/project/setup/refine" class="btn btn-warning">Refine with AI</button>
                    </div>

                    <!-- Core Metadata -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Book Title</label>
                            <input type="text" name="title" class="form-control form-control-lg" value="{{ s.title }}" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Genre</label>
                            <input type="text" name="genre" class="form-control" value="{{ s.genre }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Target Audience</label>
                            <input type="text" name="audience" class="form-control" value="{{ s.target_audience }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold text-primary">Select Author Persona (Optional)</label>
                        <select class="form-select" onchange="applyPersona(this)">
                            <option value="">-- Select a Persona to Auto-fill --</option>
                            {% for key, p in personas.items() %}
                            <option value="{{ key }}" data-name="{{ p.name }}" data-bio="{{ p.bio }}">{{ key }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Author Name</label>
                        <input type="text" name="author" class="form-control" value="{{ current_user.username }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Author Bio / Persona</label>
                        <textarea name="author_bio" class="form-control" rows="2">{{ s.author_bio }}</textarea>
                    </div>

                    <hr>

                    <!-- Structure -->
                    <h5 class="text-primary mb-3">Structure & Length</h5>
                    <div class="row mb-3">
                        <div class="col-md-12 mb-2">
                            <label class="form-label">Length Category</label>
                            <select name="length_category" class="form-select">
                                {% for key, val in lengths.items() %}
                                <option value="{{ key }}" {% if key == s.length_category %}selected{% endif %}>
                                    {{ val.label }} ({{ val.words }} words)
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Est. Chapters</label>
                            <input type="number" name="chapters" class="form-control" value="{{ s.estimated_chapters }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Est. Word Count</label>
                            <input type="text" name="words" class="form-control" value="{{ s.estimated_word_count }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="include_prologue" {% if s.include_prologue %}checked{% endif %}>
                            <label class="form-check-label">Include Prologue</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="include_epilogue" {% if s.include_epilogue %}checked{% endif %}>
                            <label class="form-check-label">Include Epilogue</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="is_series" {% if s.is_series %}checked{% endif %}>
                            <label class="form-check-label">Is Series</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-label ms-2 small">Book Count:</label>
                            <input type="number" name="series_count" class="form-control d-inline-block py-0 px-2" style="width: 60px; height: 25px;" value="{{ s.series_count|default(1) }}">
                        </div>
                    </div>

                    <hr>

                    <!-- Style -->
                    <h5 class="text-primary mb-3">Style & Tone</h5>
                    <div class="row mb-3">
                        <div class="col-md-6 mb-2"><label class="form-label">Tone</label><input type="text" name="tone" class="form-control" value="{{ s.tone }}" data-bs-toggle="tooltip" title="e.g. Dark, Whimsical, Cynical, Hopeful"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">POV Style</label><input type="text" name="pov_style" class="form-control" value="{{ s.pov_style }}"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Time Period</label><input type="text" name="time_period" class="form-control" value="{{ s.time_period }}"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Spice Level</label><input type="text" name="spice" class="form-control" value="{{ s.spice }}" data-bs-toggle="tooltip" title="e.g. Clean, Fade-to-Black, Explicit"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Violence</label><input type="text" name="violence" class="form-control" value="{{ s.violence }}" data-bs-toggle="tooltip" title="e.g. None, Mild, Graphic"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Narrative Tense</label><input type="text" name="narrative_tense" class="form-control" value="{{ s.narrative_tense }}"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Language Style</label><input type="text" name="language_style" class="form-control" value="{{ s.language_style }}"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Dialogue Style</label><input type="text" name="dialogue_style" class="form-control" value="{{ s.dialogue_style }}" data-bs-toggle="tooltip" title="e.g. Witty, Formal, Slang-heavy"></div>
                        <div class="col-md-6 mb-2"><label class="form-label">Page Orientation</label>
                            <select name="page_orientation" class="form-select"><option value="Portrait" {% if s.page_orientation == 'Portrait' %}selected{% endif %}>Portrait</option><option value="Landscape" {% if s.page_orientation == 'Landscape' %}selected{% endif %}>Landscape</option><option value="Square" {% if s.page_orientation == 'Square' %}selected{% endif %}>Square</option></select>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">Tropes (comma separated)</label>
                        <input type="text" name="tropes" class="form-control" value="{{ s.tropes|join(', ') }}">
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">Formatting Rules (comma separated)</label>
                        <input type="text" name="formatting_rules" class="form-control" value="{{ s.formatting_rules|join(', ') }}">
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" formaction="/project/create" class="btn btn-success btn-lg">
                            <i class="fas fa-check me-2"></i>Create Project & Generate Bible
                        </button>
                        <a href="/" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showLoading(form) {
    // We don't disable buttons here because formaction needs the specific button click
    // But we can show a global spinner or change cursor
    document.body.style.cursor = 'wait';
}

function applyPersona(select) {
    const opt = select.options[select.selectedIndex];
    if (opt.value) {
        document.querySelector('input[name="author"]').value = opt.dataset.name || opt.value;
        document.querySelector('textarea[name="author_bio"]').value = opt.dataset.bio || '';
    }
}
</script>
{% endblock %}