// Main Chamber: daily card + library + reading section
const { useState: uC, useEffect: eC, useMemo: mC, useRef: rC } = React;

const SUITS = [
  { key: 'all', label: 'All' },
  { key: 'major', label: 'Major Arcana' },
  { key: 'wands', label: 'Wands' },
  { key: 'cups', label: 'Cups' },
  { key: 'swords', label: 'Swords' },
  { key: 'pentacles', label: 'Pentacles' },
];

window.Chamber = function Chamber() {
  const allCards = window.ALL_CARDS;
  const [selected, setSelected] = uC(null);
  const [filter, setFilter] = uC('all');
  const [query, setQuery] = uC('');
  const [dailyId, setDailyId] = uC(null);

  eC(() => {
    // Daily card — persistent per day
    const today = new Date().toDateString();
    const stored = localStorage.getItem('sarah_daily');
    if (stored) {
      try {
        const { date, id } = JSON.parse(stored);
        if (date === today) { setDailyId(id); return; }
      } catch {}
    }
    const id = Math.floor(Math.random() * allCards.length);
    localStorage.setItem('sarah_daily', JSON.stringify({ date: today, id }));
    setDailyId(id);
  }, []);

  const filtered = mC(() => {
    const q = query.trim().toLowerCase();
    return allCards.filter(c => {
      if (filter !== 'all' && c.suit !== filter) return false;
      if (!q) return true;
      return c.name.toLowerCase().includes(q)
        || c.suit.toLowerCase().includes(q)
        || String(c.number).toLowerCase().includes(q)
        || c.keywords.some(k => k.toLowerCase().includes(q));
    });
  }, [filter, query, allCards]);

  const majors = filtered.filter(c => c.suit === 'major');
  const minorsBySuit = {
    wands: filtered.filter(c => c.suit === 'wands'),
    cups: filtered.filter(c => c.suit === 'cups'),
    swords: filtered.filter(c => c.suit === 'swords'),
    pentacles: filtered.filter(c => c.suit === 'pentacles'),
  };

  const daily = dailyId != null ? allCards[dailyId] : null;

  return React.createElement('div', { className: 'chamber' },
    React.createElement('div', { className: 'top-bar' },
      React.createElement('h2', { className: 'mystic-title' }, '✦  The Secret Chamber  ✦')
    ),
    daily && React.createElement(DailyCard, { card: daily, onOpen: () => setSelected(daily) }),
    React.createElement(ReadingSection, { cards: allCards }),
    React.createElement('div', { className: 'section' },
      React.createElement('h3', { className: 'section-title' }, 'The Library'),
      React.createElement('div', { className: 'controls' },
        React.createElement('input', {
          className: 'search-input', placeholder: '✦  Search by name, suit, or keyword…',
          value: query, onChange: e => setQuery(e.target.value)
        }),
        SUITS.map(s => React.createElement('button', {
          key: s.key, className: 'filter-pill' + (filter === s.key ? ' active' : ''),
          onClick: () => setFilter(s.key)
        }, s.label))
      ),
      (filter === 'all' || filter === 'major') && majors.length > 0 &&
        React.createElement('div', { style: { marginBottom: '2.5rem' } },
          React.createElement('h4', {
            style: { fontFamily: 'var(--font-mystic)', color: 'var(--gold)', letterSpacing: '0.2em', fontSize: '1rem', margin: '0 0 1rem', fontWeight: 500 }
          }, '☉  MAJOR ARCANA  ☉'),
          React.createElement(CardGrid, { cards: majors, onSelect: setSelected })
        ),
      (filter === 'all' || filter === 'wands') && minorsBySuit.wands.length > 0 &&
        React.createElement(SuitBlock, { title: '🜂  WANDS  🜂', cards: minorsBySuit.wands, onSelect: setSelected }),
      (filter === 'all' || filter === 'cups') && minorsBySuit.cups.length > 0 &&
        React.createElement(SuitBlock, { title: '🜄  CUPS  🜄', cards: minorsBySuit.cups, onSelect: setSelected }),
      (filter === 'all' || filter === 'swords') && minorsBySuit.swords.length > 0 &&
        React.createElement(SuitBlock, { title: '🜁  SWORDS  🜁', cards: minorsBySuit.swords, onSelect: setSelected }),
      (filter === 'all' || filter === 'pentacles') && minorsBySuit.pentacles.length > 0 &&
        React.createElement(SuitBlock, { title: '🜃  PENTACLES  🜃', cards: minorsBySuit.pentacles, onSelect: setSelected }),
      filtered.length === 0 && React.createElement('p', { style: { textAlign: 'center', fontStyle: 'italic', color: 'rgba(239,230,211,0.6)', padding: '3rem' } },
        'The cards do not recognize that whisper…')
    ),
    selected && React.createElement(window.CardModal, { card: selected, onClose: () => setSelected(null) })
  );
};

function SuitBlock({ title, cards, onSelect }) {
  return React.createElement('div', { style: { marginBottom: '2.5rem' } },
    React.createElement('h4', {
      style: { fontFamily: 'var(--font-mystic)', color: 'var(--gold)', letterSpacing: '0.2em', fontSize: '1rem', margin: '0 0 1rem', fontWeight: 500 }
    }, title),
    React.createElement(CardGrid, { cards, onSelect })
  );
}

function CardGrid({ cards, onSelect }) {
  return React.createElement('div', { className: 'card-grid' },
    cards.map(c => React.createElement(MiniTarotCard, { key: c.id, card: c, onClick: () => onSelect(c), delay: (c.id % 8) * 0.3 }))
  );
}

function MiniTarotCard({ card, onClick, delay }) {
  return React.createElement('div', { className: 'tarot-card', style: { '--bob-delay': delay + 's' }, onClick },
    React.createElement('div', { className: 'tarot-card-inner' },
      React.createElement('div', { className: 'card-face' },
        React.createElement('div', { className: 'card-art' }, React.createElement(window.CardArt, { card })),
        React.createElement('div', { className: 'card-name' }, card.name),
        React.createElement('div', { className: 'card-number' }, card.suit === 'major' ? card.number : (card.number + ' of ' + cap(card.suit)))
      )
    )
  );
}
function cap(s) { return s.charAt(0).toUpperCase() + s.slice(1); }

function DailyCard({ card, onOpen }) {
  return React.createElement('div', { className: 'daily-card', onClick: onOpen, style: { cursor: 'none' } },
    React.createElement('div', { style: { aspectRatio: '1/1.65', width: '100%', maxWidth: '180px' } },
      React.createElement(MiniTarotCard, { card, onClick: onOpen, delay: 0 })
    ),
    React.createElement('div', null,
      React.createElement('div', { className: 'label' }, '✦  Today\'s Card  ✦'),
      React.createElement('h3', null, card.name),
      React.createElement('p', null, '"The universe has chosen this card for you today, Sarah. ' + card.keywords.slice(0, 3).map(cap).join(' · ') + '."'),
      React.createElement('p', { style: { marginTop: '0.8rem', fontSize: '0.95rem', fontStyle: 'normal', color: 'rgba(212, 175, 55, 0.85)', letterSpacing: '0.1em' } }, 'Click to reveal her whisper →')
    )
  );
}