// SavedStudiesPage — "Saved Studies" view (sidebar → Saved Studies)
// A personal workspace view of things Jordan has bookmarked or pinned:
//   - Saved pericopes (with their mode and the product they were reading)
//   - Saved documents (Fathers, apocrypha)
//   - Saved passages / quotations (inline excerpts)
//   - Saved searches
// The page intentionally reads like a Commonplace Book — not a dashboard.

function SavedStudiesPage({
  onBack, onOpenDoc, onOpenPericope, onOpenCollection, onOpenSearch,
  signedIn, onOpenLanguageModal, onOpenSignIn,
  onOpenUserMenu, userMenuOpen, onCloseUserMenu, onSignOut
}) {
  const I = window.useI18n();
  const [tab, setTab] = React.useState('all'); // all | pericopes | docs | quotes | searches
  const [sort, setSort] = React.useState('recent'); // recent | book | added

  // ── Mock saved data ────────────────────────────────────────
  // Pericopes (what Jordan is actively studying)
  const pericopes = [
    {
      id: 'rom-8-28-30', ref: 'Rom 8:28–30',
      title: 'The golden chain',
      note: 'Paul\u2019s pivot from present suffering to eschatological glory. Return after Irenaeus.',
      mode: 'Analytical', modeCode: 'B', lang: 'ca',
      state: 'sealed', seals: ['bib','ubs'],
      savedAt: '3 days ago', lastOpened: 'yesterday',
      progress: 0.62,
      tags: ['Romans', 'predestination', 'working notes'],
      pinned: true,
    },
    {
      id: 'jn-1-1-14', ref: 'John 1:1–14',
      title: 'Prologue · λόγος semantics',
      note: 'Pulled to compare Philo\u2019s Logos with Johannine usage. Philo refs in the outline.',
      mode: 'Annotated', modeCode: 'D', lang: 'en',
      state: 'sealed', seals: ['bib'],
      savedAt: '1 week ago', lastOpened: '4 days ago',
      progress: 0.30,
      tags: ['John', 'Logos', 'Philo'],
    },
    {
      id: '1cor-13', ref: '1 Cor 13',
      title: 'ἀγάπη — rhetorical structure',
      note: 'For the workshop. Compare Mode C (ca) readability against Mode B for the public reading.',
      mode: 'Reader', modeCode: 'C', lang: 'ca',
      state: 'sealed', seals: ['bib'],
      savedAt: '2 weeks ago', lastOpened: '1 week ago',
      progress: 1.0,
      tags: ['Corinthians', 'workshop'],
    },
    {
      id: 'gen-1-1-5', ref: 'Gen 1:1–5',
      title: 'בְּרֵאשִׁית · opening cadence',
      note: 'Draft comparison table across LXX, Vulg, Aquila.',
      mode: 'Analytical', modeCode: 'B', lang: 'en',
      state: 'draft',
      savedAt: '1 month ago', lastOpened: '3 weeks ago',
      progress: 0.15,
      tags: ['Genesis', 'creation', 'LXX'],
    },
  ];

  // Saved documents (whole works)
  const docs = [
    {
      id: 'irenaeus-adv-haer', title: 'Adversus Haereses', tradKey: 'patristic',
      author: 'Irenaeus of Lyon', tradition: 'Pre-Nicene Fathers',
      icon: 'feather', accent: '#c76622',
      note: 'Book IV.37 — citation chain back to Rom 8:29. Bookmark at §4.',
      savedAt: '5 days ago', pinned: true,
    },
    {
      id: '1-enoch', title: '1 Enoch', tradKey: 'parabiblical',
      author: 'Preterocanonical · Ethiopic', tradition: 'Preterocanonical Library',
      icon: 'scroll', accent: '#8a5c3b',
      note: 'Chapters 1–5 loaded with Geez ↔ English. For the Jude 14 paper.',
      savedAt: '1 week ago',
    },
    {
      id: 'didache', title: 'The Didache', tradKey: 'patristic',
      author: 'Pre-Nicene Fathers · anonymous', tradition: 'Pre-Nicene Fathers',
      icon: 'scroll', accent: '#c76622',
      note: 'Two Ways section — for the ethics seminar in March.',
      savedAt: '3 weeks ago',
    },
  ];

  // Saved quotations (pulled-out excerpts — like a commonplace book)
  const quotes = [
    {
      id: 'q1', source: 'Irenaeus · Adv. Haer. IV.37.4',
      text: 'He calls those who love him according to his foreknowledge, and to those so called he predestined, that they be conformed to the image of his Son.',
      lang: 'en · via Latin', ref: 'citing Rom 8:29',
      savedAt: 'yesterday',
      target: { id: 'irenaeus-adv-haer', title: 'Adversus Haereses', tradition: 'patristic', author: 'Irenaeus of Lyon' },
    },
    {
      id: 'q2', source: '1 Enoch 1:9',
      text: 'Behold, he comes with ten thousands of his holy ones, to execute judgement upon all…',
      lang: 'en · from Geez',
      ref: 'cited Jude 14',
      savedAt: '1 week ago',
      target: { id: '1-enoch', title: '1 Enoch', tradition: 'parabiblical' },
    },
    {
      id: 'q3', source: 'Didache 1:1',
      text: 'Ὁδοὶ δύο εἰσί, μία τῆς ζωῆς καὶ μία τοῦ θανάτου…',
      lang: 'grc',
      ref: 'Two Ways · opening',
      savedAt: '3 weeks ago',
      target: { id: 'didache', title: 'The Didache' },
    },
  ];

  // Saved searches
  const searches = [
    { id: 's1', q: 'divine foreknowledge', scope: 'Greek NT + Fathers', hits: 142, savedAt: '4 days ago' },
    { id: 's2', q: 'προορίζω lemma', scope: 'Corpus · lexical', hits: 18, savedAt: '1 week ago' },
    { id: 's3', q: '"image of his Son"', scope: 'All translations', hits: 7, savedAt: '2 weeks ago' },
  ];

  // Counts used in tab chips
  const counts = {
    all: pericopes.length + docs.length + quotes.length + searches.length,
    pericopes: pericopes.length,
    docs: docs.length,
    quotes: quotes.length,
    searches: searches.length,
  };

  // ── Render helpers ─────────────────────────────────────────
  const SealBadge = window.SealBadge;

  // Explicit pericope coordinates so each saved pericope opens its real study
  // (the old code parsed p.ref and turned "1 Cor 13" into book "1").
  const PERI_REF = {
    'rom-8-28-30': { book: 'rom', chap: 8, v1: 28, v2: 30 },
    'jn-1-1-14':   { book: 'jhn', chap: 1, v1: 1, v2: 14 },
    '1cor-13':     { book: '1co', chap: 13 },
    'gen-1-1-5':   { book: 'gen', chap: 1, v1: 1, v2: 5 },
  };

  // "Open in context" routes a quotation to its source document/reader.
  const openQuoteContext = (q) => { if (q.target && onOpenDoc) onOpenDoc(q.target); };

  // Copy-to-clipboard button with transient confirmation.
  const CopyButton = ({ text }) => {
    const [done, setDone] = React.useState(false);
    return React.createElement('button', {
      className: 'sav-mini-btn',
      onClick: (e) => {
        e.stopPropagation();
        try { if (navigator.clipboard) navigator.clipboard.writeText(text); } catch (_) {}
        setDone(true); setTimeout(() => setDone(false), 1400);
      }
    }, done ? 'Copied ✓' : 'Copy');
  };

  const pericopeCard = (p) => React.createElement('article', {
    key: p.id, className: 'sav-card sav-card-pericope' + (p.pinned ? ' pinned' : ''),
    onClick: () => onOpenPericope && onOpenPericope(Object.assign(
      PERI_REF[p.id] || { book: p.ref.split(' ')[0].toLowerCase().replace(/\./g,''), chap: 1 },
      { state: p.state, seals: p.seals }
    ))
  },
    React.createElement('div', { className:'sav-card-head' },
      React.createElement('span', { className:'sav-kicker' },
        window.I.bookmark(11),
        p.mode,
        React.createElement('span', { className:'sav-dot-sep' }, '·'),
        React.createElement('span', { className:'sav-langchip' }, p.lang.toUpperCase())
      ),
      p.pinned && React.createElement('span', { className:'sav-pin', title:'Pinned' }, '◆')
    ),
    React.createElement('div', { className:'sav-ref' }, p.ref),
    React.createElement('h3', { className:'sav-title' }, p.title),
    p.note && React.createElement('p', { className:'sav-note' }, p.note),

    // Progress strip
    React.createElement('div', { className:'sav-progress' },
      React.createElement('div', { className:'sav-progress-bar' },
        React.createElement('span', { style: { width: (p.progress*100)+'%' } })
      ),
      React.createElement('div', { className:'sav-progress-meta' },
        React.createElement('span', null, p.progress === 1 ? 'Read' : Math.round(p.progress*100) + '% through'),
        React.createElement('span', { className:'sav-progress-when' }, 'opened ', p.lastOpened)
      )
    ),

    // Tags + seals
    React.createElement('div', { className:'sav-foot' },
      React.createElement('div', { className:'sav-tags' },
        (p.tags || []).map((t,i) => React.createElement('span', { key:i, className:'sav-tag' }, '#', t))
      ),
      p.seals && SealBadge && React.createElement('div', { className:'sav-seals' },
        p.seals.map(s => React.createElement(SealBadge, { key:s, seal:s, size:'xs' }))
      )
    )
  );

  const docCard = (d) => React.createElement('article', {
    key: d.id, className: 'sav-card sav-card-doc' + (d.pinned ? ' pinned' : ''),
    onClick: () => onOpenDoc && onOpenDoc({ id: d.id, title: d.title, tradition: d.tradKey, author: d.author })
  },
    React.createElement('div', { className:'sav-doc-mark', style: { background: d.accent + '22', color: d.accent } },
      window.I[d.icon] ? window.I[d.icon](22) : window.I.book(22)
    ),
    React.createElement('div', { className:'sav-card-body' },
      React.createElement('span', { className:'sav-kicker' },
        window.I.bookmark(11),
        d.tradition
      ),
      React.createElement('h3', { className:'sav-title' }, d.title),
      React.createElement('div', { className:'sav-byline' }, d.author),
      d.note && React.createElement('p', { className:'sav-note' }, d.note),
      React.createElement('div', { className:'sav-foot' },
        React.createElement('span', { className:'sav-foot-when' }, 'Saved ', d.savedAt),
        d.pinned && React.createElement('span', { className:'sav-pin inline' }, '◆ pinned')
      )
    )
  );

  const quoteCard = (q) => React.createElement('article', { key: q.id, className: 'sav-card sav-card-quote' },
    React.createElement('div', { className:'sav-quotemark' }, '\u201C'),
    React.createElement('blockquote', { className:'sav-quote-text' }, q.text),
    React.createElement('div', { className:'sav-quote-src' },
      React.createElement('strong', null, q.source),
      React.createElement('span', { className:'sav-dot-sep' }, '·'),
      React.createElement('span', null, q.ref),
      React.createElement('span', { className:'sav-dot-sep' }, '·'),
      React.createElement('span', { className:'sav-langchip' }, q.lang)
    ),
    React.createElement('div', { className:'sav-foot' },
      React.createElement('span', { className:'sav-foot-when' }, 'Saved ', q.savedAt),
      React.createElement('div', { className:'sav-foot-actions' },
        React.createElement(CopyButton, { text: q.text }),
        React.createElement('button', {
          className:'sav-mini-btn',
          onClick: (e) => { e.stopPropagation(); openQuoteContext(q); }
        }, 'Open in context')
      )
    )
  );

  const searchRow = (s) => React.createElement('div', {
    key: s.id, className:'sav-search-row',
    style: { cursor: 'pointer' },
    onClick: () => onOpenSearch && onOpenSearch(s.q)
  },
    React.createElement('span', { className:'sav-search-ico' }, window.I.search(14)),
    React.createElement('div', { className:'sav-search-body' },
      React.createElement('div', { className:'sav-search-q' }, s.q),
      React.createElement('div', { className:'sav-search-meta' },
        s.scope, React.createElement('span', { className:'sav-dot-sep' }, '·'), s.hits.toLocaleString() + ' hits',
        React.createElement('span', { className:'sav-dot-sep' }, '·'), 'saved ' + s.savedAt
      )
    ),
    React.createElement('button', {
      className:'sav-mini-btn',
      onClick: (e) => { e.stopPropagation(); onOpenSearch && onOpenSearch(s.q); }
    }, 'Re-run')
  );

  // ── Page ───────────────────────────────────────────────────
  return React.createElement('div', { className:'amos-main' },
    // Topbar (matches Home / CollectionPage)
    React.createElement('div', { className:'amos-topbar' },
      React.createElement('button', {
        className: 'amos-sidebar-toggle',
        onClick: () => window.dispatchEvent(new CustomEvent('amos:toggle-sidebar')),
        title: 'Toggle sidebar  ([)'
      },
        React.createElement('svg', { width:16, height:16, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:'2', strokeLinecap:'round', strokeLinejoin:'round' },
          React.createElement('rect', { x:'3', y:'4', width:'18', height:'16', rx:'2' }),
          React.createElement('line', { x1:'9', y1:'4', x2:'9', y2:'20' })
        )
      ),
      React.createElement('div', { className:'amos-crumbs' },
        React.createElement('span', null, 'The Amos Project'),
        React.createElement('span', { className:'sep' }, '›'),
        React.createElement('a', { className:'crumb-link', onClick: onBack }, I.t('crumbs.library')),
        React.createElement('span', { className:'sep' }, '›'),
        React.createElement('span', { className:'here' }, I.t('nav.saved'))
      ),
      React.createElement('div', { className:'amos-topbar-right' },
        React.createElement('button', { className:'amos-icon-btn', title:'Filters' }, window.I.sliders(16)),
        window.NotificationsBell ? React.createElement(window.NotificationsBell, null) : React.createElement('button', { className:'amos-icon-btn', title:'Notifications' }, window.I.bell(16)),
        window.WalletChip && React.createElement(window.WalletChip, null),
        React.createElement('button', {
          className:'amos-pill lang',
          onClick: onOpenLanguageModal,
          title: I.getLangObj().native
        },
          React.createElement('span', { className:'code' }, I.getLang()),
          React.createElement('span', { className:'chev' }, window.I.chevronDown(14))
        ),
        React.createElement('span', { className:'topbar-sep' }),
        signedIn
          ? React.createElement('div', { className:'amos-userpill-wrap' },
              React.createElement('button', { className:'amos-pill avatar', onClick: onOpenUserMenu },
                React.createElement('span', { className:'av' }, 'JR'),
                React.createElement('span', { className:'chev' }, window.I.chevronDown(14))
              ),
              React.createElement(window.UserMenu, { open: !!userMenuOpen, onClose: onCloseUserMenu, onSignOut })
            )
          : React.createElement('button', { className:'amos-pill signin', onClick: onOpenSignIn }, I.t('topbar.sign_in'))
      )
    ),

    // Hero
    React.createElement('section', { className:'sav-hero' },
      React.createElement('div', { className:'sav-hero-eyebrow' },
        window.I.bookmark(12),
        React.createElement('span', null, 'Your commonplace book')
      ),
      React.createElement('h1', { className:'sav-hero-title' },
        'Saved ', React.createElement('em', null, 'studies')
      ),
      React.createElement('p', { className:'sav-hero-sub' },
        'Passages, documents, and quotations you\u2019ve marked for return. ',
        'Nothing here is shared — this is a private reading room.'
      )
    ),

    // Tabs + sort
    React.createElement('div', { className:'sav-toolbar' },
      React.createElement('div', { className:'sav-tabs' },
        [
          ['all',       'All',        counts.all],
          ['pericopes', 'Pericopes',  counts.pericopes],
          ['docs',      'Documents',  counts.docs],
          ['quotes',    'Quotations', counts.quotes],
          ['searches',  'Searches',   counts.searches],
        ].map(([k, label, n]) =>
          React.createElement('button', {
            key: k,
            className: 'sav-tab' + (tab === k ? ' on' : ''),
            onClick: () => setTab(k)
          },
            label,
            React.createElement('span', { className:'sav-tab-count' }, n)
          )
        )
      ),
      React.createElement('div', { className:'sav-sort' },
        React.createElement('button', { className:'amos-sort' }, window.I.sort(13), 'Recently opened')
      )
    ),

    // Main grid
    React.createElement('div', { className:'sav-content' },

      // Pinned strip — when showing "all"
      (tab === 'all' || tab === 'pericopes' || tab === 'docs') &&
      React.createElement('section', { className:'sav-section' },
        React.createElement('header', { className:'sav-section-head' },
          React.createElement('span', { className:'sav-section-ico pin' }, '◆'),
          React.createElement('h2', null, 'Pinned'),
          React.createElement('span', { className:'sav-section-count' }, '2')
        ),
        React.createElement('div', { className:'sav-grid two' },
          pericopeCard(pericopes[0]),
          docCard(docs[0])
        )
      ),

      // Pericopes
      (tab === 'all' || tab === 'pericopes') &&
      React.createElement('section', { className:'sav-section' },
        React.createElement('header', { className:'sav-section-head' },
          React.createElement('span', { className:'sav-section-ico' }, window.I.bookmark(14)),
          React.createElement('h2', null, 'Pericopes'),
          React.createElement('span', { className:'sav-section-count' }, pericopes.length),
          React.createElement('button', { className:'sav-section-more' }, 'View all ', window.I.arrowRight(12))
        ),
        React.createElement('div', { className:'sav-grid' },
          pericopes.map(pericopeCard)
        )
      ),

      // Documents
      (tab === 'all' || tab === 'docs') &&
      React.createElement('section', { className:'sav-section' },
        React.createElement('header', { className:'sav-section-head' },
          React.createElement('span', { className:'sav-section-ico' }, window.I.book(14)),
          React.createElement('h2', null, 'Documents'),
          React.createElement('span', { className:'sav-section-count' }, docs.length)
        ),
        React.createElement('div', { className:'sav-grid' },
          docs.map(docCard)
        )
      ),

      // Quotations
      (tab === 'all' || tab === 'quotes') &&
      React.createElement('section', { className:'sav-section' },
        React.createElement('header', { className:'sav-section-head' },
          React.createElement('span', { className:'sav-section-ico' }, window.I.cite(14)),
          React.createElement('h2', null, 'Quotations'),
          React.createElement('span', { className:'sav-section-count' }, quotes.length)
        ),
        React.createElement('div', { className:'sav-grid quotes' },
          quotes.map(quoteCard)
        )
      ),

      // Saved searches
      (tab === 'all' || tab === 'searches') &&
      React.createElement('section', { className:'sav-section' },
        React.createElement('header', { className:'sav-section-head' },
          React.createElement('span', { className:'sav-section-ico' }, window.I.search(14)),
          React.createElement('h2', null, 'Saved searches'),
          React.createElement('span', { className:'sav-section-count' }, searches.length)
        ),
        React.createElement('div', { className:'sav-search-list' },
          searches.map(searchRow)
        )
      )
    )
,
    React.createElement(window.Footer, null)
  )
}

Object.assign(window, { SavedStudiesPage });