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

const splitMeaningIntoParagraphs = (text) => {
  const blockParagraphs = text.split(/\n{2,}/).map(p => p.trim()).filter(Boolean);
  if (blockParagraphs.length > 1) return blockParagraphs;

  const sentences = (text.match(/[^。！？!?]+[。！？!?]?/g) || [text])
    .map(s => s.trim())
    .filter(Boolean);
  if (sentences.length <= 2) return [text.trim()].filter(Boolean);

  const paragraphs = [];
  for (let i = 0; i < sentences.length; i += 2) {
    paragraphs.push(sentences.slice(i, i + 2).join(''));
  }
  return paragraphs;
};

const HomePage = () => {
  const [drawn, setDrawn] = useState(null);
  const [faceUp, setFaceUp] = useState(false);
  const [reversed, setReversed] = useState(false);

  const drawCard = () => {
    if (faceUp) return;
    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 card = all[Math.floor(Math.random() * all.length)];
    const isRev = Math.random() < 0.3;
    setDrawn(card);
    setReversed(isRev);
    setTimeout(() => setFaceUp(true), 80);
  };

  const reset = () => {
    setFaceUp(false);
    setTimeout(() => { setDrawn(null); setReversed(false); }, 600);
  };

  const meaning = drawn ? (reversed ? drawn.reversed : drawn.upright) : '';
  const meaningParagraphs = splitMeaningIntoParagraphs(meaning);

  return (
    <div className="home">
      <div className="home-stage">
        <div className="card-stack-wrap">
          {!drawn && (
            <div className="card-stack" onClick={drawCard}>
              <div className="stack-shadow stack-shadow-3"></div>
              <div className="stack-shadow stack-shadow-2"></div>
              <div className="stack-shadow stack-shadow-1"></div>
              <FlipCard size="lg"/>
            </div>
          )}
          {drawn && (
            <FlipCard card={drawn} faceUp={faceUp} reversed={reversed} size="lg"/>
          )}
        </div>

        <div className="home-caption">
          {!drawn && (
            <>
              <p className="home-hint en">Draw a card</p>
              <p className="home-hint zh">— 点击牌堆，抽一张当下的指引 —</p>
            </>
          )}
          {drawn && faceUp && (
            <div className="home-result">
              <div className="result-name-zh">{drawn.nameZh}{reversed && <span className="rev-tag"> · 逆位</span>}</div>
              <div className="result-name-en">{drawn.nameEn}{reversed && ' (Reversed)'}</div>
              <div className="result-keywords">
                {drawn.keywords.slice(0,4).map(k => <span key={k} className="kw">{k}</span>)}
              </div>
              <div className="result-meaning">
                {meaningParagraphs.map((para, i) => <p key={i}>{para}</p>)}
              </div>
              <button className="link-btn" onClick={reset}>再抽一张</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.HomePage = HomePage;