{% extends 'django_site_documentation/base.html' %}
{% load static %}

{% block title %}Editing: {{ page_path }} | {{ doc_title }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_site_documentation/vendor/easymde.min.css' %}">
<style>
.EasyMDEContainer {
    margin-top: 1rem;
}
.EasyMDEContainer .CodeMirror {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
}
.editor-toolbar {
    border: 1px solid var(--color-border);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: var(--color-sidebar);
    padding: 6px 10px;
}
.editor-toolbar button {
    color: var(--color-text-muted) !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: var(--color-primary-light);
    border-color: var(--color-border);
}
.editor-toolbar i.separator {
    border-left: 1px solid var(--color-border);
    border-right: none;
}
.editor-statusbar {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.editor-statusbar span {
    color: var(--color-text-muted);
}
.editor-preview {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.7;
    font-size: 1rem;
    padding: 1.5rem;
}
.editor-preview pre {
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
}
.editor-preview table th,
.editor-preview table td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
}
.editor-preview table th {
    background: var(--color-code-bg);
}
.editor-preview a {
    color: var(--color-primary);
}
.editor-preview blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: 1rem;
    color: var(--color-text-muted);
}
.editor-preview code {
    font-family: var(--font-mono);
    background: var(--color-code-bg);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85rem;
}
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--color-text);
}
.editor-preview h2 {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.3rem;
}
.editor-preview img {
    max-width: 100%;
    border-radius: 6px;
}
.CodeMirror-gutters {
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-border);
}
.CodeMirror-linenumber {
    color: var(--color-text-muted);
}
.CodeMirror-cursor {
    border-left-color: var(--color-text);
}
.CodeMirror-selected {
    background: var(--color-primary-light);
}
.cm-s-easymde .cm-header {
    color: var(--color-text);
}
.cm-s-easymde .cm-comment {
    background: rgba(128,128,128,0.1);
}
.cm-s-easymde .cm-link {
    color: var(--color-primary);
}
.cm-s-easymde .cm-url {
    color: var(--color-text-muted);
}
.cm-s-easymde .cm-quote {
    color: var(--color-text-muted);
}
.cm-s-easymde .cm-string {
    color: var(--color-primary);
}
.cm-s-easymde .cm-tag {
    color: #63a35c;
}
.cm-s-easymde .cm-attribute {
    color: #795da3;
}
.CodeMirror-fullscreen {
    background: var(--color-bg);
}
.editor-toolbar.fullscreen {
    background: var(--color-sidebar);
}
.editor-preview-side {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.editor-preview-active {
    background: var(--color-bg);
}
.editor-toolbar .easymde-dropdown {
    background: linear-gradient(to bottom right, var(--color-border) 0, var(--color-border) 84%, var(--color-text-muted) 50%, var(--color-text-muted) 100%);
}
</style>
{% endblock %}

{% block content %}
<article class="page-content">
    <header class="page-header">
        <h1>Editing: {{ page_path }}</h1>
        <p class="breadcrumb">
            <a href="{% url 'django_site_doc_shelf' app_label %}">{{ current_app.title }}</a>
        </p>
    </header>

    <form method="post" class="page-edit-form" id="edit-form">
        {% csrf_token %}
        <textarea name="content" id="editor" rows="30">{{ content }}</textarea>
        <div class="form-actions">
            <button type="submit" class="toolbar-btn" title="Save">
                <img src="{% static 'django_site_documentation/svg/save.svg' %}" alt="Save" width="18" height="18">
                <span>Save</span>
            </button>
            {% if doc_path %}
            <a href="{% url 'django_site_doc_page_by_path' app_label doc_path %}" class="toolbar-btn" title="Cancel">
                <img src="{% static 'django_site_documentation/svg/cancel.svg' %}" alt="Cancel" width="18" height="18">
                <span>Cancel</span>
            </a>
            {% else %}
            <a href="{% url 'django_site_doc_shelf' app_label %}" class="toolbar-btn" title="Cancel">
                <img src="{% static 'django_site_documentation/svg/cancel.svg' %}" alt="Cancel" width="18" height="18">
                <span>Cancel</span>
            </a>
            {% endif %}
        </div>
    </form>
</article>
<div class="ai-modal-overlay" id="ai-modal">
    <div class="ai-modal">
        <h3>AI Documentation Generator</h3>
        <p>Enter the relative path to a Python file in your project to generate Markdown documentation.</p>
        <label for="ai-file-path">File Path</label>
        <input type="text" id="ai-file-path" placeholder="e.g. apps/orders/views.py" autocomplete="off">
        <label for="ai-prompt-context" class="ai-modal-context-label">Prompt Context <small>(optional)</small></label>
        <textarea id="ai-prompt-context" placeholder="e.g. Document the home_view and all its dependencies" rows="3"></textarea>
        <div class="ai-modal-actions">
            <button class="ai-modal-btn ai-modal-btn-primary" id="ai-generate-btn">
                <span class="ai-spinner" id="ai-spinner"></span>
                <span id="ai-btn-text">Generate</span>
            </button>
            <button class="ai-modal-btn ai-modal-btn-secondary" id="ai-modal-close">Cancel</button>
        </div>
        <div class="ai-modal-error" id="ai-modal-error"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_site_documentation/vendor/easymde.min.js' %}"></script>
<script>
(function() {
    var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    var uploadUrl = '{% url "django_site_doc_upload_image" app_label page_path %}';
    var currentAppLabel = '{{ app_label }}';
    var editPagePath = '{{ page_path }}';
    var editorElement = document.getElementById('editor');

    function uploadAndInsert(file) {
        if (!file || file.type.indexOf('image/') !== 0) return;

        var placeholder = '![Uploading...]()';
        var cm = easyMDE.codemirror;
        var cursor = cm.getCursor();
        cm.replaceRange(placeholder, cursor);
        var placeholderEnd = {line: cursor.line, ch: cursor.ch + placeholder.length};

        var formData = new FormData();
        formData.append('image', file);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', uploadUrl);
        xhr.setRequestHeader('X-CSRFToken', csrfToken);
        xhr.onload = function() {
            cm.setCursor(placeholderEnd);
            var line = cm.getLine(placeholderEnd.line);
            var idx = line.indexOf(placeholder);
            if (idx >= 0) {
                cm.replaceRange('', {line: placeholderEnd.line, ch: idx}, {line: placeholderEnd.line, ch: idx + placeholder.length});
            }
            if (xhr.status === 200) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.filePath) {
                        var alt = file.name.replace(/\.[^.]+$/, '');
                        var absUrl = '{{ doc_prefix }}' + currentAppLabel + '/' + data.filePath;
                        var markdown = '![' + alt + '](' + absUrl + ')';
                        cm.replaceRange(markdown, cm.getCursor());
                    }
                } catch(e) {}
            }
        };
        xhr.onerror = function() {
            cm.setCursor(placeholderEnd);
            var line = cm.getLine(placeholderEnd.line);
            var idx = line.indexOf(placeholder);
            if (idx >= 0) {
                cm.replaceRange('', {line: placeholderEnd.line, ch: idx}, {line: placeholderEnd.line, ch: idx + placeholder.length});
            }
        };
        xhr.send(formData);
    }

    window.uploadAndInsert = uploadAndInsert;

    var easyMDE = new EasyMDE({
        element: editorElement,
        toolbar: [
            'bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|',
            'link', {% if ai_available %}
            {
                name: 'ai-magic',
                action: function(editor) { openAiModal(editor); },
                className: 'fa fa-magic',
                title: 'Generate Documentation with AI',
            },
            {% endif %}
            {
                name: 'image',
                action: function(editor) {
                    var input = document.createElement('input');
                    input.type = 'file';
                    input.accept = 'image/*';
                    input.onchange = function() {
                        if (input.files[0]) uploadAndInsert(input.files[0]);
                    };
                    input.click();
                },
                className: 'fa fa-picture-o',
                title: 'Upload Image',
            },
            'table', 'horizontal-rule', '|', 'preview', 'side-by-side', 'fullscreen', '|', 'guide',
        ],
        spellChecker: false,
        status: ['lines', 'words', 'characters'],
        renderingConfig: {
            codeSyntaxHighlighting: true,
        },
    });

    var aiGenerateUrl = '{% url "django_site_doc_ai_generate" %}';

    window.openAiModal = function(editor) {
        var modal = document.getElementById('ai-modal');
        var input = document.getElementById('ai-file-path');
        var generateBtn = document.getElementById('ai-generate-btn');
        var closeBtn = document.getElementById('ai-modal-close');
        var errorDiv = document.getElementById('ai-modal-error');
        var spinner = document.getElementById('ai-spinner');
        var btnText = document.getElementById('ai-btn-text');

        var contextInput = document.getElementById('ai-prompt-context');
        input.value = '';
        contextInput.value = '';
        errorDiv.classList.remove('visible');
        errorDiv.textContent = '';
        generateBtn.disabled = false;
        spinner.classList.remove('visible');
        btnText.textContent = 'Generate';
        modal.classList.add('visible');
        input.focus();

        function closeModal() {
            modal.classList.remove('visible');
            errorDiv.classList.remove('visible');
        }

        function handleGenerate() {
            var filePath = input.value.trim();
            if (!filePath) {
                errorDiv.textContent = 'Please enter a file path.';
                errorDiv.classList.add('visible');
                return;
            }

            generateBtn.disabled = true;
            spinner.classList.add('visible');
            btnText.textContent = 'Thinking...';
            errorDiv.classList.remove('visible');

            var formData = new FormData();
            formData.append('file_path', filePath);
            formData.append('prompt_context', document.getElementById('ai-prompt-context').value.trim());
            formData.append('csrfmiddlewaretoken', csrfToken);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', aiGenerateUrl);
            xhr.onload = function() {
                generateBtn.disabled = false;
                spinner.classList.remove('visible');
                btnText.textContent = 'Generate';

                if (xhr.status === 200) {
                    try {
                        var data = JSON.parse(xhr.responseText);
                        if (data.content) {
                            var cm = easyMDE.codemirror;
                            var cursor = cm.getCursor();
                            cm.replaceRange(data.content, cursor);
                            closeModal();
                        }
                    } catch(e) {
                        errorDiv.textContent = 'Invalid response from server.';
                        errorDiv.classList.add('visible');
                    }
                } else {
                    try {
                        var errData = JSON.parse(xhr.responseText);
                        errorDiv.textContent = errData.error || 'An error occurred.';
                    } catch(e) {
                        errorDiv.textContent = 'An error occurred.';
                    }
                    errorDiv.classList.add('visible');
                }
            };
            xhr.onerror = function() {
                generateBtn.disabled = false;
                spinner.classList.remove('visible');
                btnText.textContent = 'Generate';
                errorDiv.textContent = 'Network error.';
                errorDiv.classList.add('visible');
            };
            xhr.send(formData);
        }

        generateBtn.onclick = handleGenerate;

        input.onkeydown = function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                handleGenerate();
            }
        };

        closeBtn.onclick = closeModal;

        modal.onclick = function(e) {
            if (e.target === modal) closeModal();
        };
    };

    var wrapper = easyMDE.gui;
    if (wrapper) {
        wrapper.addEventListener('paste', function(e) {
            var items = e.clipboardData && e.clipboardData.items;
            if (!items) return;
            for (var i = 0; i < items.length; i++) {
                if (items[i].kind === 'file' && items[i].type.indexOf('image/') === 0) {
                    e.preventDefault();
                    uploadAndInsert(items[i].getAsFile());
                    return;
                }
            }
        });

        wrapper.addEventListener('drop', function(e) {
            var files = e.dataTransfer && e.dataTransfer.files;
            if (!files || files.length === 0) return;
            for (var i = 0; i < files.length; i++) {
                if (files[i].type.indexOf('image/') === 0) {
                    e.preventDefault();
                    uploadAndInsert(files[i]);
                    return;
                }
            }
        });
    }
})();
</script>
{% endblock %}