import React, { useState, useEffect, useRef } from 'react';
import { 
  PiggyBank, 
  Utensils, 
  ArrowLeft, 
  Settings, 
  CheckCircle2, 
  Plus, 
  X,
  RefreshCw,
  TrendingDown,
  ChevronRight,
  Lightbulb,
  Search
} from 'lucide-react';

const apiKey = ""; // API Key is provided at runtime

const App = () => {
  const [view, setView] = useState('main'); // 'main', 'savings', 'meal', 'result'
  const [maxAmount, setMaxAmount] = useState(5000);
  const [savingsResult, setSavingsResult] = useState(null);
  const [ingredients, setIngredients] = useState([]);
  const [newIngredient, setNewIngredient] = useState('');
  const [mealResult, setMealResult] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [loadingProgress, setLoadingProgress] = useState(0);

  // 로딩 애니메이션 시뮬레이션 (동그라미 물 채우기)
  const startLoading = (callback) => {
    setIsLoading(true);
    setLoadingProgress(0);
    const interval = setInterval(() => {
      setLoadingProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            setIsLoading(false);
            callback();
          }, 500);
          return 100;
        }
        return prev + 5;
      });
    }, 50);
  };

  // 랜덤 저축 로직
  const generateSavings = () => {
    startLoading(() => {
      const amount = Math.floor(Math.random() * (maxAmount - 500 + 1)) + 500;
      const formattedAmount = Math.floor(amount / 100) * 100; // 100원 단위 절사
      setSavingsResult(formattedAmount);
      setView('savings-result');
    });
  };

  // 식재료 기반 레시피 추천 (Gemini API)
  const getRecipeRecommendation = async () => {
    if (ingredients.length === 0) return;

    startLoading(async () => {
      const prompt = `사용자의 냉장고 식재료: ${ingredients.join(', ')}. 이 재료들(전부 사용할 필요 없음)로 만들 수 있는 간단한 짠테크 식단 메뉴 1개와 짧은 요리법을 추천해줘. 답변은 반드시 JSON 형식으로 해줘: { "menu": "메뉴이름", "recipe": "간단설명", "reason": "추천이유" }`;
      
      try {
        let retries = 0;
        const maxRetries = 5;
        let delay = 1000;

        while (retries < maxRetries) {
          const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              contents: [{ parts: [{ text: prompt }] }],
              generationConfig: { responseMimeType: "application/json" }
            })
          });

          if (response.ok) {
            const data = await response.json();
            const resultText = data.candidates?.[0]?.content?.parts?.[0]?.text;
            setMealResult(JSON.parse(resultText));
            setView('meal-result');
            return;
          }

          retries++;
          await new Promise(res => setTimeout(res, delay));
          delay *= 2;
        }
      } catch (error) {
        console.error("Error fetching recipe:", error);
        setMealResult({ menu: "간단 볶음밥", recipe: "재료를 다지고 밥과 함께 볶으세요.", reason: "네트워크 오류로 기본 메뉴를 추천해 드려요!" });
        setView('meal-result');
      }
    });
  };

  const addIngredient = () => {
    if (newIngredient.trim() && !ingredients.includes(newIngredient.trim())) {
      setIngredients([...ingredients, newIngredient.trim()]);
      setNewIngredient('');
    }
  };

  const removeIngredient = (target) => {
    setIngredients(ingredients.filter(i => i !== target));
  };

  // 공통 로딩 오버레이 컴포넌트 (동그라미 물 채우기 애니메이션)
  const LoadingOverlay = () => (
    <div className="fixed inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center p-6">
      <div className="relative w-48 h-48 rounded-full border-[6px] border-cyan-50 overflow-hidden bg-white shadow-2xl">
        <div 
          className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-cyan-400 to-mint-300 transition-all duration-300 ease-out"
          style={{ height: `${loadingProgress}%` }}
        >
          {/* 물결 애니메이션 효과 */}
          <div className="absolute top-0 left-0 right-0 h-4 bg-white/30 animate-pulse"></div>
        </div>
        <div className="absolute inset-0 flex items-center justify-center font-black text-cyan-900 text-3xl">
          {loadingProgress}%
        </div>
      </div>
      <p className="mt-8 text-cyan-800 font-bold text-lg animate-bounce text-center">
        {view === 'savings' ? '최적의 저축액을 계산 중...' : '냉장고 속 재료로 맛있는 레시피 생성 중...'}
      </p>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#F0F9F9] font-sans text-slate-800 flex justify-center p-4">
      <div className="w-full max-w-md bg-white rounded-[2.8rem] shadow-2xl shadow-cyan-200/50 overflow-hidden relative border border-cyan-50">
        {isLoading && <LoadingOverlay />}
        
        {/* 상단바 */}
        <div className="p-6 flex items-center justify-between bg-gradient-to-r from-mint-50 to-cyan-50">
          {view !== 'main' ? (
            <button onClick={() => setView('main')} className="p-2.5 bg-white rounded-full shadow-md active:scale-90 transition-transform">
              <ArrowLeft className="w-5 h-5 text-cyan-600" />
            </button>
          ) : (
            <div className="w-10 h-10 bg-mint-400 rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-mint-200 rotate-3">S</div>
          )}
          <h1 className="text-xl font-black text-cyan-950 tracking-tight">Smart Saver</h1>
          <button className="p-2.5 bg-white rounded-full shadow-md"><Settings className="w-5 h-5 text-slate-400" /></button>
        </div>

        {/* 메인 화면 */}
        {view === 'main' && (
          <div className="p-8 space-y-6">
            <div className="bg-gradient-to-br from-cyan-500 to-mint-400 p-8 rounded-[2.2rem] text-white shadow-xl shadow-cyan-200 relative overflow-hidden">
              <div className="relative z-10">
                <p className="opacity-90 text-sm font-medium mb-1">티끌 모아 태산!</p>
                <h2 className="text-3xl font-black leading-tight">오늘의<br/>짠테크 챌린지</h2>
              </div>
              <TrendingDown className="absolute -bottom-4 -right-4 w-32 h-32 opacity-20 rotate-12" />
            </div>

            <div className="grid grid-cols-1 gap-5">
              <button 
                onClick={() => setView('savings')}
                className="group flex items-center justify-between p-7 bg-white border-2 border-cyan-100 rounded-[2rem] hover:border-cyan-400 hover:bg-cyan-50 transition-all shadow-sm active:scale-[0.98]"
              >
                <div className="flex items-center gap-5">
                  <div className="p-4 bg-cyan-100 rounded-2xl group-hover:bg-cyan-200 transition-colors">
                    <PiggyBank className="w-7 h-7 text-cyan-600" />
                  </div>
                  <div className="text-left">
                    <p className="font-black text-lg text-slate-800">랜덤 저축 뽑기</p>
                    <p className="text-xs text-slate-500 mt-1 font-medium">부담 없는 금액으로 저축 습관</p>
                  </div>
                </div>
                <ChevronRight className="text-slate-300 group-hover:text-cyan-400 transition-colors" />
              </button>

              <button 
                onClick={() => setView('meal')}
                className="group flex items-center justify-between p-7 bg-white border-2 border-mint-100 rounded-[2rem] hover:border-mint-400 hover:bg-mint-50 transition-all shadow-sm active:scale-[0.98]"
              >
                <div className="flex items-center gap-5">
                  <div className="p-4 bg-mint-100 rounded-2xl group-hover:bg-mint-200 transition-colors">
                    <Utensils className="w-7 h-7 text-mint-600" />
                  </div>
                  <div className="text-left">
                    <p className="font-black text-lg text-slate-800">무지출 식단 추천</p>
                    <p className="text-xs text-slate-500 mt-1 font-medium">냉장고 속 재료로 지출 0원</p>
                  </div>
                </div>
                <ChevronRight className="text-slate-300 group-hover:text-mint-400 transition-colors" />
              </button>
            </div>

            <div className="p-6 bg-slate-50 rounded-[1.8rem] flex items-start gap-4 border border-slate-100">
              <div className="bg-amber-100 p-2 rounded-xl">
                <Lightbulb className="w-5 h-5 text-amber-500" />
              </div>
              <p className="text-sm text-slate-600 leading-relaxed font-medium">
                작은 소비를 막는 것이 짠테크의 시작입니다. 오늘 아낀 커피값 4,500원을 저축해볼까요?
              </p>
            </div>
          </div>
        )}

        {/* 랜덤 저축 설정 화면 */}
        {view === 'savings' && (
          <div className="p-8 space-y-10">
            <div className="text-center space-y-3">
              <h3 className="text-2xl font-black text-slate-900">저축 한도 설정</h3>
              <p className="text-slate-500 font-medium">얼마까지 저축할 의향이 있나요?</p>
            </div>

            <div className="flex flex-col items-center gap-10 py-6">
              <div className="relative w-full px-2">
                <input 
                  type="range" 
                  min="500" 
                  max="10000" 
                  step="500"
                  value={maxAmount}
                  onChange={(e) => setMaxAmount(parseInt(e.target.value))}
                  className="w-full h-3 bg-cyan-100 rounded-lg appearance-none cursor-pointer accent-cyan-500"
                />
                <div className="flex justify-between mt-5 text-xs font-bold text-slate-400 px-1">
                  <span>500원</span>
                  <span>10,000원</span>
                </div>
              </div>
              
              <div className="text-center p-10 bg-gradient-to-b from-white to-cyan-50 rounded-full w-56 h-56 flex flex-col items-center justify-center border-[8px] border-white shadow-2xl relative">
                <div className="absolute inset-0 rounded-full border border-cyan-100 scale-90 opacity-50"></div>
                <span className="text-xs text-cyan-600 font-black uppercase tracking-widest mb-1">Limit</span>
                <span className="text-4xl font-black text-cyan-900">{maxAmount.toLocaleString()}원</span>
              </div>
            </div>

            <button 
              onClick={generateSavings}
              className="w-full py-6 bg-cyan-500 text-white font-black rounded-3xl text-xl shadow-xl shadow-cyan-200 hover:bg-cyan-600 active:scale-95 transition-all"
            >
              오늘의 저축액 뽑기
            </button>
          </div>
        )}

        {/* 저축 결과 화면 */}
        {view === 'savings-result' && (
          <div className="p-8 flex flex-col items-center justify-center min-h-[500px] text-center space-y-8 animate-in fade-in zoom-in duration-500">
            <div className="w-28 h-28 bg-mint-100 rounded-[2rem] flex items-center justify-center shadow-lg shadow-mint-50">
              <CheckCircle2 className="w-14 h-14 text-mint-500" />
            </div>
            <div className="space-y-3">
              <h3 className="text-xl font-bold text-slate-400">오늘의 짠테크 미션</h3>
              <p className="text-5xl font-black text-cyan-600 tracking-tight">{savingsResult?.toLocaleString()}원</p>
              <p className="text-lg font-bold text-slate-700">지금 바로 저축하세요!</p>
            </div>
            <div className="p-7 bg-slate-50 rounded-[2rem] w-full text-slate-600 font-medium border border-slate-100">
              <p className="leading-relaxed">"커피 한 잔 대신 파킹통장으로 이체하고<br/>자산을 불리는 습관을 만들어보세요!"</p>
            </div>
            <button 
              onClick={() => setView('main')}
              className="w-full py-5 border-2 border-cyan-500 text-cyan-600 font-black rounded-[1.8rem] hover:bg-cyan-50 transition-all active:scale-95"
            >
              미션 수행 완료
            </button>
          </div>
        )}

        {/* 무지출 식단 추천 화면 (식재료 입력 및 추천) */}
        {view === 'meal' && (
          <div className="p-8 space-y-6 flex flex-col h-full animate-in slide-in-from-right duration-300">
            <div className="space-y-3">
              <h3 className="text-2xl font-black text-slate-900">냉장고 정보 입력</h3>
              <p className="text-slate-500 font-medium leading-tight">냉장고 속 재료들을 입력해주시면<br/>최고의 짠테크 식단을 짜드릴게요.</p>
            </div>

            <div className="flex gap-3 relative">
              <div className="relative flex-1 group">
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300 group-focus-within:text-mint-500 transition-colors" />
                <input 
                  type="text" 
                  value={newIngredient}
                  onChange={(e) => setNewIngredient(e.target.value)}
                  placeholder="예: 계란, 토마토, 참치"
                  className="w-full p-4 pl-12 bg-slate-50 border-2 border-transparent rounded-[1.5rem] focus:bg-white focus:border-mint-400 outline-none transition-all font-bold placeholder:text-slate-300"
                  onKeyPress={(e) => e.key === 'Enter' && addIngredient()}
                />
              </div>
              <button 
                onClick={addIngredient}
                className="p-4 bg-mint-400 text-white rounded-[1.5rem] hover:bg-mint-500 shadow-lg shadow-mint-100 active:scale-90 transition-transform"
              >
                <Plus className="w-7 h-7" />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto max-h-60 custom-scrollbar">
              <div className="flex flex-wrap gap-2.5">
                {ingredients.map((item) => (
                  <span key={item} className="flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-mint-100 rounded-2xl text-mint-700 font-black text-sm shadow-sm animate-in zoom-in duration-200">
                    {item}
                    <button onClick={() => removeIngredient(item)} className="p-0.5 hover:bg-mint-50 rounded-full transition-colors">
                      <X className="w-4 h-4 text-mint-300 hover:text-red-400" />
                    </button>
                  </span>
                ))}
                {ingredients.length === 0 && (
                  <div className="w-full py-16 text-center text-slate-300 bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-100">
                    <Utensils className="w-12 h-12 mx-auto mb-4 opacity-20" />
                    <p className="font-bold">입력된 식재료가 없습니다.</p>
                    <p className="text-xs mt-1">하나 이상의 재료를 추가해주세요!</p>
                  </div>
                )}
              </div>
            </div>

            <button 
              onClick={getRecipeRecommendation}
              disabled={ingredients.length === 0}
              className={`w-full py-6 font-black rounded-3xl text-xl shadow-xl transition-all active:scale-[0.97] ${
                ingredients.length > 0 
                ? 'bg-mint-400 text-white shadow-mint-200 hover:bg-mint-500' 
                : 'bg-slate-100 text-slate-300 cursor-not-allowed'
              }`}
            >
              추천 메뉴 생성하기
            </button>
          </div>
        )}

        {/* 식단 결과 화면 */}
        {view === 'meal-result' && mealResult && (
          <div className="p-8 space-y-7 animate-in slide-in-from-bottom duration-500">
            <div className="bg-gradient-to-b from-mint-50 to-white p-8 rounded-[2.8rem] border-2 border-mint-100 text-center shadow-sm relative">
              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-white px-4 py-1 rounded-full border-2 border-mint-100 text-[10px] font-black text-mint-500 uppercase tracking-widest">Today's Pick</div>
              <h3 className="text-3xl font-black text-slate-900 mb-4">{mealResult.menu}</h3>
              <div className="h-1 bg-gradient-to-r from-transparent via-mint-200 to-transparent w-full mb-5"></div>
              <p className="text-slate-600 text-sm font-medium leading-relaxed px-2">{mealResult.reason}</p>
            </div>

            <div className="space-y-4">
              <h4 className="font-black text-slate-800 flex items-center gap-2.5 px-2">
                <div className="p-1.5 bg-mint-100 rounded-lg">
                  <RefreshCw className="w-4 h-4 text-mint-600" /> 
                </div>
                간편 조리법 가이드
              </h4>
              <div className="p-6 bg-slate-50 rounded-[2rem] text-slate-700 text-[15px] font-medium leading-loose border border-slate-100 shadow-inner">
                {mealResult.recipe}
              </div>
            </div>

            <div className="flex gap-4">
              <button 
                onClick={() => setView('meal')}
                className="flex-1 py-5 bg-white border-2 border-mint-200 text-mint-600 font-black rounded-2xl hover:bg-mint-50 transition-colors"
              >
                다른 메뉴
              </button>
              <button 
                onClick={() => setView('main')}
                className="flex-1 py-5 bg-mint-400 text-white font-black rounded-2xl hover:bg-mint-500 shadow-lg shadow-mint-200 active:scale-95"
              >
                확인
              </button>
            </div>
          </div>
        )}
      </div>

      <style>{`
        @keyframes pulse-gentle {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.8; }
        }
        input[type='range']::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 28px;
          height: 28px;
          background: #06b6d4;
          cursor: pointer;
          border-radius: 50%;
          border: 5px solid white;
          box-shadow: 0 10px 15px -3px rgb(6 182 212 / 0.4);
        }
        .custom-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: #ccfbf1;
          border-radius: 10px;
        }
      `}</style>
    </div>
  );
};

export default App;