import React, { useState, useEffect, useRef } from 'react';

export default function M32Lazarus() {
  const [recording, setRecording] = useState(false);
  const [cloned, setCloned] = useState(false);
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!recording) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animationId;
    let frame = 0;

    const draw = () => {
      ctx.fillStyle = 'rgba(5, 3, 10, 0.3)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      const mid = canvas.height / 2;
      ctx.beginPath();
      ctx.strokeStyle = 'var(--text-muted)';
      ctx.lineWidth = 1;
      
      // REAL DATA: Flat line indicating zero input (No dummy sinusoids)
      ctx.moveTo(0, mid);
      ctx.lineTo(canvas.width, mid);
      ctx.stroke();
      
      // Draw idle indicator
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.font = '10px monospace';
      ctx.fillText('[AWAITING TRUE AUDIO METRICS]', 10, 20);

      animationId = requestAnimationFrame(draw);
    };
    draw();
    return () => cancelAnimationFrame(animationId);
  }, [recording]);

  return (
    <div style={{animation: 'fadeIn 0.5s ease-out'}}>
      <h2 style={{color: 'var(--accent-purple)', marginBottom: '15px', textShadow: '0 0 10px var(--accent-purple)'}}>
        M32: LAZARUS MATRIX VOICE CLONING
      </h2>
      <p style={{color: 'var(--text-muted)', marginBottom: '20px'}}>
        Sistem Deepfake Vokal dengan latensi 12ms. Menganalisis *Micro-Tremor* pita suara untuk mereplikasi emosi secara kuantum.
      </p>
      
      <div className="glass-panel" style={{padding: '20px', marginBottom: '20px'}}>
        <div style={{display: 'flex', gap: '20px', alignItems: 'center'}}>
          <button 
            className={recording ? 'btn-danger' : 'btn-primary'}
            style={{flex: 1, padding: '15px'}}
            onClick={() => setRecording(!recording)}
          >
            {recording ? '🛑 HENTIKAN REKAMAN' : '🎤 MULAI EKSTRAKSI SUARA'}
          </button>
          
          <button 
            className="btn-primary" 
            style={{flex: 1, padding: '15px', background: cloned ? 'var(--accent-green)' : 'transparent', color: cloned ? '#000' : 'var(--text-main)', border: cloned ? 'none' : '1px solid var(--accent-green)'}}
            onClick={() => { if(!recording) setCloned(true); }}
            disabled={recording}
          >
            {cloned ? '✅ MODEL BERHASIL DIKLONING' : '🧬 BANGKITKAN MODEL LAZARUS'}
          </button>
        </div>
      </div>
      
      <div className="glass-panel" style={{padding: '10px', height: '200px', position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
        {!recording && !cloned && <div style={{color: 'var(--text-muted)'}}>MENUNGGU SINYAL AUDIO...</div>}
        {cloned && !recording && <div style={{color: 'var(--accent-green)', fontSize: '1.2rem', fontWeight: 'bold', textShadow: '0 0 10px var(--accent-green)'}}>🧬 SYNTHETICA READY FOR INJECTION</div>}
        <canvas ref={canvasRef} width="800" height="180" style={{width: '100%', height: '100%', position: 'absolute', top:0, left:0, display: recording ? 'block' : 'none'}}></canvas>
      </div>
    </div>
  );
}
