/* global React, FlipCard, StaticCard */
const { useState, useMemo } = React;

const SpreadIcon = ({ spread }) => {
  const card = (x, y, rotate = 0, key) => (
    <rect
      key={key}
      x={x}
      y={y}
      width="12"
      height="18"
      rx="1.6"
      transform={`rotate(${rotate} ${x + 6} ${y + 9})`}
    />
  );

  const layouts = {
    single: [card(34, 23, 0, 'single')],
    three: [card(14, 23, -5, 'past'), card(34, 23, 0, 'now'), card(54, 23, 5, 'future')],
    situation: [card(18, 28, -4, 'situation'), card(34, 20, 0, 'action'), card(50, 28, 4, 'result')],
    cross: [
      card(30, 22, 0, 'core'),
      card(30, 22, 90, 'challenge'),
      card(30, 2, 0, 'above'),
      card(30, 42, 0, 'below'),
      card(10, 22, 0, 'past'),
      card(50, 22, 0, 'future'),
      card(66, 44, 0, 'self'),
      card(66, 30, 0, 'environment'),
      card(66, 16, 0, 'hope'),
      card(66, 2, 0, 'outcome'),
    ],
  };

  return (
    <svg className="spread-icon" viewBox="0 0 84 64" aria-hidden="true">
      <g>{layouts[spread.id] || layouts.single}</g>
    </svg>
  );
};

const SPREADS = [
  { id: 'single', name: '单张牌', en: 'Single Card', count: 1, positions: ['核心指引'],
    desc: '一张牌，一个清晰的回应。适合日常的小问与即时的指引。' },
  { id: 'three', name: '三张牌', en: 'Three Cards', count: 3, positions: ['过去','现在','未来'],
    desc: '时间之轴上的三个截面，揭示事情的来龙去脉与走向。' },
  { id: 'situation', name: '处境牌阵', en: 'Situation', count: 3, positions: ['处境','行动','结果'],
    desc: '当下的处境、可采取的行动、可能的结果——务实的决策助手。' },
  { id: 'cross', name: '凯尔特十字', en: 'Celtic Cross', count: 10,
    positions: ['核心','挑战','根源','过去','上方意识','近未来','自我','环境','希望/恐惧','结局'],
    desc: '最经典也最深入的牌阵，从十个角度全面剖析一个议题。' },
];

const drawCards = (n) => {
  const all = [
    ...window.TAROT_DATA.majorArcana,
    ...window.TAROT_DATA.minorArcana.wands,
    ...window.TAROT_DATA.minorArcana.cups,
    ...window.TAROT_DATA.minorArcana.swords,
    ...window.TAROT_DATA.minorArcana.pentacles,
  ];
  const pool = [...all];
  const out = [];
  for (let i = 0; i < n; i++) {
    const idx = Math.floor(Math.random() * pool.length);
    out.push({ card: pool[idx], reversed: Math.random() < 0.3 });
    pool.splice(idx, 1);
  }
  return out;
};

const DivinationPage = () => {
  const [mode, setMode] = useState(null); // 'ai' | 'self'

  if (!mode) return <ModePicker onPick={setMode}/>;
  if (mode === 'ai')   return <window.AIDivination onBack={() => setMode(null)}/>;
  if (mode === 'self') return <window.SelfDivination onBack={() => setMode(null)}/>;
};

const ModePicker = ({ onPick }) => (
  <div className="divination">
    <header className="page-header">
      <div className="page-eyebrow">Tarot Reading</div>
      <h1 className="page-title">占卜</h1>
      <p className="page-subtitle">在沉静中提问，让牌面为你指引</p>
    </header>

    <div className="mode-grid">
      <div className="mode-card" onClick={() => onPick('ai')}>
        <div className="mode-ornament">
          <svg viewBox="0 0 60 60" width="48" height="48"><circle cx="30" cy="30" r="20" fill="none" stroke="currentColor" strokeWidth="0.6"/><circle cx="30" cy="30" r="12" fill="none" stroke="currentColor" strokeWidth="0.5"/><circle cx="30" cy="30" r="3" fill="currentColor"/>{Array.from({length:8}).map((_,i)=>{const a=(i*Math.PI*2)/8;return <line key={i} x1={30+Math.cos(a)*12} y1={30+Math.sin(a)*12} x2={30+Math.cos(a)*20} y2={30+Math.sin(a)*20} stroke="currentColor" strokeWidth="0.4"/>;})}</svg>
        </div>
        <div className="mode-zh">AI 辅助占卜</div>
        <div className="mode-en">Guided Reading</div>
        <p className="mode-desc">说出你的困惑，由 AI 选择合适的牌阵，洗牌、抽牌，并结合你的问题给出解读。</p>
      </div>

      <div className="mode-card" onClick={() => onPick('self')}>
        <div className="mode-ornament">
          <svg viewBox="0 0 60 60" width="48" height="48"><rect x="14" y="10" width="14" height="22" fill="none" stroke="currentColor" strokeWidth="0.6"/><rect x="32" y="10" width="14" height="22" fill="none" stroke="currentColor" strokeWidth="0.6" transform="rotate(8 39 21)"/><rect x="22" y="28" width="14" height="22" fill="none" stroke="currentColor" strokeWidth="0.6" transform="rotate(-4 29 39)"/></svg>
        </div>
        <div className="mode-zh">自行占卜</div>
        <div className="mode-en">Self Reading</div>
        <p className="mode-desc">选择你熟悉的牌阵，洗牌、抽牌，自行解读。不打扰你与牌面之间的对话。</p>
      </div>
    </div>
  </div>
);

window.SPREADS = SPREADS;
window.SpreadIcon = SpreadIcon;
window.drawCards = drawCards;
window.DivinationPage = DivinationPage;
window.ModePicker = ModePicker;