{% extends "base.html" %}

{% block title %}{{ notebook.title }} - Python Web Компилятор{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">{{ notebook.title }}</h2>
    <div class="d-flex gap-2">
        {% if current_user.is_authenticated and notebook.user_id == current_user.id %}
            <a href="{{ url_for('edit_notebook', notebook_id=notebook.id) }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-pencil me-1"></i>Редактировать
            </a>
            <a href="{{ url_for('embed_code', notebook_id=notebook.id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-code me-1"></i>Код для встраивания
            </a>
        {% endif %}
        <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Назад
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <button id="run-button" class="btn btn-primary mb-3">
            <div class="spinner" id="run-spinner" style="display: none;"></div>
            <i class="bi bi-play-circle me-1"></i>Запустить
        </button>
        
        <div class="mb-3">
            <label class="form-label fw-bold">Код Python:</label>
            <textarea id="code-view" class="form-control" style="height: 200px;" readonly>{{ notebook.code }}</textarea>
        </div>
        
        <div class="io-section">
            <div class="io-panel">
                <label class="form-label fw-bold">Ввод:</label>
                <textarea id="input-view" class="form-control" style="height: 120px;" readonly>{{ notebook.input_data }}</textarea>
            </div>
            <div class="io-panel">
                <label class="form-label fw-bold">Вывод:</label>
                <div style="position: relative;">
                    <div class="spinner" id="output-spinner" style="position: absolute; top: 10px; right: 10px; z-index: 10;"></div>
                    <textarea id="output-view" class="form-control" style="height: 120px;" placeholder="Результат выполнения появится здесь." readonly></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Инициализируем CodeMirror для просмотра кода
    var codeViewer = initCodeMirror("code-view", {
        mode: "python",
        readOnly: true
    });
    
    // Инициализируем CodeMirror для просмотра входных данных
    var inputViewer = initCodeMirror("input-view", {
        readOnly: true
    });
    
    // Инициализируем CodeMirror для просмотра вывода
    var outputViewer = initCodeMirror("output-view", {
        readOnly: true
    });
    
    // Устанавливаем высоту редакторов
    if (codeViewer) codeViewer.setSize("100%", 200);
    if (inputViewer) inputViewer.setSize("100%", 120);
    if (outputViewer) outputViewer.setSize("100%", 120);

    document.getElementById('run-button').addEventListener('click', async () => {
        // Получаем код из CodeMirror редактора
        const code = codeViewer ? codeViewer.getValue() : document.getElementById("code-view").value;
        const input = inputViewer ? inputViewer.getValue() : document.getElementById("input-view").value;

        // Показываем спиннеры
        const runSpinner = document.getElementById('run-spinner');
        const outputSpinner = document.getElementById('output-spinner');
        runSpinner.style.display = 'inline-block';
        outputSpinner.style.display = 'inline-block';
        
        if (outputViewer) {
            outputViewer.setValue('Выполнение...');
        } else {
            document.getElementById('output-view').value = 'Выполнение...';
        }

        try {
            // Отправка кода и ввода на сервер Flask
            const response = await fetch('/run_code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ code: code, input: input })
            });

            const result = await response.json();
            
            // Скрываем спиннеры
            runSpinner.style.display = 'none';
            outputSpinner.style.display = 'none';
            
            // Отображение вывода
            if (outputViewer) {
                outputViewer.setValue(result.output);
            } else {
                document.getElementById('output-view').value = result.output;
            }
            
        } catch (error) {
            // Скрываем спиннеры
            runSpinner.style.display = 'none';
            outputSpinner.style.display = 'none';
            
            if (outputViewer) {
                outputViewer.setValue(`Произошла ошибка при отправке запроса: ${error}`);
            } else {
                document.getElementById('output-view').value = `Произошла ошибка при отправке запроса: ${error}`;
            }
        }
    });
</script>
{% endblock %}