import React, { useState, useEffect, useRef } from 'react';
import { Mic, Square, Users, Headphones } from 'lucide-react';
import { invoke } from "@tauri-apps/api/core";
import { listen } from '@tauri-apps/api/event';
import logo from '../assets/logo.png'; // Import logo

interface PromptTemplate {
    id: string;
    name: string;
    content: string;
    keywords?: string[];
}

interface HistoryItem {
    id: string;
    date: string;
    transcription: string;
    summary: string;
}

interface RecorderProps {
    apiKey: string;
    productId: string;
    prompts: PromptTemplate[];
    onOpenSettings: () => void;
    // Lifted State Props (still passed for state management, though unused in view)
    transcription: string;
    setTranscription: (val: string) => void;
    summary: string;
    setSummary: (val: string) => void;
    // History Props
    history: HistoryItem[];
    onSaveToHistory: (t?: string, s?: string) => void;
    onDeleteHistory: (id: string) => void;
    onLoadHistory: (item: HistoryItem) => void;
    savePath: string | null;

    onRecordingComplete: () => void;
    autoStart?: boolean;
    recordingSubject?: string;
    onAutoStartHandled?: () => void;
    addToast: (msg: string, type: 'success' | 'error' | 'info', duration?: number) => void;
    selectedModel: string;
    onModelChange: (model: string) => void;
    isVisible: boolean;
    blockedApps: string[];
}

interface AudioDevice {
    id: string;
    name: string;
}

const Recorder: React.FC<RecorderProps> = ({
    apiKey, productId, prompts,
    setTranscription, setSummary,
    onSaveToHistory, savePath, onRecordingComplete,
    onOpenSettings, addToast, selectedModel, onModelChange, blockedApps, ...props
}) => {
    const [isRecording, setIsRecording] = useState(false);
    const [isStopping, setIsStopping] = useState(false); // New lock state
    const [isPaused, setIsPaused] = useState(false);
    const [isWaiting, setIsWaiting] = useState(false); // New state for Auto-Start
    const [hasSpeechDetected, setHasSpeechDetected] = useState(false); // New tracking state
    const [autoStartEnabled, setAutoStartEnabled] = useState(false); // Toggle state

    const [status, setStatus] = useState<string>('Ready to record');
    const [selectedDevice, setSelectedDevice] = useState<string>('');
    const [selectedPromptId, setSelectedPromptId] = useState<string>('');
    // selectedModel is now a prop
    const [recordingMode, setRecordingMode] = useState<'voice' | 'meeting'>('voice');
    const [devices, setDevices] = useState<AudioDevice[]>([]);
    const [availableModels, setAvailableModels] = useState<Array<{ id: string, name: string }>>([]);
    const [lastSpeechTime, setLastSpeechTime] = useState<number>(Date.now());
    const [silenceDuration, setSilenceDuration] = useState(0);

    // Show all devices for both modes now (System Audio is captured natively)
    const filteredDevices = devices;

    useEffect(() => {
        loadDevices();
        if (apiKey && productId) {
            loadModels();
        }
    }, [apiKey, productId]);

    const loadModels = async () => {
        try {
            const models = await invoke<Array<{ id: string, name: string }>>('get_available_models', { apiKey, productId });
            if (models && models.length > 0) {
                models.sort((a, b) => a.name.localeCompare(b.name));
                setAvailableModels(models);
            }
        } catch (e) {
            console.error("Failed to load models dynamically, using defaults:", e);
        }
    };

    // Set default prompt selection
    useEffect(() => {
        if (prompts.length > 0 && !selectedPromptId) {
            setSelectedPromptId(prompts[0].id);
        } else if (prompts.length > 0 && selectedPromptId) {
            if (!prompts.find(p => p.id === selectedPromptId)) {
                setSelectedPromptId(prompts[0].id);
            }
        }
    }, [prompts, selectedPromptId]);

    const loadDevices = async () => {
        try {
            const devList = await invoke<AudioDevice[]>('get_input_devices');
            // Alias BlackHole
            const aliasedDevs = devList.map(d => ({
                ...d,
                name: d.name.includes('BlackHole') ? 'Hearbit Virtual Mic (BlackHole)' : d.name
            }));
            setDevices(aliasedDevs);

            // Select Hearbit mic by default if available and no selection made
            // Smart Auto-select based on mode
            if (!selectedDevice) {
                // Prioritize "Hearbit Audio" (Aggregate) over "Hearbit Virtual Mic" (BlackHole)
                const aggregateDev = aliasedDevs.find(d => d.name === 'Hearbit Audio');
                const virtualDev = aliasedDevs.find(d => d.name.includes('Hearbit Virtual'));

                if (recordingMode === 'meeting') {
                    if (aggregateDev) {
                        setSelectedDevice(aggregateDev.id);
                    } else if (virtualDev) {
                        setSelectedDevice(virtualDev.id);
                    } else if (aliasedDevs.length > 0) {
                        setSelectedDevice(aliasedDevs[0].id);
                    }
                } else if (aliasedDevs.length > 0) {
                    // Voice mode: just pick first non-virtual if possible, otherwise first
                    const physicalMic = aliasedDevs.find(d => !d.name.includes('Hearbit') && !d.name.includes('BlackHole'));
                    setSelectedDevice(physicalMic ? physicalMic.id : aliasedDevs[0].id);
                }
            }
        } catch (e) {
            console.error('Failed to load devices', e);
        }
    };

    const openAudioSetup = async () => {
        try {
            await invoke('open_audio_midi_setup');
        } catch (e) {
            console.error(e);
            addToast('Failed to open Audio Setup', 'error');
            setStatus('Failed to open Audio Setup');
        }
    };

    const startRecording = async (deviceIdOverride?: string) => {
        try {
            setStatus('Starting...');
            // Check override or state
            const targetDeviceId = deviceIdOverride || selectedDevice;

            // Pass customFilename (camelCase key maps to snake_case in Rust automatically or we need to check Tauri mapping, usually it maps camel to camel? Rust expects snake. Let's use snake_case in invoke args to be safe)
            await invoke('start_recording', {
                deviceId: targetDeviceId,
                savePath: savePath || null,
                customFilename: props.recordingSubject || null,
                waitForSpeech: autoStartEnabled, // Pass the toggle state
                mode: recordingMode,
                excludedApps: blockedApps
            });

            setIsRecording(true);
            setIsPaused(false);
            setTranscription('');
            setSummary('');
            setHasSpeechDetected(false); // Reset check for new session

            if (autoStartEnabled) {
                setIsWaiting(true);
                setStatus('Waiting for audio...');
                addToast('Standing by for audio...', 'info', 3000);
            } else {
                setIsWaiting(false);
                setStatus('Recording...');
                addToast('Recording started', 'success', 2000);
            }

        } catch (e) {
            console.error(e);
            setStatus(`Error: ${e}`);
            addToast(`Error starting recording: ${e}`, 'error');
            setIsRecording(false);
        }
    };

    // Refs for interval access to avoid dependency cycles and stale closures
    const lastSpeechTimeRef = useRef<number>(Date.now());
    const isStoppingRef = useRef(false);
    const autoStartEnabledRef = useRef(autoStartEnabled);

    // Update refs when state changes
    useEffect(() => {
        lastSpeechTimeRef.current = lastSpeechTime;
    }, [lastSpeechTime]);

    useEffect(() => {
        isStoppingRef.current = isStopping;
    }, [isStopping]);

    useEffect(() => {
        autoStartEnabledRef.current = autoStartEnabled;
    }, [autoStartEnabled]);

    // 1. Event Listeners Effect (Run ONCE when recording starts)
    useEffect(() => {
        let unlistenVAD: () => void;
        let unlistenTrigger: () => void;

        const setupListeners = async () => {
            if (!isRecording) return;

            console.log("Setting up VAD listeners...");
            // VAD Event Listener
            unlistenVAD = await listen<{ is_speech: boolean, probability: number }>('vad-event', (event) => {
                if (event.payload.is_speech) {
                    setLastSpeechTime(Date.now());
                    lastSpeechTimeRef.current = Date.now();
                    setSilenceDuration(0);
                    setHasSpeechDetected(true); // Track positive speech
                }
            });

            // Auto-Start Trigger Listener
            unlistenTrigger = await listen('auto-recording-triggered', () => {
                console.log("Auto-Start Triggered from Backend!");
                setHasSpeechDetected(true); // Trigger counts as speech
                setIsWaiting((prev) => {
                    if (prev) {
                        addToast("Audio detected! Recording started.", 'success', 4000);
                        return false;
                    }
                    return prev;
                });
                setStatus('Recording (Auto-Started)...');
                setLastSpeechTime(Date.now());
            });
        };

        if (isRecording) {
            setupListeners();
        }

        return () => {
            // Cleanup listeners
            if (unlistenVAD) unlistenVAD();
            if (unlistenTrigger) unlistenTrigger();
        };
    }, [isRecording, addToast]); // Dependencies for listener setup

    // Ref for visibility to avoid closure staleness in interval
    const isVisibleRef = useRef(props.isVisible);
    useEffect(() => {
        isVisibleRef.current = props.isVisible;
    }, [props.isVisible]);

    // Auto-Stop Interval Effect
    useEffect(() => {
        if (!isRecording || isPaused || isWaiting) return;

        const interval = setInterval(() => {
            const now = Date.now();
            const timeSinceSpeech = (now - lastSpeechTimeRef.current) / 1000;
            setSilenceDuration(timeSinceSpeech);

            // AUTO STOP Logic
            // Use Ref to get LATEST visibility instantly
            if (isVisibleRef.current && timeSinceSpeech > 25 && !isStoppingRef.current) {
                console.log("Auto-stopping due to silence...");
                isStoppingRef.current = true;
                addToast('Auto-stopped due to silence', 'info');
                stopRecording();
            }
        }, 1000);

        return () => clearInterval(interval);
    }, [isRecording, isPaused, isWaiting, recordingMode, addToast]); // Removed props.isVisible dependency (using Ref)

    // Handle Auto Start Prop
    useEffect(() => {
        if (props.autoStart && !isRecording && devices.length > 0) {
            // Force meeting mode for auto-joins
            if (recordingMode !== 'meeting') {
                setRecordingMode('meeting');
            }

            // Find best device (Race condition fix: we can't rely on selectedDevice state update being instant)
            const aggregateDev = devices.find(d => d.name === 'Hearbit Audio');
            const virtualDev = devices.find(d => d.name.includes('Hearbit Virtual'));
            const bestDevice = aggregateDev || virtualDev;

            if (bestDevice) {
                setSelectedDevice(bestDevice.id); // Update UI state for consistency
                console.log("Auto-starting with device:", bestDevice.name);
                startRecording(bestDevice.id); // Pass ID directly
            } else {
                console.warn("Auto-start: No meeting device found, trying default.");
                startRecording();
            }

            if (props.onAutoStartHandled) {
                props.onAutoStartHandled();
            }
        }
    }, [props.autoStart, devices]);

    // Handle Custom Event (Legacy/Fallback)
    useEffect(() => {
        const handleStartReq = () => {
            if (!isRecording) {
                if (recordingMode !== 'meeting') {
                    setRecordingMode('meeting');
                }
                startRecording();
            }
        };
        window.addEventListener('start-recording-req', handleStartReq);
        return () => window.removeEventListener('start-recording-req', handleStartReq);
    }, [isRecording, recordingMode]);

    const togglePause = async () => {
        try {
            if (isPaused) {
                await invoke('resume_recording');
                setIsPaused(false);
                setStatus('Recording...');
            } else {
                await invoke('pause_recording');
                setIsPaused(true);
                setStatus('Paused');
            }
        } catch (e) {
            console.error("Pause/Resume error:", e);
        }
    };

    const stopRecording = async () => {
        if (isStopping) return;
        setIsStopping(true);

        try {
            setIsRecording(false);
            setIsPaused(false);
            setIsWaiting(false); // Reset waiting state
            setTranscription('');
            setSummary('');
            setHasSpeechDetected(false); // Reset checkiting state
            setStatus('Saving recording...');
            const filePath = await invoke<string>('stop_recording');

            // NEW: Check if speech was actually detected during the session
            // If we recorded 20s of silence (Auto-Stop), we shouldn't transcribe.
            // IMPORTANT: Check applies to BOTH 'voice' and 'meeting' modes to prevent "Batch Null" errors on false triggers.
            if (!hasSpeechDetected) {
                console.log("No speech detected during recording. Skipping transcription.");
                addToast("Recording discarded (No speech/audio detected)", 'info');
                setStatus('Ready to record'); // Reset status text

                // If auto-start is on, we just loop back (in finally block).
                // But we skip the expensive/failing API call.
            } else {

                // Wait a moment for file flush (safety)
                await new Promise(r => setTimeout(r, 500));

                // Confirm recording saved
                addToast(`Recording saved locally: ${filePath.split('/').pop()}`, 'success', 3000);
                setStatus('Converting to MP3...');

                // Small delay to show the "saved" message
                await new Promise(r => setTimeout(r, 500));

                // Convert WAV to MP3 for smaller size
                const mp3Path = await invoke<string>('convert_to_mp3', { wavPath: filePath });

                // Get file size to check if chunking needed
                interface AudioMetadata { duration: number; size: number; format: string; }
                const metadata = await invoke<AudioMetadata>('get_audio_metadata', { filePath: mp3Path });
                const sizeMB = metadata.size / (1024 * 1024);

                let transText = '';

                // Check if chunking needed (only for Meeting mode and large files)
                if (recordingMode === 'meeting' && sizeMB >= 18) {
                    // CHUNKING PATH for large meetings
                    setStatus(`Large file (${sizeMB.toFixed(1)}MB). Splitting into chunks...`);
                    const chunks = await invoke<string[]>('chunk_audio', {
                        filePath: mp3Path,
                        chunkMinutes: 10
                    });

                    addToast(`Processing ${chunks.length} chunks...`, 'info', 4000);

                    let allTranscriptions: string[] = [];

                    for (let i = 0; i < chunks.length; i++) {
                        setStatus(`Transcribing chunk ${i + 1}/${chunks.length}...`);
                        const chunkText = await invoke<string>('transcribe_audio', {
                            filePath: chunks[i],
                            apiKey,
                            productId
                        });
                        allTranscriptions.push(chunkText);
                    }

                    // Merge transcriptions
                    transText = allTranscriptions.join('\n\n--- Next Segment ---\n\n');
                    addToast('All chunks transcribed successfully!', 'success', 3000);
                } else {
                    // NORMAL PATH for small files
                    setStatus('Transcribing (Infomaniak Whisper)...');
                    transText = await invoke<string>('transcribe_audio', {
                        filePath: mp3Path,
                        apiKey,
                        productId
                    });
                }

                setTranscription(transText);

                // Check if transcription is empty or just whitespace
                if (!transText || transText.trim().length === 0) {
                    setStatus('Done (No speech detected)');
                    setTranscription('(No speech detected. Check your microphone settings.)');
                    setTimeout(() => setStatus('Ready to record'), 3000);
                    // allow finally block to restart loop
                } else {
                    // Logic continues...

                    // Find selected prompt content - SMART SELECTION
                    let activePrompt = prompts.find(p => p.id === selectedPromptId);

                    // Smart Auto-Select based on keywords
                    const lowerText = transText.toLowerCase();
                    let bestMatchId = selectedPromptId;
                    let maxMatches = 0;

                    for (const p of prompts) {
                        if (!p.keywords) continue;
                        let matches = 0;
                        for (const kw of p.keywords) {
                            if (lowerText.includes(kw.toLowerCase())) {
                                matches++;
                            }
                        }
                        if (matches > maxMatches) {
                            maxMatches = matches;
                            bestMatchId = p.id;
                        }
                    }

                    if (bestMatchId !== selectedPromptId) {
                        const newPrompt = prompts.find(p => p.id === bestMatchId);
                        if (newPrompt) {
                            console.log(`Smart Select: Switched to '${newPrompt.name}' with ${maxMatches} matches.`);
                            setStatus(`Smart Select: Using "${newPrompt.name}"...`);
                            addToast(`Smart Select: Switched to "${newPrompt.name}"`, 'success', 4000);
                            activePrompt = newPrompt;
                        }
                    }

                    const promptContent = activePrompt ? activePrompt.content : "Summarize this.";

                    setStatus(`Summarizing (${selectedModel})...`);
                    const sumText = await invoke<string>('summarize_text', {
                        text: transText,
                        apiKey,
                        productId,
                        prompt: promptContent,
                        model: selectedModel
                    });
                    setSummary(sumText);

                    // Auto-save to history
                    onSaveToHistory(transText, sumText);

                    setStatus('Done!');
                    addToast('Transcription & Summary complete!', 'success', 4000);
                    onRecordingComplete(); // Auto-switch tab
                    setTimeout(() => setStatus('Ready to record'), 3000);
                }
            }
        } catch (e) {
            console.error(e);
            setStatus(`Error: ${e}`);
            addToast(`Error processing: ${e}`, 'error');
        } finally {
            setIsStopping(false);

            // AUTO-RESTART LOGIC
            // Use REF to get the latest state (fix for "starts again even if I uncheck")
            if (autoStartEnabledRef.current) {
                console.log("Auto-Start enabled: Restarting listener loop...");
                // Short delay to ensure backend cleanup
                setTimeout(() => {
                    // Double check ref before restarting
                    if (autoStartEnabledRef.current) {
                        startRecording();
                    }
                }, 1000);
            }
        }
    };



    return (
        <div className="flex flex-col w-full h-full bg-background relative">
            {/* Fixed Header - Reduced padding */}
            <div className="w-full flex justify-center items-center p-4 shrink-0">
                <img src={localStorage.getItem('customLogo') || logo} alt="Logo" className="h-10 object-contain" />
            </div>

            {/* Scrollable Content - Reduced spacing */}
            <div className="flex-1 overflow-y-auto px-6 pb-6 flex flex-col items-center">
                <div className="mb-4 relative shrink-0">
                    <div className={`w-24 h-24 rounded-full flex items-center justify-center transition-all duration-300 ${isRecording ? (isWaiting ? 'bg-blue-500/20' : isPaused ? 'bg-yellow-500/10' : 'bg-red-500/10 animate-pulse') : 'bg-secondary'}`}>
                        {isRecording ? (
                            <div className={`w-16 h-16 rounded-full flex items-center justify-center shadow-[0_0_20px_rgba(239,68,68,0.5)] ${isWaiting ? 'bg-blue-500 animate-pulse' : isPaused ? 'bg-yellow-500' : 'bg-red-500'}`}>
                                <Mic size={32} className="text-white animate-bounce" />
                            </div>
                        ) : (
                            <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center">
                                <Mic size={32} className="text-primary-foreground" />
                            </div>
                        )}
                    </div>
                </div>

                <h1 className="text-xl font-bold mb-1 text-foreground">
                    {isRecording ? (isWaiting ? 'Waiting for Audio...' : isPaused ? 'Paused' : 'Listening...') : 'Ready to Record'}
                </h1>

                <p className="text-muted-foreground mb-4 text-center text-xs h-5">
                    {status}
                    {isRecording && !isPaused && !isWaiting && silenceDuration > 10 && (
                        <span className="block text-xs text-yellow-500 mt-0.5 opacity-80">
                            Silence detected: {Math.floor(silenceDuration)}s
                        </span>
                    )}
                </p>

                <div className="w-full max-w-sm space-y-3 mb-4 shrink-0">
                    {!isRecording ? (
                        <>
                            <button
                                onClick={() => startRecording()}
                                disabled={!apiKey || !productId}
                                className="w-full py-3 text-base font-semibold bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg"
                            >
                                {!apiKey ? 'Configure API Key First' : (autoStartEnabled ? 'Standby (Auto-Start)' : 'Start Recording')}
                            </button>
                            <div className="flex items-center justify-center gap-2 mt-2">
                                <label className="flex items-center gap-2 cursor-pointer select-none">
                                    <input
                                        type="checkbox"
                                        checked={autoStartEnabled}
                                        onChange={(e) => setAutoStartEnabled(e.target.checked)}
                                        className="w-4 h-4 accent-primary rounded cursor-pointer"
                                    />
                                    <span className="text-xs text-muted-foreground font-medium">Auto-start when audio detected</span>
                                </label>
                            </div>
                        </>
                    ) : (
                        <div className="flex gap-2 w-full">
                            {/* In Waiting mode, we can only Stop (Cancel) */}
                            {!isWaiting && (
                                <button
                                    onClick={togglePause}
                                    className={`flex-1 py-4 text-lg font-semibold rounded-lg transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 ${isPaused
                                        ? 'bg-blue-600 text-white hover:bg-blue-700'
                                        : 'bg-yellow-500 text-white hover:bg-yellow-600'
                                        }`}
                                >
                                    {isPaused ? 'Resume' : 'Pause'}
                                </button>
                            )}
                            <button
                                onClick={stopRecording}
                                className="flex-1 py-4 text-lg font-semibold bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2"
                            >
                                <Square size={20} fill="currentColor" />
                                {isWaiting ? 'Cancel' : 'Stop'}
                            </button>
                        </div>
                    )}

                    <div className="grid grid-cols-2 gap-4 pt-2">
                    </div>

                    {/* INPUT DEVICE SECTION */}
                    <div className="col-span-2">
                        <div className="flex bg-secondary p-1 rounded-lg mb-2">
                            <button
                                onClick={() => { setRecordingMode('voice'); setSelectedDevice(''); }}
                                className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-semibold rounded-md transition-all ${recordingMode === 'voice' ? 'bg-background shadow text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
                            >
                                <Headphones size={14} /> Voice Memo
                            </button>
                            <button
                                onClick={() => { setRecordingMode('meeting'); setSelectedDevice(''); }}
                                className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-semibold rounded-md transition-all ${recordingMode === 'meeting' ? 'bg-background shadow text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
                            >
                                <Users size={14} /> Meeting
                            </button>
                        </div>

                        <select
                            value={selectedDevice}
                            onChange={(e) => setSelectedDevice(e.target.value)}
                            className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
                            disabled={isRecording}
                        >
                            {filteredDevices.map(d => (
                                <option key={d.id} value={d.id}>{d.name}</option>
                            ))}
                            {filteredDevices.length === 0 && (
                                <option value="">
                                    {recordingMode === 'meeting' ? 'No Meeting Device (Create in Settings)' : 'No Microphone Found'}
                                </option>
                            )}
                        </select>
                    </div>

                    <div className="col-span-2 grid grid-cols-2 gap-4">
                        <div>
                            <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-1">
                                LLM Model
                            </label>
                            <select
                                value={selectedModel}
                                onChange={(e) => {
                                    onModelChange(e.target.value);
                                    // localStorage handled in App.tsx
                                }}
                                className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
                                // Allow changing model while recording (since it's used for summary after)
                                disabled={false}
                            >
                                {availableModels.map(m => (
                                    <option key={m.id} value={m.id}>{m.name}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    <div className="w-full">
                        <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-1">
                            AI Template
                        </label>
                        <select
                            value={selectedPromptId}
                            onChange={(e) => setSelectedPromptId(e.target.value)}
                            className="w-full p-2 text-sm bg-secondary rounded border border-border outline-none focus:ring-2 focus:ring-primary"
                            // Allow changing template while recording
                            disabled={prompts.length === 0}
                        >
                            {prompts.map(p => (
                                <option key={p.id} value={p.id}>{p.name}</option>
                            ))}
                            {prompts.length === 0 && <option value="">No templates</option>}
                        </select>
                    </div>

                    <div className="flex flex-col gap-2 mt-2 w-full">
                        {recordingMode === 'meeting' && (
                            <button
                                onClick={async () => {
                                    const allowed = await invoke<boolean>('check_screen_recording_permission');
                                    if (allowed) {
                                        addToast('System Audio Permission: GRANTED ✅', 'success');
                                    } else {
                                        addToast('System Audio Permission: MISSING ❌. Please enable in System Settings -> Privacy -> Screen Recording', 'error', 5000);
                                        // Open Settings?
                                    }
                                }}
                                className="text-xs bg-primary/10 text-primary hover:bg-primary/20 w-full text-center border border-primary/20 rounded p-2 mb-2 font-semibold"
                            >
                                🔒 Check Audio Permission
                            </button>
                        )}
                        <button
                            onClick={openAudioSetup}
                            className="text-xs text-muted-foreground hover:text-foreground w-full text-center border border-dashed border-border/50 rounded p-1"
                        >
                            Open Audio MIDI Setup
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Recorder;
