import React, { useState, useEffect, useRef } from 'react';
import { Sparkles, Star, Moon, Sun, ArrowRight, RefreshCw, BookOpen, Hand, Wand2, Quote } from 'lucide-react';
/**
* ==========================================
* 全局設定：卡牌背面圖案
* ==========================================
*/
const CARD_BACK_IMAGE = "https://res.cloudinary.com/dyckbafwn/image/upload/v1768430815/Back_lgq3z8.png";
/**
* ==========================================
* 用戶資料輸入區
* ==========================================
*/
const CARD_DATA = {
planets: [
{
id: 'p1', name: '太陽', symbol: '☉',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430827/1_Sun_tia7ui.png',
keywords: ['展現自我', '確立目標', '發光發熱'],
desc: '這是一股核心的陽性力量，象徵你的意識焦點所在。'
},
{
id: 'p2', name: '月亮', symbol: '☽',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430826/2_Moon_npuryp.png',
keywords: ['照顧內心', '情緒流動', '尋求安全'],
desc: '反映了你深層的需求，以及那些習以為常的直覺反應。'
},
{
id: 'p3', name: '水星', symbol: '☿',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430832/3_Mercury_krs8xh.png',
keywords: ['理性溝通', '學習新知', '交換情報'],
desc: '代表思維的運作方式，提示你需要多一點邏輯與彈性。'
},
{
id: 'p4', name: '金星', symbol: '♀',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430829/4_Venus_urdnii.png',
keywords: ['享受生活', '建立關係', '權衡價值'],
desc: '這與喜好有關，提示你用更柔和、美感的方式去應對。'
},
{
id: 'p5', name: '火星', symbol: '♂',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430830/5_Mars_f2uv9w.png',
keywords: ['採取行動', '捍衛立場', '燃燒慾望'],
desc: '這是一股爆發力，雖然可能帶來衝突，但也帶來突破。'
},
{
id: 'p6', name: '木星', symbol: '♃',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430832/6_Jupiter_p99zxs.png',
keywords: ['樂觀擴張', '把握機會', '提升視野'],
desc: '象徵幸運與成長，提示你不要畫地自限，看得更長遠。'
},
{
id: 'p7', name: '土星', symbol: '♄',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430831/7_Saturn_tadhdu.png',
keywords: ['承擔責任', '面對現實', '建立結構'],
desc: '雖然感覺沉重，但這股壓力是為了讓你打下更穩固的基礎。'
},
{
id: 'p8', name: '天王星', symbol: '♅',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430831/8_Uranus_d6gty3.png',
keywords: ['打破常規', '突發改變', '保持獨立'],
desc: '預示著意想不到的變數，提示你擁抱變化，不要墨守成規。'
},
{
id: 'p9', name: '海王星', symbol: '♆',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430833/9_Neptune_axepx2.png',
keywords: ['相信直覺', '順勢而為', '模糊界線'],
desc: '這是一股消融的力量，提示你有的時候不需要太過理性分析。'
},
{
id: 'p10', name: '冥王星', symbol: '♇',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430815/10_Pluto_wxv6dp.png',
keywords: ['徹底轉化', '挖掘真相', '斷捨離'],
desc: '象徵浴火重生，提示你必須先放下舊的，新的才能進來。'
},
{
id: 'p11', name: '南交點', symbol: '☋',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430813/12_South_Node_knddut.png',
keywords: ['前世業力', '釋放執著', '天賦才華'],
desc: '代表你需要釋放的舊有模式或舒適圈，運用與生俱來的才能，但不要沈溺其中。'
},
{
id: 'p12', name: '北交點', symbol: '☊',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430813/11_North_Node_i7hssg.png',
keywords: ['靈魂使命', '突破舒適圈', '未來方向'],
desc: '這是一個成長的指針，提示你往未曾嘗試的方向前進。'
},
],
signs: [
{
id: 's1', name: '白羊座', symbol: '♈',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430841/25_Aries_jkjftm.png',
keywords: ['衝動直接', '開創先鋒', '熱情如火'],
desc: '你需要像戰士一樣，不需要太多猶豫，做了再說。'
},
{
id: 's2', name: '金牛座', symbol: '♉',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430841/26_Taurus_lbn3e3.png',
keywords: ['穩紮穩打', '重視質感', '固執堅持'],
desc: '與其求快，不如求穩，用最務實的態度去衡量價值。'
},
{
id: 's3', name: '雙子座', symbol: '♊',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430842/27_Gemini_kvpdim.png',
keywords: ['靈活多變', '舉一反三', '輕鬆以對'],
desc: '別太嚴肅，保持好奇心，多方嘗試會找到出路。'
},
{
id: 's4', name: '巨蟹座', symbol: '♋',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430813/28_Cancer_xkk2l5.png',
keywords: ['溫柔守護', '情感連結', '防衛心態'],
desc: '你需要回到讓你有安全感的地方，用情感去連結他人。'
},
{
id: 's5', name: '獅子座', symbol: '♌',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430819/29_Leo_kvowuc.png',
keywords: ['展現自信', '領導統御', '戲劇張力'],
desc: '這是你的舞台，不要害怕成為焦點，大方展現你的才華。'
},
{
id: 's6', name: '處女座', symbol: '♍',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430812/30_Virgo_lpeaz3.png',
keywords: ['注重細節', '服務他人', '完美主義'],
desc: '魔鬼藏在細節裡，現在需要的是精準的分析與條理。'
},
{
id: 's7', name: '天秤座', symbol: '♎',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430824/31_Libra_pddxnf.png',
keywords: ['尋求平衡', '優雅協調', '換位思考'],
desc: '獨斷獨行行不通，現在需要的是合作與和諧的氛圍。'
},
{
id: 's8', name: '天蠍座', symbol: '♏',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430823/32_Scorpio_jhvkvh.png',
keywords: ['洞察本質', '執著專注', '深層情感'],
desc: '表面看到的不是全部，你需要運用直覺去看穿背後的動機。'
},
{
id: 's9', name: '人馬座', symbol: '♐',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430824/33_Sagittarius_remaah.png',
keywords: ['追求自由', '樂觀信念', '探索遠方'],
desc: '放寬心胸，這只是一個過程，相信你的信念會帶領你。'
},
{
id: 's10', name: '山羊座', symbol: '♑',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430822/34_Capricorn_hosqz3.png',
keywords: ['腳踏實地', '建構權威', '長期規劃'],
desc: '收起幻想，現在是講究實力與紀律的時刻。'
},
{
id: 's11', name: '水瓶座', symbol: '♒',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430823/35_Aquarius_kqorsa.png',
keywords: ['客觀抽離', '群體意識', '前衛思想'],
desc: '試著跳脫當局者的迷思，用旁觀者的角度冷靜分析。'
},
{
id: 's12', name: '雙魚座', symbol: '♓',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430841/24_Twelfth_House_rjygfh.png',
keywords: ['慈悲包容', '隨波逐流', '藝術靈感'],
desc: '有時候無為而治也是一種方法，跟隨流動，不要強求。'
},
],
houses: [
{
id: 'h1', name: '第一宮', symbol: 'I',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430816/13_First_House_wistez.png',
keywords: ['自身狀態', '行事風格', '給人印象'],
desc: '這個問題的核心在於「你自己」，你怎麼做決定才是關鍵。'
},
{
id: 'h2', name: '第二宮', symbol: 'II',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430817/14_Second_House_kt5i37.png',
keywords: ['金錢資源', '自我價值', '物質所有'],
desc: '這件事牽涉到實際的資源分配，或是你覺得自己「值不值得」。'
},
{
id: 'h3', name: '第三宮', symbol: 'III',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430835/15_Third_House_rfxefb.png',
keywords: ['溝通表達', '學習交流', '周遭環境'],
desc: '關鍵在於資訊的傳遞是否暢通，或是需要學習新的技能。'
},
{
id: 'h4', name: '第四宮', symbol: 'IV',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430817/16_Fourth_House_wqmrro.png',
keywords: ['家庭根基', '內心安全', '私密生活'],
desc: '這觸動了你最私密的內心層面，或是與家庭、居住環境有關。'
},
{
id: 'h5', name: '第五宮', symbol: 'V',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430836/17_Fifth_House_ezk5jn.png',
keywords: ['自我表現', '戀愛娛樂', '創造快樂'],
desc: '試著找回赤子之心，這件事應該是要讓你感到快樂與榮耀的。'
},
{
id: 'h6', name: '第六宮', symbol: 'VI',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430836/18_Sixth_House_kt9pch.png',
keywords: ['日常工作', '身心健康', '服務奉獻'],
desc: '問題可能出在日常的瑣事或工作流程上，需要調整生活步調。'
},
{
id: 'h7', name: '第七宮', symbol: 'VII',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430840/19_Seventh_House_lrhfv3.png',
keywords: ['合作伴侶', '一對一關係', '公開對手'],
desc: '這不是你一個人的事，很大程度取決於對方（合作者/伴侶）的態度。'
},
{
id: 'h8', name: '第八宮', symbol: 'VIII',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430840/20_Eighth_House_pgx2m7.png',
keywords: ['深層慾望', '資源共享', '轉化重生'],
desc: '這涉及了信任與權力交換，可能需要經歷一次心理上的蛻變。'
},
{
id: 'h9', name: '第九宮', symbol: 'IX',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430817/21_Ninth_House_mbzvzf.png',
keywords: ['高等智慧', '長途遷移', '信念哲學'],
desc: '你需要把目光放得更遠，從道德或哲學的高度來看待這件事。'
},
{
id: 'h10', name: '第十宮', symbol: 'X',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430837/22_Tenth_House_vmtlv4.png',
keywords: ['社會成就', '公眾形象', '事業目標'],
desc: '這關乎你的名聲與外界對你的評價，需要謹慎處理。'
},
{
id: 'h11', name: '第十一宮', symbol: 'XI',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430840/23_Eleventh_House_dx1q5u.png',
keywords: ['人際圈子', '社群團體', '未來願景'],
desc: '多參考朋友的意見，或是將個人的目標與群體的利益結合。'
},
{
id: 'h12', name: '第十二宮', symbol: 'XII',
image: 'https://res.cloudinary.com/dyckbafwn/image/upload/v1768430841/24_Twelfth_House_rjygfh.png',
keywords: ['潛意識', '隱藏事物', '靈性休息'],
desc: '有些事情目前還不明朗，或者答案藏在你忽略的潛意識直覺中。'
},
]
};
// 用於結果展示的對照表 (轉為黑白灰)
const GROUPS_INFO = {
planets: { name: '行星', desc: '能量來源', color: 'text-gray-300', bg: 'bg-gray-800' },
signs: { name: '星座', desc: '能量風格', color: 'text-gray-300', bg: 'bg-gray-800' },
houses: { name: '宮位', desc: '生活領域', color: 'text-gray-300', bg: 'bg-gray-800' },
};
const POSITIONS = [
{ id: 0, title: '過去 / 背景', desc: '成因' },
{ id: 1, title: '現在 / 當下', desc: '現狀' },
{ id: 2, title: '未來 / 建議', desc: '指引' }
];
/**
* ==========================================
* 應用程式組件
* ==========================================
*/
export default function AstrologyApp() {
// 階段: input -> choose_group -> shuffle_1 -> wait_shuffle_2 -> shuffle_2 -> pick_card -> result
const [phase, setPhase] = useState('input');
const [question, setQuestion] = useState('');
// 抽卡狀態
const [currentStep, setCurrentStep] = useState(0);
const [availableGroups, setAvailableGroups] = useState(['planets', 'signs', 'houses']);
const [selectedGroup, setSelectedGroup] = useState(null);
// 視覺狀態
const [shufflePositions, setShufflePositions] = useState([]);
const [timer, setTimer] = useState(0);
// 結果
const [results, setResults] = useState([null, null, null]);
// 產生 12 張卡的隨機位置 (用於混亂狀態)
const generateChaosPositions = () => {
return Array(12).fill(0).map(() => ({
x: (Math.random() - 0.5) * 200,
y: (Math.random() - 0.5) * 200,
r: (Math.random() - 0.5) * 360
}));
};
// 處理開始
const handleStart = () => {
if (!question.trim()) return alert("請輸入您心中的問題");
setPhase('choose_group');
};
// 處理選擇牌組 (第一階段)
const handleGroupSelect = (groupKey) => {
setSelectedGroup(groupKey);
setPhase('shuffle_1');
setTimer(3);
};
// 處理點擊洗牌 (第二階段)
const handleSecondShuffleStart = () => {
if (phase === 'wait_shuffle_2') {
setPhase('shuffle_2');
setTimer(3);
}
};
// 計時器邏輯
useEffect(() => {
let interval;
if ((phase === 'shuffle_1' || phase === 'shuffle_2') && timer > 0) {
interval = setInterval(() => {
setTimer((prev) => prev - 1);
}, 1000);
} else if (timer === 0) {
if (phase === 'shuffle_1') {
setShufflePositions(generateChaosPositions());
setPhase('wait_shuffle_2');
} else if (phase === 'shuffle_2') {
setPhase('pick_card');
}
}
return () => clearInterval(interval);
}, [phase, timer]);
// 處理抽卡
const handlePickCard = (index) => {
const cardsInGroup = CARD_DATA[selectedGroup];
const randomCard = cardsInGroup[Math.floor(Math.random() * cardsInGroup.length)];
const newResults = [...results];
newResults[currentStep] = { ...randomCard, group: selectedGroup };
setResults(newResults);
const newAvailableGroups = availableGroups.filter(g => g !== selectedGroup);
setAvailableGroups(newAvailableGroups);
setSelectedGroup(null);
setShufflePositions([]);
if (currentStep < 2) {
setCurrentStep(prev => prev + 1);
setPhase('choose_group');
} else {
setPhase('result');
}
};
// 重新開始
const handleReset = () => {
setPhase('input');
setQuestion('');
setCurrentStep(0);
setAvailableGroups(['planets', 'signs', 'houses']);
setResults([null, null, null]);
setSelectedGroup(null);
setShufflePositions([]);
};
// ==========================================
// 深度內容生成器
// ==========================================
const getVerboseInterpretation = (card, positionId) => {
const kw = card.keywords;
const name = card.name;
const symbol = card.symbol;
// 隨機話術模板
const intros = [
`在探討這個層面時，宇宙透過 ${symbol} ${name} 傳遞了強烈的訊號。`,
`當我們深入剖析，會發現 ${name} 的能量在此處佔據了關鍵地位。`,
`這是一張充滿張力的牌，${name} 的出現並非偶然，而是共時性的展現。`,
`命運的齒輪轉動至此，${name} 揭示了隱藏在表象之下的真實脈絡。`
];
const analysis = [
`這股能量的核心在於「${kw[0]}」。它不僅僅是一種外在的表現，更是一種內在的驅動力。你可能會感受到一種想要${kw[1]}的強烈衝動，這正是這張牌試圖告訴你的：唯有正視這份能量，才能解開目前的謎團。`,
`從星象學的角度來看，它象徵著${kw[2]}的課題。這或許會讓你感到些許不適，甚至想要逃避，但請記住，${card.desc} 唯有穿越這層迷霧，你才能看見真正的風景。`,
`它帶來了一種關於${kw[1]}的啟示。這可能表現為生活中的具體事件，也可能只是你心頭縈繞不去的一個念頭。無論形式如何，它都在呼喚你去${kw[0]}，去重新定義你與周遭世界的關係。`
];
const advice = [
`因此，當前的建議是：不要抗拒這股力量，試著去引導它。在處理相關事務時，多一點${kw[0]}的特質，少一點恐懼。`,
`這是一個轉折點。若你能善用${name}所帶來的${kw[2]}智慧，你將發現原本看似阻礙的高牆，其實是通往新境界的階梯。`,
`請試著在日常生活中練習${kw[1]}。這不需要宏大的儀式，只需要在每一個微小的選擇中，多一份覺察，多一份對${name}能量的敬意。`
];
let contextSpecific = "";
if (positionId === 0) { // Past
contextSpecific = "回顧過往，這股力量或許曾在你不經意間埋下了伏筆，塑造了你今日看待問題的視角。那些曾經發生過的故事，其實都深受此能量的牽引。";
} else if (positionId === 1) { // Present
contextSpecific = "回到當下，這正是你目前面臨的最大挑戰，也是最大機遇。這股能量正在你的生活中劇烈震盪，要求你給出回應，而不僅僅是旁觀。";
} else { // Future
contextSpecific = "展望未來，若能順應這股流動，你將迎來蛻變。這張牌是指路明燈，告訴你前方的道路雖然未知，但只要掌握了核心心法，便無所畏懼。";
}
const rand = (arr) => arr[Math.floor(Math.random() * arr.length)];
return `${rand(intros)} ${rand(analysis)} ${contextSpecific} ${rand(advice)} 這不僅僅是占卜，更是一次與自我深層對話的邀請。透過理解${name}的本質，你將重新找回掌控命運的主導權。`;
};
const generateInterpretation = () => {
if (!results[0] || !results[1] || !results[2]) return "";
const past = results[0];
const present = results[1];
const future = results[2];
return (
{/* Intro */}
{/* Section 1: Past (Text Only) */}
{/* Section 2: Present (Text Only) */}
{/* Section 3: Future (Text Only) */}
{/* Synthesis */}
);
};
return (
全息解碼分析報告
解碼對象：{question}
I. 過去的印記 - {past.name}
緣起 (背景)
{getVerboseInterpretation(past, 0)}
II. 此刻的課題 - {present.name}
當下 (現狀)
{getVerboseInterpretation(present, 1)}
III. 未來的路徑 - {future.name}
指引 (未來)
{getVerboseInterpretation(future, 2)}
J1M3 綜合解碼
綜觀這三張牌的流動，從{past.name}的根源，流經{present.name}的激流，最終指向{future.name}的大海。
這並非一條直線的道路，而是一個螺旋上升的過程。請記住，星盤是地圖，而你是駕駛員。所有的能量最終都為你所用，只要你保持覺知，答案便在心中。
{/* Header */}
{/* Phase 1: 輸入問題 */}
{phase === 'input' && (