import React, { useState, useEffect, useRef } from 'react';
import { Mic, MicOff, Ghost, Skull, ShieldAlert, VolumeX } from 'lucide-react';

const App = () => {
  const [gameState, setGameState] = useState('start'); // start, playing, jumpscare, consequence
  const [noiseLevel, setNoiseLevel] = useState(0);
  const [suspicion, setSuspicion] = useState(0);
  const [isListening, setIsListening] = useState(false);
  
  const audioContext = useRef(null);
  const analyser = useRef(null);
  const dataArray = useRef(null);

  const startMic = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      audioContext.current = new (window.AudioContext || window.webkitAudioContext)();
      analyser.current = audioContext.current.createAnalyser();
      const source = audioContext.current.createMediaStreamSource(stream);
      source.connect(analyser.current);
      analyser.current.fftSize = 256;
      dataArray.current = new Uint8Array(analyser.current.frequencyBinCount);
      setIsListening(true);
      setGameState('playing');
      gameLoop();
    } catch (err) { console.error("Mic error:", err); }
  };

  const gameLoop = () => {
    if (!analyser.current) return;
    analyser.current.getByteFrequencyData(dataArray.current);
    const average = dataArray.current.reduce((a, b) => a + b) / dataArray.current.length;
    setNoiseLevel(average);

    if (average > 50) {
      setSuspicion(prev => {
        const next = prev + 1.5;
        if (next >= 100) triggerEnding();
        return next;
      });
    } else {
      setSuspicion(prev => Math.max(0, prev - 0.2));
    }

    if (gameState === 'playing') requestAnimationFrame(gameLoop);
  };

  const triggerEnding = () => {
    setGameState('jumpscare');
    setTimeout(() => {
      setGameState('consequence');
    }, 1500);
  };

  return (
    <div className="min-h-screen bg-black text-white font-mono flex flex-col items-center justify-center overflow-hidden">
      
      {gameState === 'start' && (
        <div className="text-center p-8 border-2 border-zinc-900 bg-zinc-950 max-w-lg">
          <h1 className="text-4xl font-black mb-4 tracking-tighter text-red-600">SILENCE OR SEIZURE</h1>
          <p className="text-zinc-500 text-sm mb-8 leading-relaxed">
            Your sibling is playing a horror game. You are the "watcher." 
            If your real-life mic detects a scream... the door opens.
          </p>
          <button onClick={startMic} className="w-full py-4 bg-red-900 hover:bg-red-700 font-bold uppercase tracking-widest transition-all">
            Begin Night
          </button>
        </div>
      )}

      {gameState === 'playing' && (
        <div className="relative w-full h-screen flex flex-col items-center justify-center bg-zinc-950">
          {/* Game Simulation */}
          <div className={`transition-all duration-75 ${noiseLevel > 40 ? 'scale-110 blur-sm' : ''}`}>
            <Ghost size={200} className="text-white/5" />
          </div>

          {/* Suspicion / Door Progress */}
          <div className="absolute right-0 top-0 h-full bg-black/80 transition-all duration-300 border-l border-red-900/30"
               style={{ width: `${suspicion}%` }}>
            <div className="absolute top-1/2 left-2 -translate-y-1/2 flex flex-col gap-8 opacity-40">
                <div className="w-1 h-1 bg-red-500 rounded-full shadow-[0_0_10px_red]" />
                <div className="w-1 h-1 bg-red-500 rounded-full shadow-[0_0_10px_red]" />
            </div>
          </div>

          {/* HUD */}
          <div className="absolute bottom-10 w-full px-20 flex justify-between items-end">
            <div className="space-y-4">
              <div className="flex items-center gap-2 text-red-600 animate-pulse">
                <VolumeX size={20} />
                <span className="text-xs font-bold uppercase tracking-widest">Mic Active</span>
              </div>
              <div className="w-64 h-2 bg-zinc-900 border border-white/5 rounded-full overflow-hidden">
                <div className="h-full bg-white transition-all duration-75" style={{ width: `${noiseLevel * 2}%` }} />
              </div>
            </div>
            
            <div className="text-right">
              <p className="text-[10px] text-zinc-600 uppercase">Detection Risk</p>
              <p className={`text-2xl font-black ${suspicion > 70 ? 'text-red-600' : 'text-zinc-400'}`}>
                {Math.round(suspicion)}%
              </p>
            </div>
          </div>
        </div>
      )}

      {gameState === 'jumpscare' && (
        <div className="fixed inset-0 bg-white flex items-center justify-center z-[100] animate-pulse">
          <h1 className="text-black text-9xl font-black italic">! ! !</h1>
          <audio autoPlay>
             <source src="https://www.soundjay.com/human/sounds/woman-scream-01.mp3" type="audio/mpeg" />
          </audio>
        </div>
      )}

      {gameState === 'consequence' && (
        <div className="fixed inset-0 bg-black flex flex-col items-center justify-center p-12 text-center">
          <div className="max-w-2xl space-y-8">
            <h2 className="text-zinc-700 text-xs uppercase tracking-[1em] mb-4">The Aftermath</h2>
            <div className="space-y-6 text-zinc-400 font-serif italic text-lg leading-relaxed">
              <p>"The door didn't just creak. It slammed against the wall."</p>
              <p>"She didn't ask what we were doing. She already knew."</p>
              <p>"The yelling lasted for two hours. The phone was gone for a month."</p>
              <p className="text-red-900 not-italic font-mono uppercase font-black text-2xl mt-12">Discipline Protocol: Finalized.</p>
            </div>
            <button 
              onClick={() => setGameState('start')}
              className="mt-12 px-8 py-3 border border-zinc-800 hover:border-white text-zinc-600 hover:text-white transition-all uppercase text-xs tracking-widest"
            >
              Reset Night
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;