renderer.js

/**
 * Shadow Chatbot - Renderer Process
 * Handles UI state, audio capture, and API interactions
 */

// ============================================
// State
// ============================================
const state = {
    isListening: false,
    transcripts: [],
    responses: [],
    audioContext: null,
    mediaStream: null,
    mediaRecorder: null,
    audioChunks: [],
    groqService: null,
    demoInterval: null,
    isDemoMode: false,
    codeMode: false,
    codeExtractor: new CodeExtractor(),

    // Conversation context management
    transcriptBuffer: [],           // Buffer to accumulate chunks before responding
    bufferDebounceTimer: null,      // Timer to wait for speech pause
    conversationHistory: [],        // Full conversation history for AI context
    lastResponseTime: 0,            // Track when last response was generated
    bufferWaitMs: 3000,             // Wait 3 seconds of silence before responding

    // Code translation
    codeBlockCounter: 0,
    codeTranslationCache: new Map(),   // key: "{hash}:{targetLang}" -> translated code string
    codeBlockRawMap: new Map(),        // key: "code-block-{N}" -> { rawCode, currentLang }

    // Feature: Action Items Tracker
    actionItems: [],                   // { id, text, owner, deadline, done, timestamp }
    actionItemsPanelOpen: false
};

// Initialize GroqService and load API keys from .env
state.groqService = new GroqService();
state.groqService.init(); // loads keys from .env via IPC (async, non-blocking)

// ============================================
// DOM Elements
// ============================================
const elements = {
    statusDot: document.getElementById('status-dot'),
    demoBadge: document.getElementById('demo-badge'),
    transcriptCount: document.getElementById('transcript-count'),
    transcriptionList: document.getElementById('transcription-list'),
    transcriptEmpty: document.getElementById('transcript-empty'),
    responseList: document.getElementById('response-list'),
    responseEmpty: document.getElementById('response-empty'),
    processingBar: document.getElementById('processing-bar'),
    settingsModal: document.getElementById('settings-modal'),
    apiKeyInput: document.getElementById('api-key'),
    permissionStatus: document.getElementById('permission-status'),

    // Buttons
    btnClose: document.getElementById('btn-close'),
    btnMinimize: document.getElementById('btn-minimize'),
    btnMaximize: document.getElementById('btn-maximize'),
    btnContext: document.getElementById('btn-context'),
    btnSettings: document.getElementById('btn-settings'),
    btnClear: document.getElementById('btn-clear'),
    btnModalClose: document.getElementById('btn-modal-close'),
    btnCancel: document.getElementById('btn-cancel'),
    btnSave: document.getElementById('btn-save'),

    // Opacity control
    opacitySlider: document.getElementById('opacity-slider'),
    opacityValue: document.getElementById('opacity-value'),

    // Context modal
    contextModal: document.getElementById('context-modal'),
    contextBadge: document.getElementById('context-badge'),
    btnContextClose: document.getElementById('btn-context-close'),
    dropZone: document.getElementById('drop-zone'),
    fileInput: document.getElementById('file-input'),
    fileList: document.getElementById('file-list'),
    contextPreview: document.getElementById('context-preview'),
    contextText: document.getElementById('context-text'),
    fileCount: document.getElementById('file-count'),
    btnClearFiles: document.getElementById('btn-clear-files'),
    btnApplyContext: document.getElementById('btn-apply-context'),

    // Code mode
    btnCodeMode: document.getElementById('btn-code-mode'),

    // Manual question input
    manualQuestionInput: document.getElementById('manual-question-input'),
    sendQuestionBtn: document.getElementById('send-question-btn'),

    // Screen capture
    btnCapture: document.getElementById('btn-capture'),

    // Code viewer badge
    snippetBadge: document.getElementById('snippet-badge'),

    // Download transcript
    btnDownload: document.getElementById('btn-download'),

    // Action Items
    btnToggleActions: document.getElementById('btn-toggle-actions'),
    actionItemsPanel: document.getElementById('action-items-panel'),
    actionItemsList: document.getElementById('action-items-list'),
    actionItemsCount: document.getElementById('action-items-count'),
    actionItemsBadge: document.getElementById('action-items-badge'),
    actionItemsEmpty: document.getElementById('action-items-empty'),
    btnCopyActions: document.getElementById('btn-copy-actions'),
    btnClearActions: document.getElementById('btn-clear-actions')
};

// ============================================
// Initialize
// ============================================
function init() {
    updateUI();
    bindEvents();
    bindActionItemsEvents();
    checkPermissions();

    // Listen for context from the home/setup screen
    window.electronAPI.onReceiveContext((data) => {
        console.log('Received context from home screen:', data);

        // Set session mode prompt on the groq service
        if (data.modePrompt) {
            state.groqService.setSessionMode(data.selectedMode, data.modePrompt);
            console.log('Session mode set:', data.selectedMode);
        }

        // Set briefing text on the groq service
        if (data.briefingText) {
            state.groqService.setBriefingContext(data.briefingText);
            console.log('Briefing context set:', data.briefingText.substring(0, 80) + '...');
        }

        // Pre-load files into contextService
        if (data.files && data.files.length > 0) {
            data.files.forEach(f => {
                const fileInfo = {
                    id: Date.now() + Math.random().toString(36).substr(2, 9),
                    name: f.name,
                    type: f.type,
                    size: f.size,
                    content: f.content,
                    isImage: f.isImage || false,
                    base64: f.base64 || null,
                    status: 'ready'
                };
                contextService.files.push(fileInfo);
            });
            contextService.updateExtractedContext();

            // Update the context badge in the overlay UI
            if (elements.contextBadge) {
                elements.contextBadge.textContent = contextService.getFileCount();
                elements.contextBadge.classList.remove('hidden');
            }
            if (elements.btnContext) {
                elements.btnContext.classList.add('has-files');
            }

            console.log(`Pre-loaded ${data.files.length} files from home screen`);
        }
    });
}

function updateUI() {
    // Update demo badge visibility
    if (state.isDemoMode) {
        elements.demoBadge.classList.remove('hidden');
    } else {
        elements.demoBadge.classList.add('hidden');
    }

    // Update API key input
    elements.apiKeyInput.value = state.apiKey;
}

function bindEvents() {
    // Window controls
    elements.btnClose.addEventListener('click', () => window.electronAPI.closeWindow());
    elements.btnMinimize.addEventListener('click', () => window.electronAPI.minimizeWindow());
    elements.btnMaximize.addEventListener('click', () => window.electronAPI.maximizeWindow());

    // Opacity slider
    elements.opacitySlider.addEventListener('input', (e) => {
        const value = parseInt(e.target.value);
        elements.opacityValue.textContent = value + '%';
        window.electronAPI.setOpacity(value / 100);
    });

    // Settings modal
    elements.btnSettings.addEventListener('click', openSettings);
    elements.btnModalClose.addEventListener('click', closeSettings);
    elements.btnCancel.addEventListener('click', closeSettings);
    elements.btnSave.addEventListener('click', saveSettings);

    // Clear history
    elements.btnClear.addEventListener('click', clearHistory);

    // Global hotkey from main process
    window.electronAPI.onToggleListening(() => toggleListening());

    // Close modal on overlay click
    elements.settingsModal.addEventListener('click', (e) => {
        if (e.target === elements.settingsModal) closeSettings();
    });

    // Context modal events
    elements.btnContext.addEventListener('click', openContextModal);
    elements.btnContextClose.addEventListener('click', closeContextModal);
    elements.contextModal.addEventListener('click', (e) => {
        if (e.target === elements.contextModal) closeContextModal();
    });

    // File upload events
    elements.dropZone.addEventListener('click', () => elements.fileInput.click());
    elements.fileInput.addEventListener('change', handleFileSelect);

    // Drag and drop
    elements.dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        elements.dropZone.classList.add('drag-over');
    });
    elements.dropZone.addEventListener('dragleave', () => {
        elements.dropZone.classList.remove('drag-over');
    });
    elements.dropZone.addEventListener('drop', handleFileDrop);

    // Context actions
    elements.btnClearFiles.addEventListener('click', clearContextFiles);
    elements.btnApplyContext.addEventListener('click', applyContext);

    // Code mode toggle
    elements.btnCodeMode.addEventListener('click', toggleCodeMode);

    // Download transcript
    elements.btnDownload.addEventListener('click', downloadTranscript);
}

async function checkPermissions() {
    try {
        const hasPermission = await window.electronAPI.checkScreenPermission();
        const statusEl = elements.permissionStatus;
        const dot = statusEl.querySelector('.permission-dot');
        const text = statusEl.querySelector('span:last-child');

        if (hasPermission) {
            dot.classList.add('granted');
            dot.classList.remove('denied');
            text.textContent = 'Screen Recording: Granted';
        } else {
            dot.classList.add('denied');
            dot.classList.remove('granted');
            text.textContent = 'Screen Recording: Not Granted';
        }
    } catch (error) {
        console.error('Permission check failed:', error);
    }
}

// ============================================
// Listening Toggle
// ============================================
function toggleListening() {
    state.isListening = !state.isListening;

    if (state.isListening) {
        startListening();
    } else {
        stopListening();
    }

    updateListeningUI();
}

function updateListeningUI() {
    if (state.isListening) {
        elements.statusDot.classList.add('active');
    } else {
        elements.statusDot.classList.remove('active');
    }
}

// ============================================
// Manual Question Input
// ============================================

/**
 * Send a manually typed question to the AI
 */
async function sendManualQuestion() {
    const input = elements.manualQuestionInput;
    const question = input.value.trim();

    if (!question) return;

    // Clear input immediately
    input.value = '';

    // Hide empty states
    elements.transcriptEmpty.classList.add('hidden');
    elements.responseEmpty.classList.add('hidden');

    // Add question to transcript pane (left side) - marked as manual input
    const messageId = `msg-${++messageIdCounter}`;
    state.transcripts.push({ text: question, time: new Date(), id: messageId });

    const bubble = document.createElement('div');
    bubble.className = 'bubble bubble-transcript manual-input clickable';
    bubble.id = `transcript-${messageId}`;
    bubble.dataset.messageId = messageId;
    bubble.innerHTML = `
        <div class="bubble-text">${highlightKeywords(question)}</div>
        <div class="bubble-meta">
            <span class="manual-badge">⌨️ Typed</span>
            <span>${formatTime(new Date())}</span>
            <span class="link-hint">Click to see response →</span>
        </div>
    `;

    // Add click handler to navigate to corresponding response
    bubble.addEventListener('click', () => {
        const responseEl = document.getElementById(`response-${messageId}`);
        if (responseEl) {
            // Remove previous highlights
            document.querySelectorAll('.bubble.highlighted').forEach(el => {
                el.classList.remove('highlighted');
            });
            // Scroll to response
            responseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            // Highlight both bubbles
            bubble.classList.add('highlighted');
            responseEl.classList.add('highlighted');
            // Remove highlight after 3 seconds
            setTimeout(() => {
                bubble.classList.remove('highlighted');
                responseEl.classList.remove('highlighted');
            }, 3000);
        }
    });

    elements.transcriptionList.appendChild(bubble);
    elements.transcriptionList.scrollTop = elements.transcriptionList.scrollHeight;
    elements.transcriptCount.textContent = state.transcripts.length;

    // Add to conversation history
    state.conversationHistory.push({
        role: 'user',
        content: question
    });

    // Generate AI response
    showProcessing(true);

    try {
        // Skip history for standalone/conceptual questions to save tokens
        const historyMessages = isStandaloneQuestion(question) ? [] : buildConversationContext();
        const response = await state.groqService.generateResponseWithHistory(question, historyMessages);

        // Add AI response to right pane
        addResponse(question, response, messageId);

        // Add to conversation history
        state.conversationHistory.push({
            role: 'assistant',
            content: response
        });

        // Keep history manageable (8 exchanges = 16 messages)
        if (state.conversationHistory.length > 16) {
            state.conversationHistory = state.conversationHistory.slice(-16);
        }
    } catch (error) {
        console.error('Error generating response:', error);
        addResponse(question, `⚠️ Error: ${error.message}`, messageId);
    } finally {
        showProcessing(false);
    }
}

// Add event listeners for manual input
if (elements.sendQuestionBtn) {
    elements.sendQuestionBtn.addEventListener('click', sendManualQuestion);
}

if (elements.manualQuestionInput) {
    elements.manualQuestionInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendManualQuestion();
        }
    });
}

// ============================================
// Screen Capture + OCR Analysis
// ============================================

/**
 * Capture the current screen and send to AI for analysis
 */
async function captureScreen() {
    try {
        // Get screen source
        const result = await window.electronAPI.getSources();

        if (result.error) {
            addTranscript('⚠️ Screen capture requires Screen Recording permission');
            return;
        }

        const sources = result.sources || [];
        const screenSource = sources.find(s =>
            s.name.toLowerCase().includes('entire screen') ||
            s.name.toLowerCase().includes('screen')
        ) || sources[0];

        if (!screenSource) {
            addTranscript('⚠️ No screen source found');
            return;
        }

        // Show processing indicator (no text message needed, the bubble will appear)
        showProcessing(true);

        // Get the video stream
        const stream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: screenSource.id,
                    maxWidth: 1920,
                    maxHeight: 1080
                }
            }
        });

        // Create video element to capture frame
        const video = document.createElement('video');
        video.srcObject = stream;
        await video.play();

        // Wait a moment for video to stabilize
        await new Promise(resolve => setTimeout(resolve, 100));

        // Capture frame to canvas
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0);

        // Stop the stream
        stream.getTracks().forEach(track => track.stop());

        // Convert to base64
        const imageDataUrl = canvas.toDataURL('image/jpeg', 0.8);

        // Add to transcript with thumbnail
        const messageId = `msg-${++messageIdCounter}`;
        const bubble = document.createElement('div');
        bubble.className = 'bubble bubble-transcript screen-capture clickable';
        bubble.id = `transcript-${messageId}`;
        bubble.dataset.messageId = messageId;
        bubble.innerHTML = `
            <div class="capture-preview">
                <img src="${imageDataUrl}" alt="Screen capture" style="max-width: 100%; border-radius: 8px;">
            </div>
            <div class="bubble-text">📷 Screen Capture - Analyzing content...</div>
            <div class="bubble-meta">
                <span class="capture-badge">🖥️ Screen</span>
                <span>${formatTime(new Date())}</span>
                <span class="link-hint">Click to see response →</span>
            </div>
        `;

        // Add click handler
        bubble.addEventListener('click', () => {
            const responseEl = document.getElementById(`response-${messageId}`);
            if (responseEl) {
                document.querySelectorAll('.bubble.highlighted').forEach(el => el.classList.remove('highlighted'));
                responseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                bubble.classList.add('highlighted');
                responseEl.classList.add('highlighted');
                setTimeout(() => {
                    bubble.classList.remove('highlighted');
                    responseEl.classList.remove('highlighted');
                }, 3000);
            }
        });

        elements.transcriptionList.appendChild(bubble);
        elements.transcriptionList.scrollTop = elements.transcriptionList.scrollHeight;
        state.transcripts.push({ text: '[Screen Capture]', time: new Date(), id: messageId });
        elements.transcriptCount.textContent = state.transcripts.length;

        // Build analysis prompt based on session mode
        let analysisPrompt;
        const modeId = state.groqService.sessionModeId || 'general';

        if (modeId === 'sde') {
            analysisPrompt = `Look at this screen capture carefully. If it contains a coding problem, interview question, or LeetCode-style problem:

FOLLOW YOUR SYSTEM PROMPT INSTRUCTIONS EXACTLY — use the full 8-section structured format:
1. Clarifying Questions to Ask the Interviewer
2. Problem Breakdown
3. Naive / Brute Force Approach with Pseudocode
4. Two Test Case Walkthroughs for Naive + Complexity Analysis
5. Optimal Approach explanation
6. Complete Optimal Solution Code
7. Two Test Case Walkthroughs for Optimal + Complexity Analysis  
8. Follow-up Discussion Points

Extract all visible text from the screen first, then solve the problem using the COMPLETE structured format. Do NOT skip any section. Do NOT abbreviate. Give the full, detailed response.

If it's a system design question, use the 7-step system design framework from your instructions.
If it's code that needs debugging, analyze it thoroughly and suggest fixes.`;
        } else {
            analysisPrompt = `Analyze this screen capture thoroughly. Extract all visible text.
If it contains a question or problem, help solve it using your specialized expertise for the current session mode.
If it's code, explain what it does, identify any bugs, and suggest improvements.
If it's a slide or document, summarize the key points.
Be thorough and detailed. Follow your system prompt instructions for formatting and structure.`;
        }

        const response = await analyzeImageWithVision(imageDataUrl, analysisPrompt);

        // Update the bubble text
        const bubbleText = bubble.querySelector('.bubble-text');
        bubbleText.textContent = '📷 Screen Captured - See analysis →';

        // Add response (just use the response directly, no label needed)
        addResponse('📷 Screen Capture', response, messageId);

        // Add to conversation history
        state.conversationHistory.push({
            role: 'user',
            content: '[User captured screen for analysis]'
        });
        state.conversationHistory.push({
            role: 'assistant',
            content: response
        });

    } catch (error) {
        console.error('Screen capture error:', error);
        addTranscript(`⚠️ Capture failed: ${error.message}`);
    } finally {
        showProcessing(false);
    }
}

/**
 * Analyze image using Groq vision API with model fallback
 */
async function analyzeImageWithVision(imageDataUrl, prompt) {
    // Try multiple vision models in order of preference
    const visionModels = [
        'meta-llama/llama-4-scout-17b-16e-instruct',
        'llama-3.2-11b-vision-preview',
        'llama-3.2-90b-vision-preview'
    ];

    let lastError = null;

    for (const model of visionModels) {
        try {
            console.log(`[Vision] Trying model: ${model}`);
            const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${state.groqService.apiKey}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    model: model,
                    messages: [
                        {
                            role: 'system',
                            content: state.groqService.getSystemPrompt()
                        },
                        {
                            role: 'user',
                            content: [
                                { type: 'text', text: prompt },
                                { type: 'image_url', image_url: { url: imageDataUrl } }
                            ]
                        }
                    ],
                    max_tokens: 8192,
                    temperature: 0.7
                })
            });

            if (response.ok) {
                const result = await response.json();
                console.log(`[Vision] Success with model: ${model}`);
                return result.choices?.[0]?.message?.content || 'Could not analyze the image';
            }

            const error = await response.json();
            lastError = error.error?.message || `Model ${model} failed`;
            console.log(`[Vision] Model ${model} failed:`, lastError);

            // If it's a rate limit or non-model error, don't try other models
            if (!lastError.includes('decommissioned') && !lastError.includes('not found')) {
                throw new Error(lastError);
            }
        } catch (error) {
            lastError = error.message;
            console.log(`[Vision] Error with ${model}:`, error.message);
        }
    }

    // If all vision models failed, provide a helpful fallback message
    return `⚠️ **Vision Analysis Unavailable**

The screen was captured successfully, but vision AI analysis is currently unavailable (all Groq vision models are deprecated or rate-limited).

**Alternative Options:**
1. **Type your question** about what you see in the input box below
2. **Describe the code/content** you're looking at and ask for help
3. **Copy-paste the code** directly into the chat

The screenshot is saved above for your reference.

*Technical Note: ${lastError}*`;
}

// Add event listener for capture button
if (elements.btnCapture) {
    elements.btnCapture.addEventListener('click', captureScreen);
}

function startListening() {
    // Hide empty states
    elements.transcriptEmpty.classList.add('hidden');
    elements.responseEmpty.classList.add('hidden');

    if (state.isDemoMode) {
        startDemoMode();
    } else {
        startRealCapture();
    }
}

function stopListening() {
    if (state.isDemoMode) {
        stopDemoMode();
    } else {
        stopRealCapture();
    }
}

// ============================================
// Demo Mode
// ============================================
const demoData = [
    { q: "Hello, can you hear me?", a: "Yes, I can hear you clearly. How can I assist you today?" },
    { q: "What time is the meeting tomorrow?", a: "Based on what I heard, the meeting is scheduled for 10 AM tomorrow." },
    { q: "Can you summarize what was just said?", a: "The speaker discussed the Q3 project timeline and mentioned three key deliverables: the API integration, the dashboard redesign, and the mobile app update." },
    { q: "What are the action items from this call?", a: "From this discussion, the action items are: 1) Review the proposal by Friday, 2) Schedule a follow-up meeting, 3) Share the updated timeline with the team." },
    { q: "Is this window visible to others?", a: "No, this overlay window is configured to be invisible to screen sharing applications like Zoom, Meet, and Teams." }
];

let demoIndex = 0;

function startDemoMode() {
    addTranscript("🎧 Demo Mode started - simulating audio...");

    // First demo interaction immediately
    setTimeout(() => {
        if (state.isListening && state.isDemoMode) {
            simulateDemoInteraction();
        }
    }, 1500);

    // Continue with interval
    state.demoInterval = setInterval(() => {
        if (state.isListening && state.isDemoMode) {
            simulateDemoInteraction();
        }
    }, 6000);
}

function stopDemoMode() {
    if (state.demoInterval) {
        clearInterval(state.demoInterval);
        state.demoInterval = null;
    }
}

function simulateDemoInteraction() {
    const demo = demoData[demoIndex % demoData.length];
    demoIndex++;

    // Show processing
    showProcessing(true);

    // Add transcript
    setTimeout(() => {
        addTranscript(demo.q);

        // Add response after delay
        setTimeout(() => {
            addResponse(demo.q, demo.a);
            showProcessing(false);
        }, 1200);
    }, 500);
}

// ============================================
// Real Audio Capture (using AudioCaptureService)
// ============================================
let audioCaptureService = null;

async function startRealCapture() {
    try {
        // Get available sources
        const result = await window.electronAPI.getSources();

        // Check for errors
        if (result.error) {
            if (result.error === 'permission_denied') {
                addTranscript(`⚠️ Screen Recording permission: ${result.status}`);
                addTranscript("📋 To fix: System Preferences → Privacy & Security → Screen Recording → Enable 'Electron'");
                addTranscript("💡 After enabling, FULLY QUIT the app (Cmd+Q) and restart");
            } else {
                addTranscript(`⚠️ Error: ${result.error}`);
            }
            // Fallback to demo mode
            state.isDemoMode = true;
            updateUI();
            startDemoMode();
            return;
        }

        const sources = result.sources || [];

        if (sources.length === 0) {
            addTranscript("⚠️ No audio sources found.");
            addTranscript("📋 Make sure Screen Recording permission is enabled for 'Electron'");
            // Fallback to demo mode
            state.isDemoMode = true;
            updateUI();
            startDemoMode();
            return;
        }

        // Get the first screen source (prefer "Entire Screen" - case insensitive)
        const screenSource = sources.find(s =>
            s.name.toLowerCase().includes('entire screen') ||
            s.name.toLowerCase().includes('screen') ||
            s.name.toLowerCase() === 'screen 1'
        ) || sources[0];

        console.log('Selected audio source:', screenSource.name);
        addTranscript(`🎙️ Connecting to: ${screenSource.name}...`);

        // Create audio capture service - YOUTUBE CAPTIONS STYLE
        // Short chunks (3s) for fast feedback, long silence (10s) to combine into one bubble
        audioCaptureService = new AudioCaptureService({
            chunkDuration: 3000, // 3 seconds - fast feedback like YouTube captions
            onAudioChunk: handleAudioChunk,
            onError: (error) => {
                console.error('Audio capture error:', error);
            }
        });

        // Start capturing
        await audioCaptureService.start(screenSource.id);
        addTranscript("✅ Audio capture active - listening for system audio...");
        addTranscript("🔊 Play some audio (YouTube, Spotify, etc.) to test!");

    } catch (error) {
        console.error('Audio capture error:', error);
        addTranscript(`⚠️ Capture failed: ${error.message}`);

        // Fallback to demo mode
        state.isDemoMode = true;
        updateUI();
        startDemoMode();
    }
}

function stopRealCapture() {
    if (audioCaptureService) {
        audioCaptureService.stop();
        audioCaptureService = null;
    }
}

/**
 * Handle incoming audio chunk (WAV format)
 * Transcribes and adds to live streaming transcript
 * @param {Blob} wavBlob - Audio data in WAV format
 */
async function handleAudioChunk(wavBlob) {
    if (!state.groqService || !state.isListening) return;

    showProcessing(true);

    try {
        // Transcribe the audio chunk
        const transcript = await state.groqService.transcribe(wavBlob);

        // Check if we got meaningful text
        if (transcript && transcript.trim().length > 2) {
            // Filter out common noise transcriptions
            const noisePatterns = ['[BLANK_AUDIO]', '[ Silence ]', '[silence]', '[Music]', '[music]', 'you', 'Thanks for watching'];
            const isNoise = noisePatterns.some(p => transcript.toLowerCase().includes(p.toLowerCase()));

            const cleanText = transcript.trim();
            const wordCount = cleanText.split(/\s+/).length;
            const isTooShort = wordCount < 2;

            // Filter out common filler phrases
            const fillerPhrases = ['thank you', 'thanks', 'okay', 'um', 'uh', 'hmm', 'alright', 'right'];
            const isFillerOnly = fillerPhrases.some(f => cleanText.toLowerCase() === f || cleanText.toLowerCase() === f + '.');

            if (!isNoise && !isTooShort && !isFillerOnly) {
                // Add to live streaming transcript (handles buffering internally)
                addTranscript(cleanText);
            }
        }
    } catch (error) {
        console.error('Transcription error:', error);
        if (!error.message.includes('rate limit')) {
            console.error('Transcription error details:', error);
        }
    } finally {
        showProcessing(false);
    }
}

/**
 * Process buffered transcripts and generate a single contextual response
 */
async function processBufferedTranscripts() {
    if (state.transcriptBuffer.length === 0) return;

    // Combine all buffered transcripts into one context
    const combinedTranscript = state.transcriptBuffer.join(' ');

    // Clear the buffer
    state.transcriptBuffer = [];

    // Feature: Extract action items from transcript
    extractActionItems(combinedTranscript);

    // Generate response with full conversation context
    generateResponseWithContext(combinedTranscript);
}

/**
 * Generate AI response with full conversation history for context
 * @param {string} currentTranscript - The current user speech
 */
async function generateResponseWithContext(currentTranscript) {
    try {
        showProcessing(true);

        // Skip history for standalone/conceptual questions to save tokens
        const contextMessages = isStandaloneQuestion(currentTranscript)
            ? []
            : buildConversationContext();

        // Generate response with context
        const response = await state.groqService.generateResponseWithHistory(
            currentTranscript,
            contextMessages
        );

        // Add to conversation history
        state.conversationHistory.push({
            role: 'user',
            content: currentTranscript,
            time: new Date()
        });
        state.conversationHistory.push({
            role: 'assistant',
            content: response,
            time: new Date()
        });

        // Keep history manageable (8 exchanges = 16 messages)
        if (state.conversationHistory.length > 16) {
            state.conversationHistory = state.conversationHistory.slice(-16);
        }

        // Update last response time
        state.lastResponseTime = Date.now();

        addResponse(currentTranscript, response);
    } catch (error) {
        console.error('Response generation error:', error);
        addResponse(currentTranscript, `⚠️ Error: ${error.message}`);
    } finally {
        showProcessing(false);
    }
}

// ============================================
// Token-Optimized Conversation Context
// ============================================

/**
 * Detect if a question is standalone/conceptual and doesn't need history.
 * These are self-contained questions where prior conversation adds no value.
 */
function isStandaloneQuestion(text) {
    if (!text || text.length < 5) return false;
    const lower = text.toLowerCase().trim();

    // Conceptual / definitional patterns
    const standalonePatterns = [
        /^what\s+is\s+(a|an|the)?\s/,
        /^what\s+are\s/,
        /^explain\s/,
        /^define\s/,
        /^describe\s+(what|the\s+concept)/,
        /^(what'?s|whats)\s+the\s+difference\s+between/,
        /^how\s+does\s+\w+\s+work/,
        /^what\s+does\s+\w+\s+mean/,
        /^tell\s+me\s+about\s+(the\s+concept|what)/,
        /^(can you\s+)?compare\s+/,
        /^when\s+(should|would)\s+(you|we|i)\s+use\s/
    ];

    // Patterns that indicate it's a follow-up (NOT standalone)
    const followUpPatterns = [
        /^(what if|how about|can you also|and what|but what|what about)/,
        /^(now|then|next|also|additionally)/,
        /previous|earlier|above|before|last (answer|response|question)/,
        /you (said|mentioned|showed|explained)/,
        /the (code|solution|approach|algorithm) (you|we|above)/
    ];

    // If it references prior conversation, it's NOT standalone
    for (const pattern of followUpPatterns) {
        if (pattern.test(lower)) return false;
    }

    // Check if it matches a standalone pattern
    for (const pattern of standalonePatterns) {
        if (pattern.test(lower)) {
            console.log(`[TokenOpt] Standalone question detected, skipping history`);
            return true;
        }
    }

    return false;
}

/**
 * Compress a user+assistant exchange into a short summary line.
 * Keeps only the essence to maintain topical awareness.
 */
function summarizeExchange(userMsg, assistantMsg) {
    // Extract the core topic from the user question
    let topic = userMsg.length > 80
        ? userMsg.substring(0, 77) + '...'
        : userMsg;

    // Try to extract key info from assistant response
    const response = assistantMsg || '';
    let approach = '';

    // Look for complexity mentions (coding problems)
    const complexityMatch = response.match(/O\([^)]+\)/g);
    if (complexityMatch) {
        approach = `, ${complexityMatch[complexityMatch.length - 1]} optimal`;
    }

    // Look for approach/technique keywords
    const techniqueMatch = response.match(/(?:using|via|with)\s+(hash\s*map|two\s*pointer|sliding\s*window|binary\s*search|DFS|BFS|dynamic\s*programming|greedy|stack|queue|trie|heap)/i);
    if (techniqueMatch) {
        approach = ` using ${techniqueMatch[1]}${approach}`;
    }

    return `Q: ${topic}${approach}`;
}

/**
 * Build conversation context with token optimization.
 * - Last 3 exchanges: sent verbatim (full context for recent conversation)
 * - Older exchanges: compressed to 1-line summaries
 * This reduces tokens by ~30-40% compared to sending all history verbatim.
 */
function buildConversationContext() {
    const history = state.conversationHistory;
    if (history.length === 0) return [];

    const RECENT_MESSAGES = 6;  // 3 exchanges verbatim
    const messages = [];

    // If history is small enough, send everything
    if (history.length <= RECENT_MESSAGES) {
        return history.map(msg => ({
            role: msg.role,
            content: msg.content
        }));
    }

    // --- Summarize older exchanges ---
    const olderMessages = history.slice(0, -RECENT_MESSAGES);
    const summaries = [];

    for (let i = 0; i < olderMessages.length; i += 2) {
        const userMsg = olderMessages[i];
        const assistantMsg = olderMessages[i + 1];
        if (userMsg && userMsg.role === 'user') {
            summaries.push(
                summarizeExchange(userMsg.content, assistantMsg?.content || '')
            );
        }
    }

    if (summaries.length > 0) {
        const savedTokensEstimate = olderMessages.reduce((acc, m) => acc + (m.content?.length || 0), 0);
        const summaryText = summaries.join('\n');
        const summaryTokensEstimate = summaryText.length;
        console.log(`[TokenOpt] Compressed ${olderMessages.length} old messages (~${Math.round(savedTokensEstimate / 4)} tokens) → ${summaries.length}-line summary (~${Math.round(summaryTokensEstimate / 4)} tokens)`);

        messages.push({
            role: 'system',
            content: `Previous conversation topics (summarized):\n${summaryText}`
        });
    }

    // --- Add last 3 exchanges verbatim ---
    const recentMessages = history.slice(-RECENT_MESSAGES);
    for (const msg of recentMessages) {
        messages.push({
            role: msg.role,
            content: msg.content
        });
    }

    return messages;
}

// ============================================
// UI Helpers - Live Streaming Transcription
// ============================================
let messageIdCounter = 0;

// Live streaming state - INTERVIEW OPTIMIZED FOR MINIMAL LATENCY
// 
// HOW IT WORKS:
// 1. Audio captured in 3-second chunks (fast transcription feedback)
// 2. All chunks combine into ONE bubble while speaker talks
// 3. After 5 seconds of silence → bubble finalizes → AI responds
//
const liveTranscript = {
    activeMessageId: null,      // Currently active bubble ID
    activeBubble: null,         // DOM reference to active bubble
    accumulatedText: '',        // Full text in current bubble
    silenceTimer: null,         // Timer to detect silence
    silenceThresholdMs: 5000,   // 5 seconds of silence = finalize & respond (INTERVIEW OPTIMIZED)
    lastChunkTime: 0            // Track when last chunk arrived
};

/**
 * Add or update live transcript bubble
 * Creates new bubble only if no active bubble or after silence gap
 */
function updateLiveTranscript(newText) {
    const now = Date.now();
    const timeSinceLastChunk = now - liveTranscript.lastChunkTime;
    liveTranscript.lastChunkTime = now;

    console.log(`[LIVE] Text: "${newText.substring(0, 40)}..." | Gap: ${timeSinceLastChunk}ms | HasBubble: ${!!liveTranscript.activeBubble}`);

    // Clear silence timer since we got new audio
    if (liveTranscript.silenceTimer) {
        clearTimeout(liveTranscript.silenceTimer);
    }

    // ALWAYS check if bubble still exists in DOM (it might have been removed)
    if (liveTranscript.activeBubble && !document.body.contains(liveTranscript.activeBubble)) {
        console.log('[LIVE] Bubble was removed from DOM, resetting');
        liveTranscript.activeBubble = null;
        liveTranscript.activeMessageId = null;
        liveTranscript.accumulatedText = '';
    }

    // Check if we need a new bubble or update existing
    if (!liveTranscript.activeBubble) {
        console.log('[LIVE] Creating NEW bubble');
        createNewTranscriptBubble(newText);
    } else {
        console.log('[LIVE] Appending to existing bubble');
        appendToActiveBubble(newText);
    }

    // Set timer to finalize bubble after silence (10 seconds)
    liveTranscript.silenceTimer = setTimeout(() => {
        console.log('[LIVE] 10s silence detected - finalizing bubble & generating AI response');
        finalizeActiveBubble();
    }, liveTranscript.silenceThresholdMs);
}

/**
 * Create a new transcript bubble for live updates
 */
function createNewTranscriptBubble(text) {
    const messageId = `msg-${++messageIdCounter}`;
    liveTranscript.activeMessageId = messageId;
    liveTranscript.accumulatedText = text;

    const bubble = document.createElement('div');
    bubble.className = 'bubble bubble-transcript clickable live';
    bubble.id = `transcript-${messageId}`;
    bubble.dataset.messageId = messageId;
    bubble.innerHTML = `
        <div class="bubble-text">${highlightKeywords(text)}</div>
        <div class="bubble-meta">
            <span class="live-indicator">● LIVE</span>
            <span>${formatTime(new Date())}</span>
        </div>
    `;

    // Store reference
    liveTranscript.activeBubble = bubble;

    // Add to DOM
    elements.transcriptionList.appendChild(bubble);
    elements.transcriptionList.scrollTop = elements.transcriptionList.scrollHeight;
}

/**
 * Append text to the currently active bubble
 */
function appendToActiveBubble(newText) {
    if (!liveTranscript.activeBubble) return;

    // Append text with space
    liveTranscript.accumulatedText += ' ' + newText;

    // Update bubble content
    const textEl = liveTranscript.activeBubble.querySelector('.bubble-text');
    if (textEl) {
        textEl.innerHTML = highlightKeywords(liveTranscript.accumulatedText);
    }

    // Scroll to bottom
    elements.transcriptionList.scrollTop = elements.transcriptionList.scrollHeight;
}

/**
 * Finalize the current bubble after silence (stop live updates)
 */
function finalizeActiveBubble() {
    if (!liveTranscript.activeBubble || !liveTranscript.accumulatedText) return;

    const messageId = liveTranscript.activeMessageId;
    const fullText = liveTranscript.accumulatedText;

    // Save to state for history
    state.transcripts.push({ text: fullText, time: new Date(), id: messageId });
    elements.transcriptCount.textContent = state.transcripts.length;

    // Remove live indicator and add click handler
    liveTranscript.activeBubble.classList.remove('live');
    const metaEl = liveTranscript.activeBubble.querySelector('.bubble-meta');
    if (metaEl) {
        metaEl.innerHTML = `
            <span>${formatTime(new Date())}</span>
            <span class="link-hint">Click to see response →</span>
        `;
    }

    // Add click handler
    const bubble = liveTranscript.activeBubble;
    bubble.addEventListener('click', () => {
        const responseEl = document.getElementById(`response-${messageId}`);
        if (responseEl) {
            document.querySelectorAll('.bubble.highlighted').forEach(el => {
                el.classList.remove('highlighted');
            });
            responseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            bubble.classList.add('highlighted');
            responseEl.classList.add('highlighted');
            setTimeout(() => {
                bubble.classList.remove('highlighted');
                responseEl.classList.remove('highlighted');
            }, 3000);
        }
    });

    // Add to buffer for AI response
    state.transcriptBuffer.push(fullText);

    // Clear active state
    liveTranscript.activeBubble = null;
    liveTranscript.activeMessageId = null;
    liveTranscript.accumulatedText = '';

    // Trigger AI response after finalizing
    setTimeout(() => {
        processBufferedTranscripts();
    }, 500);

    return messageId;
}

// Legacy function for compatibility
function addTranscript(text) {
    // Use new live streaming function
    updateLiveTranscript(text);
    return liveTranscript.activeMessageId;
}

function addResponse(query, response, messageId = null) {
    // Find the matching transcript if no messageId provided
    if (!messageId) {
        const matchingTranscript = state.transcripts.find(t => t.text === query);
        messageId = matchingTranscript?.id || `msg-${++messageIdCounter}`;
    }

    // ── Feature: Smart Question Detection — parse [CATEGORY:XYZ] tag ──
    let category = 'GENERAL';
    let cleanResponse = response;
    const categoryMatch = response.match(/^\[CATEGORY:(\w+)\]\s*\n?/);
    if (categoryMatch) {
        category = categoryMatch[1];
        cleanResponse = response.slice(categoryMatch[0].length);
    }

    state.responses.push({ query, response: cleanResponse, time: new Date(), id: messageId, category });

    // ── Extract code snippets from the response ──
    try {
        const newSnippets = state.codeExtractor.extract(query, cleanResponse);
        if (newSnippets.length > 0) {
            updateSnippetBadge();
        }
    } catch (e) {
        console.warn('Code extraction error:', e);
    }

    // ── Feature: Extract action items from AI-detected action responses ──
    if (category === 'ACTION_ITEMS') {
        extractActionItemsFromAI(cleanResponse);
    }

    // Build category badge HTML
    const categoryBadgeHTML = buildCategoryBadge(category);

    const bubble = document.createElement('div');
    bubble.className = 'bubble bubble-response clickable';
    bubble.id = `response-${messageId}`;
    bubble.dataset.messageId = messageId;
    bubble.innerHTML = `
        <div class="bubble-query">"${escapeHtml(query)}"${categoryBadgeHTML}</div>
        <div class="bubble-text response-content">${parseMarkdown(cleanResponse)}</div>
        <div class="bubble-meta">
            <span>${formatTime(new Date())}</span>
            <span class="link-hint">← Click to see transcript</span>
        </div>
    `;

    // Click handler to navigate to corresponding transcript
    bubble.addEventListener('click', () => {
        const transcriptEl = document.getElementById(`transcript-${messageId}`);
        if (transcriptEl) {
            // Remove previous highlights
            document.querySelectorAll('.bubble.highlighted').forEach(el => {
                el.classList.remove('highlighted');
            });

            // Scroll to transcript
            transcriptEl.scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Highlight both bubbles
            bubble.classList.add('highlighted');
            transcriptEl.classList.add('highlighted');

            // Remove highlight after 3 seconds
            setTimeout(() => {
                bubble.classList.remove('highlighted');
                transcriptEl.classList.remove('highlighted');
            }, 3000);
        }
    });

    elements.responseList.appendChild(bubble);
    elements.responseList.scrollTop = elements.responseList.scrollHeight;

    // Also update the transcript link hint to show response is available
    const transcriptEl = document.getElementById(`transcript-${messageId}`);
    if (transcriptEl) {
        transcriptEl.classList.add('has-response');
    }
}

function showProcessing(show) {
    if (show) {
        elements.processingBar.classList.add('active');
    } else {
        elements.processingBar.classList.remove('active');
    }
}

function clearHistory() {
    state.transcripts = [];
    state.responses = [];

    // Clear extracted code snippets
    state.codeExtractor.clear();
    updateSnippetBadge();

    // Clear code translation state
    state.codeBlockCounter = 0;
    state.codeTranslationCache.clear();
    state.codeBlockRawMap.clear();

    // Clear UI
    elements.transcriptionList.innerHTML = '';
    elements.responseList.innerHTML = '';

    // Show empty states
    elements.transcriptionList.appendChild(createEmptyState('No audio detected', 'Press CMD+SHIFT+L to start'));
    elements.responseList.appendChild(createEmptyState('Waiting for input', 'Responses appear here'));

    elements.transcriptCount.textContent = '0';
}

function createEmptyState(title, subtitle) {
    const div = document.createElement('div');
    div.className = 'empty-state';
    div.innerHTML = `
        <p class="empty-title">${title}</p>
        <span class="empty-subtitle">${subtitle}</span>
    `;
    return div;
}

// ============================================
// Settings
// ============================================
function openSettings() {
    elements.settingsModal.classList.remove('hidden');
    elements.apiKeyInput.value = state.apiKey;
    checkPermissions();
}

function closeSettings() {
    elements.settingsModal.classList.add('hidden');
}

function saveSettings() {
    const newKey = elements.apiKeyInput.value.trim();

    if (newKey !== state.apiKey) {
        state.apiKey = newKey;
        localStorage.setItem('groqApiKey', newKey);

        if (newKey) {
            state.isDemoMode = false;
            state.groqService = new GroqService();
            // Manually entered key overrides .env
            state.groqService.apiKey = newKey;
        } else {
            state.isDemoMode = true;
            state.groqService = null;
        }

        updateUI();
    }

    closeSettings();
}

// ============================================
// Context Files
// ============================================
function openContextModal() {
    elements.contextModal.classList.remove('hidden');
    updateContextUI();
}

function closeContextModal() {
    elements.contextModal.classList.add('hidden');
}

function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    processFiles(files);
    e.target.value = ''; // Reset input
}

function handleFileDrop(e) {
    e.preventDefault();
    elements.dropZone.classList.remove('drag-over');
    const files = Array.from(e.dataTransfer.files);
    processFiles(files);
}

async function processFiles(files) {
    for (const file of files) {
        try {
            await contextService.addFile(file);
            updateContextUI();
        } catch (error) {
            console.error('File processing error:', error);
            addTranscript(`File error: ${error.message}`);
        }
    }
}

function updateContextUI() {
    const files = contextService.files;
    const count = files.length;

    // Update badge
    if (count > 0) {
        elements.contextBadge.textContent = count;
        elements.contextBadge.classList.remove('hidden');
        elements.btnContext.classList.add('has-files');
    } else {
        elements.contextBadge.classList.add('hidden');
        elements.btnContext.classList.remove('has-files');
    }

    // Update file count
    elements.fileCount.textContent = `${count} file${count !== 1 ? 's' : ''} loaded`;

    // Update file list
    elements.fileList.innerHTML = '';
    files.forEach(file => {
        const item = createFileItem(file);
        elements.fileList.appendChild(item);
    });

    // Update context preview
    if (contextService.extractedContext) {
        elements.contextPreview.classList.remove('hidden');
        elements.contextText.textContent = contextService.extractedContext.substring(0, 500) +
            (contextService.extractedContext.length > 500 ? '...' : '');
    } else {
        elements.contextPreview.classList.add('hidden');
    }
}

function createFileItem(file) {
    const div = document.createElement('div');
    div.className = 'file-item';

    const iconType = file.isImage ? 'image' :
        (file.name.endsWith('.pdf') ? 'pdf' : 'txt');
    const iconSymbol = file.isImage ? 'IMG' :
        (file.name.endsWith('.pdf') ? 'PDF' : 'TXT');

    div.innerHTML = `
        <div class="file-icon ${iconType}">${iconSymbol}</div>
        <div class="file-info">
            <div class="file-name">${file.name}</div>
            <div class="file-size">${ContextService.formatFileSize(file.size)}</div>
        </div>
        <span class="file-status ${file.status}">${file.status.toUpperCase()}</span>
        <button class="file-remove" data-id="${file.id}">×</button>
    `;

    // Remove button handler
    div.querySelector('.file-remove').addEventListener('click', () => {
        contextService.removeFile(file.id);
        updateContextUI();
    });

    return div;
}

function clearContextFiles() {
    contextService.clearAll();
    updateContextUI();
}

function applyContext() {
    closeContextModal();
    const count = contextService.getFileCount();
    if (count > 0) {
        addTranscript(`Context loaded: ${count} file(s) will be used to enhance AI responses.`);
    }
}

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

function formatTime(date) {
    return date.toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
    });
}

// ============================================
// Code Mode Toggle
// ============================================
function toggleCodeMode() {
    // Open code viewer window with all extracted snippets
    const snippets = state.codeExtractor.getAll();
    if (snippets.length === 0) {
        // Flash the button to indicate no snippets yet
        elements.btnCodeMode.classList.add('active');
        setTimeout(() => elements.btnCodeMode.classList.remove('active'), 600);
        return;
    }
    window.electronAPI.openCodeViewer(snippets);
}

function updateSnippetBadge() {
    const count = state.codeExtractor.getCount();
    if (count > 0) {
        elements.snippetBadge.textContent = count;
        elements.snippetBadge.style.display = 'inline-block';
    } else {
        elements.snippetBadge.style.display = 'none';
    }
}

// ============================================
// Download Session Transcript
// ============================================
async function downloadTranscript() {
    if (state.transcripts.length === 0 && state.responses.length === 0) {
        // Flash the button to show there's nothing yet
        elements.btnDownload.classList.add('active');
        setTimeout(() => elements.btnDownload.classList.remove('active'), 600);
        return;
    }

    // Determine session mode
    const modeId = state.groqService?.sessionModeId || 'general';
    const modeNames = {
        sde: 'SDE (Software Development Engineer)',
        'system-design': 'System Design',
        behavioral: 'Behavioral',
        'product-manager': 'Product Manager',
        'data-science': 'Data Science',
        consulting: 'Consulting',
        finance: 'Finance',
        general: 'General'
    };
    const modeName = modeNames[modeId] || modeId;

    // Build the Markdown document
    const now = new Date();
    const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });

    let md = '';
    md += '# Shadow AI — Session Transcript\n\n';
    md += `**Date:** ${dateStr}  \n`;
    md += `**Time:** ${timeStr}  \n`;
    md += `**Mode:** ${modeName}  \n`;
    md += `**Total Questions:** ${state.responses.length}  \n`;
    md += '\n---\n\n';

    // Pair transcripts with their matching responses
    const paired = [];
    for (const resp of state.responses) {
        const transcript = state.transcripts.find(t => t.id === resp.id);
        paired.push({
            query: resp.query,
            response: resp.response,
            time: resp.time || (transcript ? transcript.time : null),
            id: resp.id
        });
    }

    // Also add any transcripts without a response
    for (const t of state.transcripts) {
        if (!state.responses.find(r => r.id === t.id)) {
            paired.push({
                query: t.text,
                response: null,
                time: t.time,
                id: t.id
            });
        }
    }

    // Sort by time
    paired.sort((a, b) => new Date(a.time) - new Date(b.time));

    paired.forEach((item, idx) => {
        const itemTime = item.time ? new Date(item.time).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : '';
        const isCapture = item.query === '[Screen Capture]' || item.query === '📷 Screen Capture';

        md += `## ${idx + 1}. ${isCapture ? '📷 Screen Capture' : 'Question'}\n`;
        if (itemTime) md += `**Time:** ${itemTime}  \n\n`;

        md += '### Transcript\n';
        md += `> ${item.query}\n\n`;

        if (item.response) {
            md += '### AI Response\n\n';
            md += item.response + '\n';
        } else {
            md += '*Awaiting response...*\n';
        }

        md += '\n---\n\n';
    });

    // Add code snippets summary if any
    const snippets = state.codeExtractor.getAll();
    if (snippets.length > 0) {
        md += '## 📋 Code Snippets Summary\n\n';
        snippets.forEach((s, i) => {
            md += `### ${i + 1}. ${s.problemName} (${s.tag.toUpperCase()})\n`;
            md += `**Language:** ${s.language}  \n`;
            md += `**Time:** ${s.timestamp}  \n\n`;
            md += '```' + s.language + '\n';
            md += s.code + '\n';
            md += '```\n\n';
        });
    }

    md += '---\n*Generated by Shadow AI*\n';

    // Generate default filename
    const fileDate = now.toISOString().slice(0, 10);
    const defaultName = `shadow-ai-${modeId}-${fileDate}.md`;

    // Send to main process to save
    const result = await window.electronAPI.saveTranscript(md, defaultName);

    if (result.success) {
        // Brief visual feedback
        elements.btnDownload.classList.add('active');
        setTimeout(() => elements.btnDownload.classList.remove('active'), 1200);
    }
}

// ============================================
// Markdown Parsing
// ============================================

// Syntax highlighting for code blocks — VS Code Dark+ style
function highlightSyntax(code, language) {
    let html = escapeHtml(code);

    // Placeholder system to protect comments and strings from further processing
    const tokens = [];
    function stash(html) {
        tokens.push(html);
        return `\x00T${tokens.length - 1}\x00`;
    }

    // 1. Extract comments first (highest priority)
    html = html.replace(/(#[^\n]*)/g, (m) => stash(`<span class="code-comment">${m}</span>`));
    html = html.replace(/(\/\/[^\n]*)/g, (m) => stash(`<span class="code-comment">${m}</span>`));
    html = html.replace(/(\/\*[\s\S]*?\*\/)/g, (m) => stash(`<span class="code-comment">${m}</span>`));

    // 2. Extract strings (so keywords inside strings aren't highlighted)
    html = html.replace(/(&quot;(?:[^&]|&(?!quot;))*?&quot;)/g, (m) => stash(`<span class="code-string">${m}</span>`));
    html = html.replace(/(&#x27;(?:[^&]|&(?!#x27;))*?&#x27;)/g, (m) => stash(`<span class="code-string">${m}</span>`));
    html = html.replace(/("[^"]*")/g, (m) => stash(`<span class="code-string">${m}</span>`));
    html = html.replace(/('[^']*')/g, (m) => stash(`<span class="code-string">${m}</span>`));

    // 3. Decorators (@something)
    html = html.replace(/@(\w+)/g, (m) => stash(`<span class="code-decorator">${m}</span>`));

    // Language keyword sets
    const lang = (language || '').toLowerCase();
    let keywords, specials;

    if (lang === 'python' || lang === 'py') {
        keywords = ['def', 'class', 'if', 'elif', 'else', 'for', 'while', 'return', 'import', 'from', 'as', 'try', 'except', 'finally', 'with', 'lambda', 'yield', 'raise', 'pass', 'break', 'continue', 'in', 'not', 'and', 'or', 'is', 'async', 'await', 'global', 'nonlocal', 'del', 'assert'];
        specials = ['None', 'True', 'False', 'self', 'cls'];
    } else if (['javascript', 'js', 'typescript', 'ts', 'jsx', 'tsx'].includes(lang)) {
        keywords = ['function', 'const', 'let', 'var', 'if', 'else', 'for', 'while', 'return', 'import', 'export', 'from', 'class', 'extends', 'new', 'try', 'catch', 'finally', 'throw', 'async', 'await', 'yield', 'of', 'in', 'typeof', 'instanceof', 'switch', 'case', 'default', 'break', 'continue', 'delete', 'void', 'super', 'static', 'get', 'set', 'interface', 'type', 'enum'];
        specials = ['null', 'undefined', 'true', 'false', 'this', 'NaN', 'Infinity'];
    } else if (lang === 'java') {
        keywords = ['public', 'private', 'protected', 'static', 'final', 'abstract', 'class', 'interface', 'extends', 'implements', 'new', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'default', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'throws', 'void', 'int', 'boolean', 'double', 'float', 'long', 'byte', 'short', 'char', 'import', 'package', 'synchronized', 'volatile', 'enum', 'instanceof', 'super'];
        specials = ['null', 'true', 'false', 'this', 'super', 'String'];
    } else if (['c', 'cpp', 'c++', 'cxx', 'h', 'hpp'].includes(lang)) {
        keywords = ['int', 'char', 'float', 'double', 'void', 'long', 'short', 'unsigned', 'signed', 'const', 'static', 'extern', 'volatile', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'default', 'break', 'continue', 'return', 'struct', 'union', 'enum', 'typedef', 'sizeof', 'include', 'define', 'class', 'public', 'private', 'protected', 'virtual', 'override', 'template', 'typename', 'namespace', 'using', 'new', 'delete', 'try', 'catch', 'throw', 'auto', 'bool'];
        specials = ['NULL', 'nullptr', 'true', 'false', 'this', 'std'];
    } else if (['go', 'golang'].includes(lang)) {
        keywords = ['func', 'package', 'import', 'var', 'const', 'type', 'struct', 'interface', 'map', 'chan', 'go', 'select', 'switch', 'case', 'default', 'if', 'else', 'for', 'range', 'return', 'break', 'continue', 'defer', 'fallthrough', 'goto'];
        specials = ['nil', 'true', 'false', 'iota', 'string', 'int', 'bool', 'error'];
    } else if (['rust', 'rs'].includes(lang)) {
        keywords = ['fn', 'let', 'mut', 'const', 'static', 'struct', 'enum', 'impl', 'trait', 'pub', 'use', 'mod', 'crate', 'super', 'self', 'if', 'else', 'match', 'for', 'while', 'loop', 'return', 'break', 'continue', 'async', 'await', 'move', 'where', 'type', 'unsafe'];
        specials = ['None', 'Some', 'Ok', 'Err', 'true', 'false', 'Self'];
    } else {
        keywords = ['def', 'class', 'function', 'const', 'let', 'var', 'if', 'else', 'elif', 'for', 'while', 'return', 'import', 'from', 'export', 'try', 'catch', 'except', 'finally', 'throw', 'raise', 'new', 'async', 'await', 'yield', 'in', 'not', 'and', 'or', 'is', 'switch', 'case', 'break', 'continue', 'public', 'private', 'static', 'void', 'int', 'boolean', 'extends', 'implements', 'interface'];
        specials = ['None', 'True', 'False', 'null', 'undefined', 'true', 'false', 'self', 'this', 'super'];
    }

    // 4. Special values (None, True, False, null, self, this)
    specials.forEach(val => {
        const regex = new RegExp(`\\b(${val})\\b(?![^<]*>)`, 'g');
        html = html.replace(regex, '<span class="code-special">$1</span>');
    });

    // 5. Keywords
    keywords.forEach(kw => {
        const regex = new RegExp(`\\b(${kw})\\b(?![^<]*>)`, 'g');
        html = html.replace(regex, '<span class="code-keyword">$1</span>');
    });

    // 6. Numbers
    html = html.replace(/\b(\d+\.?\d*(?:e[+-]?\d+)?)\b(?![^<]*>)/gi, '<span class="code-number">$1</span>');

    // 7. Function definitions (def foo / function foo)
    html = html.replace(/(?<=\bdef\b\s|<\/span>\s)(\w+)(?=\s*\()/g, '<span class="code-function">$1</span>');
    html = html.replace(/(?<=\bfunction\b\s|<\/span>\s)(\w+)(?=\s*\()/g, '<span class="code-function">$1</span>');

    // 8. Class names (PascalCase, only if not already wrapped)
    html = html.replace(/\b([A-Z][a-zA-Z0-9]{2,})\b(?![^<]*>)/g, '<span class="code-class">$1</span>');

    // Restore stashed tokens
    tokens.forEach((t, i) => {
        html = html.replace(`\x00T${i}\x00`, t);
    });

    return html;
}

function parseMarkdown(text) {
    if (!text) return '';

    let html = text;

    // Store code blocks with placeholders to prevent escaping
    const codeBlocks = [];
    const inlineCodes = [];

    // Extract code blocks FIRST and replace with placeholders
    html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
        // Clean up code - remove any HTML-like artifacts that AI might have included
        let cleanCode = code.trim();
        // Remove any class="..." patterns that shouldn't be in code
        cleanCode = cleanCode.replace(/class="[^"]*">/g, '');
        cleanCode = cleanCode.replace(/<span[^>]*>/g, '');
        cleanCode = cleanCode.replace(/<\/span>/g, '');

        // Diagram blocks — special rendering, no syntax highlighting or toggle
        if (lang === 'diagram' || lang === 'ascii') {
            const diagramHtml = `<div class="diagram-block"><div class="diagram-header"><svg class="diagram-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="7" height="7" rx="1"/><rect x="15" y="3" width="7" height="7" rx="1"/><rect x="8.5" y="14" width="7" height="7" rx="1"/><line x1="5.5" y1="10" x2="5.5" y2="14" opacity="0.5"/><line x1="18.5" y1="10" x2="18.5" y2="14" opacity="0.5"/><line x1="5.5" y1="14" x2="8.5" y2="17.5" opacity="0.5"/><line x1="18.5" y1="14" x2="15.5" y2="17.5" opacity="0.5"/></svg><span>ARCHITECTURE</span></div><pre><code>${escapeHtml(cleanCode)}</code></pre></div>`;
            const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;
            codeBlocks.push(diagramHtml);
            return placeholder;
        }

        // Assign unique ID for language toggle
        const blockId = `code-block-${state.codeBlockCounter++}`;
        const normalizedLang = normalizeLangForToggle(lang || 'code');

        // Store raw code for translation
        const rawB64 = btoa(unescape(encodeURIComponent(cleanCode)));
        state.codeBlockRawMap.set(blockId, { rawCode: cleanCode, currentLang: normalizedLang });

        // Build language toggle buttons
        const toggleLangs = ['python', 'java', 'cpp', 'javascript'];
        const toggleLabels = { python: 'PY', java: 'Java', cpp: 'C++', javascript: 'JS' };
        const toggleBar = toggleLangs.map(tl =>
            `<button class="lang-toggle-btn${tl === normalizedLang ? ' active' : ''}" data-lang="${tl}">${toggleLabels[tl]}</button>`
        ).join('');

        // Apply syntax highlighting
        const highlightedCode = highlightSyntax(cleanCode, lang);
        const blockHtml = `<div class="code-block" id="${blockId}" data-current-lang="${normalizedLang}" data-raw-code="${rawB64}"><div class="code-header"><div class="code-header-dots"><span></span><span></span><span></span></div><div class="lang-toggle-bar">${toggleBar}</div><span class="code-lang">${lang || 'code'}</span></div><pre><code>${highlightedCode}</code></pre></div>`;
        const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;
        codeBlocks.push(blockHtml);
        return placeholder;
    });

    // Extract inline code and replace with placeholders
    html = html.replace(/`([^`]+)`/g, (match, code) => {
        const codeHtml = `<code class="inline-code">${escapeHtml(code)}</code>`;
        const placeholder = `__INLINE_CODE_${inlineCodes.length}__`;
        inlineCodes.push(codeHtml);
        return placeholder;
    });

    // ── Handle LaTeX expressions BEFORE escaping ──
    // Convert \( ... \) to styled math expressions
    const mathExprs = [];
    html = html.replace(/\\\(([^)]+?)\\\)/g, (match, expr) => {
        // Clean up common LaTeX commands
        let clean = expr.trim();
        clean = clean.replace(/\\text\{([^}]+)\}/g, '$1');
        clean = clean.replace(/\\leq/g, '≤');
        clean = clean.replace(/\\geq/g, '≥');
        clean = clean.replace(/\\neq/g, '≠');
        clean = clean.replace(/\\times/g, '×');
        clean = clean.replace(/\\cdot/g, '·');
        clean = clean.replace(/\\ldots/g, '…');
        clean = clean.replace(/\\rightarrow/g, '→');
        clean = clean.replace(/\\leftarrow/g, '←');
        clean = clean.replace(/\\infty/g, '∞');
        clean = clean.replace(/\\sum/g, 'Σ');
        clean = clean.replace(/\\log/g, 'log');
        clean = clean.replace(/\\sqrt\{([^}]+)\}/g, '√($1)');
        clean = clean.replace(/\^(\w)/g, '<sup>$1</sup>');
        clean = clean.replace(/\^\{([^}]+)\}/g, '<sup>$1</sup>');
        clean = clean.replace(/_(\w)/g, '<sub>$1</sub>');
        clean = clean.replace(/_\{([^}]+)\}/g, '<sub>$1</sub>');
        clean = clean.replace(/\\\s/g, ' ');
        const placeholder = `__MATH_${mathExprs.length}__`;
        mathExprs.push(`<span class="math-expr">${clean}</span>`);
        return placeholder;
    });

    // Now safely escape the entire text (code is already extracted)
    html = escapeHtml(html);

    // Apply markdown formatting
    // Bold (**text**)
    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
    // Italic (*text*)
    html = html.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');

    // Headings - convert ## and ### to styled headers (before line breaks)
    // #### heading (h4)
    html = html.replace(/#{4,}\s+(.+?)(\n|$)/g, '<h4 class="response-heading-4">$1</h4>');
    // ### heading (h3 - smaller subheading)
    html = html.replace(/#{3}\s+(.+?)(\n|$)/g, '<h3 class="response-heading-3">$1</h3>');
    // ## heading (h2 - main heading)
    html = html.replace(/#{2}\s+(.+?)(\n|$)/g, '<h2 class="response-heading-2">$1</h2>');
    // # heading (h1 - title) - less common but handle it
    html = html.replace(/#{1}\s+(.+?)(\n|$)/g, '<h2 class="response-heading-2">$1</h2>');

    // ── Convert dash-list items to styled elements ──
    // - **Label:** content → styled bullet point
    html = html.replace(/(?:^|\n)\s*-\s+(.+)/g, (match, content) => {
        return `<span class="response-dash-item">${content}</span>`;
    });

    // Line breaks - preserve paragraph structure
    html = html.replace(/\n\n+/g, '<br><br>');
    html = html.replace(/\n/g, '<br>');

    // Restore math expressions
    mathExprs.forEach((expr, i) => {
        html = html.replace(`__MATH_${i}__`, expr);
    });

    // Restore code blocks from placeholders
    codeBlocks.forEach((block, i) => {
        html = html.replace(`__CODE_BLOCK_${i}__`, block);
    });

    // Restore inline code from placeholders
    inlineCodes.forEach((code, i) => {
        html = html.replace(`__INLINE_CODE_${i}__`, code);
    });

    return html;
}

// highlightCode removed — replaced by highlightSyntax

// ============================================
// Keyword Highlighting
// ============================================
function highlightKeywords(text) {
    if (!text) return '';

    let html = escapeHtml(text);

    // Technical terms (common programming/tech words)
    const techTerms = ['API', 'REST', 'JSON', 'HTTP', 'SQL', 'CSS', 'HTML', 'JavaScript', 'Python', 'React', 'Node', 'database', 'server', 'client', 'function', 'algorithm', 'array', 'object', 'class', 'method', 'variable', 'component', 'framework', 'library', 'Docker', 'Kubernetes', 'AWS', 'Azure', 'machine learning', 'AI', 'neural network'];
    techTerms.forEach(term => {
        const regex = new RegExp(`\\b(${term})\\b`, 'gi');
        html = html.replace(regex, '<span class="keyword tech" data-term="$1">$1</span>');
    });

    // Dates (various formats)
    html = html.replace(/\b(\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4})\b/g, '<span class="keyword date" data-term="$1">$1</span>');
    html = html.replace(/\b(January|February|March|April|May|June|July|August|September|October|November|December)\s+\d{1,2},?\s*\d{0,4}/gi, '<span class="keyword date" data-term="$&">$&</span>');

    // Numbers with units
    html = html.replace(/\b(\d+(?:\.\d+)?)\s*(percent|%|dollars?|\$|million|billion|GB|MB|KB|ms|seconds?|minutes?|hours?)\b/gi, '<span class="keyword number" data-term="$&">$&</span>');

    return html;
}

// Handle keyword click for explanation
function handleKeywordClick(event) {
    const keyword = event.target;
    if (!keyword.classList.contains('keyword')) return;

    const term = keyword.dataset.term;
    const rect = keyword.getBoundingClientRect();

    // Remove existing tooltip
    const existing = document.querySelector('.keyword-tooltip');
    if (existing) existing.remove();

    // Create tooltip
    const tooltip = document.createElement('div');
    tooltip.className = 'keyword-tooltip';
    tooltip.innerHTML = `
        <div class="keyword-tooltip-header">${term}</div>
        <div class="keyword-tooltip-content">Loading explanation...</div>
    `;
    tooltip.style.left = `${rect.left}px`;
    tooltip.style.top = `${rect.bottom + 8}px`;
    document.body.appendChild(tooltip);

    // Get explanation from AI
    getKeywordExplanation(term, tooltip);

    // Close on click outside
    setTimeout(() => {
        document.addEventListener('click', function closeTooltip(e) {
            if (!tooltip.contains(e.target) && e.target !== keyword) {
                tooltip.remove();
                document.removeEventListener('click', closeTooltip);
            }
        });
    }, 100);
}

async function getKeywordExplanation(term, tooltip) {
    try {
        if (state.groqService) {
            const explanation = await state.groqService.generateResponse(
                `Explain "${term}" in 1-2 sentences. Be concise and technical.`
            );
            tooltip.querySelector('.keyword-tooltip-content').textContent = explanation;
        } else {
            tooltip.querySelector('.keyword-tooltip-content').textContent = 'Enable API to get explanations.';
        }
    } catch (error) {
        tooltip.querySelector('.keyword-tooltip-content').textContent = 'Could not load explanation.';
    }
}

// Add click listener for keywords
document.addEventListener('click', handleKeywordClick);

// ============================================
// Language Toggle (Code Translation)
// ============================================

/** Normalize a language identifier to one of the 4 toggle targets */
function normalizeLangForToggle(lang) {
    const l = (lang || '').toLowerCase().trim();
    if (['python', 'py', 'python3'].includes(l)) return 'python';
    if (['java'].includes(l)) return 'java';
    if (['cpp', 'c++', 'c', 'cc', 'cxx'].includes(l)) return 'cpp';
    if (['javascript', 'js', 'typescript', 'ts', 'jsx', 'tsx'].includes(l)) return 'javascript';
    // Default to python for unknown
    return 'python';
}

/** Simple string hash for cache keys */
function simpleHash(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        const chr = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + chr;
        hash |= 0;
    }
    return Math.abs(hash).toString(36);
}

/** Map toggle lang to syntax highlighter lang identifier */
function toggleLangToHighlightLang(lang) {
    const map = { python: 'python', java: 'java', cpp: 'cpp', javascript: 'javascript' };
    return map[lang] || lang;
}

/** Map toggle lang to display label */
function toggleLangToDisplayLabel(lang) {
    const map = { python: 'python', java: 'java', cpp: 'cpp', javascript: 'javascript' };
    return map[lang] || lang;
}

/** Update toggle button active states within a code block */
function updateToggleButtons(codeBlockEl, activeLang) {
    const buttons = codeBlockEl.querySelectorAll('.lang-toggle-btn');
    buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.lang === activeLang);
        btn.classList.remove('loading');
    });
}

/** Apply translated code to a code block element */
function applyTranslation(codeBlockEl, translatedCode, targetLang) {
    const codeEl = codeBlockEl.querySelector('pre code');
    if (!codeEl) return;

    // Re-highlight with target language
    const highlighted = highlightSyntax(translatedCode, toggleLangToHighlightLang(targetLang));
    codeEl.innerHTML = highlighted;

    // Update lang label
    const langLabel = codeBlockEl.querySelector('.code-lang');
    if (langLabel) langLabel.textContent = toggleLangToDisplayLabel(targetLang);

    // Update data attribute
    codeBlockEl.dataset.currentLang = targetLang;

    // Update raw map
    const blockId = codeBlockEl.id;
    if (blockId) {
        state.codeBlockRawMap.set(blockId, { rawCode: translatedCode, currentLang: targetLang });
    }

    // Update active button
    updateToggleButtons(codeBlockEl, targetLang);
}

/** Handle language toggle button clicks via event delegation */
document.addEventListener('click', async (e) => {
    const btn = e.target.closest('.lang-toggle-btn');
    if (!btn) return;

    e.stopPropagation();

    const codeBlock = btn.closest('.code-block');
    if (!codeBlock) return;

    const targetLang = btn.dataset.lang;
    const currentLang = codeBlock.dataset.currentLang;

    // Already on this language
    if (targetLang === currentLang) return;

    const blockId = codeBlock.id;
    const blockData = state.codeBlockRawMap.get(blockId);
    if (!blockData) return;

    // Get original raw code (decode from data attribute for hash)
    const rawB64 = codeBlock.dataset.rawCode;
    let originalRaw;
    try {
        originalRaw = decodeURIComponent(escape(atob(rawB64)));
    } catch {
        originalRaw = blockData.rawCode;
    }

    const cacheKey = `${simpleHash(originalRaw)}:${targetLang}`;

    // Check cache
    if (state.codeTranslationCache.has(cacheKey)) {
        applyTranslation(codeBlock, state.codeTranslationCache.get(cacheKey), targetLang);
        return;
    }

    // Show loading state
    btn.classList.add('loading');

    try {
        const sourceLangName = currentLang;
        const translated = await state.groqService.translateCode(originalRaw, sourceLangName, targetLang);

        // Cache result
        state.codeTranslationCache.set(cacheKey, translated);

        // Apply
        applyTranslation(codeBlock, translated, targetLang);
    } catch (err) {
        console.error('Translation failed:', err);
        btn.classList.remove('loading');
    }
});

// ============================================
// Feature: Smart Question Detection — Category Badges
// ============================================

const CATEGORY_CONFIG = {
    CODING: { label: 'Coding', color: '#3b82f6', bg: 'rgba(59,130,246,0.12)' },
    SYSTEM_DESIGN: { label: 'System Design', color: '#8b5cf6', bg: 'rgba(139,92,246,0.12)' },
    BEHAVIORAL: { label: 'Behavioral', color: '#10b981', bg: 'rgba(16,185,129,0.12)' },
    HR: { label: 'HR', color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
    SQL: { label: 'SQL', color: '#06b6d4', bg: 'rgba(6,182,212,0.12)' },
    ESTIMATION: { label: 'Estimation', color: '#f97316', bg: 'rgba(249,115,22,0.12)' },
    CASE_STUDY: { label: 'Case Study', color: '#ec4899', bg: 'rgba(236,72,153,0.12)' },
    CONCEPTUAL: { label: 'Conceptual', color: '#64748b', bg: 'rgba(100,116,139,0.12)' },
    FOLLOW_UP: { label: 'Follow-up', color: '#a855f7', bg: 'rgba(168,85,247,0.12)' },
    ACTION_ITEMS: { label: 'Action Items', color: '#22c55e', bg: 'rgba(34,197,94,0.12)' },
    GENERAL: { label: 'General', color: '#94a3b8', bg: 'rgba(148,163,184,0.12)' }
};

function buildCategoryBadge(category) {
    const config = CATEGORY_CONFIG[category] || CATEGORY_CONFIG.GENERAL;
    return `<span class="category-badge" style="background:${config.bg};color:${config.color};border:1px solid ${config.color}30;">${config.label}</span>`;
}

// ============================================
// Feature: Live Action Items Tracker
// ============================================

/** Regex patterns to detect action items in transcribed speech */
const ACTION_ITEM_PATTERNS = [
    /(?:(?:can you|could you|please|you should|you need to|make sure (?:to|you))\s+)(.{10,120})/gi,
    /(?:i'?ll|i will|i need to|i should|i'?m going to|let me)\s+(.{10,120})/gi,
    /(?:we need to|we should|we have to|let'?s|we'?ll|we will)\s+(.{10,120})/gi,
    /(?:action item[s]?[:\s]+|todo[:\s]+|task[:\s]+|follow[- ]?up[:\s]+)(.{5,150})/gi,
    /(?:by|before|due|deadline[:\s]*)\s+((?:monday|tuesday|wednesday|thursday|friday|saturday|sunday|tomorrow|next week|end of (?:day|week|month)|eod|eow)\b.{0,80})/gi
];

/**
 * Extract action items from transcript text using regex
 */
function extractActionItems(text) {
    if (!text || text.length < 15) return;

    const lower = text.toLowerCase();
    const hasSignal = ['can you', 'could you', 'please', 'need to', 'should', 'will', 'i\'ll', 'let\'s',
        'we need', 'follow up', 'action item', 'todo', 'make sure', 'don\'t forget',
        'deadline', 'by end of', 'going to'].some(s => lower.includes(s));
    if (!hasSignal) return;

    for (const pattern of ACTION_ITEM_PATTERNS) {
        pattern.lastIndex = 0;
        let match;
        while ((match = pattern.exec(text)) !== null) {
            const taskText = match[1].trim().replace(/[.!?,;]+$/, '');
            if (taskText.length >= 8 && taskText.length <= 150) {
                const isDuplicate = state.actionItems.some(item =>
                    item.text.toLowerCase().includes(taskText.toLowerCase().substring(0, 30)) ||
                    taskText.toLowerCase().includes(item.text.toLowerCase().substring(0, 30))
                );
                if (!isDuplicate) {
                    addActionItem({
                        text: taskText,
                        owner: detectOwner(match[0]),
                        deadline: detectDeadline(text),
                        source: 'transcript'
                    });
                }
            }
        }
    }
}

/**
 * Extract action items from AI responses tagged as ACTION_ITEMS
 */
function extractActionItemsFromAI(responseText) {
    const lines = responseText.split('\n');
    for (const line of lines) {
        const trimmed = line.trim();
        const itemMatch = trimmed.match(/^(?:[-•*]|\d+[.)]\s)\s*(?:\*\*)?(.{10,150})(?:\*\*)?$/);
        if (itemMatch) {
            const taskText = itemMatch[1].replace(/\*\*/g, '').replace(/[.!?,;]+$/, '').trim();
            if (taskText.length >= 8) {
                const isDuplicate = state.actionItems.some(item =>
                    item.text.toLowerCase().includes(taskText.toLowerCase().substring(0, 30))
                );
                if (!isDuplicate) {
                    addActionItem({
                        text: taskText,
                        owner: detectOwner(taskText),
                        deadline: detectDeadline(taskText),
                        source: 'ai'
                    });
                }
            }
        }
    }
}

function detectOwner(text) {
    const lower = text.toLowerCase();
    if (/\b(i'?ll|i will|i need|i should|i'?m going|let me)\b/.test(lower)) return 'You';
    if (/\b(can you|could you|you should|you need|please)\b/.test(lower)) return 'Other';
    if (/\b(we need|we should|we'?ll|let'?s|we will)\b/.test(lower)) return 'Team';
    return '';
}

function detectDeadline(text) {
    const deadlineMatch = text.match(/\b(?:by|before|due|deadline)\s+(monday|tuesday|wednesday|thursday|friday|saturday|sunday|tomorrow|next week|end of (?:day|week|month)|eod|eow)/i);
    return deadlineMatch ? deadlineMatch[1] : '';
}

function addActionItem({ text, owner = '', deadline = '', source = 'transcript' }) {
    const item = {
        id: `action-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
        text, owner, deadline,
        done: false,
        source,
        timestamp: new Date()
    };
    state.actionItems.push(item);
    renderActionItems();
    updateActionItemsBadge();
    console.log(`[ActionItems] Added: "${text}" (${owner || 'unassigned'}) [${source}]`);
}

function renderActionItems() {
    const list = elements.actionItemsList;
    const empty = elements.actionItemsEmpty;

    if (state.actionItems.length === 0) {
        list.innerHTML = '';
        if (empty) {
            list.appendChild(empty);
            empty.style.display = 'flex';
        }
        return;
    }

    if (empty) empty.style.display = 'none';
    list.innerHTML = state.actionItems.map(item => `
        <div class="action-item-card ${item.done ? 'done' : ''}" data-id="${item.id}">
            <label class="action-item-check">
                <input type="checkbox" ${item.done ? 'checked' : ''} onchange="toggleActionItemDone('${item.id}')">
                <span class="checkmark"></span>
            </label>
            <div class="action-item-content">
                <div class="action-item-text">${escapeHtml(item.text)}</div>
                <div class="action-item-meta">
                    ${item.owner ? `<span class="action-owner">${item.owner}</span>` : ''}
                    ${item.deadline ? `<span class="action-deadline">\u{1F4C5} ${item.deadline}</span>` : ''}
                    <span class="action-source">${item.source === 'ai' ? '\u{1F916}' : '\u{1F399}\u{FE0F}'}</span>
                    <span class="action-time">${formatTime(item.timestamp)}</span>
                </div>
            </div>
            <button class="action-item-remove" onclick="removeActionItem('${item.id}')" title="Remove">\u00D7</button>
        </div>
    `).join('');
}

function toggleActionItemDone(id) {
    const item = state.actionItems.find(i => i.id === id);
    if (item) {
        item.done = !item.done;
        renderActionItems();
        updateActionItemsBadge();
    }
}

function removeActionItem(id) {
    state.actionItems = state.actionItems.filter(i => i.id !== id);
    renderActionItems();
    updateActionItemsBadge();
}

function updateActionItemsBadge() {
    const count = state.actionItems.filter(i => !i.done).length;
    if (elements.actionItemsCount) elements.actionItemsCount.textContent = count;

    if (count > 0) {
        if (elements.actionItemsBadge) {
            elements.actionItemsBadge.textContent = count;
            elements.actionItemsBadge.classList.remove('hidden');
        }
        if (elements.btnToggleActions) elements.btnToggleActions.classList.add('has-items');
    } else {
        if (elements.actionItemsBadge) elements.actionItemsBadge.classList.add('hidden');
        if (elements.btnToggleActions) elements.btnToggleActions.classList.remove('has-items');
    }
}

function toggleActionItemsPanel() {
    state.actionItemsPanelOpen = !state.actionItemsPanelOpen;
    if (state.actionItemsPanelOpen) {
        elements.actionItemsPanel.classList.remove('hidden');
        elements.actionItemsPanel.classList.add('open');
    } else {
        elements.actionItemsPanel.classList.remove('open');
        elements.actionItemsPanel.classList.add('hidden');
    }
}

function copyActionItems() {
    if (state.actionItems.length === 0) return;
    const text = state.actionItems.map((item, i) => {
        const status = item.done ? '\u2705' : '\u2B1C';
        const owner = item.owner ? ` (${item.owner})` : '';
        const deadline = item.deadline ? ` \u2014 by ${item.deadline}` : '';
        return `${status} ${i + 1}. ${item.text}${owner}${deadline}`;
    }).join('\n');
    navigator.clipboard.writeText(text).then(() => {
        const btn = elements.btnCopyActions;
        const orig = btn.innerHTML;
        btn.textContent = '\u2713 Copied!';
        setTimeout(() => { btn.innerHTML = orig; }, 1500);
    });
}

function clearActionItems() {
    state.actionItems = [];
    renderActionItems();
    updateActionItemsBadge();
}

function bindActionItemsEvents() {
    if (elements.btnToggleActions) {
        elements.btnToggleActions.addEventListener('click', toggleActionItemsPanel);
    }
    if (elements.btnCopyActions) {
        elements.btnCopyActions.addEventListener('click', copyActionItems);
    }
    if (elements.btnClearActions) {
        elements.btnClearActions.addEventListener('click', clearActionItems);
    }
}

// Expose for inline HTML handlers
window.toggleActionItemDone = toggleActionItemDone;
window.removeActionItem = removeActionItem;

// ============================================
// Start
// ============================================
init();