{% extends "base.html" %}
{% block content %}
<div class="container mt-5">
    <h1 class="text-center mb-4">Creative Story Writer</h1>
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Your Story</h5>
                    <div id="editor" contenteditable="true" style="height: 400px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">AI Assistant</h5>
                    <p>Let the AI help you write your story.</p>
                    <div class="d-flex justify-content-center gap-2 mb-3">
                        <button id="suggest-plot-twist" class="btn btn-primary">Suggest a Plot Twist</button>
                        <button id="describe-setting" class="btn btn-primary">Describe the Setting</button>
                        <button id="continue-story" class="btn btn-primary">Continue the Story</button>
                    </div>
                    <hr>
                    <h5 class="card-title">AI Suggestion</h5>
                    <div id="suggestion" style="height: 200px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll;">
                        <div id="spinner-container" class="center-spinner" style="display: none;">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const editor = document.getElementById('editor');
const suggestionBox = document.getElementById('suggestion');
const spinnerContainer = document.getElementById('spinner-container');
const suggestPlotTwistBtn = document.getElementById('suggest-plot-twist');
const describeSettingBtn = document.getElementById('describe-setting');
const continueStoryBtn = document.getElementById('continue-story');

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

async function getAISuggestion(prompt) {
    suggestionBox.innerHTML = '';
    spinnerContainer.style.display = 'flex';
    const response = await fetch('{% url "story_writer:ai_assistant" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
            story: editor.innerText,
            prompt: prompt
        })
    });

    spinnerContainer.style.display = 'none';
    if (response.ok) {
        const data = await response.json();
        suggestionBox.innerHTML = data.suggestion;
    } else {
        suggestionBox.innerHTML = 'Error: Could not get a suggestion.';
    }
}

suggestPlotTwistBtn.addEventListener('click', () => getAISuggestion('plot twist'));
describeSettingBtn.addEventListener('click', () => getAISuggestion('description of the setting'));
continueStoryBtn.addEventListener('click', () => getAISuggestion('continuation of the story'));
</script>
{% endblock %}