// Конфигурация API
const API_BASE_URL = '/api';

// Состояние приложения
let deviceId = null;

// Инициализация приложения
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

// Инициализация
function initializeApp() {
    deviceId = getOrCreateDeviceId();
    bindEvents();
    bindFieldErrorHandlers();
}

// Генерация или получение уникального ID устройства
function getOrCreateDeviceId() {
    let id = localStorage.getItem('deviceId');
    if (!id) {
        id = 'device_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('deviceId', id);
    }
    return id;
}

// Привязка событий
function bindEvents() {
    const form = document.getElementById('scenario-form');
    const newGenerationBtn = document.getElementById('new-generation-btn');
    const retryBtn = document.getElementById('retry-btn');

    if (form) {
        form.addEventListener('submit', handleFormSubmit);
    }

    if (newGenerationBtn) {
        newGenerationBtn.addEventListener('click', showFormScreen);
    }

    if (retryBtn) {
        retryBtn.addEventListener('click', showFormScreen);
    }
}

// Обработка отправки формы
async function handleFormSubmit(event) {
    event.preventDefault();
    
    // Очистить предыдущие ошибки
    clearFieldErrors();
    
    const scenarioTopic = document.getElementById('scenario-topic').value.trim();
    const niche = document.getElementById('niche').value.trim();
    const scenarioGoal = document.getElementById('scenario-goal').value.trim();

    let hasErrors = false;

    // Валидация полей
    if (!scenarioTopic) {
        showFieldError('scenario-topic', 'Пожалуйста, заполните тему сценария');
        hasErrors = true;
    } else if (scenarioTopic.length < 3) {
        showFieldError('scenario-topic', 'Тема сценария должна содержать минимум 3 символа');
        hasErrors = true;
    }

    if (!niche) {
        showFieldError('niche', 'Пожалуйста, заполните нишу');
        hasErrors = true;
    } else if (niche.length < 2) {
        showFieldError('niche', 'Ниша должна содержать минимум 2 символа');
        hasErrors = true;
    }

    if (!scenarioGoal) {
        showFieldError('scenario-goal', 'Пожалуйста, заполните цель сценария');
        hasErrors = true;
    } else if (scenarioGoal.length < 5) {
        showFieldError('scenario-goal', 'Цель сценария должна содержать минимум 5 символов');
        hasErrors = true;
    }

    // Если есть ошибки валидации, не отправляем форму
    if (hasErrors) {
        return;
    }

    // Показать экран загрузки
    showLoadingScreen();

    // Попытка отправки с retry
    await attemptRequestWithRetry(scenarioTopic, niche, scenarioGoal, 3);
}

// Функция для повторных попыток запроса
async function attemptRequestWithRetry(scenarioTopic, niche, scenarioGoal, maxRetries) {
    let lastError = null;
    
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
            console.log(`Попытка ${attempt} из ${maxRetries}`);
            
            // Обновляем индикатор загрузки
            updateLoadingMessage('Пожалуйста, подождите...');
            
            // Отправить запрос к API
            const response = await fetch(`${API_BASE_URL}/scenario/generate`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    scenario_topic: scenarioTopic,
                    niche: niche,
                    scenario_goal: scenarioGoal,
                    device_id: deviceId
                })
            });

            const data = await response.json();

            if (data.success) {
                // Показать результат
                showResult(data.data.scenario);
                return; // Успех, выходим из функции
            } else {
                // Ошибка от сервера - не retry
                showError(data.error || 'Произошла неизвестная ошибка');
                return;
            }
        } catch (error) {
            console.error(`Попытка ${attempt} неудачна:`, error);
            lastError = error;
            
            // Если это не последняя попытка, ждем перед следующей
            if (attempt < maxRetries) {
                const delay = Math.pow(2, attempt) * 1000; // Экспоненциальная задержка: 2s, 4s, 8s
                console.log(`Ожидание ${delay}ms перед следующей попыткой...`);
                updateLoadingMessage('Улучшаем сценарий, пожалуйста, подождите...');
                await new Promise(resolve => setTimeout(resolve, delay));
            }
        }
    }
    
    // Все попытки исчерпаны
    console.error('Все попытки исчерпаны:', lastError);
    
    // Более детальная обработка ошибок
    let errorMessage = 'Произошла ошибка при генерации сценария';
    
    if (lastError.name === 'TypeError' && lastError.message.includes('fetch')) {
        errorMessage = 'Ошибка подключения к серверу. Проверьте подключение к интернету.';
    } else if (lastError.name === 'AbortError') {
        errorMessage = 'Запрос был отменен из-за превышения времени ожидания.';
    } else if (lastError.message) {
        errorMessage = `Ошибка: ${lastError.message}`;
    }
    
    showError(errorMessage);
}

// Функция для обновления сообщения загрузки
function updateLoadingMessage(message) {
    const loadingText = document.querySelector('#loading-screen .loading-text');
    if (loadingText) {
        loadingText.textContent = message;
    }
}

// Показать экран формы
function showFormScreen() {
    hideAllScreens();
    document.getElementById('form-container').style.display = 'block';
    
    // Очистить форму и ошибки
    document.getElementById('scenario-form').reset();
    clearFieldErrors();
}

// Показать экран загрузки
function showLoadingScreen() {
    hideAllScreens();
    document.getElementById('loading-screen').style.display = 'flex';
}

// Показать результат
function showResult(scenario) {
    hideAllScreens();
    
    const resultContainer = document.getElementById('result-container');
    const scenarioOutput = document.getElementById('scenario-output');
    
    // Форматирование сценария
    scenarioOutput.innerHTML = formatScenario(scenario);
    
    resultContainer.style.display = 'block';
}

// Показать ошибку
function showError(message) {
    hideAllScreens();
    
    const errorScreen = document.getElementById('error-screen');
    const errorMessage = document.getElementById('error-message');
    
    errorMessage.textContent = message;
    errorScreen.style.display = 'flex';
}

// Скрыть все экраны
function hideAllScreens() {
    document.getElementById('form-container').style.display = 'none';
    document.getElementById('loading-screen').style.display = 'none';
    document.getElementById('result-container').style.display = 'none';
    document.getElementById('error-screen').style.display = 'none';
}

// Форматирование сценария для красивого отображения
function formatScenario(scenario) {
    // Если пришла строка (старый формат), используем старую логику
    if (typeof scenario === 'string') {
        let formatted = scenario
            .replace(/\n\n/g, '</p><p>')
            .replace(/\n/g, '<br>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>');
        
        if (!formatted.startsWith('<p>')) {
            formatted = '<p>' + formatted + '</p>';
        }
        
        return formatted;
    }
    
    // Если пришел объект (новый формат), форматируем структурированно
    if (typeof scenario === 'object' && scenario !== null) {
        return formatStructuredScenario(scenario);
    }
    
    // Fallback для неожиданных форматов
    return '<p>Ошибка форматирования сценария</p>';
}

// Форматирование структурированного сценария
function formatStructuredScenario(data) {
    let html = '';
    
    // Мета-информация
    if (data.meta) {
        html += `<div class="scenario-meta"><h2 class="scenario-title">${escapeHtml(data.meta.title || 'Сценарий')}</h2>`;
        
        if (data.meta.targetAudience) {
            html += `<div class="meta-item"><span class="meta-label">Целевая аудитория:</span><span class="meta-value">${escapeHtml(data.meta.targetAudience)}</span></div>`;
        }
        
        if (data.meta.goal) {
            html += `<div class="meta-item"><span class="meta-label">Цель:</span><span class="meta-value">${escapeHtml(data.meta.goal)}</span></div>`;
        }
        
        if (data.meta.durationSeconds) {
            html += `<div class="meta-item"><span class="meta-label">Длительность:</span><span class="meta-value">${data.meta.durationSeconds} сек</span></div>`;
        }
        
        html += '</div>';
    }
    
    // Сцены
    if (data.scenes && Array.isArray(data.scenes)) {
        html += '<div class="scenario-scenes">';
        html += '<h3 class="section-title">Сцены</h3>';
        
        data.scenes.forEach((scene, index) => {
            html += `<div class="scene-item"><div class="scene-header"><span class="scene-number">Сцена ${index + 1}</span><span class="scene-timing">${escapeHtml(scene.timing || '')}</span><span class="scene-type">${escapeHtml(translateSceneType(scene.type || ''))}</span></div>`;
            
            if (scene.visual) {
                html += `<div class="scene-visual"><span class="scene-label">Визуал:</span><span class="scene-content">${escapeHtml(scene.visual)}</span></div>`;
            }
            
            if (scene.text) {
                html += `<div class="scene-text"><span class="scene-label">Текст:</span><span class="scene-content">${escapeHtml(scene.text)}</span></div>`;
            }
            
            html += '</div>';
        });
        
        html += '</div>';
    }
    
    // Заметки по продакшену
    if (data.productionNotes) {
        html += '<div class="production-notes">';
        html += '<h3 class="section-title">Заметки по продакшену</h3>';
        
        if (data.productionNotes.music) {
            html += `<div class="production-item"><span class="production-label">Музыка:</span><span class="production-content">${escapeHtml(data.productionNotes.music)}</span></div>`;
        }
        
        if (data.productionNotes.sfx) {
            html += `<div class="production-item"><span class="production-label">Звуковые эффекты:</span><span class="production-content">${escapeHtml(data.productionNotes.sfx)}</span></div>`;
        }
        
        if (data.productionNotes.editingStyle) {
            html += `<div class="production-item"><span class="production-label">Стиль монтажа:</span><span class="production-content">${escapeHtml(data.productionNotes.editingStyle)}</span></div>`;
        }
        
        html += '</div>';
    }
    
    // Анализ виральности
    if (data.viralityAnalysis) {
        html += '<div class="virality-analysis">';
        html += '<h3 class="section-title">Анализ виральности</h3>';
        
        if (data.viralityAnalysis.hookEffectiveness) {
            html += `<div class="analysis-item"><span class="analysis-label">Эффективность хука:</span><span class="analysis-content">${escapeHtml(data.viralityAnalysis.hookEffectiveness)}</span></div>`;
        }
        
        if (data.viralityAnalysis.retentionStrategy) {
            html += `<div class="analysis-item"><span class="analysis-label">Стратегия удержания:</span><span class="analysis-content">${escapeHtml(data.viralityAnalysis.retentionStrategy)}</span></div>`;
        }
        
        if (data.viralityAnalysis.valueAndCTA) {
            html += `<div class="analysis-item"><span class="analysis-label">Ценность и призыв к действию:</span><span class="analysis-content">${escapeHtml(data.viralityAnalysis.valueAndCTA)}</span></div>`;
        }
        
        html += '</div>';
    }
    
    return html;
}

// Функция для экранирования HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Функция для перевода типов сцен на русский
function translateSceneType(type) {
    const translations = {
        'Hook': 'Хук',
        'Body': 'Основная часть',
        'CTA': 'Призыв к действию',
        'Introduction': 'Введение',
        'Conclusion': 'Заключение',
        'Transition': 'Переход',
        'Call to Action': 'Призыв к действию',
        'Opening': 'Открытие',
        'Closing': 'Закрытие'
    };
    
    return translations[type] || type;
}

// Показать ошибку валидации для конкретного поля
function showFieldError(fieldId, message) {
    const field = document.getElementById(fieldId + '-field');
    const errorElement = document.getElementById(fieldId + '-error');
    
    if (field && errorElement) {
        field.classList.add('form-field--error');
        errorElement.textContent = message;
        errorElement.classList.add('form-error--visible');
    }
}

// Очистить ошибку для конкретного поля
function clearFieldError(fieldId) {
    const field = document.getElementById(fieldId + '-field');
    const errorElement = document.getElementById(fieldId + '-error');
    
    if (field && errorElement) {
        field.classList.remove('form-field--error');
        errorElement.textContent = '';
        errorElement.classList.remove('form-error--visible');
    }
}

// Очистить все ошибки полей
function clearFieldErrors() {
    const fieldIds = ['scenario-topic', 'niche', 'scenario-goal'];
    fieldIds.forEach(fieldId => {
        clearFieldError(fieldId);
    });
}

// Добавить обработчики для очистки ошибок при вводе текста
function bindFieldErrorHandlers() {
    const fieldIds = ['scenario-topic', 'niche', 'scenario-goal'];
    
    fieldIds.forEach(fieldId => {
        const input = document.getElementById(fieldId);
        if (input) {
            input.addEventListener('input', function() {
                // Очистить ошибку при начале ввода
                clearFieldError(fieldId);
            });
        }
    });
}

// Утилита для отладки
function debugLog(message, data = null) {
    if (console && console.log) {
        console.log(`[Scenario App] ${message}`, data || '');
    }
}