/* global React, FlipCard, SPREADS, drawCards */
const { useState } = React;

const AIDivination = ({ onBack }) => {
  const [question, setQuestion] = useState('');
  const [phase, setPhase] = useState('ask'); // ask → thinking → shuffle → reveal → reading
  const [spread, setSpread] = useState(null);
  const [draws, setDraws] = useState([]);
  const [revealed, setRevealed] = useState([]);
  const [reading, setReading] = useState('');
  const [loading, setLoading] = useState(false);

  const requestReading = async (payload) => {
    const response = await fetch('/api/reading', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const data = await response.json().catch(() => ({}));
    if (!response.ok) throw new Error(data.error || 'AI 解读请求失败');
    return data;
  };

  const submit = async () => {
    if (!question.trim()) return;
    setPhase('thinking');
    // Pick spread based on question complexity
    setLoading(true);
    let chosenId = 'three';
    try {
      const data = await requestReading({
        type: 'spread',
        question: question.trim(),
      });
      const id = (data.spreadId || '').trim().toLowerCase().replace(/[^a-z]/g,'');
      if (['single','three','situation','cross'].includes(id)) chosenId = id;
    } catch (e) { /* fallback */ }

    const s = SPREADS.find(x => x.id === chosenId);
    setSpread(s);
    setLoading(false);
    setPhase('shuffle');
    setTimeout(() => {
      setDraws(drawCards(s.count));
      setRevealed(new Array(s.count).fill(false));
      setPhase('reveal');
    }, 1800);
  };

  const reveal = (i) => {
    setRevealed(r => { const n = [...r]; n[i] = true; return n; });
  };

  const allRevealed = revealed.length > 0 && revealed.every(Boolean);

  const interpret = async () => {
    setLoading(true);
    setPhase('reading');
    try {
      const data = await requestReading({
        type: 'reading',
        question: question.trim(),
        spread: {
          id: spread.id,
          name: spread.name,
          en: spread.en,
        },
        cards: draws.map((d, i) => ({
          position: spread.positions[i],
          nameZh: d.card.nameZh,
          nameEn: d.card.nameEn,
          reversed: d.reversed,
          keywords: d.card.keywords,
          meaning: d.reversed ? d.card.reversed : d.card.upright,
        })),
      });
      setReading(data.reading || '解读暂时无法生成，请稍后再试。');
    } catch (e) {
      setReading('解读暂时无法生成，请稍后再试。');
    }
    setLoading(false);
  };

  const reset = () => {
    setPhase('ask'); setQuestion(''); setSpread(null);
    setDraws([]); setRevealed([]); setReading('');
  };

  return (
    <div className="divination">
      <button className="back-btn" onClick={onBack}>← 返回</button>

      {phase === 'ask' && (
        <>
          <header className="page-header">
            <div className="page-eyebrow">Guided Reading</div>
            <h2 className="page-title">说出你的困惑</h2>
            <p className="page-subtitle">在心中默念你的问题，让它清晰、具体、真诚</p>
          </header>
          <div className="ask-box">
            <textarea
              value={question}
              onChange={e => setQuestion(e.target.value)}
              placeholder="例：我和某人之间的关系正在经历什么？我该如何对待眼下的工作机遇？"
              rows={4}
            />
            <button className="primary-btn" disabled={!question.trim()} onClick={submit}>
              交托给牌
            </button>
          </div>
        </>
      )}

      {phase === 'thinking' && (
        <div className="ai-thinking">
          <div className="orbit-loader"><div className="orbit"></div><div className="orbit-dot"></div></div>
          <p className="thinking-text">正在感受你的问题，挑选合适的牌阵…</p>
        </div>
      )}

      {phase === 'shuffle' && (
        <div className="ai-thinking">
          <div className="shuffle-deck">
            <div className="sd-card sd1"></div>
            <div className="sd-card sd2"></div>
            <div className="sd-card sd3"></div>
          </div>
          <p className="thinking-text">为你洗牌中…</p>
          <p className="thinking-sub">推荐牌阵 · {spread.name}（{spread.en}）</p>
        </div>
      )}

      {(phase === 'reveal' || phase === 'reading') && spread && (
        <>
          <header className="page-header tight">
            <div className="page-eyebrow">{spread.en}</div>
            <h2 className="page-title">{spread.name}</h2>
            <p className="page-subtitle">「{question}」</p>
          </header>

          <div className={`spread-layout cols-${spread.count}`}>
            {draws.map((d, i) => (
              <div key={i} className="spread-slot">
                <div className="slot-pos">{spread.positions[i]}</div>
                <FlipCard
                  card={d.card}
                  faceUp={revealed[i]}
                  reversed={d.reversed}
                  size="sm"
                  onClick={() => !revealed[i] && phase === 'reveal' && reveal(i)}
                />
                <div className="slot-name">
                  {revealed[i] ? <>{d.card.nameZh}{d.reversed && ' · 逆位'}</> : <span className="dim">未翻开</span>}
                </div>
              </div>
            ))}
          </div>

          {allRevealed && phase === 'reveal' && (
            <div className="ai-cta">
              <button className="primary-btn" onClick={interpret}>请 AI 为我解读</button>
            </div>
          )}

          {phase === 'reading' && (
            <div className="reading-text">
              <h3 className="reading-title">解读 · Interpretation</h3>
              {loading && <p className="loading-text">正在解读…</p>}
              {!loading && <p className="ai-reading">{reading}</p>}
              {!loading && <button className="link-btn" onClick={reset}>问下一个问题</button>}
            </div>
          )}
        </>
      )}
    </div>
  );
};

window.AIDivination = AIDivination;