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

const renderBoldText = (text) => (
  String(text || '').split(/(\*\*[\s\S]+?\*\*)/g).map((part, index) => {
    if (part.startsWith('**') && part.endsWith('**') && part.length > 4) {
      return <strong key={index}>{part.slice(2, -2)}</strong>;
    }
    return <React.Fragment key={index}>{part}</React.Fragment>;
  })
);

const AIDivination = ({ onBack }) => {
  const [question, setQuestion] = useState('');
  const [phase, setPhase] = useState('ask'); // ask → pick → shuffle → dealing → 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 isDealing = phase === 'dealing';

  useEffect(() => {
    if (!isDealing || draws.length === 0) return;
    const timers = draws.map((_, i) => (
      setTimeout(() => {
        setRevealed(r => {
          const n = [...r];
          n[i] = true;
          return n;
        });
      }, 620 + i * 180)
    ));
    const done = setTimeout(() => setPhase('reveal'), 760 + draws.length * 180);
    return () => {
      timers.forEach(clearTimeout);
      clearTimeout(done);
    };
  }, [isDealing, draws.length]);

  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('pick');
    setSpread(null);
    setDraws([]);
    setRevealed([]);
    setReading('');
  };

  const startSpread = (s) => {
    setSpread(s);
    setPhase('shuffle');
    setTimeout(() => {
      setDraws(drawCards(s.count));
      setRevealed(new Array(s.count).fill(false));
      setPhase('dealing');
    }, 1200);
  };

  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('');
    setLoading(false);
  };

  const backAction = phase === 'ask' ? onBack : phase === 'pick' ? () => setPhase('ask') : reset;
  const backLabel = phase === 'ask' ? '← 返回' : phase === 'pick' ? '← 修改问题' : '← 重新开始';

  return (
    <div className="divination">
      <button className="back-btn" onClick={backAction}>{backLabel}</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 === 'pick' && (
        <>
          <header className="page-header">
            <div className="page-eyebrow">Choose a Spread</div>
            <h2 className="page-title">选择牌阵</h2>
            <p className="page-subtitle">「{question}」</p>
          </header>
          <div className="spread-list">
            {SPREADS.map(s => (
              <div key={s.id} className="spread-card" onClick={() => startSpread(s)}>
                <div className="spread-mark"><window.SpreadIcon spread={s}/></div>
                <div className="spread-info">
                  <div className="spread-name">{s.name}</div>
                  <div className="spread-en">{s.en}</div>
                  <p className="spread-desc">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {phase === 'shuffle' && spread && (
        <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 === 'dealing' || 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">{isDealing ? '牌正在落位，并依次翻开' : `「${question}」`}</p>
          </header>

          <window.SpreadLayout spread={spread} draws={draws} revealed={revealed} onReveal={reveal} autoDealing={isDealing}/>

          {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 && (
                <div className="reading-loader" role="status" aria-live="polite">
                  <svg className="reading-loader-sigil" viewBox="0 0 48 48" aria-hidden="true">
                    <circle className="reading-loader-ring" cx="24" cy="24" r="18"/>
                    <path className="reading-loader-line" d="M24 8 L24 40 M10 24 L38 24 M15 15 L33 33 M33 15 L15 33"/>
                    <circle className="reading-loader-dot" cx="24" cy="24" r="3"/>
                  </svg>
                  <span className="reading-loader-text">正在解读</span>
                  <span className="reading-loader-dots" aria-hidden="true">
                    <span></span><span></span><span></span>
                  </span>
                </div>
              )}
              {!loading && <div className="ai-reading">{renderBoldText(reading)}</div>}
              {!loading && <button className="link-btn" onClick={reset}>问下一个问题</button>}
            </div>
          )}
        </>
      )}
    </div>
  );
};

window.AIDivination = AIDivination;