{% extends 'base.html' %}

{% block content %}
<div class="container">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}" class="text-white-50 text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item active text-white" aria-current="page">{{ project.title }}</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8">
            <div class="glass-panel p-4 mb-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="h3 mb-0">AI Script Generator</h2>
                    <span class="status-badge status-{{ project.status }}">{{ project.get_status_display }}</span>
                </div>
                
                <form id="scriptGeneratorForm" class="mb-4">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="text" id="scriptPrompt" name="prompt" class="form-control bg-dark text-white border-secondary py-3" placeholder="What is your video about? e.g. '5 tips for better sleep'">
                        <button class="btn btn-accent" type="submit" id="generateBtn">
                            <span id="btnText">Generate Script</span>
                            <span id="btnLoading" class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                    <div class="form-text text-white-50 mt-2">AI will brainstorm scenes, actions, and dialogue for your short video.</div>
                </form>

                <div id="scriptResult" class="d-none">
                    <hr class="border-secondary my-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="h5 mb-0">Generated Script</h4>
                        <button class="btn btn-sm btn-outline-light rounded-pill" onclick="copyScript()">Copy to Clipboard</button>
                    </div>
                    <div id="scriptContent" class="bg-dark p-4 rounded-3 text-secondary" style="white-space: pre-wrap; line-height: 1.6; border: 1px solid var(--border-color);">
                    </div>
                </div>
            </div>

            <div class="glass-panel p-4">
                <h3 class="h5 mb-4">Media Assets</h3>
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="border border-dashed border-secondary rounded-3 p-4 text-center d-flex flex-column align-items-center justify-content-center h-100" style="min-height: 150px;">
                            <div class="text-white-50 mb-2">Upload Clips</div>
                            <button class="btn btn-sm btn-outline-light rounded-pill">Select Files</button>
                        </div>
                    </div>
                    {% for asset in assets %}
                        <div class="col-md-4">
                            <div class="bg-dark rounded-3 overflow-hidden" style="height: 150px; position: relative;">
                                <div class="p-2 small text-truncate" style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5);">
                                    {{ asset.original_name }}
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="col-md-8 d-flex align-items-center">
                            <p class="text-white-50 mb-0 ps-3">Your uploaded video clips and images will appear here.</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card-studio mb-4">
                <h4 class="h5 mb-3">Project Details</h4>
                <div class="mb-3">
                    <label class="text-white-50 small d-block">Title</label>
                    <div class="fw-bold">{{ project.title }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-white-50 small d-block">Created</label>
                    <div>{{ project.created_at|date:"M d, Y H:i" }}</div>
                </div>
                <div class="mb-3">
                    <label class="text-white-50 small d-block">Description</label>
                    <div class="text-secondary small">{{ project.description|default:"No description provided." }}</div>
                </div>
                <hr class="border-secondary">
                <button class="btn btn-sm btn-outline-danger w-100">Delete Project</button>
            </div>

            <div class="card-studio">
                <h4 class="h5 mb-3">Script History</h4>
                <div class="list-group list-group-flush bg-transparent">
                    {% for script in scripts %}
                        <div class="list-group-item bg-transparent border-white-10 px-0 py-3">
                            <div class="small text-white-50 mb-1">{{ script.created_at|date:"M d, H:i" }}</div>
                            <div class="text-white small fw-medium mb-1">{{ script.prompt|truncatechars:40 }}</div>
                            <button class="btn btn-link btn-sm p-0 text-accent text-decoration-none" onclick="loadScript('{{ script.id }}')">View Script</button>
                        </div>
                    {% empty %}
                        <p class="text-white-50 small mb-0">No scripts generated yet.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const form = document.getElementById('scriptGeneratorForm');
    const resultDiv = document.getElementById('scriptResult');
    const contentDiv = document.getElementById('scriptContent');
    const btnText = document.getElementById('btnText');
    const btnLoading = document.getElementById('btnLoading');
    const generateBtn = document.getElementById('generateBtn');

    form.onsubmit = async (e) => {
        e.preventDefault();
        const prompt = document.getElementById('scriptPrompt').value;
        if (!prompt) return;

        // UI state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        generateBtn.disabled = true;

        const formData = new FormData(form);
        try {
            const response = await fetch('{% url "generate_script" project.id %}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            });
            const data = await response.json();
            if (data.success) {
                contentDiv.innerText = data.content;
                resultDiv.classList.remove('d-none');
                // Optional: refresh page to show in history, or append via JS
                location.reload(); 
            } else {
                alert('Error: ' + data.error);
            }
        } catch (err) {
            console.error(err);
            alert('An unexpected error occurred.');
        } finally {
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
            generateBtn.disabled = false;
        }
    };

    function copyScript() {
        const text = contentDiv.innerText;
        navigator.clipboard.writeText(text).then(() => {
            alert('Script copied to clipboard!');
        });
    }

    function loadScript(id) {
        // For now, simpler to just reload or fetch. 
        // In this iteration, we'll just let the user see it in the list or reload if they generate a new one.
        // We could fetch the script content via another endpoint if needed.
    }
</script>
{% endblock %}
