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

const App = () => {
  const [isActive, setIsActive] = useState(false);
  const [glitchLevel, setGlitchLevel] = useState(50);
  const [bpm, setBpm] = useState(92);
  const [currentStep, setCurrentStep] = useState(-1);
  
  const audioCtx = useRef(null);
  const gainNode = useRef(null);
  const sequencerRef = useRef(null);
  const canvasRef = useRef(null);
  
  // Notas de la escala Do Menor Pentatónica para asegurar que sea "pegadiza"
  const SCALE = [130.81, 155.56, 174.61, 196.00, 233.08, 261.63, 311.13, 349.23, 392.00, 466.16, 523.25];

  // Inicializar Audio
  const initAudio = () => {
    if (!audioCtx.current) {
      audioCtx.current = new (window.AudioContext || window.webkitAudioContext)();
      gainNode.current = audioCtx.current.createGain();
      gainNode.current.connect(audioCtx.current.destination);
      gainNode.current.gain.value = 0.4;
    }
    if (audioCtx.current.state === 'suspended') {
      audioCtx.current.resume();
    }
  };

  const playTone = (freq, time, duration = 0.2, type = 'sine') => {
    if (!audioCtx.current) return;
    const osc = audioCtx.current.createOscillator();
    const g = audioCtx.current.createGain();
    
    osc.type = type;
    osc.frequency.setValueAtTime(freq, time);
    
    g.gain.setValueAtTime(0, time);
    g.gain.linearRampToValueAtTime(0.3, time + 0.01);
    g.gain.exponentialRampToValueAtTime(0.0001, time + duration);
    
    osc.connect(g);
    g.connect(gainNode.current);
    
    osc.start(time);
    osc.stop(time + duration);
  };

  // Lógica del secuenciador generativo
  const runSequence = useCallback(() => {
    let step = 0;
    const interval = 60 / bpm / 4; // 16th notes
    
    sequencerRef.current = setInterval(() => {
      const time = audioCtx.current.currentTime;
      
      // Kick (Trip Hop style)
      if (step === 0 || step === 6 || step === 10) {
        playTone(55, time, 0.3, 'triangle');
      }
      
      // Snare/Snap
      if (step === 4 || step === 12) {
        playTone(180, time, 0.1, 'square');
      }

      // Melodía Generativa
      if (Math.random() > 0.6) {
        const randomNote = SCALE[Math.floor(Math.random() * SCALE.length)];
        playTone(randomNote, time, 0.4, 'sine');
        // Un armónico para el sonido "limpio"
        playTone(randomNote * 2, time, 0.2, 'sine');
      }

      setCurrentStep(step);
      step = (step + 1) % 16;
    }, interval * 1000);
  }, [bpm]);

  const toggleApp = () => {
    if (!isActive) {
      initAudio();
      runSequence();
    } else {
      if (sequencerRef.current) clearInterval(sequencerRef.current);
      setCurrentStep(-1);
    }
    setIsActive(!isActive);
  };

  // Canvas para efecto visual tipo "Calls"
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animationFrame;

    const render = () => {
      const w = canvas.width = window.innerWidth;
      const h = canvas.height = window.innerHeight;
      
      ctx.fillStyle = '#050505';
      ctx.fillRect(0, 0, w, h);

      // Líneas centrales (vibración)
      ctx.beginPath();
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1;

      const segments = 100;
      const centerY = h / 2;
      
      for (let i = 0; i < segments; i++) {
        const x = (w / segments) * i;
        const noise = isActive ? (Math.random() - 0.5) * glitchLevel : 2;
        const y = centerY + Math.sin(i * 0.2 + Date.now() * 0.01) * noise;
        
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();

      // Efecto Glitch visual aleatorio
      if (isActive && Math.random() > 0.95) {
        ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.2})`;
        ctx.fillRect(0, Math.random() * h, w, Math.random() * 10);
      }

      animationFrame = requestAnimationFrame(render);
    };

    render();
    return () => cancelAnimationFrame(animationFrame);
  }, [isActive, glitchLevel]);

  return (
    <div className="min-h-screen bg-[#050505] text-white font-mono overflow-hidden flex flex-col items-center justify-center relative">
      {/* Glitch Overlay */}
      <div className="fixed inset-0 pointer-events-none z-50 opacity-10 mix-blend-screen bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
      
      <canvas 
        ref={canvasRef} 
        className="fixed inset-0 z-0 opacity-40"
      />

      {/* Interfaz Principal */}
      <main className="z-10 flex flex-col items-center p-8 max-w-2xl w-full">
        <header className="mb-12 text-center relative">
          <h1 className={`text-5xl md:text-7xl font-black tracking-tighter uppercase mb-2 ${isActive ? 'animate-pulse' : ''}`}>
            {isActive ? 'F_RAG_MENTA' : 'STOP_PED'}
          </h1>
          <p className="text-xs tracking-[0.5em] text-gray-500 uppercase">Generative Trip-Hop Engine</p>
          
          {/* Simulación de aberración cromática */}
          <div className="absolute top-0 left-0 w-full h-full text-red-500 opacity-30 select-none translate-x-1 -z-10">
             {isActive ? 'F_RAG_MENTA' : 'STOP_PED'}
          </div>
        </header>

        <section className="w-full space-y-8 bg-black/40 backdrop-blur-md p-8 border border-white/10 rounded-sm">
          <div className="grid grid-cols-2 gap-4">
            <div className="flex flex-col">
              <label className="text-[10px] uppercase text-gray-400 mb-2">Glitch Intensity</label>
              <input 
                type="range" 
                min="0" 
                max="200" 
                value={glitchLevel} 
                onChange={(e) => setGlitchLevel(parseInt(e.target.value))}
                className="w-full accent-white bg-gray-800 h-1 appearance-none cursor-crosshair"
              />
            </div>
            <div className="flex flex-col">
              <label className="text-[10px] uppercase text-gray-400 mb-2">BPM / Velocity</label>
              <input 
                type="range" 
                min="60" 
                max="140" 
                value={bpm} 
                onChange={(e) => setBpm(parseInt(e.target.value))}
                className="w-full accent-white bg-gray-800 h-1 appearance-none cursor-crosshair"
              />
            </div>
          </div>

          <div className="flex items-center justify-between border-t border-b border-white/10 py-4">
            <div className="flex gap-1">
              {[...Array(16)].map((_, i) => (
                <div 
                  key={i} 
                  className={`h-6 w-2 transition-all duration-75 ${currentStep === i ? 'bg-white scale-y-125' : 'bg-white/10'}`}
                />
              ))}
            </div>
            <div className="text-right">
              <span className="block text-[10px] text-gray-500 uppercase">Status</span>
              <span className="text-sm font-bold">{isActive ? 'SYNC_ACTIVE' : 'IDLE'}</span>
            </div>
          </div>

          <button 
            onClick={toggleApp}
            className={`w-full py-6 text-xl font-bold uppercase tracking-widest transition-all
              ${isActive 
                ? 'bg-red-600 hover:bg-red-700 text-white shadow-[0_0_20px_rgba(220,38,38,0.4)]' 
                : 'bg-white hover:bg-gray-200 text-black shadow-[0_0_20px_rgba(255,255,255,0.2)]'
              }`}
          >
            {isActive ? 'Terminate Connection' : 'Establish Link'}
          </button>
        </section>

        <footer className="mt-12 grid grid-cols-3 gap-8 w-full opacity-30 text-[9px] uppercase tracking-tighter">
          <div>
            <p>Source: Unknown</p>
            <p>Freq: 44.1kHz</p>
          </div>
          <div className="text-center italic">
            "Everything is broken, yet the harmony remains."
          </div>
          <div className="text-right">
            <p>Auth: Admin_009</p>
            <p>© 2026 Fragmenta Labs</p>
          </div>
        </footer>
      </main>

      <style>{`
        @keyframes glitch {
          0% { transform: translate(0); }
          20% { transform: translate(-2px, 2px); }
          40% { transform: translate(-2px, -2px); }
          60% { transform: translate(2px, 2px); }
          80% { transform: translate(2px, -2px); }
          100% { transform: translate(0); }
        }
        input[type='range']::-webkit-slider-thumb {
          -webkit-appearance: none;
          height: 16px;
          width: 8px;
          background: white;
          border-radius: 0;
        }
      `}</style>
    </div>
  );
};

export default App;