import React, { useState, useEffect, useRef } from 'react';
import { Volume2, VolumeX, RefreshCw, List, History, AlertCircle } from 'lucide-react';

export default function App() {
  // 初期状態
  const [inputItems, setInputItems] = useState(() => {
    const saved = localStorage.getItem('rouletteItems');
    return saved !== null ? saved : "1班\n2班\n3班\n4班\n5班\n6班";
  });
  
  const [items, setItems] = useState(() => {
    const saved = localStorage.getItem('rouletteItems');
    if (saved !== null) return saved.split('\n').filter(item => item.trim() !== '');
    return ["1班", "2班", "3班", "4班", "5班", "6班"];
  });

  const [allowDuplicate, setAllowDuplicate] = useState(() => {
    const saved = localStorage.getItem('rouletteAllowDup');
    return saved !== null ? saved === 'true' : true; 
  });

  const [history, setHistory] = useState([]);
  const [initialCount, setInitialCount] = useState(items.length);
  const [isSpinning, setIsSpinning] = useState(false);
  const [soundOn, setSoundOn] = useState(true);
  const [rotation, setRotation] = useState(0);
  const [result, setResult] = useState(null);
  const [showResetConfirm, setShowResetConfirm] = useState(false);

  // 針のアニメーション用ステート
  const [needleRotation, setNeedleRotation] = useState(0);

  const audioCtxRef = useRef(null);
  const animationRef = useRef(null);
  const lastTickAngleRef = useRef(0);

  const getAudioCtx = () => {
    if (!audioCtxRef.current) {
      audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtxRef.current.state === 'suspended') {
      audioCtxRef.current.resume();
    }
    return audioCtxRef.current;
  };

  const playTick = () => {
    if (!soundOn) return;
    try {
      const ctx = getAudioCtx();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(1000, ctx.currentTime);
      osc.frequency.exponentialRampToValueAtTime(100, ctx.currentTime + 0.05);
      gain.gain.setValueAtTime(0.08, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.05);
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      osc.stop(ctx.currentTime + 0.05);
    } catch (e) { console.error(e) }
  };

  const playTada = () => {
    if (!soundOn) return;
    try {
      const ctx = getAudioCtx();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sine';
      [440, 554, 659].forEach((freq, i) => {
        osc.frequency.setValueAtTime(freq, ctx.currentTime + i * 0.1);
      });
      gain.gain.setValueAtTime(0, ctx.currentTime);
      gain.gain.linearRampToValueAtTime(0.2, ctx.currentTime + 0.05);
      gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 1.2);
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      osc.stop(ctx.currentTime + 1.2);
    } catch (e) { console.error(e) }
  };

  useEffect(() => {
    localStorage.setItem('rouletteItems', inputItems);
    localStorage.setItem('rouletteAllowDup', allowDuplicate);
  }, [inputItems, allowDuplicate]);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputItems(value);
    const newItems = value.split('\n').filter(item => item.trim() !== '');
    setItems(newItems);
    setInitialCount(newItems.length);
    setRotation(0);
    setResult(null);
  };

  // スピンアニメーションの実行
  const spin = () => {
    if (items.length === 0 || isSpinning) return;
    
    setIsSpinning(true);
    setResult(null);
    
    const startAngle = rotation;
    const spins = 6 + Math.random() * 4; // 6〜10回転
    const totalRotation = spins * 360;
    const startTime = performance.now();
    const duration = 5000; // 5秒かけて回転

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // イージング関数 (Quartic Out)
      const easeOut = 1 - Math.pow(1 - progress, 4);
      const currentRotation = startAngle + totalRotation * easeOut;
      
      setRotation(currentRotation);

      // 境界（ピン）を通過したかチェック
      const anglePerItem = 360 / items.length;
      // 12時の位置（-90度オフセット）を基準にする
      const currentRelativeAngle = (currentRotation) % 360;
      
      // どのセグメントにいるか計算し、境界を越えた瞬間に音を鳴らす
      const currentSegment = Math.floor(currentRelativeAngle / anglePerItem);
      const lastSegment = Math.floor(lastTickAngleRef.current / anglePerItem);
      
      if (currentSegment !== lastSegment) {
        playTick();
        // 針を弾く（ピンが針を押し上げるモーション）
        setNeedleRotation(-25); 
        lastTickAngleRef.current = currentRelativeAngle;
      } else {
        // 針が徐々に戻る
        setNeedleRotation(prev => prev * 0.85);
      }

      if (progress < 1) {
        animationRef.current = requestAnimationFrame(animate);
      } else {
        finishSpin(currentRotation);
      }
    };

    animationRef.current = requestAnimationFrame(animate);
  };

  const finishSpin = (finalRotation) => {
    setIsSpinning(false);
    setNeedleRotation(0);
    
    const anglePerItem = 360 / items.length;
    const normalizedRotation = finalRotation % 360;
    // 針は上(270度方向)にあるため、そこに来るインデックスを計算
    const topPosAngle = (360 - normalizedRotation + 270) % 360;
    const selectedIndex = Math.floor(topPosAngle / anglePerItem) % items.length;
    
    const selected = items[selectedIndex];
    setResult(selected);
    setHistory(prev => [selected, ...prev]);
    playTada();

    if (!allowDuplicate) {
      const newItems = items.filter((_, i) => i !== selectedIndex);
      setItems(newItems);
      setInputItems(newItems.join('\n'));
    }
  };

  const executeReset = () => {
    const defaultItems = "1班\n2班\n3班\n4班\n5班\n6班";
    setInputItems(defaultItems);
    setItems(defaultItems.split('\n'));
    setInitialCount(6);
    setHistory([]);
    setResult(null);
    setRotation(0);
    localStorage.removeItem('rouletteItems');
    localStorage.removeItem('rouletteAllowDup');
    setShowResetConfirm(false);
  };

  // SVG描画用
  const colors = ['#fef3c7', '#fce7f3', '#e0f2fe', '#dcfce7', '#ffedd5', '#f3e8ff', '#e2e8f0', '#ffe4e6'];
  const radius = 180;
  const cx = 200;
  const cy = 200;

  const createPieSlice = (index, total) => {
    const startAngle = (index * 360) / total;
    const endAngle = ((index + 1) * 360) / total;
    const startRad = (startAngle * Math.PI) / 180;
    const endRad = (endAngle * Math.PI) / 180;
    const x1 = cx + radius * Math.cos(startRad);
    const y1 = cy + radius * Math.sin(startRad);
    const x2 = cx + radius * Math.cos(endRad);
    const y2 = cy + radius * Math.sin(endRad);
    const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
    return `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
  };

  return (
    <div className="min-h-screen bg-[#f8fafc] p-4 md:p-8 font-sans text-slate-700 relative overflow-hidden">
      
      {/* リセット確認モーダル */}
      {showResetConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onClick={() => setShowResetConfirm(false)}></div>
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 relative z-10 animate-in zoom-in duration-200">
            <div className="flex items-center gap-3 text-red-500 mb-4">
              <AlertCircle className="w-6 h-6" />
              <h3 className="text-lg font-bold">リセットの確認</h3>
            </div>
            <p className="text-slate-600 mb-6 text-sm leading-relaxed">
              リストと履歴を初期状態に戻しますか？
            </p>
            <div className="flex gap-3">
              <button onClick={() => setShowResetConfirm(false)} className="flex-1 py-2 rounded-lg bg-slate-100 text-slate-600 font-bold hover:bg-slate-200 transition-colors">キャンセル</button>
              <button onClick={executeReset} className="flex-1 py-2 rounded-lg bg-red-500 text-white font-bold hover:bg-red-600 shadow-md shadow-red-200 transition-colors">リセット</button>
            </div>
          </div>
        </div>
      )}

      <div className="max-w-5xl mx-auto flex flex-col lg:flex-row gap-6">
        
        {/* 左側: ルーレット表示エリア */}
        <div className="w-full lg:w-1/2 flex flex-col">
          <div className="bg-white rounded-2xl shadow-sm border-t-4 border-indigo-400 p-8 flex flex-col items-center flex-1">
            
            <div className="relative w-full max-w-[360px] aspect-square">
              {/* 針 (Pointer) */}
              <div 
                className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4 z-20 transition-transform duration-75 origin-bottom"
                style={{ transform: `translateX(-50%) rotate(${needleRotation}deg)` }}
              >
                <svg width="30" height="50" viewBox="0 0 30 50">
                  <path d="M15 50 L0 0 L30 0 Z" fill="#ef4444" stroke="#b91c1c" strokeWidth="2" />
                  <circle cx="15" cy="42" r="4" fill="white" />
                </svg>
              </div>

              <svg viewBox="0 0 400 400" className="w-full h-full drop-shadow-lg">
                <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) translate(-${cx}, -${cy})`}>
                  {items.length === 0 ? (
                    <circle cx={cx} cy={cy} r={radius} fill="#f1f5f9" stroke="#cbd5e1" strokeWidth="2" />
                  ) : (
                    items.map((item, i) => {
                      const anglePerItem = 360 / items.length;
                      const startAngle = i * anglePerItem;
                      const textAngle = startAngle + anglePerItem / 2;
                      const textRad = (textAngle * Math.PI) / 180;
                      const tx = cx + radius * 0.65 * Math.cos(textRad);
                      const ty = cy + radius * 0.65 * Math.sin(textRad);
                      
                      // ピンの座標（境界線上の外周）
                      const pinRad = (startAngle * Math.PI) / 180;
                      const px = cx + (radius - 5) * Math.cos(pinRad);
                      const py = cy + (radius - 5) * Math.sin(pinRad);

                      return (
                        <g key={i}>
                          <path d={createPieSlice(i, items.length)} fill={colors[i % colors.length]} stroke="#ffffff" strokeWidth="2" />
                          <text
                            x={tx} y={ty} transform={`rotate(${textAngle}, ${tx}, ${ty})`}
                            textAnchor="middle" alignmentBaseline="middle" fill="#334155" 
                            fontSize={items.length > 10 ? "14" : "22"} fontWeight="900"
                          >
                            {item}
                          </text>
                          {/* ピン (障害物) */}
                          <circle cx={px} cy={py} r="4" fill="#64748b" stroke="white" strokeWidth="1.5" />
                        </g>
                      );
                    })
                  )}
                  {/* 外枠の輪 */}
                  <circle cx={cx} cy={cy} r={radius} fill="none" stroke="#e2e8f0" strokeWidth="4" />
                </g>
                <circle cx={cx} cy={cy} r="15" fill="white" stroke="#cbd5e1" strokeWidth="4" />
              </svg>
            </div>

            <div className="mt-8 flex flex-col items-center min-h-[90px] justify-center text-center">
              {isSpinning ? (
                <div className="text-3xl font-bold text-slate-300 animate-pulse tracking-widest">抽選中...</div>
              ) : result ? (
                <div className="text-5xl font-black text-indigo-600 animate-in zoom-in duration-300">{result}</div>
              ) : (
                <div className="text-4xl font-black text-indigo-400">READY</div>
              )}
              <div className="text-slate-400 mt-3 text-sm font-medium bg-slate-100 px-4 py-1 rounded-full">
                候補数: {items.length} / {initialCount}
              </div>
            </div>

          </div>
        </div>

        {/* 右側: 操作エリア */}
        <div className="w-full lg:w-1/2 flex flex-col gap-5">
          <div className="bg-white rounded-2xl shadow-sm p-5 flex flex-col gap-4">
            <button 
              onClick={spin} 
              disabled={isSpinning || items.length === 0}
              className="w-full py-4 bg-gradient-to-r from-orange-400 to-orange-500 text-white font-black text-3xl rounded-xl shadow-lg hover:shadow-orange-200 active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100"
            >
              START !
            </button>
            
            <div className="flex justify-between items-center bg-slate-50 p-2 rounded-xl">
              <button 
                onClick={() => setSoundOn(!soundOn)}
                disabled={isSpinning}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-bold transition-colors ${soundOn ? 'bg-teal-100 text-teal-700' : 'bg-slate-200 text-slate-500'}`}
              >
                {soundOn ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
                音 {soundOn ? 'ON' : 'OFF'}
              </button>

              <div className="flex bg-slate-200 p-1 rounded-lg">
                <button onClick={() => setAllowDuplicate(true)} disabled={isSpinning} className={`px-4 py-1.5 text-xs font-bold rounded-md transition-all ${allowDuplicate ? 'bg-white shadow text-blue-600' : 'text-slate-500'}`}>重複あり</button>
                <button onClick={() => setAllowDuplicate(false)} disabled={isSpinning} className={`px-4 py-1.5 text-xs font-bold rounded-md transition-all ${!allowDuplicate ? 'bg-white shadow text-blue-600' : 'text-slate-500'}`}>なし</button>
              </div>

              <button onClick={() => setShowResetConfirm(true)} disabled={isSpinning} className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-slate-500 hover:text-red-500 transition-colors">
                <RefreshCw className="w-4 h-4" /> リセット
              </button>
            </div>
          </div>

          <div className="bg-white rounded-2xl shadow-sm p-5 flex flex-col">
            <div className="flex items-center text-slate-700 font-bold mb-3">
              <List className="w-5 h-5 mr-2 text-indigo-400" /> 項目リスト
            </div>
            <textarea 
              value={inputItems} 
              onChange={handleInputChange} 
              disabled={isSpinning}
              placeholder="項目を改行で入力..."
              className="w-full h-32 border border-slate-200 rounded-xl p-3 text-base resize-none focus:ring-2 focus:ring-indigo-300 bg-slate-50 outline-none"
            />
          </div>

          <div className="bg-white rounded-2xl shadow-sm p-5 flex-1 flex flex-col min-h-[200px]">
            <div className="flex items-center text-slate-700 font-bold mb-3 border-b pb-2 text-sm uppercase tracking-wider">
              <History className="w-5 h-5 mr-2 text-orange-400" /> 履歴
            </div>
            <div className="flex-1 overflow-y-auto space-y-2">
              {history.length === 0 ? (
                <div className="h-full flex items-center justify-center text-slate-300 text-sm">履歴なし</div>
              ) : (
                history.map((h, i) => (
                  <div key={i} className="flex justify-between items-center bg-slate-50 p-3 rounded-xl border border-slate-100">
                    <span className="text-[10px] font-bold text-slate-400">#{history.length - i}</span>
                    <span className="font-bold text-slate-700">{h}</span>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}