{% extends "admin/base.html" %}
{% load i18n static %}

{% block title %}Generate Image for "{{ unitword_instance.word.word }}"{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item"><a href="{% url "admin:index" %}">{% translate "Home" %}</a></li>
    <li class="breadcrumb-item"><a href="{% url "admin:app_list" app_label="cmsv2" %}">{% translate "Vocabulary Management v2" %}</a></li>
    <li class="breadcrumb-item">
        <a href="{% url "admin:cmsv2_unit_change" unitword_instance.unit.pk %}">{{ unitword_instance.unit.title }}</a>
        &harr;
        <a href="{% url "admin:cmsv2_word_change" unitword_instance.word.pk %}">{{ unitword_instance.word.word }}</a>
    </li>
    <li class="breadcrumb-item active">{% trans "Generate Image" %}</li>
</ol>
{% endblock %}

{% block content_title %}{% trans "Generate Image" %}{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module">
        <div>
            <strong>Word Text:</strong> {{ unitword_instance.word.word }}
        </div>
        <div>
            <strong>Unit Title:</strong> {{ unitword_instance.unit.title }}
        </div>
        <div style="margin-top: 16px; margin-bottom: 16px;">
            <label for="prompt-additional-info">
               <strong>Additional Info (optional):</strong>
            </label>
            <input id="prompt-additional-info" type="text" style="width: 100%"/>
        </div>
        <div style="margin-top: 16px; margin-bottom: 16px;">
            <label for="model">
                <strong>Model:</strong>
            </label>
            <select id="model" style="width: 100%; padding: 8px;">
                <option value="gpt-image-1">gpt-image-1 (&asymp; 0.18$ per generation)</option>
                <option value="dall-e-3">dall-e-3 (&asymp; 0.04$ per generation)</option>
            </select>
        </div>

        <div class="form-row">
            <button type="button" class="button" id="generate_button">Generate Image</button>
            <span class="loading-spinner" id="loading_spinner" style="display: none;"></span>
            <span class="message-area" id="message_area"></span>
        </div>

        <div id="image_preview_section" style="display: none;">
            <hr>
            <h2>Generated Image Preview:</h2>
            <img src="" id="image-preview" alt="Generated image" style="display: none; max-width: min(400px, 100%);"/>
            <p>Temporary Filename: <span id="temp_filename_display"></span></p>

            <div>
                <button type="button" class="button" id="regenerate_button">Re-generate</button>
                <form method="post" action="{% url "cmsv2:unitword_store_generated_image_permanently" unitword_instance.pk %}" style="display:inline-block;">
                    {% csrf_token %}
                    <input type="hidden" name="temp_filename" id="hidden_temp_filename">
                    <button type="submit" class="button default" id="store_button">Store to Image Field</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extrajs %}
<script>
    // Get CSRF token
    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
    }

    document.addEventListener("DOMContentLoaded", function() {
        const generateButton = document.getElementById("generate_button")
        const regenerateButton = document.getElementById("regenerate_button")
        const storeButton = document.getElementById("store_button")

        const loadingSpinner = document.getElementById("loading_spinner")
        const messageArea = document.getElementById("message_area")
        const imagePreviewSection = document.getElementById("image_preview_section")
        const imagePreview = document.getElementById("image-preview")
        const tempFilenameDisplay = document.getElementById("temp_filename_display")
        const hiddenTempFilename = document.getElementById("hidden_temp_filename")

        function setButtonsState(generating) {
            generateButton.disabled = generating
            regenerateButton.disabled = generating
            storeButton.disabled = generating
        }

        function performGeneration() {
            setButtonsState(true)
            loadingSpinner.style.display = "inline-block"
            messageArea.textContent = "Generating image..."
            messageArea.style.color = "inherit"
            imagePreviewSection.style.display = "none"
            imagePreview.style.display = "none"

            const wordText = "{{ unitword_instance.word.word }}"
            const unitTitle = "{{ unitword_instance.unit.title }}"
            const formData = new FormData()
            formData.append("word_text", wordText)
            formData.append("unit_title", unitTitle)
            const inputElement = document.getElementById("prompt-additional-info")
            formData.append("additional_info", inputElement.value)
            const modelSelectElement = document.getElementById("model")
            formData.append("model", modelSelectElement.value)
            formData.append("csrfmiddlewaretoken", getCookie("csrftoken"))

            fetch("{% url "cmsv2:generate_image_via_openai" %}", {
                method: "POST",
                body: formData,
                headers: {
                    "X-CSRFToken": getCookie("csrftoken")
                },
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`)
                }
                return response.json()
            })
            .then(data => {
                if (data.error) {
                    messageArea.textContent = `Error: ${data.error}`
                    messageArea.style.color = "red"
                    imagePreviewSection.style.display = "none"
                    imagePreview.style.display = "none"
                } else {
                    messageArea.textContent = data.message
                    messageArea.style.color = "green"
                    imagePreviewSection.style.display = "block"
                    imagePreview.style.display = "block"
                    imagePreview.src = data.temp_image_url
                    tempFilenameDisplay.textContent = data.temp_image_filename
                    hiddenTempFilename.value = data.temp_image_filename
                }
            })
            .catch(error => {
                console.error("Fetch error:", error)
                messageArea.textContent = `Network error: ${error.message}`
                messageArea.style.color = "red"
                imagePreview.style.display = "none"
            })
            .finally(() => {
                loadingSpinner.style.display = "none"
                setButtonsState(false)
            })
        }

        generateButton.addEventListener("click", performGeneration)
        regenerateButton.addEventListener("click", performGeneration)

        setButtonsState(false)
        regenerateButton.disabled = true
        storeButton.disabled = true
        imagePreviewSection.style.display = "none"
        imagePreview.style.display = "none"
    })
</script>
{% endblock %}