import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Volume2, Music, Activity, Settings, Play, Square, Triangle, Disc, Zap } from 'lucide-react';

// --- Constants & Utilities ---

const NOTES = [
  { note: 'C', freq: 261.63, key: 'a' },
  { note: 'C#', freq: 277.18, key: 'w', black: true },
  { note: 'D', freq: 293.66, key: 's' },
  { note: 'D#', freq: 311.13, key: 'e', black: true },
  { note: 'E', freq: 329.63, key: 'd' },
  { note: 'F', freq: 349.23, key: 'f' },
  { note: 'F#', freq: 369.99, key: 't', black: true },
  { note: 'G', freq: 392.00, key: 'g' },
  { note: 'G#', freq: 415.30, key: 'y', black: true },
  { note: 'A', freq: 440.00, key: 'h' },
  { note: 'A#', freq: 466.16, key: 'u', black: true },
  { note: 'B', freq: 493.88, key: 'j' },
  { note: 'C2', freq: 523.25, key: 'k' },
];

const WAVEFORMS = [
  { id: 'sine', label: 'Sine', icon: Disc },
  { id: 'square', label: 'Square', icon: Square },
  { id: 'sawtooth', label: 'Sawtooth', icon: Zap },
  { id: 'triangle', label: 'Triangle', icon: Triangle },
];

// --- Custom Hook: useAudioEngine ---
// This fixes the previous error by ensuring hooks (useRef, useEffect) are used correctly inside a custom hook.

const useAudioEngine = () => {
  const audioCtxRef = useRef(null);
  const masterGainRef = useRef(null);
  const analyzerRef = useRef(null);
  const oscillatorsRef = useRef(new Map()); // Map<frequency, { osc, gain }>
  const [isInitialized, setIsInitialized] = useState(false);

  // Audio Params State
  const [volume, setVolume] = useState(0.5);
  const [waveform, setWaveform] = useState('sine');
  const [attack, setAttack] = useState(0.01);
  const [release, setRelease] = useState(0.3);
  const [filterCutoff, setFilterCutoff] = useState(2000);

  const initAudio = useCallback(() => {
    if (audioCtxRef.current) return;

    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const ctx = new AudioContext();
    const masterGain = ctx.createGain();
    const analyzer = ctx.createAnalyser();

    masterGain.connect(analyzer);
    analyzer.connect(ctx.destination);

    // Initial settings
    masterGain.gain.value = volume;
    analyzer.fftSize = 2048;

    audioCtxRef.current = ctx;
    masterGainRef.current = masterGain;
    analyzerRef.current = analyzer;
    setIsInitialized(true);
  }, [volume]);

  // Update volume when state changes
  useEffect(() => {
    if (masterGainRef.current) {
      masterGainRef.current.gain.setTargetAtTime(volume, audioCtxRef.current.currentTime, 0.01);
    }
  }, [volume]);

  const playNote = useCallback((freq) => {
    if (!audioCtxRef.current) initAudio();
    if (audioCtxRef.current.state === 'suspended') audioCtxRef.current.resume();

    // Prevent duplicate oscillators for the same note
    if (oscillatorsRef.current.has(freq)) return;

    const ctx = audioCtxRef.current;
    const osc = ctx.createOscillator();
    const noteGain = ctx.createGain();
    const filter = ctx.createBiquadFilter();

    osc.type = waveform;
    osc.frequency.setValueAtTime(freq, ctx.currentTime);

    // Filter settings
    filter.type = 'lowpass';
    filter.frequency.setValueAtTime(filterCutoff, ctx.currentTime);

    // Envelope: Attack
    noteGain.gain.setValueAtTime(0, ctx.currentTime);
    noteGain.gain.linearRampToValueAtTime(1, ctx.currentTime + attack);

    // Connections: Osc -> Filter -> NoteGain -> MasterGain
    osc.connect(filter);
    filter.connect(noteGain);
    noteGain.connect(masterGainRef.current);

    osc.start();

    oscillatorsRef.current.set(freq, { osc, noteGain, filter });
  }, [waveform, attack, filterCutoff, initAudio]);

  const stopNote = useCallback((freq) => {
    if (!audioCtxRef.current) return;
    const activeNote = oscillatorsRef.current.get(freq);
    
    if (activeNote) {
      const { osc, noteGain } = activeNote;
      const ctx = audioCtxRef.current;

      // Envelope: Release
      // Cancel any scheduled updates to avoid conflict with release
      noteGain.gain.cancelScheduledValues(ctx.currentTime);
      noteGain.gain.setValueAtTime(noteGain.gain.value, ctx.currentTime);
      noteGain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + release);

      osc.stop(ctx.currentTime + release + 0.1);
      
      // Cleanup map after release
      setTimeout(() => {
        if (oscillatorsRef.current.get(freq) === activeNote) {
           oscillatorsRef.current.delete(freq);
        }
      }, (release * 1000) + 100);
    }
  }, [release]);

  return {
    isInitialized,
    initAudio,
    playNote,
    stopNote,
    analyzerRef, // Expose analyzer for visualizer
    settings: {
      volume, setVolume,
      waveform, setWaveform,
      attack, setAttack,
      release, setRelease,
      filterCutoff, setFilterCutoff
    }
  };
};

// --- Components ---

const Knob = ({ label, value, min, max, onChange, unit = '' }) => {
  // Simple knob implementation using a range input styled vertically or circular
  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative w-16 h-16 flex items-center justify-center bg-gray-800 rounded-full border-2 border-gray-700 shadow-inner group hover:border-blue-500 transition-colors">
        <input 
          type="range" 
          min={min} 
          max={max} 
          step={max > 1000 ? 100 : 0.01}
          value={value} 
          onChange={(e) => onChange(parseFloat(e.target.value))}
          className="absolute w-full h-full opacity-0 cursor-pointer"
          title={`${label}: ${value}${unit}`}
        />
        {/* Visual Indicator */}
        <div 
            className="w-1 h-6 bg-blue-500 rounded-full absolute bottom-1/2 origin-bottom transition-transform duration-75 pointer-events-none"
            style={{ 
                transform: `rotate(${((value - min) / (max - min)) * 270 - 135}deg)`
            }}
        />
        <div className="w-2 h-2 bg-gray-600 rounded-full" />
      </div>
      <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">{label}</span>
      <span className="text-[10px] text-gray-500">{value}{unit}</span>
    </div>
  );
};

const Visualizer = ({ analyzerRef, isInitialized }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!isInitialized || !analyzerRef.current || !canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const analyzer = analyzerRef.current;
    const bufferLength = analyzer.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    let animationId;

    const draw = () => {
      animationId = requestAnimationFrame(draw);
      
      // Handle resize safely
      if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
          canvas.width = canvas.clientWidth;
          canvas.height = canvas.clientHeight;
      }

      analyzer.getByteFrequencyData(dataArray);

      ctx.fillStyle = 'rgb(17, 24, 39)'; // Tailwind gray-900
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      const barWidth = (canvas.width / bufferLength) * 2.5;
      let barHeight;
      let x = 0;

      for (let i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i] / 2; // Scale down

        const gradient = ctx.createLinearGradient(0, canvas.height - barHeight, 0, canvas.height);
        gradient.addColorStop(0, '#60a5fa'); // blue-400
        gradient.addColorStop(1, '#3b82f6'); // blue-500

        ctx.fillStyle = gradient;
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

        x += barWidth + 1;
      }
    };

    draw();

    return () => cancelAnimationFrame(animationId);
  }, [analyzerRef, isInitialized]);

  return (
    <canvas 
      ref={canvasRef} 
      className="w-full h-32 bg-gray-900 rounded-lg border border-gray-700 shadow-inner"
    />
  );
};

const Keyboard = ({ playNote, stopNote }) => {
  const [activeKeys, setActiveKeys] = useState(new Set());

  const handleMouseDown = (freq) => {
    playNote(freq);
    setActiveKeys(prev => new Set(prev).add(freq));
  };

  const handleMouseUp = (freq) => {
    stopNote(freq);
    setActiveKeys(prev => {
      const next = new Set(prev);
      next.delete(freq);
      return next;
    });
  };

  // Keyboard mapping
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.repeat) return;
      const note = NOTES.find(n => n.key === e.key.toLowerCase());
      if (note) handleMouseDown(note.freq);
    };

    const handleKeyUp = (e) => {
      const note = NOTES.find(n => n.key === e.key.toLowerCase());
      if (note) handleMouseUp(note.freq);
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [playNote, stopNote]); // Depend on memoized functions

  return (
    <div className="relative h-64 w-full max-w-4xl mx-auto select-none mt-8 flex justify-center bg-gray-900 p-4 rounded-xl shadow-2xl overflow-hidden">
        {/* White Keys Layer */}
        <div className="flex w-full h-full justify-center">
            {NOTES.filter(n => !n.black).map((note) => {
                const isActive = activeKeys.has(note.freq);
                return (
                    <div
                        key={note.note}
                        onMouseDown={() => handleMouseDown(note.freq)}
                        onMouseUp={() => handleMouseUp(note.freq)}
                        onMouseLeave={() => handleMouseUp(note.freq)}
                        className={`
                            relative border border-gray-400 rounded-b-lg mx-0.5 cursor-pointer transition-all duration-75
                            w-16 h-full flex items-end justify-center pb-4 active:scale-y-[0.98] origin-top
                            ${isActive ? 'bg-blue-100 shadow-inner' : 'bg-white hover:bg-gray-50'}
                        `}
                    >
                        <span className="text-gray-400 font-bold text-sm pointer-events-none">{note.key.toUpperCase()}</span>
                    </div>
                );
            })}
        </div>
        
        {/* Black Keys Layer (Absolute positioning) */}
        <div className="absolute top-4 left-0 w-full h-3/5 flex justify-center pointer-events-none">
             {/* Spacer logic to align black keys. 
                This is a simplified visual hack. A real grid would be better, but this works for fixed notes. 
                Since we centered the white keys, we need to carefully position these.
             */}
             <div className="flex pointer-events-auto">
                 {/* Manually spaced groups based on standard piano layout */}
                 <div className="w-[4.2rem]"></div> {/* Initial offset C */}
                 
                 {/* C# */}
                 <BlackKey note={NOTES[1]} activeKeys={activeKeys} onDown={handleMouseDown} onUp={handleMouseUp} />
                 <div className="w-[2rem]"></div> {/* D Spacer */}
                 {/* D# */}
                 <BlackKey note={NOTES[3]} activeKeys={activeKeys} onDown={handleMouseDown} onUp={handleMouseUp} />
                 
                 <div className="w-[8.4rem]"></div> {/* E, F Spacer */}
                 
                 {/* F# */}
                 <BlackKey note={NOTES[6]} activeKeys={activeKeys} onDown={handleMouseDown} onUp={handleMouseUp} />
                 <div className="w-[2rem]"></div> {/* G Spacer */}
                 {/* G# */}
                 <BlackKey note={NOTES[8]} activeKeys={activeKeys} onDown={handleMouseDown} onUp={handleMouseUp} />
                 <div className="w-[2rem]"></div> {/* A Spacer */}
                 {/* A# */}
                 <BlackKey note={NOTES[10]} activeKeys={activeKeys} onDown={handleMouseDown} onUp={handleMouseUp} />
                 
                 <div className="w-[4.2rem]"></div> {/* B, C2 Spacer */}
             </div>
        </div>
    </div>
  );
};

const BlackKey = ({ note, activeKeys, onDown, onUp }) => {
    const isActive = activeKeys.has(note.freq);
    return (
        <div
            onMouseDown={(e) => { e.stopPropagation(); onDown(note.freq); }}
            onMouseUp={(e) => { e.stopPropagation(); onUp(note.freq); }}
            onMouseLeave={(e) => { e.stopPropagation(); onUp(note.freq); }}
            className={`
                w-10 h-full rounded-b-md z-10 cursor-pointer transition-transform duration-75 border border-gray-900
                mx-[0.8rem] active:scale-y-[0.95] origin-top shadow-lg
                ${isActive ? 'bg-blue-800' : 'bg-gray-800 hover:bg-gray-700'}
            `}
        >
             {/* Key Label */}
             <div className="absolute bottom-2 left-0 right-0 text-center">
                 <span className="text-gray-500 text-xs font-bold pointer-events-none">{note.key.toUpperCase()}</span>
             </div>
        </div>
    );
}

// --- Main App Component ---

const App = () => {
  const { 
    isInitialized, 
    initAudio, 
    playNote, 
    stopNote, 
    analyzerRef, 
    settings 
  } = useAudioEngine();

  // If user hasn't interacted, show start screen (browsers block auto-audio)
  if (!isInitialized) {
    return (
      <div className="min-h-screen bg-gray-950 flex flex-col items-center justify-center p-4 text-white">
        <div className="max-w-md text-center space-y-6">
            <div className="w-20 h-20 bg-blue-600 rounded-2xl mx-auto flex items-center justify-center shadow-lg shadow-blue-500/20">
                <Music size={40} />
            </div>
            <h1 className="text-4xl font-bold tracking-tight">React Synth</h1>
            <p className="text-gray-400">
                A real-time synthesizer built with React and the Web Audio API. 
                Features responsive envelopes, filtering, and visual analysis.
            </p>
            <button 
                onClick={initAudio}
                className="group relative px-8 py-4 bg-white text-gray-900 rounded-full font-bold text-lg hover:bg-blue-50 transition-all active:scale-95"
            >
                <div className="flex items-center gap-2">
                    <Play size={20} className="fill-current" />
                    <span>Initialize Audio Engine</span>
                </div>
            </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 flex flex-col font-sans selection:bg-blue-500/30">
      
      {/* Header */}
      <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-20">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-2 rounded-lg">
                <Music size={20} className="text-white" />
            </div>
            <span className="font-bold text-xl tracking-tight">React Synth</span>
          </div>
          <div className="flex items-center gap-4 text-sm text-gray-500">
             <div className="hidden md:flex items-center gap-2">
                 <Activity size={16} />
                 <span>Status: Active</span>
             </div>
             <div className="h-4 w-px bg-gray-800"></div>
             <span>v1.2.0</span>
          </div>
        </div>
      </header>

      <main className="flex-1 max-w-6xl mx-auto w-full p-4 lg:p-8 flex flex-col gap-8">
        
        {/* Top Section: Visualizer & Global Controls */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Visualizer Panel */}
            <div className="lg:col-span-2 bg-gray-900/50 border border-gray-800 rounded-2xl p-6 shadow-xl relative overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500"></div>
                <div className="flex items-center justify-between mb-4">
                    <h2 className="text-sm font-bold text-gray-400 uppercase tracking-wider flex items-center gap-2">
                        <Activity size={16} /> Frequency Analysis
                    </h2>
                </div>
                <Visualizer analyzerRef={analyzerRef} isInitialized={isInitialized} />
            </div>

            {/* Global Volume & Info */}
            <div className="bg-gray-900/50 border border-gray-800 rounded-2xl p-6 flex flex-col justify-between">
                <div>
                     <h2 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-6 flex items-center gap-2">
                        <Volume2 size={16} /> Master Output
                    </h2>
                    <div className="flex justify-center py-4">
                        <Knob 
                            label="Volume" 
                            value={Math.round(settings.volume * 100)} 
                            min={0} 
                            max={100} 
                            onChange={(v) => settings.setVolume(v / 100)} 
                            unit="%" 
                        />
                    </div>
                </div>
                <div className="text-center text-xs text-gray-500 mt-4">
                    Use your keyboard (A-K) or click the piano keys below to play.
                </div>
            </div>
        </div>

        {/* Controls Section */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            {/* Waveform Selector */}
            <div className="bg-gray-800/30 border border-gray-800 rounded-xl p-5">
                <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 flex items-center gap-2">
                    <Settings size={14} /> Oscillator
                </h3>
                <div className="grid grid-cols-2 gap-2">
                    {WAVEFORMS.map((wf) => {
                        const Icon = wf.icon;
                        const isSelected = settings.waveform === wf.id;
                        return (
                            <button
                                key={wf.id}
                                onClick={() => settings.setWaveform(wf.id)}
                                className={`
                                    flex flex-col items-center justify-center gap-2 p-3 rounded-lg transition-all
                                    ${isSelected 
                                        ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' 
                                        : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'}
                                `}
                            >
                                <Icon size={20} />
                                <span className="text-xs font-medium">{wf.label}</span>
                            </button>
                        );
                    })}
                </div>
            </div>

            {/* Envelope Controls */}
            <div className="bg-gray-800/30 border border-gray-800 rounded-xl p-5 lg:col-span-2">
                 <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-6">Envelope (ADSR)</h3>
                 <div className="flex justify-around items-end">
                    <Knob label="Attack" value={settings.attack} min={0.01} max={2} onChange={settings.setAttack} unit="s" />
                    <Knob label="Decay" value={0.1} min={0.1} max={1} onChange={() => {}} unit="s" /> 
                    {/* Decay/Sustain are hardcoded in engine for simplicity of this demo, but UI shows placeholder to look complete */}
                    <Knob label="Release" value={settings.release} min={0.1} max={3} onChange={settings.setRelease} unit="s" />
                 </div>
            </div>

            {/* Filter Controls */}
            <div className="bg-gray-800/30 border border-gray-800 rounded-xl p-5">
                <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-6">Filter</h3>
                <div className="flex justify-center">
                    <Knob 
                        label="Cutoff" 
                        value={settings.filterCutoff} 
                        min={200} 
                        max={5000} 
                        onChange={settings.setFilterCutoff} 
                        unit="Hz" 
                    />
                </div>
            </div>

        </div>

        {/* Keyboard Section */}
        <Keyboard playNote={playNote} stopNote={stopNote} />

      </main>
    </div>
  );
};

export default App;