import React, { useState, useEffect, useRef, useCallback } from 'react';
import { MousePointer2, Fish, Music, Home, Settings, Battery, Wifi } from 'lucide-react';

// --- 유틸리티 및 오디오 ---
const playTone = (frequency) => {
  try {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioCtx.createOscillator();
    const gainNode = audioCtx.createGain();
    
    // 고양이 울음소리와 비슷하게 부드러운 사인파 사용
    oscillator.type = 'sine';
    oscillator.frequency.value = frequency;
    
    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    
    oscillator.start();
    // 소리가 서서히 줄어들도록 설정 (야옹~ 하는 느낌)
    gainNode.gain.setValueAtTime(1, audioCtx.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
    
    setTimeout(() => {
      oscillator.stop();
      audioCtx.close();
    }, 500);
  } catch (e) {
    console.log("Audio not supported or interaction required first.");
  }
};

// --- 앱 컴포넌트들 ---

// 1. 레이저 포인터 앱
const LaserApp = () => {
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [score, setScore] = useState(0);
  const containerRef = useRef(null);

  const moveLaser = useCallback(() => {
    setPosition({
      x: Math.random() * 90 + 5, // 5% ~ 95%
      y: Math.random() * 90 + 5,
    });
  }, []);

  useEffect(() => {
    const interval = setInterval(moveLaser, 1200); // 1.2초마다 이동
    return () => clearInterval(interval);
  }, [moveLaser]);

  const handleCatch = (e) => {
    e.stopPropagation(); // 부모 터치 이벤트 방지
    setScore(s => s + 1);
    moveLaser(); // 잡으면 바로 도망감
    playTone(800); // 삑! 소리
  };

  return (
    <div 
      ref={containerRef}
      className="relative w-full h-full bg-slate-900 overflow-hidden cursor-none touch-none"
      onClick={moveLaser}
    >
      <div className="absolute top-4 left-4 text-red-500 font-bold text-2xl opacity-50 select-none">
        잡은 횟수: {score}
      </div>
      
      {/* 레이저 점 */}
      <div 
        onClick={handleCatch}
        onTouchStart={handleCatch}
        className="absolute w-12 h-12 bg-red-500 rounded-full shadow-[0_0_20px_10px_rgba(239,68,68,0.8)] transition-all duration-200 ease-out"
        style={{ 
          left: `${position.x}%`, 
          top: `${position.y}%`,
          transform: 'translate(-50%, -50%)'
        }}
      />
    </div>
  );
};

// 2. 물고기 연못 앱
const FishApp = () => {
  const [fishes, setFishes] = useState([]);
  const [ripples, setRipples] = useState([]);

  useEffect(() => {
    // 초기 물고기 생성
    const initialFishes = Array.from({ length: 5 }).map((_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      speed: Math.random() * 0.5 + 0.2,
      direction: Math.random() > 0.5 ? 1 : -1, // 1: 오른쪽, -1: 왼쪽
      size: Math.random() * 20 + 40 // 40px ~ 60px
    }));
    setFishes(initialFishes);

    let animationFrame;
    const animate = () => {
      setFishes(prevFishes => prevFishes.map(fish => {
        let newX = fish.x + (fish.speed * fish.direction);
        let newDirection = fish.direction;
        
        // 화면 밖으로 나가면 방향 전환
        if (newX > 110) newDirection = -1;
        if (newX < -10) newDirection = 1;

        return { ...fish, x: newX, direction: newDirection };
      }));
      animationFrame = requestAnimationFrame(animate);
    };
    
    animationFrame = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationFrame);
  }, []);

  const handleTap = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left;
    const y = (e.clientY || (e.touches && e.touches[0].clientY)) - rect.top;

    const newRipple = { id: Date.now(), x, y };
    setRipples(prev => [...prev, newRipple]);
    
    // 물장구 소리 (낮은 주파수)
    playTone(200);

    // 1초 후 파문 제거
    setTimeout(() => {
      setRipples(prev => prev.filter(r => r.id !== newRipple.id));
    }, 1000);
  };

  return (
    <div 
      className="relative w-full h-full bg-blue-900 overflow-hidden touch-none"
      onClick={handleTap}
      onTouchStart={handleTap}
    >
      {/* 파문 효과 */}
      {ripples.map(ripple => (
        <div 
          key={ripple.id}
          className="absolute border-4 border-blue-300 rounded-full animate-ping opacity-50 pointer-events-none"
          style={{
            left: ripple.x,
            top: ripple.y,
            width: '100px',
            height: '100px',
            transform: 'translate(-50%, -50%)'
          }}
        />
      ))}

      {/* 물고기들 */}
      {fishes.map(fish => (
        <div
          key={fish.id}
          className="absolute text-5xl transition-transform"
          style={{
            left: `${fish.x}%`,
            top: `${fish.y}%`,
            fontSize: `${fish.size}px`,
            transform: `translate(-50%, -50%) scaleX(${fish.direction === 1 ? -1 : 1})`,
            textShadow: '0 4px 8px rgba(0,0,0,0.5)'
          }}
        >
          🐟
        </div>
      ))}
    </div>
  );
};

// 3. 야옹 피아노 앱
const PianoApp = () => {
  const keys = [
    { color: 'bg-rose-400', freq: 261.63, label: '도' }, // C4
    { color: 'bg-orange-400', freq: 293.66, label: '레' }, // D4
    { color: 'bg-yellow-400', freq: 329.63, label: '미' }, // E4
    { color: 'bg-green-400', freq: 349.23, label: '파' }, // F4
    { color: 'bg-blue-400', freq: 392.00, label: '솔' }, // G4
  ];

  const [activeKey, setActiveKey] = useState(null);

  const handlePress = (index, freq) => {
    setActiveKey(index);
    playTone(freq);
    setTimeout(() => setActiveKey(null), 200);
  };

  return (
    <div className="flex w-full h-full bg-slate-800 p-4 gap-2 touch-none">
      {keys.map((key, index) => (
        <div
          key={index}
          className={`flex-1 rounded-2xl flex items-end justify-center pb-8 transition-all duration-100 cursor-pointer select-none
            ${key.color} 
            ${activeKey === index ? 'opacity-70 scale-95 transform translate-y-4' : 'shadow-[0_8px_0_rgba(0,0,0,0.3)]'}
          `}
          onClick={() => handlePress(index, key.freq)}
          onTouchStart={() => handlePress(index, key.freq)}
        >
          {activeKey === index && (
            <span className="absolute top-10 text-white font-bold text-4xl animate-bounce">
              야옹!
            </span>
          )}
          <span className="text-white/50 font-bold text-2xl">{key.label}</span>
        </div>
      ))}
    </div>
  );
};


// --- 메인 운영체제 컴포넌트 ---
export default function App() {
  const [isLocked, setIsLocked] = useState(true);
  const [currentApp, setCurrentApp] = useState(null); // null = 바탕화면
  const [time, setTime] = useState(new Date());

  // 시계 업데이트
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const apps = [
    { id: 'laser', name: '레이저 잡기', icon: <MousePointer2 size={40} className="text-red-500" />, bgColor: 'bg-slate-800' },
    { id: 'fish', name: '연못 낚시', icon: <Fish size={40} className="text-blue-400" />, bgColor: 'bg-blue-900' },
    { id: 'piano', name: '야옹 피아노', icon: <Music size={40} className="text-yellow-400" />, bgColor: 'bg-purple-900' },
  ];

  // 잠금화면
  if (isLocked) {
    return (
      <div className="w-full h-screen bg-slate-900 flex flex-col items-center justify-center text-white select-none">
        <h1 className="text-6xl font-bold mb-2">Nyang OS</h1>
        <div className="text-8xl font-light mb-16">
          {time.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
        </div>
        
        <button 
          onClick={() => setIsLocked(false)}
          className="group relative flex items-center justify-center w-32 h-32 bg-slate-800 rounded-full hover:bg-slate-700 transition-colors animate-pulse"
        >
          {/* 발바닥 모양 아이콘 (CSS로 구현) */}
          <div className="relative w-16 h-16">
            <div className="absolute top-0 left-2 w-4 h-6 bg-pink-400 rounded-full rotate-[-30deg]"></div>
            <div className="absolute top-[-4px] left-6 w-4 h-6 bg-pink-400 rounded-full"></div>
            <div className="absolute top-0 right-2 w-4 h-6 bg-pink-400 rounded-full rotate-[30deg]"></div>
            <div className="absolute bottom-0 left-2 w-12 h-10 bg-pink-400 rounded-full group-hover:scale-110 transition-transform"></div>
          </div>
        </button>
        <p className="mt-8 text-slate-400 animate-bounce">발바닥을 터치하여 잠금해제</p>
      </div>
    );
  }

  return (
    <div className="w-full h-screen bg-black overflow-hidden flex flex-col font-sans select-none">
      
      {/* 상단 상태 표시줄 */}
      <div className="h-8 bg-slate-900 text-slate-300 flex justify-between items-center px-4 text-sm z-50">
        <div className="flex gap-2 items-center">
          <span className="font-bold">Nyang OS</span>
        </div>
        <div className="flex gap-4 items-center">
          <Wifi size={14} />
          <Battery size={16} />
          <span>{time.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}</span>
        </div>
      </div>

      {/* 메인 콘텐츠 영역 */}
      <div className="flex-1 relative bg-gradient-to-b from-slate-800 to-slate-950">
        
        {/* 바탕화면 */}
        {!currentApp && (
          <div className="p-8 grid grid-cols-2 md:grid-cols-3 gap-8 max-w-2xl mx-auto mt-10">
            {apps.map(app => (
              <button
                key={app.id}
                onClick={() => setCurrentApp(app.id)}
                className="flex flex-col items-center gap-3 group"
              >
                <div className={`w-28 h-28 ${app.bgColor} rounded-3xl flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform group-active:scale-95`}>
                  {app.icon}
                </div>
                <span className="text-white font-medium text-lg drop-shadow-md">{app.name}</span>
              </button>
            ))}
          </div>
        )}

        {/* 앱 실행 화면 */}
        {currentApp === 'laser' && <LaserApp />}
        {currentApp === 'fish' && <FishApp />}
        {currentApp === 'piano' && <PianoApp />}

      </div>

      {/* 하단 네비게이션 바 (집사용 - 고양이가 잘 안누르게 작게 배치) */}
      <div className="h-16 bg-slate-900 border-t border-slate-800 flex justify-center items-center gap-12 z-50">
        <button 
          onClick={() => setCurrentApp(null)}
          className="p-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition-colors"
          title="홈 화면으로"
        >
          <Home size={28} />
        </button>
        <button 
          onClick={() => setIsLocked(true)}
          className="p-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition-colors"
          title="화면 잠금"
        >
          <Settings size={28} />
        </button>
      </div>

    </div>
  );
}