{% extends "base.html" %}

{% block title %}한국어 TTS Arena{% endblock %}

{% block current_page %}Arena{% endblock %}

{% block content %}
<div id="tts-tab" class="tab-content active">
    <form class="input-container">
        <div class="input-group">
            <button type="button" class="segmented-btn random-btn" title="랜덤 텍스트">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle-icon lucide-shuffle">
                    <path d="m18 14 4 4-4 4" />
                    <path d="m18 2 4 4-4 4" />
                    <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
                    <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
                    <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
                </svg>
            </button>
            <input type="text" class="text-input" placeholder="생성할 텍스트를 입력하세요...">
            <button type="submit" class="segmented-btn synth-btn">생성</button>
        </div>
        <button type="submit" class="mobile-synth-btn">생성</button>
    </form>

    <div id="initial-keyboard-hint" class="keyboard-hint">
        왼쪽 <svg class="hint-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 14 4 4-4 4"/><path d="m18 2 4 4-4 4"/><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"/><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"/><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"/></svg> 버튼을 눌러 랜덤 문장을 선택하세요. 상담에 적합한 자연스러운 목소리를 선택해주세요.
    </div>

    <div class="loading-container" style="display: none;">
        <div class="loader-wrapper">
            <div class="loader-animation">
                <div class="sound-wave">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="loader-text">오디오 샘플 생성 중...</div>
            <div class="loader-subtext">최대 30초가 소요될 수 있습니다</div>
        </div>
    </div>

    <div class="players-container" style="display: none;">
        <div class="players-row">
            <div class="player">
                <div class="player-label">모델 A <span class="model-name-display"></span></div>
                <div class="wave-player-container" data-model="a"></div>
                <button class="vote-btn" data-model="a" disabled>
                    A에 투표
                    <span class="shortcut-key">A</span>
                    <span class="vote-loader" style="display: none;">
                        <div class="vote-spinner"></div>
                    </span>
                </button>
            </div>
    
            <div class="player">
                <div class="player-label">모델 B <span class="model-name-display"></span></div>
                <div class="wave-player-container" data-model="b"></div>
                <button class="vote-btn" data-model="b" disabled>
                    B에 투표
                    <span class="shortcut-key">B</span>
                    <span class="vote-loader" style="display: none;">
                        <div class="vote-spinner"></div>
                    </span>
                </button>
            </div>
        </div>
    </div>

    <div class="vote-results" style="display: none;">
        <h3 class="results-heading">투표 완료!</h3>
        <div class="results-content">
            <div class="chosen-model">
                <strong>선택:</strong> <span class="chosen-model-name"></span>
            </div>
            <div class="rejected-model">
                <strong>비교 대상:</strong> <span class="rejected-model-name"></span>
            </div>
        </div>
    </div>

    <div class="next-round-container" style="display: none;">
        <button class="next-round-btn">다음 라운드</button>
    </div>

    <div id="playback-keyboard-hint" class="keyboard-hint" style="display: none;">
        두 오디오를 모두 들은 후 더 자연스러운 음성에 투표하세요
    </div>
</div>

{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/waveplayer.css') }}">
<script src="https://unpkg.com/wavesurfer.js@6/dist/wavesurfer.min.js"></script>
<style>
    .input-container {
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
    }
    
    .input-group {
        display: flex;
        width: 100%;
        border-radius: 12px;
        border: 2px solid var(--border-color);
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .input-group:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 4px 20px rgba(80, 70, 229, 0.15);
    }
    
    /* Override base styles to remove duplicate borders */
    .input-group .text-input {
        flex: 1;
        padding: 14px 18px;
        border: none;
        border-radius: 0;
        font-size: 16px;
        outline: none;
        height: 52px;
        transition: none;
    }
    
    .input-group .text-input:focus {
        border: none;
        outline: none;
        background-color: transparent;
    }
    
    .input-group .text-input::placeholder {
        color: #999;
    }
    
    .segmented-btn {
        background-color: white;
        border: none;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .random-btn {
        width: 56px;
        border-right: 1px solid var(--border-color);
    }

    .random-btn svg {
        color: var(--primary-color);
        transition: transform 0.3s ease;
    }
    
    .random-btn:hover svg {
        transform: rotate(180deg);
    }
    
    .synth-btn {
        padding: 0 28px;
        font-weight: 600;
        border-left: 1px solid var(--border-color);
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        font-size: 1em;
    }
    
    .synth-btn:hover {
        background: linear-gradient(135deg, #4038c7 0%, #4f46e5 100%);
    }
    
    .random-btn:hover {
        background-color: #f8f7ff;
    }
    
    .mobile-synth-btn {
        display: none;
        width: 100%;
        padding: 14px;
        margin-top: 12px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        font-size: 1em;
    }
    
    .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 48px 0;
        padding: 40px;
        background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
        border-radius: 16px;
        border: 1px solid #e8ecf4;
    }
    
    .loader-wrapper {
        text-align: center;
    }
    
    .loader-animation {
        margin-bottom: 24px;
    }
    
    .loader-text {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-color);
    }
    
    .loader-subtext {
        font-size: 14px;
        color: #888;
    }
    
    .sound-wave {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .sound-wave span {
        display: block;
        width: 6px;
        height: 20px;
        background-color: var(--primary-color);
        border-radius: 8px;
        animation: sound-wave-animation 1.2s infinite ease-in-out;
    }
    
    .sound-wave span:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .sound-wave span:nth-child(3) {
        animation-delay: 0.4s;
    }
    
    .sound-wave span:nth-child(4) {
        animation-delay: 0.6s;
    }
    
    .sound-wave span:nth-child(5) {
        animation-delay: 0.8s;
    }
    
    .sound-wave span:nth-child(6) {
        animation-delay: 1s;
    }
    
    @keyframes sound-wave-animation {
        0%, 100% {
            height: 20px;
        }
        50% {
            height: 50px;
        }
    }
    
    .vote-btn {
        position: relative;
        color: #333;
        font-size: 1rem;
        font-weight: 500;
        padding: 14px 24px;
        border-radius: 10px;
        border: 2px solid var(--border-color);
        background: white;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .vote-btn:not(:disabled):hover {
        border-color: var(--primary-color);
        background: #fafaff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.15);
    }
    
    .vote-btn.selected {
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.3);
    }
    
    .vote-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .vote-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    .vote-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(80, 70, 229, 0.3);
        border-radius: 50%;
        border-top-color: var(--primary-color);
        animation: spin 1s linear infinite;
    }
    
    .next-round-container {
        margin-top: 24px;
        text-align: center;
    }
    
    .next-round-btn {
        padding: 14px 28px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        position: relative;
        width: 100%;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.25);
    }
    
    .next-round-btn:hover {
        background: linear-gradient(135deg, #4038c7 0%, #4f46e5 100%);
        box-shadow: 0 6px 16px rgba(80, 70, 229, 0.35);
        transform: translateY(-1px);
    }
    
    /* Vote results styling */
    .vote-results {
        background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%);
        border: 1px solid #d0d7f7;
        border-radius: 12px;
        padding: 20px 24px;
        margin: 24px 0;
        box-shadow: 0 2px 8px rgba(80, 70, 229, 0.08);
    }
    
    .results-heading {
        color: var(--primary-color);
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 600;
    }
    
    .results-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    .model-name-display {
        font-size: 0.9em;
        color: #666;
        font-style: italic;
    }

    /* WaveSurfer Custom Styles */
    .player {
        padding-bottom: 20px;
    }

    .wave-player-container {
        margin-bottom: 16px;
    }

    /* Keyboard shortcut hint */
    .keyboard-hint {
        text-align: center;
        margin-top: 16px;
        padding: 12px 20px;
        font-size: 14px;
        color: #666;
        background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
        border-radius: 10px;
        border: 1px dashed #d4d9f7;
    }

    .keyboard-hint kbd {
        display: inline-block;
        padding: 3px 5px;
        font-size: 11px;
        line-height: 10px;
        color: #444;
        vertical-align: middle;
        background-color: #fafafa;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.2);
        margin: 0 2px;
    }

    .keyboard-hint .hint-icon {
        vertical-align: middle;
        display: inline-block;
        color: var(--primary-color);
        margin: 0 2px;
    }
    
    @media (max-width: 768px) {
        .input-group {
            border-radius: var(--radius);
        }
        
        .synth-btn {
            display: none;
        }
        
        .mobile-synth-btn {
            display: block;
        }
        
        /* Stack players vertically on mobile */
        .players-row {
            flex-direction: column;
            gap: 16px;
        }
    }
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .input-group {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }
        
        .input-group:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 4px 20px rgba(80, 70, 229, 0.2);
        }
        
        .input-group .text-input {
            background-color: var(--light-gray);
            color: var(--text-color);
        }
        
        .segmented-btn {
            background-color: var(--light-gray);
        }
        
        .model-name-display {
            color: #aaa;
        }
        
        /* Fix vote recorded section in dark mode */
        .vote-results {
            background: linear-gradient(135deg, rgba(80, 70, 229, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%);
            border-color: var(--border-color);
        }
        
        .results-heading {
            color: var(--primary-color);
        }
        
        .results-content {
            color: var(--text-color);
        }
        
        .chosen-model,
        .rejected-model {
            color: var(--text-color);
        }
        
        .chosen-model strong,
        .rejected-model strong {
            color: var(--text-color);
        }
        
        .chosen-model-name,
        .rejected-model-name {
            color: var(--text-color);
        }
        
        .vote-btn {
            background-color: var(--light-gray);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        
        .vote-btn:not(:disabled):hover {
            background-color: rgba(80, 70, 229, 0.1);
            border-color: var(--primary-color);
        }
        
        .vote-btn.selected {
            background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
            color: white;
            border-color: transparent;
        }
        
        .shortcut-key {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        
        .vote-btn.selected .shortcut-key {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-color: transparent;
        }
        
        .keyboard-hint {
            background: linear-gradient(135deg, rgba(80, 70, 229, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
            border-color: rgba(80, 70, 229, 0.2);
            color: #aaa;
        }
        
        .loading-container {
            background: linear-gradient(135deg, rgba(80, 70, 229, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
            border-color: var(--border-color);
        }
        
        .random-btn {
            background-color: var(--light-gray);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        
        .random-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .vote-recorded {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }
        
        /* Ensure border-radius is maintained during loading state */
        .vote-btn.loading {
            border-radius: var(--radius);
        }

        /* Dark mode keyboard hint */
        .keyboard-hint {
            color: #aaa;
        }

        .keyboard-hint kbd {
            color: #ddd;
            background-color: #333;
            border-color: #555;
            box-shadow: 0 1px 0 rgba(255,255,255,0.1);
        }
    }

    /* Login prompt overlay styles */
    .login-prompt-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-prompt-content {
        background: white;
        border-radius: 12px;
        padding: 32px;
        max-width: 400px;
        width: 90%;
        text-align: center;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .login-prompt-content h3 {
        margin: 0 0 16px 0;
        color: var(--text-color);
        font-size: 24px;
    }

    .login-prompt-content p {
        margin: 0 0 24px 0;
        color: var(--text-secondary);
        line-height: 1.5;
    }

    .login-prompt-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    .login-prompt-close {
        padding: 12px 24px;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;
    }

    .login-prompt-close:hover {
        background: var(--light-gray);
    }

    .login-prompt-btn {
        padding: 12px 24px;
        background: var(--primary-color);
        border: none;
        border-radius: 8px;
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        display: inline-block;
    }

    .login-prompt-btn:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }

    /* Dark mode for login prompt */
    @media (prefers-color-scheme: dark) {
        .login-prompt-content {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
        }
    }
</style>
{% endblock %} 

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/waveplayer.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const synthForm = document.querySelector('.input-container');
        const synthBtn = document.querySelector('.synth-btn');
        const mobileSynthBtn = document.querySelector('.mobile-synth-btn');
        const loadingContainer = document.querySelector('.loading-container');
        const playersContainer = document.querySelector('.players-container');
        const voteButtons = document.querySelectorAll('.vote-btn');
        const textInput = document.querySelector('.text-input');
        const nextRoundBtn = document.querySelector('.next-round-btn');
        const nextRoundContainer = document.querySelector('.next-round-container');
        const randomBtn = document.querySelector('.random-btn');
        const voteResultsContainer = document.querySelector('.vote-results');
        const chosenModelNameElement = document.querySelector('.chosen-model-name');
        const rejectedModelNameElement = document.querySelector('.rejected-model-name');
        const modelNameDisplays = document.querySelectorAll('.model-name-display');
        const wavePlayerContainers = document.querySelectorAll('.wave-player-container');
        
        // Get references to the keyboard hint elements
        const initialKeyboardHint = document.getElementById('initial-keyboard-hint');
        const playbackKeyboardHint = document.getElementById('playback-keyboard-hint');
        
        let bothSamplesPlayed = false;
        let currentSessionId = null;
        let modelNames = { a: '', b: '' };
        let wavePlayers = { a: null, b: null };
        let cachedSentences = []; // To store sentences available in cache
        
        // Initialize WavePlayers with mobile settings
        wavePlayerContainers.forEach(container => {
            const model = container.dataset.model;
            wavePlayers[model] = new WavePlayer(container, {
                // Add mobile-friendly options but hide native controls
                backend: 'MediaElement',
                mediaControls: false // Hide native audio controls
            });
        });
        
        // Load fallback sentences directly from Flask variable (JSON string)
        // Assign to a variable first to help linters
        // eslint-disable-next-line
        const fallbackSentencesJson = {{ harvard_sentences | tojson | safe }};
        const fallbackRandomTexts = JSON.parse(fallbackSentencesJson);
        
        // Fetch cached sentences on load
        function fetchCachedSentences() {
            fetch('/api/tts/cached-sentences')
                .then(response => response.ok ? response.json() : Promise.reject('Failed to fetch cached sentences'))
                .then(data => {
                    cachedSentences = data;
                    console.log(`Fetched ${cachedSentences.length} cached sentences.`);
                })
                .catch(error => {
                    console.error('Error fetching cached sentences:', error);
                    // Keep cachedSentences as empty array, fallback will be used
                });
        }
        
        function handleSynthesize(e) {
            if (e) {
                e.preventDefault();
            }

            const text = textInput.value.trim();
            if (!text) {
                openToast("텍스트를 입력해주세요", "warning");
                return;
            }
            
            if (text.length > 1000) {
                openToast("텍스트가 너무 깁니다. 1000자 이하로 입력해주세요.", "warning");
                return;
            }

            textInput.blur();
            
            // Show loading animation and hide hints
            loadingContainer.style.display = 'flex';
            playersContainer.style.display = 'none';
            voteResultsContainer.style.display = 'none';
            nextRoundContainer.style.display = 'none';
            initialKeyboardHint.style.display = 'none'; 
            playbackKeyboardHint.style.display = 'none';
            
            // Reset vote buttons
            voteButtons.forEach(btn => {
                btn.disabled = true;
                btn.classList.remove('selected');
                btn.querySelector('.vote-loader').style.display = 'none';
            });
            
            // Clear model name displays
            modelNameDisplays.forEach(display => {
                display.textContent = '';
            });
            
            // Reset the flag for both samples played
            bothSamplesPlayed = false;
            
            // Call the API to generate TTS
            fetch('/api/tts/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || 'TTS 생성에 실패했습니다');
                    });
                }
                return response.json();
            })
            .then(data => {
                currentSessionId = data.session_id;
                
                // Load audio in waveplayers
                wavePlayers.a.loadAudio(data.audio_a);
                wavePlayers.b.loadAudio(data.audio_b);
                
                // Show players and playback hint, hide initial hint
                loadingContainer.style.display = 'none';
                playersContainer.style.display = 'flex';
                initialKeyboardHint.style.display = 'none';
                playbackKeyboardHint.style.display = 'block';
                
                // Setup automatic sequential playback
                wavePlayers.a.wavesurfer.once('ready', function() {
                    wavePlayers.a.play();
                    
                    // When audio A ends, play audio B
                    wavePlayers.a.wavesurfer.once('finish', function() {
                        // Wait a short moment before playing B
                        setTimeout(() => {
                            wavePlayers.b.play();
                            
                            // When audio B ends, enable voting
                            wavePlayers.b.wavesurfer.once('finish', function() {
                                bothSamplesPlayed = true;
                                voteButtons.forEach(btn => {
                                    btn.disabled = false;
                                });
                            });
                        }, 500);
                    });
                });

                // Fetch cached sentences again to update the list
                fetchCachedSentences();
            })
            .catch(error => {
                loadingContainer.style.display = 'none';
                openToast(error.message, "error");
                console.error('Error:', error);
            });
        }
        
        function handleVote(model) {
            // Disable both vote buttons
            voteButtons.forEach(btn => {
                btn.disabled = true;
                if (btn.dataset.model === model) {
                    btn.querySelector('.vote-loader').style.display = 'flex';
                }
            });
            
            // Send vote to server
            fetch('/api/tts/vote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    session_id: currentSessionId,
                    chosen_model: model
                }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || '투표 제출에 실패했습니다');
                    });
                }
                return response.json();
            })
            .then(data => {
                // Hide loaders
                voteButtons.forEach(btn => {
                    btn.querySelector('.vote-loader').style.display = 'none';
                    
                    // Highlight the selected button
                    if (btn.dataset.model === model) {
                        btn.classList.add('selected');
                    }
                });


                // Store model names from vote response
                if (data.chosen_model && data.chosen_model.name) {
                    modelNames.a = data.names.a;
                    modelNames.b = data.names.b;
                }
                
                // Now display model names after voting
                modelNameDisplays[0].textContent = modelNames.a ? `(${modelNames.a})` : '';
                modelNameDisplays[1].textContent = modelNames.b ? `(${modelNames.b})` : '';
                
                // Show vote results
                chosenModelNameElement.textContent = data.chosen_model.name;
                rejectedModelNameElement.textContent = data.rejected_model.name;
                voteResultsContainer.style.display = 'block';
                
                // Show next round button
                nextRoundContainer.style.display = 'block';
                
                // Show success toast
                openToast("투표가 기록되었습니다!", "success");
            })
            .catch(error => {
                // Re-enable vote buttons
                voteButtons.forEach(btn => {
                    btn.disabled = false;
                    btn.querySelector('.vote-loader').style.display = 'none';
                });
                
                openToast(error.message, "error");
                console.error('Error:', error);
            });
        }
        
        function resetToInitialState() {
            // Hide players, results, and next round button
            playersContainer.style.display = 'none';
            voteResultsContainer.style.display = 'none';
            nextRoundContainer.style.display = 'none';
            
            // Reset vote buttons
            voteButtons.forEach(btn => {
                btn.disabled = true;
                btn.classList.remove('selected');
                btn.querySelector('.vote-loader').style.display = 'none';
            });
            
            // Clear model name displays
            modelNameDisplays.forEach(display => {
                display.textContent = '';
            });
            
            // Reset model names
            modelNames = { a: '', b: '' };
            
            // Clear text input
            textInput.value = '';
            
            // Stop any playing audio and destroy wavesurfers
            for (const model in wavePlayers) {
                if (wavePlayers[model]) {
                    wavePlayers[model].stop();
                }
            }
            
            // Reset session
            currentSessionId = null;
            
            // Reset the flag for both samples played
            bothSamplesPlayed = false;

            // Show initial hint, hide playback hint
            initialKeyboardHint.style.display = 'block';
            playbackKeyboardHint.style.display = 'none';
        }
        
        function handleRandom() {
            let selectedText = '';
            if (cachedSentences && cachedSentences.length > 0) {
                // Select a random text from the unconsumed sentences
                selectedText = cachedSentences[Math.floor(Math.random() * cachedSentences.length)];
                console.log("Using random sentence from unconsumed sentences.");
            } else if (fallbackRandomTexts && fallbackRandomTexts.length > 0) {
                // Fallback to harvard sentences
                selectedText = fallbackRandomTexts[Math.floor(Math.random() * fallbackRandomTexts.length)];
                console.log("Using fallback random text.");
            } else {
                console.error("No sentences available.");
                openToast("사용 가능한 문장이 없습니다.", "error");
                return;
            }
            textInput.value = selectedText;
            textInput.focus();
        }
        
        function showListenToastMessage() {
            openToast("투표하기 전에 두 오디오 샘플을 모두 들어주세요", "info");
        }
        
        // New function for N shortcut: Random + Synthesize
        function handleNextRandomRound() {
            console.log("Handling Next Random Round (N shortcut)");
            handleRandom(); // Selects random text and puts it in input
            
            // Use setTimeout to ensure the input value is updated before synthesizing
            // Especially important if handleRandom involves async operations (though it doesn't currently)
            setTimeout(() => {
                handleSynthesize(); // Triggers synthesis with the text now in the input
            }, 0); 
        }

        // Add submit event listener to form
        synthForm.addEventListener('submit', handleSynthesize);
        
        // Add click event listeners to vote buttons
        voteButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                if (bothSamplesPlayed) {
                    const model = this.dataset.model;
                    handleVote(model);
                } else {
                    showListenToastMessage();
                }
            });
        });
        
        // Add keyboard shortcut listeners
        document.addEventListener('keydown', function(e) {
            // Check if TTS tab is active
            const ttsTab = document.getElementById('tts-tab');
            if (!ttsTab.classList.contains('active')) return;
            
            // Only process keyboard shortcuts if text input is not focused
            if (document.activeElement === textInput) {
                // Allow Enter key to submit form from text input
                if (e.key === 'Enter') {
                    // Check if Shift, Ctrl, Alt, or Meta keys are pressed
                    if (!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
                        e.preventDefault(); // Prevent default form submission if needed
                        handleSynthesize(); // Trigger synthesis
                    }
                }
                return; // Don't process other keys if input is focused
            }

            // Allow Enter key to submit form when button is focused maybe?
            // Or just generally allow Enter if not focused on input
             if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey && !e.altKey) {
                 // Check if the initial form is visible (or loading is not happening)
                 if (playersContainer.style.display === 'none' && loadingContainer.style.display === 'none') {
                    e.preventDefault();
                    handleSynthesize();
                 }
                 // Do nothing if players are visible (don't want Enter to re-submit)
            } else if (e.key.toLowerCase() === 'a') {
                if (bothSamplesPlayed && !voteButtons[0].disabled) {
                    handleVote('a');
                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
                    showListenToastMessage();
                }
            } else if (e.key.toLowerCase() === 'b') {
                if (bothSamplesPlayed && !voteButtons[1].disabled) {
                    handleVote('b');
                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
                    showListenToastMessage();
                }
            } else if (e.key.toLowerCase() === 'n') {
                // N for Next Random Round (works anytime except when input focused)
                if (!e.ctrlKey && !e.metaKey && !e.altKey) { // Ensure Alt isn't pressed either
                    e.preventDefault();
                    handleNextRandomRound(); // New function for random + synthesize
                }
            } else if (e.key.toLowerCase() === 'r') {
                // R for Random Text (works anytime except when input focused)
                if (!e.ctrlKey && !e.metaKey && !e.altKey) { // Ensure Alt isn't pressed either
                    e.preventDefault();
                    handleRandom();
                }
            } else if (e.key === ' ') {
                // Space to play/pause current audio
                if (playersContainer.style.display !== 'none') {
                    e.preventDefault();
                    // If A is playing, toggle A, else if B is playing, toggle B, else play A
                    if (wavePlayers.a.isPlaying) {
                        wavePlayers.a.togglePlayPause();
                    } else if (wavePlayers.b.isPlaying) {
                        wavePlayers.b.togglePlayPause();
                    } else {
                        wavePlayers.a.play();
                    }
                }
            }
        });
        
        // Add event listener for random button
        randomBtn.addEventListener('click', handleRandom);
        
        // Add event listener for next round button
        nextRoundBtn.addEventListener('click', resetToInitialState);
        
        // Fetch cached sentences when the DOM is ready
        fetchCachedSentences();
    });
</script>
{% endblock %}