{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Text-to-Speech" %} - {% trans "Mini Apps" %}{% endblock %}

{% block extra_css %}
<style>
    .tts-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .tts-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .tts-title {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, #8e44ad 0%, #3498db 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .tts-subtitle {
        color: #6b7280;
        font-size: 1.125rem;
    }

    .input-section {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .text-input {
        width: 100%;
        min-height: 200px;
        padding: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 14px;
        line-height: 1.6;
        resize: vertical;
        transition: border-color 0.2s ease;
    }

    .text-input:focus {
        outline: none;
        border-color: #8e44ad;
        box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
    }

    .voice-select {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;
        background-color: white;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }

    .voice-select:focus {
        outline: none;
        border-color: #8e44ad;
        box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
    }

    .voice-select-compact {
        min-width: 200px;
        max-width: 250px;
        padding: 0.75rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;
        background-color: white;
        cursor: pointer;
        transition: border-color 0.2s ease;
        flex-shrink: 0;
    }

    .voice-select-compact:focus {
        outline: none;
        border-color: #8e44ad;
        box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
    }

    .custom-voice-input {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;
        transition: border-color 0.2s ease;
    }

    .custom-voice-input:focus {
        outline: none;
        border-color: #8e44ad;
        box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
    }

    .input-controls {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .char-counter {
        color: #6b7280;
        font-size: 0.875rem;
        margin-left: auto;
    }

    .speak-btn {
        background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(142, 68, 173, 0.3);
    }

    .speak-btn:hover {
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(142, 68, 173, 0.4);
    }

    .speak-btn:active {
        transform: translateY(0);
    }

    .speak-btn:disabled {
        background: #9ca3af;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .clear-btn {
        background: #6b7280;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .clear-btn:hover {
        background: #4b5563;
    }

    /* Enhanced Audio Player Styles - Reused from post detail */
    .audio-player {
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        padding: 1.5rem;
    }

    .audio-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .play-pause-btn {
        width: 48px;
        height: 48px;
        background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .play-pause-btn:hover {
        background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }

    .play-pause-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .play-pause-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .stop-btn {
        width: 36px;
        height: 36px;
        background: linear-gradient(145deg, #dc2626 0%, #991b1b 100%);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 3px 6px rgba(220, 38, 38, 0.3);
    }

    .stop-btn:hover {
        background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
    }

    .stop-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    }

    .speed-btn {
        width: 44px;
        height: 32px;
        background: linear-gradient(145deg, #059669 0%, #047857 100%);
        border: none;
        border-radius: 16px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
        font-size: 11px;
        font-weight: 700;
        font-family: 'Monaco', 'Menlo', monospace;
    }

    .speed-btn:hover {
        background: linear-gradient(145deg, #10b981 0%, #059669 100%);
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(5, 150, 105, 0.4);
    }

    .speed-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    }

    .download-btn {
        width: 36px;
        height: 36px;
        background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 100%);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 3px 6px rgba(37, 99, 235, 0.3);
    }

    .download-btn:hover {
        background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
    }

    .download-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
    }

    .download-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .progress-container {
        position: relative;
        height: 8px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #8e44ad 0%, #9b59b6 100%);
        border-radius: 4px;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(142, 68, 173, 0.3);
        will-change: width;
    }

    .seek-slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }

    .audio-time {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        background: #f1f5f9;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }

    .audio-status {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .status-ready { background: #ddd6fe; color: #8e44ad; }
    .status-generating { background: #fef3c7; color: #d97706; }
    .status-playing { background: #dcfce7; color: #16a34a; }
    .status-paused { background: #fed7aa; color: #ea580c; }
    .status-stopped { background: #f3f4f6; color: #6b7280; }
    .status-finished { background: #dbeafe; color: #2563eb; }
    .status-error { background: #fecaca; color: #dc2626; }

    .example-texts {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .example-btn {
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .example-btn:hover {
        background: #e5e7eb;
        border-color: #9ca3af;
    }

    /* Loading overlay styles */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .loading-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .loading-spinner {
        width: 60px;
        height: 60px;
        border: 4px solid #e5e7eb;
        border-top: 4px solid #8e44ad;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }

    .loading-text {
        color: #374151;
        font-size: 1.125rem;
        font-weight: 600;
        text-align: center;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
        .tts-container {
            padding: 1rem;
        }

        .tts-title {
            font-size: 2rem;
        }

        .input-controls {
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }

        .voice-select-compact {
            min-width: auto;
            max-width: none;
            width: 100%;
        }

        .char-counter {
            margin-left: 0;
            text-align: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay">
    <div class="loading-spinner"></div>
    <div class="loading-text">
        <div id="loading-message">{% trans "Preparing Text-to-Speech..." %}</div>
        <div class="text-sm text-gray-500 mt-2">{% trans "Please wait while we process your text" %}</div>
    </div>
</div>

<div class="tts-container">
    <!-- Header -->
    <div class="tts-header">
        <h2 class="tts-title">{% trans "Text-to-Speech" %}</h2>
    </div>

    <!-- Input Section -->
    <div class="input-section">
        <label for="text-input" class="block text-sm font-medium text-gray-700 mb-2">
            {% trans "Enter your text or markdown content:" %}
        </label>
        <textarea
            id="text-input"
            class="text-input"
            placeholder="{% trans 'Type or paste your text here... Markdown formatting is supported!' %}"
            maxlength="3000"></textarea>

        <div class="input-controls">
            <!-- Voice Selection moved to controls row -->
            <select id="voice-select" class="voice-select-compact" onchange="handleVoiceChange()">
                <option value="zh-CN-XiaoxiaoNeural">XiaoxiaoNeural (Female)</option>
                <option value="zh-CN-YunxiNeural">YunxiNeural (Male)</option>
                <option value="zh-CN-YunjianNeural">YunjianNeural (Male)</option>
                <option value="zh-CN-XiaoyiNeural">XiaoyiNeural (Female)</option>
                <option value="zh-CN-YunyangNeural">YunyangNeural (Male)</option>
                <option value="zh-CN-XiaochenNeural">XiaochenNeural (Female)</option>
                <option value="zh-CN-XiaohanNeural">XiaohanNeural (Female)</option>
                <option value="zh-CN-XiaomengNeural">XiaomengNeural (Female)</option>
                <option value="zh-CN-XiaomoNeural">XiaomoNeural (Female)</option>
                <option value="zh-CN-XiaoqiuNeural">XiaoqiuNeural (Female)</option>
                <option value="zh-CN-XiaorouNeural">XiaorouNeural (Female)</option>
                <option value="zh-CN-YunyeNeural">YunyeNeural (Male)</option>
                <option value="zh-CN-XiaoshuangNeural">XiaoshuangNeural (Female, Child)</option>
                <option value="en-US-EmmaNeural">EmmaNeural (Female)</option>
                <option value="en-US-AndrewNeural">AndrewNeural (Male)</option>
                <option value="custom">{% trans "Custom" %}</option>
            </select>

            <button id="speak-btn" class="speak-btn" onclick="generateSpeech()">
                <i class="fas fa-volume-up mr-2"></i>
                {% trans "Speak" %}
            </button>
            <button class="clear-btn" onclick="clearText()">
                {% trans "Clear" %}
            </button>
            <div id="char-counter" class="char-counter">0 / 3000</div>
        </div>

        <!-- Custom Voice Input (moved below controls, hidden by default) -->
        <div id="custom-voice-container" class="mt-3" style="display: none;">
            <label for="custom-voice-input" class="block text-sm font-medium text-gray-700 mb-2">
                {% trans "Enter Custom Voice Code:" %}
            </label>
            <input
                type="text"
                id="custom-voice-input"
                class="custom-voice-input"
                placeholder="{% trans 'e.g., zh-CN-XiaoxiaoNeural' %}"
                maxlength="100">
            <div class="text-xs text-gray-500 mt-1">
                {% trans "Enter the voice code you want to use (e.g., Azure TTS voice names)" %}
            </div>
        </div>

        <!-- Example texts -->
        <div class="example-texts">
            <button class="example-btn" onclick="insertExample(1)">{% trans "Example 1" %}</button>
            <button class="example-btn" onclick="insertExample(2)">{% trans "Example 2" %}</button>
            <button class="example-btn" onclick="insertExample(3)">{% trans "Example 3" %}</button>
        </div>
    </div>

    <!-- Audio Player -->
    <div id="audio-player" class="audio-player" style="display: none;">
        <div class="flex items-center justify-between mb-3">
            <h4 class="text-sm font-medium text-gray-800">{% trans "Audio Player" %}</h4>
            <div id="audio-status" class="audio-status status-ready">{% trans "Ready" %}</div>
        </div>

        <!-- Audio Controls -->
        <div class="space-y-4">
            <audio id="tts-audio" class="hidden" preload="none">
                Your browser does not support the audio element.
            </audio>

            <!-- Progress Bar -->
            <div class="progress-container">
                <div id="progress-bar" class="progress-bar" style="width: 0%"></div>
                <input id="seek-slider" type="range" min="0" max="100" value="0" class="seek-slider">
            </div>

            <!-- Control Buttons and Time -->
            <div class="flex items-center justify-between">
                <div class="audio-controls">
                    <button id="play-pause-btn" onclick="togglePlayPause()"
                            class="play-pause-btn"
                            disabled>
                        <svg id="play-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                        </svg>
                        <svg id="pause-icon" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                    </button>

                    <button onclick="stopAudio()" class="stop-btn">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/>
                        </svg>
                    </button>

                    <button id="speed-btn" onclick="toggleSpeed()" class="speed-btn" title="{% trans 'Playback Speed' %}">
                        1x
                    </button>

                    <button id="download-btn" onclick="downloadAudio()" class="download-btn" title="{% trans 'Download Audio' %}" disabled>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>

                <div class="audio-time">
                    <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// TTS Functionality
let currentAudio = null;
let currentAudioBlob = null; // Store the audio blob for download
let isLoading = false;
let playbackSpeeds = [1, 1.25, 1.5, 2];
let currentSpeedIndex = 0;
let progressUpdateInterval = null;

// Example texts
const examples = {
    1: `# Welcome to Text-to-Speech

This is a **powerful** text-to-speech application that can convert your text to natural-sounding audio.

## Features:
- Support for markdown formatting
- Multiple playback speeds
- High-quality speech synthesis
- Easy to use interface`,

    2: `Once upon a time, in a land far away, there lived a curious developer who discovered the magic of text-to-speech technology. With just a few lines of code, they could bring words to life and make them dance through the air as beautiful sounds.

The developer was amazed by how technology could bridge the gap between written and spoken communication.`,

    3: `胖娃胖嘟嘟，骑马上成都，成都又好耍。胖娃骑白马，白马跳得高。胖娃耍关刀，关刀耍得圆。胖娃吃汤圆。`
};

// Character counter
document.getElementById('text-input').addEventListener('input', function() {
    const text = this.value;
    const counter = document.getElementById('char-counter');
    counter.textContent = `${text.length} / 3000`;

    if (text.length > 2500) {
        counter.style.color = '#dc2626';
    } else if (text.length > 2000) {
        counter.style.color = '#d97706';
    } else {
        counter.style.color = '#6b7280';
    }
});

function insertExample(num) {
    const textInput = document.getElementById('text-input');
    textInput.value = examples[num];
    textInput.dispatchEvent(new Event('input'));
}

function clearText() {
    const textInput = document.getElementById('text-input');
    textInput.value = '';
    textInput.dispatchEvent(new Event('input'));
    textInput.focus();

    // Clear URL parameters when text is cleared
    clearUrlParameters();
}

function clearUrlParameters() {
    // Remove query parameters from URL
    const newUrl = window.location.pathname;
    window.history.replaceState({}, '', newUrl);
}

function handleVoiceChange() {
    const voiceSelect = document.getElementById('voice-select');
    const customContainer = document.getElementById('custom-voice-container');
    const textInput = document.getElementById('text-input');

    if (voiceSelect.value === 'custom') {
        customContainer.style.display = 'block';
        document.getElementById('custom-voice-input').focus();
    } else {
        customContainer.style.display = 'none';
    }

    // Update URL if there's text in the textarea
    const currentText = textInput.value.trim();
    if (currentText) {
        updateUrlWithCurrentState(currentText);
    }
}

function getSelectedVoice() {
    const voiceSelect = document.getElementById('voice-select');
    const customInput = document.getElementById('custom-voice-input');

    if (voiceSelect.value === 'custom') {
        return customInput.value.trim() || 'zh-CN-XiaoxiaoNeural'; // Default to first voice if custom is empty
    }

    return voiceSelect.value;
}

function updateUrlWithCurrentState(text) {
    const selectedVoice = getSelectedVoice();
    const defaultVoice = 'zh-CN-XiaoxiaoNeural';

    // Create URL parameters
    const urlParams = new URLSearchParams();
    urlParams.set('text', text);

    // Only add voice parameter if it's different from the default
    if (selectedVoice !== defaultVoice) {
        urlParams.set('voice', selectedVoice);
    }

    // Update the URL without reloading the page
    const newUrl = window.location.pathname + '?' + urlParams.toString();
    window.history.replaceState({ text: text, voice: selectedVoice }, '', newUrl);
}

function generateSpeech() {
    const textInput = document.getElementById('text-input');
    const text = textInput.value.trim();

    if (!text) {
        alert('{% trans "Please enter some text to convert to speech." %}');
        return;
    }

    if (isLoading) return;

    // Update URL with current text and voice parameters
    updateUrlWithCurrentState(text);

    isLoading = true;
    const speakBtn = document.getElementById('speak-btn');
    const audioPlayer = document.getElementById('audio-player');
    const status = document.getElementById('audio-status');
    const playBtn = document.getElementById('play-pause-btn');

    // Show audio player and update status
    audioPlayer.style.display = 'block';
    status.textContent = '{% trans "Generating..." %}';
    status.className = 'audio-status status-generating';
    speakBtn.disabled = true;
    speakBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{% trans "Generating..." %}';
    playBtn.disabled = true;

    fetch('{% url "tts-api" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            text: text,
            voice: getSelectedVoice()
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('TTS generation failed');
        }
        return response.blob();
    })
    .then(blob => {
        // Store the blob for download functionality
        currentAudioBlob = blob;

        const audioUrl = URL.createObjectURL(blob);
        const audio = document.getElementById('tts-audio');

        audio.src = audioUrl;
        currentAudio = audio;

        audio.addEventListener('loadedmetadata', function() {
            status.textContent = '{% trans "Ready" %}';
            status.className = 'audio-status status-ready';
            playBtn.disabled = false;
            document.getElementById('download-btn').disabled = false; // Enable download button
            updateTotalTime();
            setupAudioEvents();

            // Auto-play the audio after it's loaded
            setTimeout(() => {
                if (currentAudio && currentAudio.readyState >= 3) { // HAVE_FUTURE_DATA or higher
                    togglePlayPause(); // This will start playing and update the UI
                }
            }, 100); // Small delay to ensure everything is properly set up
        });

        audio.addEventListener('error', function() {
            status.textContent = '{% trans "Error" %}';
            status.className = 'audio-status status-error';
            playBtn.disabled = true;
            document.getElementById('download-btn').disabled = true; // Disable download button on error
        });

        audio.load();
    })
    .catch(error => {
        console.error('TTS Error:', error);
        status.textContent = '{% trans "Failed" %}';
        status.className = 'audio-status status-error';
        playBtn.disabled = true;
        document.getElementById('download-btn').disabled = true; // Disable download button on error
    })
    .finally(() => {
        isLoading = false;
        speakBtn.disabled = false;
        speakBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i>{% trans "Speak" %}';
    });
}

function setupAudioEvents() {
    if (!currentAudio) return;

    // Remove existing event listeners to avoid duplicates
    currentAudio.removeEventListener('timeupdate', updateProgress);
    currentAudio.removeEventListener('ended', onAudioEnded);

    // Add event listeners
    currentAudio.addEventListener('timeupdate', updateProgress);
    currentAudio.addEventListener('ended', onAudioEnded);
    currentAudio.addEventListener('play', startProgressUpdates);
    currentAudio.addEventListener('pause', stopProgressUpdates);

    // Set initial playback rate
    currentAudio.playbackRate = playbackSpeeds[currentSpeedIndex];

    // Seek functionality
    const seekSlider = document.getElementById('seek-slider');
    seekSlider.removeEventListener('input', handleSeek); // Remove existing listener
    seekSlider.addEventListener('input', handleSeek);
}

function handleSeek() {
    if (currentAudio) {
        const seekTime = (this.value / 100) * currentAudio.duration;
        currentAudio.currentTime = seekTime;
        updateProgress(); // Immediate update for responsive seeking
    }
}

function startProgressUpdates() {
    stopProgressUpdates(); // Clear any existing interval
    progressUpdateInterval = setInterval(updateProgress, 50); // Update every 50ms for smooth animation
}

function stopProgressUpdates() {
    if (progressUpdateInterval) {
        clearInterval(progressUpdateInterval);
        progressUpdateInterval = null;
    }
}

function togglePlayPause() {
    if (!currentAudio) return;

    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('audio-status');

    if (currentAudio.paused) {
        currentAudio.play();
        playIcon.classList.add('hidden');
        pauseIcon.classList.remove('hidden');
        status.textContent = '{% trans "Playing" %}';
        status.className = 'audio-status status-playing';
        startProgressUpdates();
    } else {
        currentAudio.pause();
        playIcon.classList.remove('hidden');
        pauseIcon.classList.add('hidden');
        status.textContent = '{% trans "Paused" %}';
        status.className = 'audio-status status-paused';
        stopProgressUpdates();
    }
}

function stopAudio() {
    if (!currentAudio) return;

    currentAudio.pause();
    currentAudio.currentTime = 0;
    stopProgressUpdates();

    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('audio-status');

    playIcon.classList.remove('hidden');
    pauseIcon.classList.add('hidden');
    status.textContent = '{% trans "Stopped" %}';
    status.className = 'audio-status status-stopped';

    updateProgress();
}

function toggleSpeed() {
    if (!currentAudio) return;

    // Cycle through speeds
    currentSpeedIndex = (currentSpeedIndex + 1) % playbackSpeeds.length;
    const newSpeed = playbackSpeeds[currentSpeedIndex];

    // Update audio playback rate
    currentAudio.playbackRate = newSpeed;

    // Update button text
    const speedBtn = document.getElementById('speed-btn');
    speedBtn.textContent = newSpeed + 'x';

    // Visual feedback
    speedBtn.style.transform = 'scale(1.1)';
    setTimeout(() => {
        speedBtn.style.transform = '';
    }, 150);
}

function updateProgress() {
    if (!currentAudio) return;

    const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
    document.getElementById('progress-bar').style.width = progress + '%';
    document.getElementById('seek-slider').value = progress;

    document.getElementById('current-time').textContent = formatTime(currentAudio.currentTime);
}

function updateTotalTime() {
    if (!currentAudio) return;

    document.getElementById('total-time').textContent = formatTime(currentAudio.duration);
}

function onAudioEnded() {
    stopProgressUpdates();

    const playIcon = document.getElementById('play-icon');
    const pauseIcon = document.getElementById('pause-icon');
    const status = document.getElementById('audio-status');

    playIcon.classList.remove('hidden');
    pauseIcon.classList.add('hidden');
    status.textContent = '{% trans "Finished" %}';
    status.className = 'audio-status status-finished';

    // Reset speed to 1x when audio ends
    currentSpeedIndex = 0;
    const speedBtn = document.getElementById('speed-btn');
    speedBtn.textContent = '1x';
    if (currentAudio) {
        currentAudio.playbackRate = 1;
    }
}

function formatTime(seconds) {
    if (isNaN(seconds)) return '0:00';

    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return mins + ':' + (secs < 10 ? '0' : '') + secs;
}

function downloadAudio() {
    if (!currentAudioBlob) {
        alert('{% trans "No audio available for download." %}');
        return;
    }

    // Create a temporary download link
    const downloadUrl = URL.createObjectURL(currentAudioBlob);
    const link = document.createElement('a');
    link.href = downloadUrl;

    // Generate filename with timestamp
    const now = new Date();
    const timestamp = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
    link.download = `tts-audio-${timestamp}.mp3`;

    // Trigger download
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Clean up the URL
    setTimeout(() => {
        URL.revokeObjectURL(downloadUrl);
    }, 100);

    // Visual feedback
    const downloadBtn = document.getElementById('download-btn');
    downloadBtn.style.transform = 'scale(1.1)';
    setTimeout(() => {
        downloadBtn.style.transform = '';
    }, 150);
}

// Auto-focus on text input when page loads
document.addEventListener('DOMContentLoaded', function() {
    const textInput = document.getElementById('text-input');
    const voiceSelect = document.getElementById('voice-select');
    const customVoiceInput = document.getElementById('custom-voice-input');

    // Check for URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const textParam = urlParams.get('text');
    const voiceParam = urlParams.get('voice');

    // Set voice if provided in URL
    if (voiceParam) {
        // Check if it's one of the predefined voices
        const voiceOptions = Array.from(voiceSelect.options).map(option => option.value);
        if (voiceOptions.includes(voiceParam)) {
            voiceSelect.value = voiceParam;
        } else {
            // Set as custom voice
            voiceSelect.value = 'custom';
            handleVoiceChange(); // Show custom input
            customVoiceInput.value = voiceParam;
        }
    }

    // Add event listener for custom voice input changes
    customVoiceInput.addEventListener('input', function() {
        const currentText = textInput.value.trim();
        if (currentText && voiceSelect.value === 'custom') {
            updateUrlWithCurrentState(currentText);
        }
    });

    if (textParam) {
        // Show loading overlay
        showLoadingOverlay();

        // Decode and set the text
        const decodedText = decodeURIComponent(textParam);
        textInput.value = decodedText;
        textInput.dispatchEvent(new Event('input')); // Update character counter

        // Auto-generate TTS after a short delay to ensure UI is ready
        setTimeout(() => {
            updateLoadingMessage('{% trans "Generating speech audio..." %}');
            generateSpeechFromURL();
        }, 500);
    } else {
        // Normal behavior - just focus the input
        textInput.focus();
    }
});

function showLoadingOverlay() {
    const overlay = document.getElementById('loading-overlay');
    overlay.classList.add('show');
}

function hideLoadingOverlay() {
    const overlay = document.getElementById('loading-overlay');
    overlay.classList.remove('show');
}

function updateLoadingMessage(message) {
    const loadingMessage = document.getElementById('loading-message');
    loadingMessage.textContent = message;
}

function generateSpeechFromURL() {
    const textInput = document.getElementById('text-input');
    const text = textInput.value.trim();

    if (!text) {
        hideLoadingOverlay();
        alert('{% trans "No text found in URL parameter." %}');
        return;
    }

    // Update URL to ensure it matches the current state
    updateUrlWithCurrentState(text);

    // Use the existing generateSpeech logic but with URL-specific handling
    if (isLoading) return;

    isLoading = true;
    const speakBtn = document.getElementById('speak-btn');
    const audioPlayer = document.getElementById('audio-player');
    const status = document.getElementById('audio-status');
    const playBtn = document.getElementById('play-pause-btn');

    // Show audio player and update status (but keep loading overlay)
    audioPlayer.style.display = 'block';
    status.textContent = '{% trans "Generating..." %}';
    status.className = 'audio-status status-generating';
    speakBtn.disabled = true;
    speakBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{% trans "Generating..." %}';
    playBtn.disabled = true;

    fetch('{% url "tts-api" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            text: text,
            voice: getSelectedVoice()
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('TTS generation failed');
        }
        return response.blob();
    })
    .then(blob => {
        // Store the blob for download functionality
        currentAudioBlob = blob;

        const audioUrl = URL.createObjectURL(blob);
        const audio = document.getElementById('tts-audio');

        audio.src = audioUrl;
        currentAudio = audio;

        audio.addEventListener('loadedmetadata', function() {
            status.textContent = '{% trans "Ready" %}';
            status.className = 'audio-status status-ready';
            playBtn.disabled = false;
            document.getElementById('download-btn').disabled = false;
            updateTotalTime();
            setupAudioEvents();

            // Hide loading overlay - audio is ready
            updateLoadingMessage('{% trans "Audio ready! Click play to start..." %}');
            setTimeout(() => {
                hideLoadingOverlay();
            }, 500);
        });

        audio.addEventListener('error', function() {
            status.textContent = '{% trans "Error" %}';
            status.className = 'audio-status status-error';
            playBtn.disabled = true;
            document.getElementById('download-btn').disabled = true;
            hideLoadingOverlay();
            alert('{% trans "Failed to generate audio. Please try again." %}');
        });

        audio.load();
    })
    .catch(error => {
        console.error('TTS Error:', error);
        status.textContent = '{% trans "Failed" %}';
        status.className = 'audio-status status-error';
        playBtn.disabled = true;
        document.getElementById('download-btn').disabled = true;
        hideLoadingOverlay();
        alert('{% trans "Failed to generate audio. Please try again." %}');
    })
    .finally(() => {
        isLoading = false;
        speakBtn.disabled = false;
        speakBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i>{% trans "Speak" %}';
    });
}
</script>
{% endblock %}