// Configuration
const API_BASE_URL = window.location.hostname === 'localhost'
    ? 'http://localhost:8000/api'
    : '/api';

// Sample sentences for different languages
const SAMPLE_SENTENCES = {
    'ar': ['مرحبا، كيف حالك اليوم؟', 'الطقس جميل اليوم.', 'أتمنى لك يوما سعيدا.'],
    'bg': ['Здравейте, как сте днес?', 'Времето е хубаво днес.', 'Желая ви приятен ден.'],
    'ca': ['Hola, com estàs avui?', 'El temps és agradable avui.', 'Que tinguis un bon dia.'],
    'cs': ['Ahoj, jak se máš dnes?', 'Počasí je dnes pěkné.', 'Přeji ti hezký den.'],
    'da': ['Hej, hvordan har du det i dag?', 'Vejret er dejligt i dag.', 'Hav en god dag.'],
    'de': ['Hallo, wie geht es dir heute?', 'Das Wetter ist heute schön.', 'Ich wünsche dir einen schönen Tag.'],
    'el': ['Γεια σου, πώς είσαι σήμερα;', 'Ο καιρός είναι ωραίος σήμερα.', 'Σου εύχομαι μια όμορφη μέρα.'],
    'en': ['Hello, how are you today?', 'The weather is nice today.', 'Have a wonderful day!'],
    'es': ['Hola, ¿cómo estás hoy?', 'El clima está agradable hoy.', '¡Que tengas un buen día!'],
    'fi': ['Hei, mitä kuuluu tänään?', 'Sää on kaunis tänään.', 'Mukavaa päivää!'],
    'fr': ['Bonjour, comment allez-vous aujourd\'hui?', 'Le temps est agréable aujourd\'hui.', 'Passez une bonne journée!'],
    'hi': ['नमस्ते, आज आप कैसे हैं?', 'आज मौसम अच्छा है।', 'आपका दिन शुभ हो।'],
    'hr': ['Bok, kako si danas?', 'Vrijeme je lijepo danas.', 'Želim ti lijep dan.'],
    'hu': ['Szia, hogy vagy ma?', 'Az idő szép ma.', 'Szép napot kívánok!'],
    'id': ['Halo, apa kabar hari ini?', 'Cuacanya bagus hari ini.', 'Semoga harimu menyenangkan!'],
    'it': ['Ciao, come stai oggi?', 'Il tempo è bello oggi.', 'Ti auguro una buona giornata!'],
    'ja': ['こんにちは、今日はお元気ですか？', '今日は天気がいいですね。', '良い一日をお過ごしください。'],
    'ko': ['안녕하세요, 오늘은 어떠세요?', '오늘 날씨가 좋네요.', '좋은 하루 보내세요!'],
    'nl': ['Hallo, hoe gaat het vandaag?', 'Het weer is mooi vandaag.', 'Fijne dag gewenst!'],
    'no': ['Hei, hvordan har du det i dag?', 'Været er fint i dag.', 'Ha en fin dag!'],
    'pl': ['Cześć, jak się masz dzisiaj?', 'Pogoda jest ładna dzisiaj.', 'Miłego dnia!'],
    'pt': ['Olá, como você está hoje?', 'O tempo está agradável hoje.', 'Tenha um ótimo dia!'],
    'ro': ['Bună, ce mai faci astăzi?', 'Vremea este frumoasă astăzi.', 'O zi bună!'],
    'ru': ['Привет, как дела сегодня?', 'Погода сегодня хорошая.', 'Хорошего дня!'],
    'sk': ['Ahoj, ako sa máš dnes?', 'Počasie je dnes pekné.', 'Prajem ti pekný deň.'],
    'sv': ['Hej, hur mår du idag?', 'Vädret är fint idag.', 'Ha en trevlig dag!'],
    'th': ['สวัสดี วันนี้เป็นอย่างไรบ้าง?', 'อากาศดีวันนี้.', 'ขอให้มีความสุขตลอดวัน!'],
    'tr': ['Merhaba, bugün nasılsın?', 'Hava bugün güzel.', 'İyi günler dilerim!'],
    'uk': ['Привіт, як справи сьогодні?', 'Погода сьогодні гарна.', 'Гарного дня!'],
    'vi': ['Xin chào, hôm nay bạn thế nào?', 'Thời tiết hôm nay đẹp.', 'Chúc bạn một ngày tốt lành!'],
    'zh': ['你好，今天过得怎么样？', '今天天气真好。', '祝你有美好的一天！'],
    // Cantonese (yue-CN)
    'yue': ['你好，今日點呀？', '今日天氣好好。', '祝你有美好嘅一天！'],
    // Wu Chinese (wuu-CN) - uses Simplified Chinese
    'wuu': ['侬好，今朝好伐？', '今朝天气老好额。', '祝侬开心！'],
};

// State
let voices = [];
let filteredVoices = [];
let currentAudioUrl = null;
let currentTestAudioUrl = null;
let history = [];
let deferredPrompt = null;

// DOM Elements
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
const voiceSelect = document.getElementById('voiceSelect');
const languageSelect = document.getElementById('languageSelect');
const genderFilter = document.getElementById('genderFilter');
const rateSlider = document.getElementById('rateSlider');
const rateValue = document.getElementById('rateValue');
const volumeSlider = document.getElementById('volumeSlider');
const volumeValue = document.getElementById('volumeValue');
const pitchSlider = document.getElementById('pitchSlider');
const pitchValue = document.getElementById('pitchValue');
const generateBtn = document.getElementById('generateBtn');
const clearBtn = document.getElementById('clearBtn');
const testVoiceBtn = document.getElementById('testVoiceBtn');
const progressBar = document.getElementById('progressBar');
const statusMessage = document.getElementById('statusMessage');
const audioSection = document.getElementById('audioSection');
const audioPlayer = document.getElementById('audioPlayer');
const downloadBtn = document.getElementById('downloadBtn');
const historyList = document.getElementById('historyList');
const onlineStatus = document.getElementById('onlineStatus');
const installPrompt = document.getElementById('installPrompt');
const installBtn = document.getElementById('installBtn');

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    loadVoices();
    loadHistory();
    setupEventListeners();
    setupPWA();
    updateOnlineStatus();
});

// Event Listeners
function setupEventListeners() {
    textInput.addEventListener('input', updateCharCount);

    languageSelect.addEventListener('change', () => {
        filterVoices();
        updateTestVoiceButton();
    });
    genderFilter.addEventListener('change', filterVoices);
    voiceSelect.addEventListener('change', updateTestVoiceButton);

    rateSlider.addEventListener('input', (e) => {
        const value = e.target.value;
        rateValue.textContent = `${value >= 0 ? '+' : ''}${value}%`;
    });

    volumeSlider.addEventListener('input', (e) => {
        const value = e.target.value;
        volumeValue.textContent = `${value >= 0 ? '+' : ''}${value}%`;
    });

    pitchSlider.addEventListener('input', (e) => {
        const value = e.target.value;
        pitchValue.textContent = `${value >= 0 ? '+' : ''}${value}Hz`;
    });

    generateBtn.addEventListener('click', generateSpeech);
    clearBtn.addEventListener('click', clearForm);
    testVoiceBtn.addEventListener('click', testVoice);
    downloadBtn.addEventListener('click', downloadAudio);

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
}

// Character count
function updateCharCount() {
    const count = textInput.value.length;
    charCount.textContent = count;

    if (count > 4500) {
        charCount.style.color = 'var(--error-color)';
    } else if (count > 4000) {
        charCount.style.color = 'var(--primary-color)';
    } else {
        charCount.style.color = '';
    }
}

// Load voices from API
async function loadVoices() {
    try {
        // Add cache busting to ensure fresh data
        const response = await fetch(`${API_BASE_URL}/voices?_=${Date.now()}`);
        if (!response.ok) throw new Error('Failed to load voices');

        voices = await response.json();
        populateLanguageSelect();

        showStatus('Voices loaded successfully', 'success');
        console.log(`Loaded ${voices.length} voices from API`);
    } catch (error) {
        console.error('Error loading voices:', error);
        showStatus('Failed to load voices. Please check the server connection.', 'error');
    }
}

// Populate language select
function populateLanguageSelect() {
    const languages = [...new Set(voices.map(v => v.Locale))].sort();

    languageSelect.innerHTML = '<option value="">Select a language</option>';
    languages.forEach(lang => {
        const option = document.createElement('option');
        option.value = lang;
        option.textContent = getLanguageName(lang);
        languageSelect.appendChild(option);
    });
}

// Get language name from locale
function getLanguageName(locale) {
    const names = voices.filter(v => v.Locale === locale);
    return names.length > 0 ? names[0].LocaleName : locale;
}

// Filter voices based on selected language and gender
function filterVoices() {
    const selectedLanguage = languageSelect.value;
    const selectedGender = genderFilter.value;

    // If no language is selected, clear voice dropdown
    if (!selectedLanguage) {
        voiceSelect.innerHTML = '<option value="">Select language first</option>';
        filteredVoices = [];
        return;
    }

    // Filter voices by language and gender
    filteredVoices = voices.filter(voice => {
        const languageMatch = voice.Locale === selectedLanguage;
        const genderMatch = !selectedGender || voice.Gender === selectedGender;
        return languageMatch && genderMatch;
    });

    populateVoiceSelect();
}

// Populate voice select
function populateVoiceSelect() {
    voiceSelect.innerHTML = '';

    if (filteredVoices.length === 0) {
        voiceSelect.innerHTML = '<option value="">No voices available for selected filters</option>';
        return;
    }

    // Sort voices alphabetically by LocalName
    const sortedVoices = [...filteredVoices].sort((a, b) => {
        return a.LocalName.localeCompare(b.LocalName);
    });

    sortedVoices.forEach(voice => {
        const option = document.createElement('option');
        option.value = voice.Name;
        option.textContent = `${voice.LocalName} (${voice.Gender})`;
        voiceSelect.appendChild(option);
    });
}

// Generate speech
async function generateSpeech() {
    const text = textInput.value.trim();

    if (!text) {
        showStatus('Please enter some text', 'error');
        return;
    }

    if (text.length > 5000) {
        showStatus('Text exceeds maximum length of 5000 characters', 'error');
        return;
    }

    const voice = voiceSelect.value;
    if (!voice) {
        showStatus('Please select a voice', 'error');
        return;
    }

    const params = {
        text: text,
        voice: voice,
        rate: `${rateSlider.value >= 0 ? '+' : ''}${rateSlider.value}%`,
        volume: `${volumeSlider.value >= 0 ? '+' : ''}${volumeSlider.value}%`,
        pitch: `${pitchSlider.value >= 0 ? '+' : ''}${pitchSlider.value}Hz`
    };

    try {
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<span class="loading"></span> Generating...';
        progressBar.style.display = 'block';
        hideStatus();

        const response = await fetch(`${API_BASE_URL}/synthesize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        });

        if (!response.ok) {
            const error = await response.json().catch(() => ({ detail: 'Failed to generate speech' }));
            const errorMsg = error.detail || 'Failed to generate speech';

            // Check if it's an invalid voice error
            if (errorMsg.includes('No audio') || errorMsg.includes('voice')) {
                throw new Error(`Voice error: ${errorMsg}. Try selecting a different voice or refresh the page.`);
            }
            throw new Error(errorMsg);
        }

        const blob = await response.blob();

        // Clean up previous audio URL
        if (currentAudioUrl) {
            URL.revokeObjectURL(currentAudioUrl);
        }

        currentAudioUrl = URL.createObjectURL(blob);
        audioPlayer.src = currentAudioUrl;
        audioSection.style.display = 'block';

        // Add to history
        const selectedVoice = voices.find(v => v.Name === voice);
        addToHistory({
            text: text,
            voice: voice,
            voiceName: voiceSelect.options[voiceSelect.selectedIndex].text,
            locale: selectedVoice ? selectedVoice.Locale : '',
            localeName: selectedVoice ? selectedVoice.LocaleName : '',
            params: params,
            timestamp: new Date().toISOString()
        });

        showStatus('Speech generated successfully!', 'success');

    } catch (error) {
        console.error('Error generating speech:', error);
        showStatus(error.message, 'error');
    } finally {
        generateBtn.disabled = false;
        generateBtn.innerHTML = '<span class="btn-icon">🎵</span> Generate Speech';
        progressBar.style.display = 'none';
    }
}

// Download audio
function downloadAudio() {
    if (!currentAudioUrl) return;

    const text = textInput.value.substring(0, 30).replace(/[^a-z0-9]/gi, '_');
    const filename = `edge-tts-${text}-${Date.now()}.mp3`;

    const a = document.createElement('a');
    a.href = currentAudioUrl;
    a.download = filename;
    a.click();
}

// Update test voice button state
function updateTestVoiceButton() {
    const hasVoice = voiceSelect.value && voiceSelect.value !== '';
    testVoiceBtn.disabled = !hasVoice;
}

// Get sample sentence for language
function getSampleSentence(locale) {
    // Extract language code (e.g., 'en' from 'en-US')
    const langCode = locale.split('-')[0];

    // Check for exact locale match first (for special cases like yue-CN, wuu-CN)
    if (SAMPLE_SENTENCES[locale]) {
        const sentences = SAMPLE_SENTENCES[locale];
        return sentences[Math.floor(Math.random() * sentences.length)];
    }

    // Then check for language code match
    if (SAMPLE_SENTENCES[langCode]) {
        const sentences = SAMPLE_SENTENCES[langCode];
        return sentences[Math.floor(Math.random() * sentences.length)];
    }

    // Default to English
    const sentences = SAMPLE_SENTENCES['en'];
    return sentences[Math.floor(Math.random() * sentences.length)];
}

// Test voice with sample sentence
async function testVoice() {
    const voice = voiceSelect.value;
    const selectedLanguage = languageSelect.value;

    if (!voice || !selectedLanguage) {
        showStatus('Please select a voice first', 'error');
        return;
    }

    // Get sample sentence
    const sampleText = getSampleSentence(selectedLanguage);

    const params = {
        text: sampleText,
        voice: voice,
        rate: `${rateSlider.value >= 0 ? '+' : ''}${rateSlider.value}%`,
        volume: `${volumeSlider.value >= 0 ? '+' : ''}${volumeSlider.value}%`,
        pitch: `${pitchSlider.value >= 0 ? '+' : ''}${pitchSlider.value}Hz`
    };

    try {
        testVoiceBtn.disabled = true;
        testVoiceBtn.innerHTML = '<span class="loading"></span> Testing...';

        const response = await fetch(`${API_BASE_URL}/synthesize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        });

        if (!response.ok) {
            const error = await response.json().catch(() => ({ detail: 'Failed to generate test speech' }));
            const errorMsg = error.detail || 'Failed to generate test speech';

            // Check if it's an invalid voice error
            if (errorMsg.includes('No audio') || errorMsg.includes('voice')) {
                throw new Error(`Voice error: ${errorMsg}. This voice may not be available. Try refreshing the page.`);
            }
            throw new Error(errorMsg);
        }

        const blob = await response.blob();

        // Clean up previous test audio URL
        if (currentTestAudioUrl) {
            URL.revokeObjectURL(currentTestAudioUrl);
        }

        currentTestAudioUrl = URL.createObjectURL(blob);

        // Play audio automatically
        const testAudio = new Audio(currentTestAudioUrl);
        testAudio.play();

        showStatus(`Testing voice: "${sampleText}"`, 'info');

    } catch (error) {
        console.error('Error testing voice:', error);
        showStatus(error.message, 'error');
    } finally {
        testVoiceBtn.disabled = false;
        testVoiceBtn.innerHTML = '<span class="btn-icon">🎧</span> Test Voice';
    }
}

// Clear form
function clearForm() {
    textInput.value = '';
    updateCharCount();
    rateSlider.value = 0;
    volumeSlider.value = 0;
    pitchSlider.value = 0;
    rateValue.textContent = '+0%';
    volumeValue.textContent = '+0%';
    pitchValue.textContent = '+0Hz';
    hideStatus();
}

// History management
function loadHistory() {
    const saved = localStorage.getItem('tts_history');
    if (saved) {
        history = JSON.parse(saved);
        renderHistory();
    }
}

function saveHistory() {
    // Keep only last 10 items
    history = history.slice(0, 10);
    localStorage.setItem('tts_history', JSON.stringify(history));
}

function addToHistory(item) {
    history.unshift(item);
    saveHistory();
    renderHistory();
}

function renderHistory() {
    if (history.length === 0) {
        historyList.innerHTML = '<p class="empty-state">No recent generations yet</p>';
        return;
    }

    historyList.innerHTML = '';

    history.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'history-item';

        const date = new Date(item.timestamp);
        const timeAgo = getTimeAgo(date);

        const languageInfo = item.localeName ? ` - ${item.localeName}` : '';

        div.innerHTML = `
            <div class="history-item-header">
                <div class="history-item-text" title="${escapeHtml(item.text)}">
                    ${escapeHtml(item.text)}
                </div>
                <div class="history-item-time">${timeAgo}</div>
            </div>
            <div class="history-item-voice">${escapeHtml(item.voiceName)}${languageInfo}</div>
            <div class="history-item-actions">
                <button class="btn btn-primary" onclick="loadHistoryItem(${index})">
                    Load
                </button>
                <button class="btn btn-secondary" onclick="deleteHistoryItem(${index})">
                    Delete
                </button>
            </div>
        `;

        historyList.appendChild(div);
    });
}

function loadHistoryItem(index) {
    const item = history[index];

    textInput.value = item.text;
    updateCharCount();

    // Find the voice in the voices list to get its locale
    const voice = voices.find(v => v.Name === item.voice);
    if (voice) {
        // Set language first
        languageSelect.value = voice.Locale;
        // Trigger filter to populate voice dropdown
        filterVoices();
        // Then set the specific voice
        voiceSelect.value = item.voice;
    }

    // Set parameters
    if (item.params) {
        rateSlider.value = parseInt(item.params.rate);
        volumeSlider.value = parseInt(item.params.volume);
        pitchSlider.value = parseInt(item.params.pitch);
        rateValue.textContent = item.params.rate;
        volumeValue.textContent = item.params.volume;
        pitchValue.textContent = item.params.pitch;
    }

    window.scrollTo({ top: 0, behavior: 'smooth' });
    showStatus('History item loaded', 'info');
}

function deleteHistoryItem(index) {
    history.splice(index, 1);
    saveHistory();
    renderHistory();
}

// Utilities
function showStatus(message, type = 'info') {
    statusMessage.textContent = message;
    statusMessage.className = `status-message ${type}`;
}

function hideStatus() {
    statusMessage.className = 'status-message';
}

function getTimeAgo(date) {
    const seconds = Math.floor((new Date() - date) / 1000);

    if (seconds < 60) return 'Just now';
    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
    if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
    return `${Math.floor(seconds / 86400)}d ago`;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function updateOnlineStatus() {
    if (navigator.onLine) {
        onlineStatus.textContent = '● Online';
        onlineStatus.className = 'online';
    } else {
        onlineStatus.textContent = '● Offline';
        onlineStatus.className = 'offline';
    }
}

// PWA Setup
function setupPWA() {
    // Register service worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js')
            .then(registration => {
                console.log('Service Worker registered:', registration);
            })
            .catch(error => {
                console.error('Service Worker registration failed:', error);
            });
    }

    // Install prompt
    window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
        installPrompt.style.display = 'inline';
    });

    installBtn.addEventListener('click', async () => {
        if (!deferredPrompt) return;

        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;

        console.log(`User response to install prompt: ${outcome}`);
        deferredPrompt = null;
        installPrompt.style.display = 'none';
    });

    window.addEventListener('appinstalled', () => {
        console.log('PWA installed');
        installPrompt.style.display = 'none';
    });
}