import React, { useState, useEffect } from 'react';
import { Sparkles, Scroll, RefreshCcw, Star, MapPin, Hourglass, User, Info, BookOpen, Skull, Globe } from 'lucide-react';

export default function App() {
  const [step, setStep] = useState('input'); // input, loading, result
  const [formData, setFormData] = useState({
    name: '',
    gender: 'male',
    birthDate: '',
    birthTime: '',
    birthPlace: '',
  });
  const [result, setResult] = useState(null);
  const [loadingText, setLoadingText] = useState('正在連結阿卡西紀錄...');

  // 模擬載入過程的神秘語句 - 加入更多歷史考據感
  const loadingMessages = [
    "正在檢索《史記》與各國編年史...",
    "正在分析歷史上的離奇死因...",
    "正在比對古代鹽商與皇室名冊...",
    "計算靈魂質量與業力...",
    "定位時空座標：西元前...",
    "解鎖塵封的記憶..."
  ];

  // 資料庫：年代 (擴充版)
  const eras = [
    { name: "唐朝盛世", period: "西元 618 - 907 年", desc: "萬國來朝，長安城的酒香與詩歌飄散在空氣中，是一個極度開放與自信的時代。" },
    { name: "維多利亞時代", period: "西元 1837 - 1901 年", desc: "工業革命的煙霧籠罩倫敦，紳士與貧民窟並存，理性與神秘主義同時興盛。" },
    { name: "古埃及新王國", period: "西元前 1550 - 1069 年", desc: "底比斯的黃金時代，對死後世界的重視達到巔峰，祭司掌握著至高權力。" },
    { name: "日本戰國時代", period: "西元 1467 - 1615 年", desc: "下剋上的亂世，武士刀與茶道並存，稍有不慎便會身首異處。" },
    { name: "文藝復興佛羅倫斯", period: "西元 15 世紀", desc: "梅迪奇家族資助著藝術家，人性的光輝試圖衝破中世紀的黑暗。" },
    { name: "法國大革命前夕", period: "西元 1789 年前", desc: "凡爾賽宮的奢靡達到了頂點，而巴黎街頭的怒火正在積蓄。" },
    { name: "古希臘雅典", period: "西元前 5 世紀", desc: "蘇格拉底在廣場辯論，民主制度初見雛形，哲學與肉體的崇拜。" },
    { name: "民國初年上海灘", period: "西元 1920 年代", desc: "十里洋場，幫派、軍閥與外國租界錯綜複雜，機會與死亡只有一線之隔。" },
    { name: "北宋汴京", period: "西元 960 - 1127 年", desc: "商業高度發達，夜市燈火通明，重文輕武導致繁華背後隱藏著外患危機。" },
    { name: "加勒比海盜黃金期", period: "西元 1650 - 1730 年", desc: "無政府的海洋，自由與掠奪的樂園，蘭姆酒與火藥味混合的年代。" }
  ];

  // 資料庫：身份 (大幅擴充，加入搜尋到的歷史職業)
  const identities = [
    { title: "私鹽販子", type: "wealth", desc: "從事古代利潤最高也最危險的行業，富可敵國但隨時可能被官府抄家。" },
    { title: "不得志的落第秀才", type: "intellect", desc: "滿腹經綸卻屢試不第，最終成為了驚動天下的幕後謀士（如左宗棠般的大器晚成）。" },
    { title: "瘋狂畫家", type: "art", desc: "為了追求極致的藝術，不惜解剖屍體或直視烈日，被世人視為瘋子。" },
    { title: "短命皇帝", type: "status", desc: "雖登大位，但身處權力風暴中心，每日活在被毒殺與政變的恐懼中。" },
    { title: "長壽太監", type: "survival", desc: "看盡宮廷鬥爭，雖然身體殘缺，卻比所有主子都活得久，掌握著無數秘密。" },
    { title: "邊疆和親公主", type: "tragedy", desc: "為了國家的和平，遠嫁異域，終其一生未能再見故鄉一面。" },
    { title: "神祕煉金術士", type: "mystic", desc: "在地下室試圖將鉛變成金，卻意外發現了化學的奧秘。" },
    { title: "維京狂戰士", type: "strength", desc: "相信戰死沙場才能進入英靈殿，戰鬥時會進入無痛覺的狂暴狀態。" },
    { title: "絲路駱駝客", type: "adventure", desc: "行走在長安與羅馬之間，精通多國語言，是文化交流的地下媒介。" },
    { title: "天橋下的說書人", type: "speech", desc: "憑藉一張嘴，能讓市井小民哭笑不得，掌握著民間輿論的風向。" },
    { title: "皇家試毒官", type: "danger", desc: "每一餐都是豪賭，雖然享用著御膳，卻不知能否見到明天的太陽。" },
    { title: "修道院抄寫員", type: "patience", desc: "一生在昏暗的燭光下抄寫古籍，守護著文明的火種。" }
  ];

  // 資料庫：死因 (加入搜尋到的離奇真實死因)
  const deaths = [
    "因為看到荒謬的事物，大笑不止導致心臟驟停（史稱『致命的歡鬧』）",
    "為了追求長生不老，長期服用含有水銀的丹藥而中毒",
    "在一次豪華宴會中，因為消化不良加上過度歡愉而暴斃（參考國王馬丁一世）",
    "被自己發明的飛行裝置摔死",
    "因為太過富有，被嫉妒的親戚合謀在睡夢中悶死",
    "在戰場上毫髮無傷，卻在凱旋歸來時被慶祝的煙火炸死",
    "為了證明自己的醫術，親身試吃劇毒草藥而亡",
    "平靜地老死，但在遺囑中透露了震驚皇室的秘密",
    "因為一首諷刺朝政的詩，被皇帝賜死",
    "看書時太過入迷，忘記吃飯喝水，最終體力不支倒在書堆中"
  ];

  // 資料庫：靈魂課題 (新增區塊)
  const soulTasks = [
    { title: "學會示弱", desc: "前世的你太過逞強，習慣獨自承擔一切。今生你需要學習依賴他人，展現脆弱並不可恥。" },
    { title: "建立界線", desc: "前世的你為了討好權貴或他人，失去了自我。今生你的課題是學會說『不』，找回自己的價值。" },
    { title: "放下執著", desc: "前世你對金錢或權力有極深的執念，導致孤獨終老。今生你需要學習分享，體驗無條件的愛。" },
    { title: "勇敢表達", desc: "前世你因言獲罪或被迫沉默。今生你擁有自由的喉嚨，任務是大聲說出你的真理。" },
    { title: "接納平凡", desc: "前世你身處高位或極度戲劇化。今生你需要學習在平淡的日常柴米油鹽中，找到內心的平靜。" },
    { title: "原諒背叛", desc: "前世你帶著被親信背叛的恨意離世。今生的課題是寬恕，放過他人其實是放過你自己。" }
  ];

  // 輔助函數：計算生命靈數 (1-9)
  const calculateLifePathNumber = (dateString) => {
    if (!dateString) return 5;
    const digits = dateString.replace(/-/g, '').split('').map(Number);
    let sum = digits.reduce((a, b) => a + b, 0);
    while (sum > 9) {
      const tempDigits = sum.toString().split('').map(Number);
      sum = tempDigits.reduce((a, b) => a + b, 0);
    }
    return sum;
  };

  // 輔助函數：字串雜湊
  const stringHash = (str) => {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash;
    }
    return Math.abs(hash);
  };

  // 輔助函數：獲取時辰
  const getShichen = (time) => {
    if (!time) return "未知時辰";
    const hour = parseInt(time.split(':')[0], 10);
    if (hour >= 23 || hour < 1) return "子時 (23:00-01:00) - 靈性與直覺";
    if (hour >= 1 && hour < 3) return "丑時 (01:00-03:00) - 毅力與沈穩";
    if (hour >= 3 && hour < 5) return "寅時 (03:00-05:00) - 行動力與開創";
    if (hour >= 5 && hour < 7) return "卯時 (05:00-07:00) - 機智與圓融";
    if (hour >= 7 && hour < 9) return "辰時 (07:00-09:00) - 自信與尊貴";
    if (hour >= 9 && hour < 11) return "巳時 (09:00-11:00) - 洞察與敏銳";
    if (hour >= 11 && hour < 13) return "午時 (11:00-13:00) - 熱情與光耀";
    if (hour >= 13 && hour < 15) return "未時 (13:00-15:00) - 優雅與和平";
    if (hour >= 15 && hour < 17) return "申時 (15:00-17:00) - 多變與聰慧";
    if (hour >= 17 && hour < 19) return "酉時 (17:00-19:00) - 美感與細節";
    if (hour >= 19 && hour < 21) return "戌時 (19:00-21:00) - 忠誠與守護";
    if (hour >= 21 && hour < 23) return "亥時 (21:00-23:00) - 豐富與包容";
    return "未知時辰";
  };

  const handleGenerate = () => {
    if (!formData.name || !formData.birthDate || !formData.birthTime || !formData.birthPlace) {
      alert("請填寫所有欄位（包含出生地）以獲得準確的靈魂讀取");
      return;
    }

    setStep('loading');
    
    let msgIndex = 0;
    const interval = setInterval(() => {
      setLoadingText(loadingMessages[msgIndex % loadingMessages.length]);
      msgIndex++;
    }, 600);

    setTimeout(() => {
      clearInterval(interval);
      generateResult();
      setStep('result');
    }, 3500);
  };

  const generateResult = () => {
    const lifePath = calculateLifePathNumber(formData.birthDate);
    const nameSeed = stringHash(formData.name);
    const placeSeed = stringHash(formData.birthPlace);
    const yearSeed = parseInt(formData.birthDate.split('-')[0]);
    // 將出生地加入總種子運算，影響結果
    const totalSeed = nameSeed + lifePath + yearSeed + placeSeed;
    const month = parseInt(formData.birthDate.split('-')[1]);

    const eraIndex = totalSeed % eras.length;
    const era = eras[eraIndex];

    const identityIndex = (totalSeed + month) % identities.length;
    const identity = identities[identityIndex];

    const deathIndex = (nameSeed + placeSeed + month) % deaths.length;
    
    // 計算靈魂課題
    const taskIndex = (lifePath + placeSeed + month) % soulTasks.length;

    const stats = {
      intelligence: (totalSeed * 13 % 40) + 60,
      charisma: (nameSeed * 7 % 40) + 60,
      strength: (lifePath * 11 % 40) + 60,
      luck: (month * 17 % 40) + 60,
      spirituality: (yearSeed * 3 % 40) + 60
    };

    setResult({
      era,
      identity,
      death: deaths[deathIndex],
      soulTask: soulTasks[taskIndex],
      shichen: getShichen(formData.birthTime),
      lifePath,
      stats,
      story: `在${era.name}，你是一名${identity.title}。${era.desc}你性格${lifePath % 2 === 0 ? "內斂深沉，喜歡在暗處觀察局勢" : "熱情奔放，總是成為人群的焦點"}。${identity.desc}`
    });
  };

  return (
    <div className="min-h-screen bg-slate-900 text-slate-100 flex items-center justify-center p-4 font-sans selection:bg-purple-500 selection:text-white">
      <div className="max-w-md w-full bg-slate-800/50 backdrop-blur-xl border border-slate-700 rounded-3xl shadow-2xl overflow-hidden relative">
        
        {/* 背景裝飾 */}
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-pink-500 to-amber-500"></div>
        <div className="absolute -top-20 -right-20 w-64 h-64 bg-purple-600/20 rounded-full blur-3xl pointer-events-none"></div>
        <div className="absolute -bottom-20 -left-20 w-64 h-64 bg-amber-600/10 rounded-full blur-3xl pointer-events-none"></div>

        {/* Header */}
        <div className="p-6 text-center relative z-10">
          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-700/50 mb-4 ring-1 ring-slate-600">
            <Sparkles className="w-6 h-6 text-amber-400" />
          </div>
          <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-amber-200 to-purple-200">
            靈魂迴響 2.1
          </h1>
          <p className="text-slate-400 text-xs mt-1 tracking-wider uppercase">基於歷史數據庫的前世解碼</p>
        </div>

        {/* INPUT STEP */}
        {step === 'input' && (
          <div className="p-6 pt-0 space-y-5 animate-in fade-in slide-in-from-bottom-4 duration-700">
            <div className="space-y-1">
              <label className="text-xs text-amber-400/80 uppercase tracking-widest font-semibold ml-1">姓名</label>
              <input 
                type="text" 
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                placeholder="請輸入真實姓名"
                className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-slate-200 placeholder:text-slate-600"
              />
            </div>

            <div className="space-y-1">
              <label className="text-xs text-amber-400/80 uppercase tracking-widest font-semibold ml-1">出生地點</label>
              <div className="relative">
                <input 
                  type="text" 
                  value={formData.birthPlace}
                  onChange={(e) => setFormData({...formData, birthPlace: e.target.value})}
                  placeholder="城市或國家 (影響靈魂座標)"
                  className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-slate-200 placeholder:text-slate-600"
                />
                <Globe className="w-4 h-4 text-slate-500 absolute left-3.5 top-3.5" />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1">
                <label className="text-xs text-amber-400/80 uppercase tracking-widest font-semibold ml-1">性別</label>
                <select 
                  value={formData.gender}
                  onChange={(e) => setFormData({...formData, gender: e.target.value})}
                  className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-slate-200 appearance-none"
                >
                  <option value="male">男性</option>
                  <option value="female">女性</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div className="space-y-1">
                 <label className="text-xs text-amber-400/80 uppercase tracking-widest font-semibold ml-1">出生時間</label>
                 <input 
                  type="time" 
                  value={formData.birthTime}
                  onChange={(e) => setFormData({...formData, birthTime: e.target.value})}
                  className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-slate-200"
                />
              </div>
            </div>

            <div className="space-y-1">
              <label className="text-xs text-amber-400/80 uppercase tracking-widest font-semibold ml-1">出生年月日</label>
              <input 
                type="date" 
                value={formData.birthDate}
                onChange={(e) => setFormData({...formData, birthDate: e.target.value})}
                className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-slate-200"
              />
            </div>

            <button 
              onClick={handleGenerate}
              className="w-full mt-4 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white font-medium py-3.5 rounded-xl shadow-lg shadow-purple-900/30 transition-all active:scale-95 flex items-center justify-center gap-2 group"
            >
              <RefreshCcw className="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" />
              開始溯源
            </button>
            <p className="text-[10px] text-center text-slate-500 mt-2">
              *系統已連接至擴充歷史資料庫，包含罕見職業與特殊死因
            </p>
          </div>
        )}

        {/* LOADING STEP */}
        {step === 'loading' && (
          <div className="p-12 flex flex-col items-center justify-center min-h-[400px] animate-in fade-in duration-500">
             <div className="relative w-24 h-24 mb-8">
               <div className="absolute inset-0 border-4 border-slate-700 rounded-full"></div>
               <div className="absolute inset-0 border-t-4 border-purple-500 rounded-full animate-spin"></div>
               <div className="absolute inset-2 border-r-4 border-amber-500 rounded-full animate-spin-reverse opacity-70"></div>
               <div className="absolute inset-0 flex items-center justify-center">
                 <Hourglass className="w-8 h-8 text-slate-400 animate-pulse" />
               </div>
             </div>
             <p className="text-lg font-medium text-purple-200 animate-pulse text-center">
               {loadingText}
             </p>
          </div>
        )}

        {/* RESULT STEP */}
        {step === 'result' && result && (
          <div className="p-6 pt-0 space-y-6 animate-in zoom-in-95 duration-700 pb-8 h-[600px] overflow-y-auto custom-scrollbar">
            
            {/* 主要卡片 */}
            <div className="bg-slate-800 border border-amber-500/30 rounded-2xl p-6 text-center relative overflow-hidden group">
              <div className="absolute top-0 left-0 w-full h-1 bg-amber-500/50"></div>
              <div className="absolute -right-6 -top-6 w-20 h-20 bg-amber-500/10 rounded-full blur-xl group-hover:bg-amber-500/20 transition-all"></div>
              
              <div className="text-xs font-bold text-amber-500 tracking-[0.2em] mb-2 uppercase">Your Past Life</div>
              <h2 className="text-3xl font-serif font-bold text-white mb-1">{result.identity.title}</h2>
              <p className="text-slate-400 text-sm mb-4">{result.era.name} · {result.era.period}</p>
              
              <div className="w-full h-px bg-slate-700 my-4"></div>
              
              <p className="text-slate-300 leading-relaxed text-justify text-sm">
                {result.story}
              </p>
            </div>

             {/* 靈魂課題 (新增) */}
             <div className="bg-purple-900/20 border border-purple-500/30 rounded-xl p-4 relative overflow-hidden">
                <div className="flex items-center gap-2 text-purple-300 mb-2">
                  <BookOpen className="w-4 h-4" />
                  <span className="text-xs font-bold uppercase tracking-wider">今生靈魂課題</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-1">{result.soulTask.title}</h3>
                <p className="text-sm text-purple-200/80">{result.soulTask.desc}</p>
            </div>


            {/* 詳細資訊 Grid */}
            <div className="grid grid-cols-2 gap-3">
              <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition-colors">
                <div className="flex items-center gap-2 text-blue-400 mb-1">
                  <MapPin className="w-4 h-4" />
                  <span className="text-xs font-bold uppercase">出生時辰</span>
                </div>
                <p className="text-sm text-slate-200">{result.shichen}</p>
              </div>
              <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-800 hover:border-slate-700 transition-colors">
                 <div className="flex items-center gap-2 text-indigo-400 mb-1">
                  <User className="w-4 h-4" />
                  <span className="text-xs font-bold uppercase">生命靈數</span>
                </div>
                <p className="text-sm text-slate-200">數字 {result.lifePath}</p>
              </div>
            </div>

            {/* 死因 */}
            <div className="bg-slate-900/30 p-4 rounded-xl border border-red-900/30 hover:border-red-500/30 transition-colors">
               <div className="flex items-center gap-2 text-red-400/80 mb-2">
                  <Skull className="w-4 h-4" />
                  <span className="text-xs font-bold uppercase">前世終章 (歷史數據庫)</span>
                </div>
                <p className="text-sm text-slate-400 italic">"{result.death}"</p>
            </div>

            {/* 屬性條 */}
            <div className="space-y-3 pt-2">
              <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest text-center mb-2">靈魂屬性殘留</h3>
              {[
                { label: "靈性", val: result.stats.spirituality, color: "bg-purple-500" },
                { label: "魅力", val: result.stats.charisma, color: "bg-pink-500" },
                { label: "智慧", val: result.stats.intelligence, color: "bg-blue-500" },
                { label: "力量", val: result.stats.strength, color: "bg-amber-500" },
              ].map((stat, idx) => (
                <div key={idx} className="flex items-center gap-3">
                  <span className="text-xs text-slate-400 w-8 text-right">{stat.label}</span>
                  <div className="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div 
                      className={`h-full ${stat.color} rounded-full transition-all duration-1000 ease-out`}
                      style={{ width: `${stat.val}%` }}
                    ></div>
                  </div>
                  <span className="text-xs text-slate-300 w-6">{Math.floor(stat.val)}</span>
                </div>
              ))}
            </div>

            <button 
              onClick={() => setStep('input')}
              className="w-full mt-4 bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium py-3 rounded-xl border border-slate-700 transition-all flex items-center justify-center gap-2"
            >
              <RefreshCcw className="w-4 h-4" />
              重新測算
            </button>
          </div>
        )}

      </div>
      
      <style>{`
        .animate-spin-reverse {
          animation: spin-reverse 3s linear infinite;
        }
        @keyframes spin-reverse {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }
        .custom-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: rgba(30, 41, 59, 0.5); 
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: rgba(71, 85, 105, 0.8); 
          border-radius: 4px;
        }
      `}</style>
    </div>
  );
}