{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="text-center mb-5">
            <h1 class="display-5 fw-bold mb-3">Python Web Компилятор</h1>
            <p class="lead text-muted mb-4">Пишите, запускайте и делитесь Python кодом прямо в браузере</p>
            {% if not current_user.is_authenticated %}
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg">Начать кодировать</a>
                    <a href="{{ url_for('login') }}" class="btn btn-outline-primary btn-lg">У меня уже есть аккаунт</a>
                </div>
            {% else %}
                <a href="{{ url_for('new_notebook') }}" class="btn btn-primary btn-lg">Создать новый блокнот</a>
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <h2 class="section-title">Попробуйте онлайн-компилятор</h2>
        
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">Быстрый запуск кода</h5>
                    <div class="d-flex gap-2">
                        <button id="run-button" class="btn btn-primary">
                            <div class="spinner" id="run-spinner" style="display: none;"></div>
                            <i class="bi bi-play-circle me-1"></i>Запустить
                        </button>
                        <button id="reset-button" class="btn btn-outline-secondary" title="Сбросить код и вывод">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">Код Python:</label>
                    <textarea id="code-editor" class="form-control" placeholder="Введите ваш код Python..." style="height: 200px;">print("Hello, World!")
a = int(input())
b = int(input())
print(f"Сумма: {a+b}")</textarea>
                </div>
                
                <div class="io-section">
                    <div class="io-panel">
                        <label class="form-label fw-bold">Ввод:</label>
                        <textarea id="input-area" class="form-control" placeholder="Входные данные, разделенные строками..."></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-area" class="form-control" placeholder="Результат выполнения появится здесь." readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% if public_notebooks %}
    <div class="row">
        <div class="col-12">
            <h2 class="section-title">Публичные блокноты</h2>
            
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for notebook in public_notebooks %}
                    <div class="col">
                        <div class="card h-100 notebook-item">
                            <div class="card-body">
                                <h5 class="card-title">{{ notebook.title }}</h5>
                                <p class="card-text text-muted small">
                                    <i class="bi bi-person me-1"></i>{{ notebook.author.username }}<br>
                                    <i class="bi bi-calendar me-1"></i>{{ notebook.created_at.strftime('%d.%m.%Y') }}
                                </p>
                            </div>
                            <div class="card-footer bg-transparent border-0">
                                <a href="{{ url_for('view_notebook', notebook_id=notebook.id) }}" class="btn btn-outline-primary btn-sm w-100">
                                    <i class="bi bi-eye me-1"></i>Просмотреть
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    // Инициализируем CodeMirror для подсветки кода и нумерации строк
    var editor = initCodeMirror("code-editor", {
        mode: "python"
    });
    
    // Инициализируем CodeMirror для поля ввода с нумерацией строк
    var inputEditor = initCodeMirror("input-area", {
        lineNumbers: true
    });
    
    // Инициализируем CodeMirror для поля вывода с нумерацией строк (только для чтения)
    var outputEditor = initCodeMirror("output-area", {
        readOnly: true,
        lineNumbers: true
    });
    
    // Устанавливаем высоту редакторов
    if (editor) editor.setSize("100%", 200);
    if (inputEditor) inputEditor.setSize("100%", 150);
    if (outputEditor) outputEditor.setSize("100%", 150);

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

        // Показываем спиннеры
        const runSpinner = document.getElementById('run-spinner');
        const outputSpinner = document.getElementById('output-spinner');
        runSpinner.style.display = 'inline-block';
        outputSpinner.style.display = 'inline-block';
        
        if (outputEditor) {
            outputEditor.setValue('Выполнение...');
        } else {
            document.getElementById('output-area').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 (outputEditor) {
                outputEditor.setValue(result.output);
            } else {
                document.getElementById('output-area').value = result.output;
            }
            
        } catch (error) {
            // Скрываем спиннеры
            runSpinner.style.display = 'none';
            outputSpinner.style.display = 'none';
            
            if (outputEditor) {
                outputEditor.setValue(`Произошла ошибка при отправке запроса: ${error}`);
            } else {
                document.getElementById('output-area').value = `Произошла ошибка при отправке запроса: ${error}`;
            }
        }
    });

    document.getElementById('reset-button').addEventListener('click', () => {
        // Очистка полей
        if (editor) {
            editor.setValue('print("Hello, World!")');
        } else {
            document.getElementById("code-editor").value = 'print("Hello, World!")';
        }
        
        if (inputEditor) {
            inputEditor.setValue('');
        } else {
            document.getElementById("input-area").value = '';
        }
        
        if (outputEditor) {
            outputEditor.setValue('');
        } else {
            document.getElementById("output-area").value = '';
        }
        
        // Скрываем спиннеры
        document.getElementById('run-spinner').style.display = 'none';
        document.getElementById('output-spinner').style.display = 'none';
    });
</script>
{% endblock %}