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

const SUIT_TABS = [
  { id: 'major', label: '大阿卡纳', en: 'Major Arcana' },
  { id: 'wands', label: '权杖', en: 'Wands · 火' },
  { id: 'cups', label: '圣杯', en: 'Cups · 水' },
  { id: 'swords', label: '宝剑', en: 'Swords · 风' },
  { id: 'pentacles', label: '星币', en: 'Pentacles · 土' },
];

const LibraryPage = () => {
  const [tab, setTab] = useState('major');
  const [selected, setSelected] = useState(null);

  const cards = tab === 'major'
    ? window.TAROT_DATA.majorArcana
    : window.TAROT_DATA.minorArcana[tab];

  const selectCard = (card) => {
    setSelected(card);
    requestAnimationFrame(() => window.scrollTo(0, 0));
  };

  const stepCard = (offset) => {
    if (!selected) return;
    const currentIndex = cards.findIndex(card => card.id === selected.id);
    if (currentIndex < 0) return;
    const nextIndex = (currentIndex + offset + cards.length) % cards.length;
    selectCard(cards[nextIndex]);
  };

  if (selected) {
    const currentIndex = Math.max(cards.findIndex(card => card.id === selected.id), 0);
    const prevCard = cards[(currentIndex - 1 + cards.length) % cards.length];
    const nextCard = cards[(currentIndex + 1) % cards.length];
    return (
      <CardDetail
        card={selected}
        onBack={() => setSelected(null)}
        onPrev={() => stepCard(-1)}
        onNext={() => stepCard(1)}
        prevCard={prevCard}
        nextCard={nextCard}
      />
    );
  }

  return (
    <div className="library">
      <header className="page-header">
        <div className="page-eyebrow">Tarot Library</div>
        <h1 className="page-title">牌库</h1>
        <p className="page-subtitle">七十八张牌——大阿卡纳与四组小阿卡纳的全集</p>
      </header>

      <nav className="suit-tabs">
        {SUIT_TABS.map(s => (
          <button
            key={s.id}
            className={`suit-tab ${tab === s.id ? 'active' : ''}`}
            onClick={() => setTab(s.id)}
          >
            <div className="suit-tab-zh">{s.label}</div>
            <div className="suit-tab-en">{s.en}</div>
          </button>
        ))}
      </nav>

      <div className="card-grid">
        {cards.map(card => (
          <StaticCard
            key={card.id}
            card={card}
            size="library"
            onClick={() => selectCard(card)}
          />
        ))}
      </div>
    </div>
  );
};

const CardDetail = ({ card, onBack, onPrev, onNext, prevCard, nextCard }) => {
  return (
    <div className="card-detail">
      <div className="detail-toolbar">
        <button className="back-btn" onClick={onBack}>← 返回牌库</button>
        <div className="detail-stepper">
          <button className="detail-step-btn" onClick={onPrev}>← {prevCard.nameZh}</button>
          <button className="detail-step-btn" onClick={onNext}>{nextCard.nameZh} →</button>
        </div>
      </div>
      <div className="detail-grid">
        <div className="detail-art">
          <StaticCard card={card} size="xl" label={false}/>
        </div>
        <div className="detail-text">
          <div className="detail-header">
            <h2 className="detail-title">
              <span className="detail-number">{card.roman || card.number}</span>
              <span className="detail-name-zh">{card.nameZh}</span>
              <span className="detail-name-en">{card.nameEn}</span>
            </h2>

            <div className="detail-meta">
              {card.element && <span className="meta-item">元素 · {card.element}</span>}
              {card.planet && <span className="meta-item">星象 · {card.planet}</span>}
            </div>

            <div className="kw-list detail-keywords">
              {card.keywords.map(k => <span key={k} className="kw">{k}</span>)}
            </div>
          </div>

          <div className="detail-section">
            <h3>正位 · Upright</h3>
            {card.upright.split('\n\n').map((para, i) => <p key={i}>{para}</p>)}
          </div>

          <div className="detail-section">
            <h3>逆位 · Reversed</h3>
            {card.reversed.split('\n\n').map((para, i) => <p key={i}>{para}</p>)}
          </div>
        </div>
      </div>
    </div>
  );
};

window.LibraryPage = LibraryPage;