// RecentlyOpenedPage — "Recently Opened" view (sidebar → Recently Opened)
// Chronological reading history, grouped by time bucket. Each row is a
// reading session: what was opened, which mode/product, how long spent,
// where the user left off. Rows have a Resume action.
// This complements SavedStudies (curated) — here the feed is automatic.

function RecentlyOpenedPage({
  onBack, onOpenDoc, onOpenPericope, onOpenCollection,
  signedIn, onOpenLanguageModal, onOpenSignIn,
  onOpenUserMenu, userMenuOpen, onCloseUserMenu, onSignOut
}) {
  const I = window.useI18n();
  const [filter, setFilter] = React.useState('all'); // all | pericopes | docs | studies

  // ── Mock history (newest first) ────────────────────────────
  const history = [
    // Today
    { bucket:'Today', when:'2:14 PM · just now', kind:'pericope',
      ref:'Rom 8:28–30', title:'The golden chain',
      product:'Analytical', modeCode:'B', lang:'ca',
      state:'sealed', seals:['bib','ubs'],
      duration:'42 min', left:'v. 29 · second half',
      progress:0.64, action:'reading',
    },
    { bucket:'Today', when:'11:58 AM', kind:'doc',
      title:'Adversus Haereses', author:'Irenaeus of Lyon',
      tradition:'Pre-Nicene Fathers', accent:'#c76622', icon:'feather',
      detail:'Book IV · §37.4', duration:'18 min',
      left:'§37 — citation chain back to Rom 8:29',
      action:'browsed',
    },
    { bucket:'Today', when:'9:02 AM', kind:'study',
      title:'Divine foreknowledge · working notes',
      detail:'Your draft · 7 passages referenced', duration:'25 min',
      left:'reorganised §3 · unfinished',
      action:'edited',
    },

    // Yesterday
    { bucket:'Yesterday', when:'6:40 PM', kind:'pericope',
      ref:'John 1:1–14', title:'Prologue · λόγος semantics',
      product:'Annotated', modeCode:'D', lang:'en',
      state:'sealed', seals:['bib'],
      duration:'1 hr 7 min', left:'v. 9 · Philo note open',
      progress:0.32, action:'reading',
    },
    { bucket:'Yesterday', when:'4:15 PM', kind:'doc',
      title:'1 Enoch', author:'Preterocanonical · Ethiopic',
      tradition:'Preterocanonical Library', accent:'#8a5c3b', icon:'scroll',
      detail:'Ch. 1 · Geez ↔ English', duration:'22 min',
      left:'1:9 · "ten thousands of his holy ones"',
      action:'reading',
    },
    { bucket:'Yesterday', when:'1:22 PM', kind:'pericope',
      ref:'Gen 1:1–5', title:'בְּרֵאשִׁית · opening cadence',
      product:'Analytical', modeCode:'B', lang:'en',
      state:'draft',
      duration:'14 min', left:'draft · LXX column',
      progress:0.18, action:'sketched',
    },
    { bucket:'Yesterday', when:'10:08 AM', kind:'search',
      query:'"image of his Son"', scope:'All translations',
      hits:7, duration:'3 min', action:'searched',
    },

    // This week
    { bucket:'Earlier this week', when:'Tue · 3:30 PM', kind:'pericope',
      ref:'1 Cor 13', title:'ἀγάπη — rhetorical structure',
      product:'Reader', modeCode:'C', lang:'ca',
      state:'sealed', seals:['bib'],
      duration:'31 min', left:'read to end',
      progress:1.0, action:'read',
    },
    { bucket:'Earlier this week', when:'Mon · 5:12 PM', kind:'doc',
      title:'The Didache', author:'Pre-Nicene Fathers · anonymous',
      tradition:'Pre-Nicene Fathers', accent:'#c76622', icon:'scroll',
      detail:'Two Ways · §§1–6', duration:'48 min',
      left:'§4 · "do not hesitate to give"',
      action:'reading',
    },
    { bucket:'Earlier this week', when:'Mon · 10:44 AM', kind:'collection',
      collectionKey:'parabiblical',
      title:'Preterocanonical Library', detail:'Collection page · overview tab',
      duration:'6 min', action:'browsed',
    },

    // Earlier
    { bucket:'Earlier this month', when:'Oct 12 · 8:20 PM', kind:'pericope',
      ref:'Phil 2:5–11', title:'Carmen Christi',
      product:'Analytical', modeCode:'B', lang:'en',
      state:'sealed', seals:['bib','ubs'],
      duration:'54 min', left:'ἐκένωσεν · note on kenosis',
      progress:0.47, action:'reading',
    },
    { bucket:'Earlier this month', when:'Oct 9 · 11:10 AM', kind:'search',
      query:'προορίζω lemma', scope:'Corpus · lexical',
      hits:18, duration:'8 min', action:'searched',
    },
  ];

  // Filter
  const filtered = history.filter(h => {
    if (filter === 'all') return true;
    if (filter === 'pericopes') return h.kind === 'pericope';
    if (filter === 'docs') return h.kind === 'doc' || h.kind === 'collection';
    if (filter === 'studies') return h.kind === 'study' || h.kind === 'search';
    return true;
  });

  // Group by bucket, preserving order
  const buckets = [];
  filtered.forEach(h => {
    let b = buckets.find(x => x.name === h.bucket);
    if (!b) { b = { name: h.bucket, items: [] }; buckets.push(b); }
    b.items.push(h);
  });

  const counts = {
    all: history.length,
    pericopes: history.filter(h => h.kind === 'pericope').length,
    docs: history.filter(h => h.kind === 'doc' || h.kind === 'collection').length,
    studies: history.filter(h => h.kind === 'study' || h.kind === 'search').length,
  };

  // ── Row renderers ──────────────────────────────────────────
  const SealBadge = window.SealBadge;

  const actionColor = {
    reading: '#c76622', read: '#26828F', browsed: 'rgba(6,31,39,.5)',
    sketched: '#8a5c3b', edited: '#26828F', searched: 'rgba(6,31,39,.5)',
  };

  const kindIcon = {
    pericope: 'bookmark', doc: 'book', study: 'layers',
    search: 'search', collection: 'scroll'
  };

  const row = (h, i) => {
    const onClick = () => {
      if (h.kind === 'pericope') {
        onOpenPericope && onOpenPericope({
          book: h.ref.split(' ')[0].toLowerCase().replace(/\./g,''),
          chap: parseInt(h.ref.match(/\d+/)[0],10),
          state: h.state, seals: h.seals
        });
      } else if (h.kind === 'doc') {
        onOpenDoc && onOpenDoc({ id: (h.title||'').toLowerCase().replace(/\s+/g,'-'), title: h.title });
      } else if (h.kind === 'collection') {
        onOpenCollection && onOpenCollection(h.collectionKey);
      }
    };

    return React.createElement('article', {
      key: i,
      className: 'recent-row recent-kind-' + h.kind,
      onClick
    },
      // LEFT · rail (icon + vertical line)
      React.createElement('div', { className: 'recent-rail' },
        React.createElement('div', { className: 'recent-rail-dot', style: h.kind==='doc'&&h.accent ? { background: h.accent+'22', color: h.accent } : undefined },
          window.I[kindIcon[h.kind]] ? window.I[kindIcon[h.kind]](14) : window.I.book(14)
        )
      ),

      // BODY
      React.createElement('div', { className: 'recent-body' },
        React.createElement('div', { className: 'recent-meta-row' },
          React.createElement('span', { className: 'recent-action', style:{ color: actionColor[h.action] || 'rgba(6,31,39,.6)' } }, h.action),
          React.createElement('span', { className: 'recent-dot' }, '·'),
          // kind-specific eyebrow
          h.kind === 'pericope' && React.createElement(React.Fragment, null,
            React.createElement('span', { className: 'recent-kicker' }, h.product),
            React.createElement('span', { className: 'recent-dot' }, '·'),
            React.createElement('span', { className: 'recent-langchip' }, h.lang.toUpperCase())
          ),
          h.kind === 'doc' && React.createElement('span', { className: 'recent-kicker' }, h.tradition),
          h.kind === 'study' && React.createElement('span', { className: 'recent-kicker' }, 'Analytical study'),
          h.kind === 'search' && React.createElement('span', { className: 'recent-kicker' }, 'Search · ' + h.scope),
          h.kind === 'collection' && React.createElement('span', { className: 'recent-kicker' }, 'Collection'),
        ),

        // title line — styled by kind
        h.kind === 'pericope' && React.createElement('div', { className:'recent-title-line' },
          React.createElement('span', { className:'recent-ref' }, h.ref),
          React.createElement('span', { className:'recent-title-sep' }, '—'),
          React.createElement('span', { className:'recent-title' }, h.title)
        ),
        h.kind === 'doc' && React.createElement('div', { className:'recent-title-line' },
          React.createElement('span', { className:'recent-title' }, h.title),
          React.createElement('span', { className:'recent-byline' }, ' · ', h.author)
        ),
        h.kind === 'study' && React.createElement('div', { className:'recent-title-line' },
          React.createElement('span', { className:'recent-title' }, h.title)
        ),
        h.kind === 'search' && React.createElement('div', { className:'recent-title-line' },
          React.createElement('span', { className:'recent-query' }, h.query),
          React.createElement('span', { className:'recent-byline' }, ' · ', h.hits.toLocaleString(), ' hits')
        ),
        h.kind === 'collection' && React.createElement('div', { className:'recent-title-line' },
          React.createElement('span', { className:'recent-title' }, h.title)
        ),

        // detail / where-left-off
        (h.detail || h.left) && React.createElement('div', { className:'recent-detail' },
          h.detail, h.detail && h.left && React.createElement('span', { className:'recent-dot' }, ' · '),
          h.left && React.createElement('em', null, 'left off: ', h.left)
        ),

        // progress (pericope only)
        h.kind === 'pericope' && h.progress != null && React.createElement('div', { className:'recent-progress' },
          React.createElement('div', { className:'recent-progress-bar' },
            React.createElement('span', { style:{ width:(h.progress*100)+'%' } })
          ),
          React.createElement('span', { className:'recent-progress-pct' },
            h.progress === 1 ? 'Read through' : Math.round(h.progress*100) + '%'
          )
        ),

        // footer row (seals + actions)
        React.createElement('div', { className:'recent-footer' },
          React.createElement('div', { className:'recent-footer-left' },
            h.seals && SealBadge && h.seals.map(s => React.createElement(SealBadge, { key:s, seal:s, size:'xs' }))
          ),
          React.createElement('div', { className:'recent-footer-right' },
            h.kind === 'search' ? React.createElement('button', { className:'recent-btn primary' }, 'Re-run')
              : h.progress === 1 ? React.createElement('button', { className:'recent-btn ghost' }, 'Reopen')
                : React.createElement('button', { className:'recent-btn primary' }, window.I.play(11), 'Resume')
          )
        )
      ),

      // RIGHT · time + duration
      React.createElement('div', { className:'recent-time' },
        React.createElement('span', { className:'recent-when' }, h.when),
        h.duration && React.createElement('span', { className:'recent-duration' },
          window.I.clock(11), h.duration
        )
      )
    );
  };

  // ── Render ─────────────────────────────────────────────────
  return React.createElement('div', { className:'amos-main' },
    // Topbar
    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.recent'))
      ),
      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:'recent-hero' },
      React.createElement('div', { className:'recent-hero-eyebrow' },
        window.I.clock(12),
        React.createElement('span', null, 'Reading history · last 30 days')
      ),
      React.createElement('h1', { className:'recent-hero-title' },
        'Recently ', React.createElement('em', null, 'opened')
      ),
      React.createElement('p', { className:'recent-hero-sub' },
        'Every pericope, document, and search, in the order you touched them. ',
        'Click Resume to return exactly where you left off.'
      ),

      // Summary strip
      React.createElement('div', { className:'recent-stats' },
        React.createElement('div', { className:'recent-stat' },
          React.createElement('div', { className:'recent-stat-n' }, '3 h 47 m'),
          React.createElement('div', { className:'recent-stat-l' }, 'reading time · this week')
        ),
        React.createElement('div', { className:'recent-stat' },
          React.createElement('div', { className:'recent-stat-n' }, '12'),
          React.createElement('div', { className:'recent-stat-l' }, 'sessions')
        ),
        React.createElement('div', { className:'recent-stat' },
          React.createElement('div', { className:'recent-stat-n' }, '4'),
          React.createElement('div', { className:'recent-stat-l' }, 'in progress')
        ),
        React.createElement('div', { className:'recent-stat' },
          React.createElement('div', { className:'recent-stat-n' }, 'Rom, Jn, Gen'),
          React.createElement('div', { className:'recent-stat-l' }, 'books in rotation')
        )
      )
    ),

    // Filter tabs
    React.createElement('div', { className:'recent-toolbar' },
      React.createElement('div', { className:'recent-tabs' },
        [
          ['all',       'All',        counts.all],
          ['pericopes', 'Pericopes',  counts.pericopes],
          ['docs',      'Documents',  counts.docs],
          ['studies',   'Studies & searches', counts.studies],
        ].map(([k,label,n]) =>
          React.createElement('button', {
            key:k, className:'recent-tab'+(filter===k?' on':''),
            onClick: () => setFilter(k)
          },
            label,
            React.createElement('span', { className:'recent-tab-count' }, n)
          )
        )
      ),
      React.createElement('button', { className:'recent-clear' },
        window.I.refresh(12), 'Clear history'
      )
    ),

    // Timeline
    React.createElement('div', { className:'recent-content' },
      buckets.map((b, bi) =>
        React.createElement('section', { key:b.name+bi, className:'recent-bucket' },
          React.createElement('header', { className:'recent-bucket-head' },
            React.createElement('span', { className:'recent-bucket-line' }),
            React.createElement('h2', null, b.name),
            React.createElement('span', { className:'recent-bucket-count' }, b.items.length + ' ' + (b.items.length===1?'item':'items'))
          ),
          React.createElement('div', { className:'recent-bucket-rows' },
            b.items.map(row)
          )
        )
      ),

      filtered.length === 0 && React.createElement('div', { className:'recent-empty' },
        window.I.inbox(28),
        React.createElement('div', { className:'recent-empty-t' }, 'Nothing here yet'),
        React.createElement('div', { className:'recent-empty-s' }, 'Open a pericope or document and it\u2019ll show up here.')
      )
    )
,
    React.createElement(window.Footer, null)
  )
}

Object.assign(window, { RecentlyOpenedPage });