import React, { useState, useEffect } from 'react';

export default function App() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [bgImage, setBgImage] = useState(null);
  const [isFinished, setIsFinished] = useState(false); // 타이머 종료 상태 추가

  // 사용자가 올린 이미지를 배경으로 설정하는 함수
  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const imageUrl = URL.createObjectURL(file);
      setBgImage(imageUrl);
    }
  };

  // 타이머 동작 로직
  useEffect(() => {
    let interval = null;
    if (isRunning && time > 0) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime - 1);
      }, 1000);
    } else if (isRunning && time === 0) {
      setIsRunning(false);
      setIsFinished(true); // 시간이 다 되면 종료 상태를 true로 변경
      clearInterval(interval);
    } else if (!isRunning && time === 0) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [isRunning, time]);

  // 시간 포맷 변환 (MM:SS 또는 HH:MM:SS)
  const formatTime = (seconds) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    
    if (h > 0) {
      return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  // 시간 추가 함수
  const addTime = (minutes) => {
    setTime((prev) => prev + minutes * 60);
    setIsFinished(false); // 시간을 추가하면 흔들림 멈춤
  };

  // 리셋 함수
  const resetTimer = () => {
    setIsRunning(false);
    setTime(0);
    setIsFinished(false); // 리셋하면 흔들림 멈춤
  };

  // 5초 전부터 서서히 빨간색으로 변하게 하는 스타일 함수
  const getWarningStyle = () => {
    if (isFinished) return {}; 
    
    if (time <= 5 && time > 0) {
      const ratio = (5 - time + 1) / 5; // 5초일 때 20%, 1초일 때 100% 진행
      // 검은색(17, 17, 17)에서 빨간색(239, 68, 68)으로 서서히 보간
      const r = Math.round(17 + (239 - 17) * ratio);
      const g = Math.round(17 + (68 - 17) * ratio);
      const b = Math.round(17 + (68 - 17) * ratio);
      
      return {
        borderColor: `rgb(${r}, ${g}, ${b})`,
        color: `rgb(${r}, ${g}, ${b})`,
        transition: 'transform 0.2s ease, box-shadow 0.2s ease, color 1s linear, border-color 1s linear'
      };
    }
    return {};
  };

  return (
    <div 
      className="min-h-screen flex flex-col items-center justify-center p-6 md:p-12 font-sketch text-gray-900 bg-cover bg-center bg-no-repeat transition-all duration-500"
      style={{ 
        backgroundColor: bgImage ? 'transparent' : '#f4f0e6',
        backgroundImage: bgImage ? `url(${bgImage})` : 'none' 
      }}
    >
      {/* 폰트 및 커스텀 CSS (장난꾸러기 낙서 감성) */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');

        .font-sketch {
          font-family: 'Gaegu', cursive;
        }

        /* 두껍고 훨씬 삐뚤빼뚤한 테두리 (진짜 마구 그린 낙서 느낌) */
        .sketch-border {
          border: 4px solid #111;
          border-radius: 2% 95% 4% 96% / 94% 5% 95% 4%;
          background-color: rgba(255, 255, 255, 0.85);
          box-shadow: 6px 6px 0px rgba(0,0,0,0.8);
          backdrop-filter: blur(3px);
          transition: all 0.2s ease;
        }

        /* 호버 시 회전 없이 위로만 붕 뜨는 깔끔한 효과 */
        .hover-float {
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .hover-float:hover {
          transform: translateY(-8px);
          box-shadow: 10px 10px 0px rgba(0,0,0,0.9);
          border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%; 
        }
        
        .hover-float:active {
          transform: translateY(2px);
          box-shadow: 2px 2px 0px rgba(0,0,0,0.9);
        }

        /* 시간 종료 시 알람 덜덜 떨리는 효과 */
        @keyframes alarm-shake {
          0%, 100% { transform: translateX(0) rotate(0deg); }
          25% { transform: translateX(-4px) rotate(-2deg); }
          50% { transform: translateX(4px) rotate(2deg); }
          75% { transform: translateX(-4px) rotate(-2deg); }
        }
        .times-up {
          animation: alarm-shake 0.3s infinite;
          border-color: #ef4444 !important; /* 빨간색 테두리 */
          color: #ef4444 !important; /* 빨간색 글씨 */
          box-shadow: 6px 6px 0px rgba(239, 68, 68, 0.5) !important;
        }

        .file-input-hidden {
          display: none;
        }
      `}} />

      {/* 배경 이미지 업로드 (사용자가 직접 그린 그림 넣기) */}
      <div className="absolute top-4 right-4 z-20 flex items-center">
        <label className="sketch-border hover-float px-4 py-2 cursor-pointer text-base md:text-lg font-bold bg-yellow-300">
          🖼️ 내 그림 배경으로 넣기
          <input type="file" accept="image/*" onChange={handleImageUpload} className="file-input-hidden" />
        </label>
        {bgImage && (
          <button 
            onClick={() => setBgImage(null)} 
            className="sketch-border hover-float ml-3 px-4 py-2 bg-white text-red-600 font-bold"
          >
            X
          </button>
        )}
      </div>

      <div className="w-full max-w-4xl flex flex-col items-center gap-8 md:gap-12 relative z-10 p-4">
        
        {/* 대형 디지털 숫자 디스플레이 (글씨 제거됨, 5초 전부터 서서히 빨개짐, 종료 시 times-up 클래스 추가) */}
        <div 
          className={`sketch-border hover-float px-10 py-12 md:py-20 md:px-24 w-full max-w-xl flex justify-center items-center ${isFinished ? 'times-up' : ''}`}
          style={getWarningStyle()}
        >
          <span className="text-8xl md:text-[11rem] font-bold tracking-wider" style={{ lineHeight: '1' }}>
            {formatTime(time)}
          </span>
        </div>

        {/* 시간 추가 버튼 그룹 ('분' 대신 'm' 사용) - 두 줄로 나누어 배치 */}
        <div className="flex flex-col items-center gap-3 md:gap-4 w-full max-w-2xl">
          {/* 윗줄: 짧은 시간 */}
          <div className="flex flex-wrap justify-center gap-3 md:gap-4 w-full">
            {[1, 3, 5, 10].map((min) => (
              <button
                key={min}
                onClick={() => addTime(min)}
                className="sketch-border hover-float px-5 py-2 text-2xl font-bold text-gray-900 bg-white"
              >
                +{min}m
              </button>
            ))}
          </div>
          {/* 아랫줄: 긴 시간 */}
          <div className="flex flex-wrap justify-center gap-3 md:gap-4 w-full">
            {[15, 20, 30].map((min) => (
              <button
                key={min}
                onClick={() => addTime(min)}
                className="sketch-border hover-float px-5 py-2 text-2xl font-bold text-gray-900 bg-white"
              >
                +{min}m
              </button>
            ))}
          </div>
        </div>

        {/* 컨트롤 버튼 */}
        <div className="flex gap-4 md:gap-8 mt-4 md:mt-6">
          <button
            onClick={() => setIsRunning(true)}
            disabled={time === 0 || isRunning}
            className={`sketch-border hover-float px-8 py-3 text-3xl font-bold ${
              time === 0 || isRunning ? 'opacity-50 cursor-not-allowed bg-gray-300' : 'bg-white'
            }`}
          >
            START
          </button>
          
          <button
            onClick={() => setIsRunning(false)}
            disabled={!isRunning}
            className={`sketch-border hover-float px-8 py-3 text-3xl font-bold ${
              !isRunning ? 'opacity-50 cursor-not-allowed bg-gray-300' : 'bg-white'
            }`}
          >
            STOP
          </button>
          
          <button
            onClick={resetTimer}
            className="sketch-border hover-float px-8 py-3 text-3xl font-bold bg-white"
          >
            RESET
          </button>
        </div>
      </div>
    </div>
  );
}