// ---- GATE 2: Audio Recording ----
async function startRecording() {
    if (isRecording) {
        // Stop recording
        if (mediaRecorder && mediaRecorder.state === 'recording') {
            mediaRecorder.stop();
        }
        isRecording = false;
        gate2Btn.classList.remove('recording');
        gate2Btn.textContent = '🔄 Repeat Last 30s';
        return;
    }

    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaRecorder = new MediaRecorder(stream);
        audioChunks = [];

        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                audioChunks.push(event.data);
            }
        };

        mediaRecorder.onstop = () => {
            audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
            // Keep only the last 30 seconds
            // For demo, we process immediately
            processAudioBuffer();
        };

        mediaRecorder.start(1000); // Record in 1-second chunks
        isRecording = true;
        gate2Btn.classList.add('recording');
        gate2Btn.textContent = '⏹️ Stop Recording';

    } catch (err) {
        alert('Could not access microphone. Please allow microphone access.');
        console.error(err);
    }
}

// ---- GATE 2: Process Audio Buffer ----
function processAudioBuffer() {
    if (!audioBlob) {
        resultDiv.innerHTML = `<div class="empty">⚠️ No audio recorded. Tap <strong>Repeat Last 30s</strong> first.</div>`;
        return;
    }

    // Simulate transcription + translation (since we can't run STT locally)
    // In production, you'd send audioBlob to your STT service
    const sampleTranscripts = [
        "Chef said: deglaze the pan with white wine, then add the stock.",
        "Now we julienne the carrots and sauté them in butter.",
        "Blanch the green beans for two minutes, then shock them in ice water.",
        "Fold the cream into the batter gently.",
        "Sear the steak on high heat for two minutes each side."
    ];

    // Pick a random transcript for demo
    const transcript = sampleTranscripts[Math.floor(Math.random() * sampleTranscripts.length)];

    // Find culinary terms in the transcript and replace with Malay
    let translated = transcript;
    let foundTerms = [];

    glossary.forEach(term => {
        const regex = new RegExp(term.en_term, 'gi');
        if (transcript.match(regex)) {
            foundTerms.push(term);
            translated = translated.replace(regex, `${term.en_term} (${term.malay_term})`);
        }
    });

    // Build the result display
    let termsHtml = '';
    if (foundTerms.length > 0) {
        termsHtml = foundTerms.map(t =>
            `<div><strong>${t.en_term}</strong> → 🇲🇾 ${t.malay_term}</div>`
        ).join('');
    } else {
        termsHtml = '<div style="color:#999;">No culinary terms detected in this snippet.</div>';
    }

    resultDiv.innerHTML = `
        <div class="badge">🎙️ Last 30 Seconds</div>
        <div class="transcript">
            📝 <strong>Original:</strong><br>
            “${transcript}”
        </div>
        <div class="transcript" style="background:#e8f6f3; border-left: 4px solid #1abc9c;">
            🇲🇾 <strong>Translated:</strong><br>
            “${translated}”
        </div>
        <div style="margin-top:12px; padding:8px 12px; background:#f8f6f4; border-radius:12px; font-size:14px;">
            <strong>🔍 Terms Found:</strong><br>
            ${termsHtml}
        </div>
        <div class="hint">👆 Tap <strong>Listen</strong> to hear the translation</div>
    `;

    // Auto-speak the translation in Malay
    const malayText = translated.replace(/\([^)]*\)/g, '').trim();
    speakText(malayText, 'ms-MY');

    // Reset recording state
    isRecording = false;
    gate2Btn.classList.remove('recording');
    gate2Btn.textContent = '🔄 Repeat Last 30s';
    audioBlob = null;
}

// ---- GATE 2: Stop Everything ----
function stopAll() {
    // Stop recording
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
    }
    isRecording = false;
    gate2Btn.classList.remove('recording');
    gate2Btn.textContent = '🔄 Repeat Last 30s';

    // Cancel speech
    if (isSpeaking) {
        window.speechSynthesis.cancel();
        isSpeaking = false;
        listenBtn.textContent = '🔊 Listen';
        listenBtn.classList.remove('speaking');
    }

    // Stop STT
    if (recognition) {
        recognition.stop();
        recognition = null;
        askBtn.classList.remove('listening');
        askBtn.textContent = '🎤 Ask';
    }

    // Clear result
    resultDiv.innerHTML = `
        <div class="empty">⏹️ Stopped. Tap <strong>Repeat Last 30s</strong> to try again.</div>
    `;
}