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

// ─── Self Divination ───────────────────────────────────────────────
const SelfDivination = ({ onBack }) => {
  const [spread, setSpread] = useState(null);
  const [phase, setPhase] = useState('pick'); // pick → shuffle → draw → reveal
  const [draws, setDraws] = useState([]);
  const [revealed, setRevealed] = useState([]);

  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 startSpread = (s) => {
    setSpread(s);
    setPhase('shuffle');
  };

  const shuffleDone = () => {
    setDraws(drawCards(spread.count));
    setRevealed(new Array(spread.count).fill(false));
    setPhase('dealing');
  };

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

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

  if (phase === 'pick') {
    return (
      <div className="divination">
        <button className="back-btn" onClick={onBack}>← 返回</button>
        <header className="page-header">
          <div className="page-eyebrow">Self Reading</div>
          <h2 className="page-title">选择牌阵</h2>
          <p className="page-subtitle">在心中默念你的问题，再选择最合适的牌阵</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>
      </div>
    );
  }

  if (phase === 'shuffle') {
    return (
      <div className="divination">
        <div className="divination-toolbar">
          <button className="back-btn" onClick={reset}>← 重新选择</button>
        </div>
        <div className="shuffle-content">
          <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="shuffle-hint">屏息，让心绪沉静</p>
          <p className="shuffle-sub">你选择了 · {spread.name}</p>
          <button className="primary-btn" onClick={shuffleDone}>已洗好，开始抽牌</button>
        </div>
      </div>
    );
  }

  // dealing / reveal phase
  return (
    <div className="divination">
      <div className="divination-toolbar">
        <button className="back-btn" onClick={reset}>← 重新选择</button>
      </div>
      <header className="page-header tight">
        <div className="page-eyebrow">{spread.en}</div>
        <h2 className="page-title">{spread.name}</h2>
        <p className="page-subtitle">{isDealing ? '牌正在落位，并依次翻开' : '牌面已经展开，可以开始解读'}</p>
      </header>

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

      {revealed.every(Boolean) && (
        <div className="reading-text">
          <h3 className="reading-title">牌面 · Reading</h3>
          {draws.map((d, i) => (
            <div key={i} className="reading-row">
              <div className="reading-pos">{spread.positions[i]}</div>
              <div className="reading-card">
                <div className="reading-name">{d.card.nameZh} {d.reversed ? '· 逆位' : '· 正位'}</div>
                <p>{d.reversed ? d.card.reversed : d.card.upright}</p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// Layout component for various spreads
const SpreadLayout = ({ spread, draws, revealed, onReveal, autoDealing = false }) => {
  if (spread.id === 'cross') {
    return <CelticLayout draws={draws} revealed={revealed} onReveal={onReveal} positions={spread.positions} autoDealing={autoDealing}/>;
  }
  return (
    <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>
          <div className={`deal-card-wrap ${autoDealing ? 'is-dealing' : ''}`} style={{ '--deal-index': i }}>
            <FlipCard
              card={d.card}
              faceUp={revealed[i]}
              reversed={d.reversed}
              size="sm"
              onClick={() => !autoDealing && !revealed[i] && onReveal(i)}
            />
          </div>
          <div className="slot-name">
            {revealed[i] ? <>{d.card.nameZh}{d.reversed && ' · 逆位'}</> : <span className="dim">未翻开</span>}
          </div>
        </div>
      ))}
    </div>
  );
};

// Celtic Cross — 10-card layout
const CelticLayout = ({ draws, revealed, onReveal, positions, autoDealing = false }) => {
  // Positions on a 5x4 grid (0-9)
  // 0:核心(中) 1:挑战(中横) 2:根源(下) 3:过去(左) 4:意识(上) 5:近未来(右)
  // 6-9: 自我/环境/希望/结局 (右侧立柱)
  const layout = [
    { col: 3, row: 2 },               // 0 核心
    { col: 3, row: 2, rotate: true }, // 1 挑战 (压在核心上, 旋转)
    { col: 3, row: 4 },               // 2 根源
    { col: 1, row: 2 },               // 3 过去
    { col: 3, row: 0 },               // 4 上方
    { col: 5, row: 2 },               // 5 近未来
    { col: 7, row: 4 },               // 6 自我
    { col: 7, row: 3 },               // 7 环境
    { col: 7, row: 2 },               // 8 希望
    { col: 7, row: 1 },               // 9 结局
  ];
  return (
    <div className="celtic-grid">
      {draws.map((d, i) => {
        const p = layout[i];
        return (
          <div key={i}
            className={`celtic-slot ${p.rotate ? 'rotated' : ''}`}
            style={{ gridColumn: p.col, gridRow: p.row }}>
            <div className="slot-num">{i+1}</div>
            <div className={`deal-card-wrap ${autoDealing ? 'is-dealing' : ''}`} style={{ '--deal-index': i }}>
              <FlipCard
                card={d.card}
                faceUp={revealed[i]}
                reversed={d.reversed}
                size="xs"
                onClick={() => !autoDealing && !revealed[i] && onReveal(i)}
              />
            </div>
            <div className="slot-pos-tiny">{positions[i]}</div>
          </div>
        );
      })}
    </div>
  );
};

window.SelfDivination = SelfDivination;