import { useMurmubaraEngine } from 'murmuraba';

function AudioComponent() {
  const {
    // Engine State
    isInitialized,
    isLoading,
    error,
    engineState,
    metrics,
    diagnostics,
    
    // Recording State (complete state object)
    recordingState,      // { isRecording, isPaused, recordingTime, chunks }
    currentStream,       // Current MediaStream being processed
    
    // Engine Control
    initialize,
    destroy,
    
    // Recording Pipeline (all-in-one functions)
    startRecording,      // (chunkDuration?) => Promise<void> - handles everything
    stopRecording,       // () => void - stops and finalizes
    pauseRecording,      // () => void - pauses current recording
    resumeRecording,     // () => void - resumes paused recording
    clearRecordings,     // () => void - clears all chunks and URLs
    
    // Audio Playback (built-in)
    toggleChunkPlayback, // (chunkId, audioType) => Promise<void>
    toggleChunkExpansion,// (chunkId) => void
    
    // Utility Functions (included)
    formatTime,          // (seconds) => "MM:SS" format
    getAverageNoiseReduction, // () => number (average across all chunks)
    resetError          // () => void - clears error state
  } = useMurmubaraEngine({
    autoInitialize: false,        // Initialize on mount
    defaultChunkDuration: 8,      // Default chunk size in seconds
    noiseReductionLevel: 'high',  // Processing quality
    bufferSize: 2048,            // Audio buffer size
    logLevel: 'info'             // Logging level
  });

  return (
    <div>
      {/* Engine Initialization */}
      {!isInitialized && !isLoading && (
        <button onClick={initialize}>
          Initialize Engine
        </button>
      )}
      
      {isLoading && <div>🚀 Initializing Neural Engine...</div>}

      {/* Zero-Setup Recording - Just One Function Call */}
      {isInitialized && (
        <div>
          {!recordingState.isRecording ? (
            <button onClick={() => startRecording(8)}>
              🎙️ Start Recording (8s chunks)
            </button>
          ) : (
            <>
              <button onClick={stopRecording}>⏹️ Stop</button>
              {recordingState.isPaused ? (
                <button onClick={resumeRecording}>▶️ Resume</button>
              ) : (
                <button onClick={pauseRecording}>⏸️ Pause</button>
              )}
              <span>🎵 Recording: {formatTime(recordingState.recordingTime)}</span>
            </>
          )}
        </div>
      )}

      {/* Real-time Processing Metrics */}
      {metrics && recordingState.isRecording && (
        <div>
          <p>🔇 Noise Reduction: {metrics.noiseReductionLevel.toFixed(1)}%</p>
          <p>⚡ Latency: {metrics.processingLatency.toFixed(2)}ms</p>
          <p>📊 Input Level: {(metrics.inputLevel * 100).toFixed(0)}%</p>
          <p>📈 Average Reduction: {getAverageNoiseReduction().toFixed(1)}%</p>
        </div>
      )}

      {/* Automatically Processed Chunks with Built-in Playback */}
      <div>
        <h3>🎵 Processed Chunks ({recordingState.chunks.length})</h3>
        {recordingState.chunks.map((chunk, index) => (
          <div key={chunk.id}>
            <h4>Chunk #{index + 1} - {formatTime(chunk.duration / 1000)}</h4>
            <p>🔇 Noise Removed: {chunk.noiseRemoved.toFixed(1)}%</p>
            
            {/* Built-in Audio Playback Controls */}
            <button 
              onClick={() => toggleChunkPlayback(chunk.id, 'original')}
              disabled={!chunk.originalAudioUrl}
            >
              🔊 {chunk.isPlaying ? 'Stop' : 'Play'} Original
            </button>
            
            <button 
              onClick={() => toggleChunkPlayback(chunk.id, 'processed')}
              disabled={!chunk.processedAudioUrl}
            >
              🎵 {chunk.isPlaying ? 'Stop' : 'Play'} Enhanced
            </button>
            
            <button onClick={() => toggleChunkExpansion(chunk.id)}>
              {chunk.isExpanded ? '▲ Hide' : '▼ Show'} Details
            </button>
            
            {/* Automatic Detail Expansion */}
            {chunk.isExpanded && (
              <div>
                <p>📅 Start: {new Date(chunk.startTime).toLocaleTimeString()}</p>
                <p>🏁 End: {new Date(chunk.endTime).toLocaleTimeString()}</p>
                <p>⚡ Processing: {chunk.metrics.processingLatency.toFixed(2)}ms</p>
                <p>🎞️ Frames: {chunk.metrics.frameCount}</p>
                <p>📊 Input Level: {(chunk.metrics.inputLevel * 100).toFixed(1)}%</p>
                <p>📈 Output Level: {(chunk.metrics.outputLevel * 100).toFixed(1)}%</p>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* One-Click Cleanup */}
      {recordingState.chunks.length > 0 && (
        <button onClick={clearRecordings}>
          🧹 Clear All Recordings
        </button>
      )}
      
      {/* Error Handling */}
      {error && (
        <div>
          ⚠️ {error} 
          <button onClick={resetError}>✕</button>
        </div>
      )}
    </div>
  );
}

import { AudioPlayer } from 'murmuraba';

function MyApp() {
  const [audioSrc, setAudioSrc] = useState<string>();
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <AudioPlayer
      src={audioSrc}
      label="Processed Audio"
      onPlayStateChange={setIsPlaying}
      volume={0.8}
      muted={false}
      disabled={false}
      className="custom-player"
      aria-label="Custom audio player for noise-reduced content"
    />
  );
}

interface AudioPlayerProps {
  src?: string;                    // Audio source URL
  onPlayStateChange?: (isPlaying: boolean) => void;  // Play state callback
  className?: string;              // Custom CSS classes
  label: string;                   // Accessible label (required)
  forceStop?: boolean;            // Force stop playback
  'aria-label'?: string;          // Custom ARIA label
  disabled?: boolean;             // Disable player
  volume?: number;                // Volume (0-1)
  muted?: boolean;                // Muted state
}

import { AdvancedMetricsPanel } from 'murmuraba';

function DiagnosticsView() {
  const { diagnostics } = useMurmubaraEngine();
  const [showPanel, setShowPanel] = useState(false);

  return (
    <>
      <button onClick={() => setShowPanel(true)}>
        Show Engine Diagnostics
      </button>
      
      <AdvancedMetricsPanel
        isVisible={showPanel}
        diagnostics={diagnostics}
        onClose={() => setShowPanel(false)}
        className="my-diagnostics"
        aria-label="Engine performance diagnostics panel"
      />
    </>
  );
}

interface AdvancedMetricsPanelProps {
  isVisible: boolean;              // Panel visibility
  diagnostics: DiagnosticInfo | null;  // Engine diagnostics data
  onClose: () => void;            // Close callback (required)
  className?: string;             // Custom CSS classes
  'aria-label'?: string;          // Custom ARIA label for dialog
}

interface DiagnosticInfo {
  engineVersion: string;          // Package version
  wasmLoaded: boolean;           // WebAssembly status
  activeProcessors: number;      // Number of active audio processors
  memoryUsage: number;          // Memory usage in bytes
  processingTime: number;       // Last processing time in milliseconds
  engineState: string;          // Current engine state
  browserInfo?: {               // Browser compatibility info
    name?: string;              // Browser name
    audioAPIsSupported: boolean; // Audio API support status
  };
}

import { useMurmubaraEngine, AudioPlayer, AdvancedMetricsPanel } from 'murmuraba';

function CompleteAudioApp() {
  const {
    // Engine and recording state
    recordingState,
    diagnostics,
    startRecording,
    stopRecording,
    
    // Audio chunks for playback
    getChunkUrl,
    getProcessedChunkUrl
  } = useMurmubaraEngine();
  
  const [showDiagnostics, setShowDiagnostics] = useState(false);
  const [selectedChunk, setSelectedChunk] = useState<number>(0);

  return (
    <div className="audio-app">
      {/* Recording Controls */}
      <button onClick={startRecording} disabled={recordingState.isRecording}>
        Start Recording
      </button>
      <button onClick={stopRecording} disabled={!recordingState.isRecording}>
        Stop Recording
      </button>
      
      {/* Audio Players for A/B Comparison */}
      <div className="audio-comparison">
        <AudioPlayer
          src={getChunkUrl(selectedChunk)}
          label="Original Audio"
          className="original-player"
        />
        <AudioPlayer
          src={getProcessedChunkUrl(selectedChunk)}
          label="Noise Reduced"
          className="processed-player"
        />
      </div>
      
      {/* Diagnostics */}
      <button onClick={() => setShowDiagnostics(true)}>
        Engine Diagnostics
      </button>
      
      <AdvancedMetricsPanel
        isVisible={showDiagnostics}
        diagnostics={diagnostics}
        onClose={() => setShowDiagnostics(false)}
      />
    </div>
  );
}