import React, { useState, useEffect, useRef } from 'react';
import { Play, Pause, RotateCcw, BellRing, Settings } from 'lucide-react';

export default function CountdownTimer() {
  // 狀態管理
  const [initialTime, setInitialTime] = useState(10); // 預設 10 秒
  const [timeLeft, setTimeLeft] = useState(10);
  const [isRunning, setIsRunning] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [isFinished, setIsFinished] = useState(false);

  // 自訂輸入狀態
  const [inputHours, setInputHours] = useState('00');
  const [inputMinutes, setInputMinutes] = useState('00');
  const [inputSeconds, setInputSeconds] = useState('10');
  
  // 新增：快速輸入秒數的狀態
  const [quickSeconds, setQuickSeconds] = useState('');
  
  // 新增：提醒聲音選擇狀態
  const [selectedSound, setSelectedSound] = useState('beep');
  
  // 新增：保存共用的 AudioContext 實例，避免被瀏覽器阻擋
  const audioCtxRef = useRef(null); 

  // 環形進度條設定
  const circleRadius = 120;
  const circumference = 2 * Math.PI * circleRadius;
  const strokeDashoffset = initialTime > 0 
    ? circumference - (timeLeft / initialTime) * circumference 
    : 0;

  // 播放提示音效 (使用 Web Audio API)
  const playAlarmSound = (soundOverride) => {
    const soundToPlay = soundOverride || selectedSound;
    try {
      // 使用共用的 AudioContext，取代每次都建立新的
      if (!audioCtxRef.current) {
        audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
      }
      const audioCtx = audioCtxRef.current;
      
      // 確保音效引擎處於啟動狀態 (喚醒它)
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      
      const now = audioCtx.currentTime;
      
      const playOscillator = (type, freq, startTime, duration, startVol = 0.2, endVol = 0.001) => {
        const oscillator = audioCtx.createOscillator();
        const gainNode = audioCtx.createGain();
        
        oscillator.type = type;
        oscillator.frequency.setValueAtTime(freq, startTime);
        
        // 設定音量與淡出效果
        gainNode.gain.setValueAtTime(startVol, startTime); 
        gainNode.gain.exponentialRampToValueAtTime(endVol, startTime + duration);
        
        oscillator.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        
        oscillator.start(startTime);
        oscillator.stop(startTime + duration);
      };

      if (soundToPlay === 'beep') {
        // 傳統短嗶聲 (3 次)
        playOscillator('sine', 880, now, 0.2);
        playOscillator('sine', 880, now + 0.3, 0.2);
        playOscillator('sine', 880, now + 0.6, 0.2);
      } else if (soundToPlay === 'digital') {
        // 電子鬧鐘 (6 次急促聲)
        for (let i = 0; i < 6; i++) {
          playOscillator('square', 600, now + i * 0.15, 0.08, 0.1, 0.001);
        }
      } else if (soundToPlay === 'chime') {
        // 柔和門鈴/和弦聲
        playOscillator('sine', 659.25, now, 0.6, 0.3, 0.001); // E5
        playOscillator('sine', 523.25, now + 0.4, 1.0, 0.3, 0.001); // C5
      }
    } catch (error) {
      console.log("瀏覽器不支援或阻擋了音效播放", error);
    }
  };

  // 計時器邏輯
  useEffect(() => {
    let interval = null;
    if (isRunning && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0 && isRunning) {
      setIsRunning(false);
      setIsFinished(true);
      playAlarmSound(); // 呼叫播放音效函數
    }
    return () => clearInterval(interval);
  }, [isRunning, timeLeft, selectedSound]);

  // 格式化時間顯示
  const formatTime = (timeInSeconds) => {
    const h = Math.floor(timeInSeconds / 3600);
    const m = Math.floor((timeInSeconds % 3600) / 60);
    const s = timeInSeconds % 60;
    
    if (h > 0) {
      return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  // 控制功能
  const toggleTimer = () => {
    if (timeLeft === 0) return;
    
    // 【關鍵修復】：在使用者點擊「播放」的瞬間，初始化並解鎖音效權限
    if (!audioCtxRef.current) {
      audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtxRef.current.state === 'suspended') {
      audioCtxRef.current.resume();
    }

    setIsRunning(!isRunning);
    setIsFinished(false);
    setIsEditing(false);
  };

  const resetTimer = () => {
    setIsRunning(false);
    setTimeLeft(initialTime);
    setIsFinished(false);
  };

  const setPresetTime = (minutes) => {
    const seconds = minutes * 60;
    setInitialTime(seconds);
    setTimeLeft(seconds);
    setIsRunning(false);
    setIsFinished(false);
    setIsEditing(false);
    
    // 更新輸入框顯示
    setInputHours(Math.floor(seconds / 3600).toString().padStart(2, '0'));
    setInputMinutes(Math.floor((seconds % 3600) / 60).toString().padStart(2, '0'));
    setInputSeconds((seconds % 60).toString().padStart(2, '0'));
  };

  const handleCustomTimeSubmit = (e) => {
    e.preventDefault();
    const h = parseInt(inputHours) || 0;
    const m = parseInt(inputMinutes) || 0;
    const s = parseInt(inputSeconds) || 0;
    const totalSeconds = (h * 3600) + (m * 60) + s;
    
    if (totalSeconds > 0) {
      setInitialTime(totalSeconds);
      setTimeLeft(totalSeconds);
      setIsEditing(false);
      setIsFinished(false);
    }
  };

  // 新增：處理快速輸入秒數的邏輯
  const handleQuickSecondsSubmit = (e) => {
    e.preventDefault();
    const secs = parseInt(quickSeconds);
    if (secs > 0) {
      setInitialTime(secs);
      setTimeLeft(secs);
      setIsRunning(false);
      setIsFinished(false);
      setQuickSeconds(''); // 清空輸入框
      
      // 同步更新齒輪設定視窗的輸入框顯示
      setInputHours(Math.floor(secs / 3600).toString().padStart(2, '0'));
      setInputMinutes(Math.floor((secs % 3600) / 60).toString().padStart(2, '0'));
      setInputSeconds((secs % 60).toString().padStart(2, '0'));
    }
  };

  // 決定進度條顏色 (最後 10 秒變紅)
  const progressColor = timeLeft <= 10 && initialTime > 10 ? 'text-red-500' : 'text-emerald-500';

  return (
    <div className="min-h-screen bg-slate-900 flex items-center justify-center p-4 font-sans">
      <div className="bg-slate-800 rounded-3xl shadow-2xl p-8 w-full max-w-md relative overflow-hidden">
        
        {/* 標題與設定按鈕 */}
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-2xl font-bold text-white tracking-wider">計時器</h1>
          <button 
            onClick={() => { setIsEditing(!isEditing); setIsRunning(false); }}
            className="text-slate-400 hover:text-white transition-colors p-2 rounded-full hover:bg-slate-700"
          >
            <Settings size={24} />
          </button>
        </div>

        {isEditing ? (
          /* 自訂時間設定介面 */
          <form onSubmit={handleCustomTimeSubmit} className="flex flex-col items-center justify-center h-[350px] animate-fade-in">
            <div className="flex items-center gap-4 mb-6 text-white">
              <div className="flex flex-col items-center">
                {/* 移除了 max="59" 的限制，讓使用者可以直接輸入大於 60 的秒數 */}
                <input 
                  type="number" min="0" 
                  value={inputSeconds} 
                  onChange={(e) => setInputSeconds(e.target.value)}
                  className="w-20 h-20 text-4xl text-center bg-slate-700 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none"
                />
                <span className="text-slate-400 mt-2 text-sm">秒</span>
              </div>
            </div>
            
            {/* 新增：選擇提醒聲音 */}
            <div className="mb-8 w-full">
              <label className="text-slate-400 text-sm mb-3 block text-center">選擇提醒聲音</label>
              <div className="flex justify-center gap-3">
                {[
                  { id: 'beep', label: '短嗶聲' },
                  { id: 'digital', label: '電子錶' },
                  { id: 'chime', label: '門鈴聲' }
                ].map((sound) => (
                  <button
                    key={sound.id}
                    type="button"
                    onClick={() => {
                      setSelectedSound(sound.id);
                      playAlarmSound(sound.id); // 點擊時試播音效
                    }}
                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                      selectedSound === sound.id 
                        ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/30' 
                        : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                    }`}
                  >
                    {sound.label}
                  </button>
                ))}
              </div>
            </div>

            <button 
              type="submit"
              className="bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-3 rounded-full font-semibold tracking-wide transition-all shadow-lg hover:shadow-emerald-500/30"
            >
              確認設定
            </button>
          </form>
        ) : (
          /* 計時器主畫面 */
          <div className="flex flex-col items-center">
            
            {/* 環形進度與時間顯示 */}
            <div className="relative flex items-center justify-center mb-8">
              <svg className="transform -rotate-90 w-72 h-72">
                {/* 背景圓環 */}
                <circle
                  cx="144" cy="144" r={circleRadius}
                  stroke="currentColor" strokeWidth="8" fill="transparent"
                  className="text-slate-700"
                />
                {/* 進度圓環 */}
                <circle
                  cx="144" cy="144" r={circleRadius}
                  stroke="currentColor" strokeWidth="8" fill="transparent"
                  strokeDasharray={circumference}
                  strokeDashoffset={strokeDashoffset}
                  strokeLinecap="round"
                  className={`${progressColor} transition-all duration-1000 ease-linear`}
                />
              </svg>
              
              <div className="absolute flex flex-col items-center justify-center">
                {isFinished ? (
                  <div className="flex flex-col items-center text-red-500 animate-pulse">
                    <BellRing size={48} className="mb-2" />
                    <span className="text-3xl font-bold">時間到！</span>
                  </div>
                ) : (
                  <span className={`text-6xl font-light tabular-nums tracking-tight ${timeLeft <= 10 ? 'text-red-500' : 'text-white'}`}>
                    {formatTime(timeLeft)}
                  </span>
                )}
              </div>
            </div>

            {/* 控制按鈕 */}
            <div className="flex items-center gap-6 mb-8">
              <button 
                onClick={resetTimer}
                className="p-4 rounded-full bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white transition-all focus:outline-none focus:ring-2 focus:ring-slate-400"
                title="重置"
              >
                <RotateCcw size={28} />
              </button>
              
              <button 
                onClick={toggleTimer}
                disabled={timeLeft === 0 && !isFinished}
                className={`p-6 rounded-full shadow-xl transition-all transform hover:scale-105 focus:outline-none focus:ring-4 ${
                  isRunning 
                    ? 'bg-amber-500 hover:bg-amber-600 focus:ring-amber-500/50 text-white' 
                    : 'bg-emerald-500 hover:bg-emerald-600 focus:ring-emerald-500/50 text-white'
                } disabled:opacity-50 disabled:cursor-not-allowed`}
              >
                {isRunning ? <Pause size={36} fill="currentColor" /> : <Play size={36} fill="currentColor" className="ml-1" />}
              </button>
            </div>

            {/* 快速預設時間按鈕 */}
            <div className="grid grid-cols-4 gap-3 w-full">
              {[1, 5, 10, 25].map((mins) => (
                <button
                  key={mins}
                  onClick={() => setPresetTime(mins)}
                  className="py-2 px-1 rounded-lg bg-slate-700/50 text-slate-300 font-medium hover:bg-slate-700 hover:text-white transition-colors text-sm"
                >
                  {mins} 分鐘
                </button>
              ))}
            </div>
            
            {/* 新增：快速輸入秒數表單 */}
            <form onSubmit={handleQuickSecondsSubmit} className="mt-4 flex gap-2 w-full">
              <input
                type="number"
                min="1"
                value={quickSeconds}
                onChange={(e) => setQuickSeconds(e.target.value)}
                placeholder="直接輸入秒數 (例如: 45)"
                className="flex-1 bg-slate-700/50 text-white px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-emerald-500 placeholder:text-slate-400 text-sm font-medium"
              />
              <button
                type="submit"
                className="bg-slate-600 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg transition-colors text-sm font-medium shadow-md"
              >
                設定
              </button>
            </form>

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