// AmosTeachingsView — Amos' Teachings landing, styled to match the
// Collection page visual language (coll-hero, coll-stats, coll-editorial,
// coll-body, coll-related).
//
// We reuse the existing `coll-*` class tree (from collection-page.css) so
// the look is consistent with La Biblioteca's collections. Amos-specific
// tweaks live in amos.css under `.amos-coll *`.

function AmosTeachingsView({ onBack, onOpenArticle, signedIn, onOpenLanguageModal, onOpenSignIn, onOpenUserMenu, userMenuOpen, onCloseUserMenu, onSignOut }) {
  const I = window.useI18n();
  const D = window.AMOS_DATA;
  const C = window.AMOS_COMMISSIONS;
  const ACCENT = '#b8862e';

  const [topic, setTopic] = React.useState('all');
  const [kindFilter, setKindFilter] = React.useState('all');
  const [commissionOpen, setCommissionOpen] = React.useState(false);
  const [commissionKind, setCommissionKind] = React.useState('reading');
  const [, forceTick] = React.useReducer(x => x + 1, 0);

  React.useEffect(() => {
    const h = () => forceTick();
    window.addEventListener('amos:amos:changed', h);
    return () => window.removeEventListener('amos:amos:changed', h);
  }, []);

  const myCommissions = (C && C.store.list) || [];

  const fmtDate = (s) => {
    if (!s) return '';
    const d = new Date(s);
    return d.toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' });
  };
  const relTime = (t) => {
    const s = Math.floor((Date.now() - t) / 1000);
    if (s < 60) return 'just now';
    if (s < 3600) return Math.floor(s/60) + ' min ago';
    if (s < 86400) return Math.floor(s/3600) + ' h ago';
    return Math.floor(s/86400) + ' days ago';
  };

  const visible = D.articles.filter(a =>
    (topic === 'all' || (a.sections || []).includes(topic))
    && (kindFilter === 'all' || (a.kind || 'reading') === kindFilter)
  );
  const publishedCount = D.articles.filter(a => a.status === 'published').length;
  const inPrepCount    = D.articles.filter(a => a.status === 'in-preparation').length;
  const videoCount     = D.articles.filter(a => a.kind === 'reaction').length;
  const totalWords     = D.articles.reduce((s,a) => s + (a.words || 0), 0);

  const stats = [
    { value: D.articles.length,             label: 'Articles' },
    { value: videoCount,                    label: 'Videos' },
    { value: inPrepCount,                   label: 'Generating' },
    { value: (totalWords/1000).toFixed(1) + 'k', label: 'Total words' },
    { value: D.sections.length,             label: 'Topic areas' }
  ];

  const editorialLines = [
    'Every citation drawn from texts shelved on The Amos Project \u2014 no outside material, no modern apologetics.',
    'Amos reads the pre-Nicene record in the order the church received it: Second Temple inheritance, apostles, second Christians, third.',
    'Commission a reading: submit a 250-word brief, receive a draft from the Library\u2019s sources \u2014 yours to keep.',
    'Commission a reaction video: upload a sermon; Amos delivers a finished video of him watching and pausing to comment. Usually under an hour.',
    'Editors may ask to feature your commission on the platform, unless you opt out at submission time.'
  ];

  return React.createElement('div', { className:'amos-coll' },

    // Topbar (reused app chrome)
    React.createElement('div', { className:'amos-topbar' },
      React.createElement('button', {
        className:'amos-sidebar-toggle',
        onClick:()=>window.dispatchEvent(new CustomEvent('amos:toggle-sidebar')),
        title:'Toggle sidebar ([)',
        'aria-label': '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', { className:'crumb-link', onClick: onBack }, 'The Amos Project'),
        React.createElement('span', { className:'sep' }, '\u203a'),
        React.createElement('span', { className:'here' }, 'Amos of Rome')
      ),
      React.createElement('div', { className:'amos-topbar-right' },
        window.NotificationsBell ? React.createElement(window.NotificationsBell, null) : null,
        window.WalletChip && React.createElement(window.WalletChip, null),
        React.createElement('button', {
          className:'amos-pill lang',
          onClick: onOpenLanguageModal
        },
          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'))
      )
    ),

    // ── Editorial Hero ────────────────────────
    React.createElement('section', {
      className:'coll-hero',
      style:{ '--coll-accent': ACCENT }
    },
      React.createElement('div', { className:'coll-hero-top' },
        React.createElement('div', { className:'coll-hero-tag' },
          React.createElement('span', { className:'num' }, 'A'),
          React.createElement('span', null, 'CATECHIST'),
          React.createElement('span', { className:'dot' }),
          React.createElement('span', { className:'coll-subtype' }, 'AMOS OF ROME \u00b7 c. 155\u2013220 AD')
        ),
        React.createElement('div', { className:'coll-hero-ctas' },
          React.createElement('button', {
            className:'coll-article-cta',
            onClick: () => { setCommissionKind('reading'); setCommissionOpen(true); }
          },
            'Commission a reading',
            React.createElement('span', { style:{ opacity: 0.65 } },
              ' \u00b7 ', (C && C.ARTICLE_COST) || 120, ' cr'
            )
          ),
          React.createElement('button', {
            className:'coll-article-cta secondary',
            onClick: () => { setCommissionKind('reaction'); setCommissionOpen(true); }
          },
            'Commission a reaction video',
            React.createElement('span', { style:{ opacity: 0.65 } },
              ' \u00b7 from ', C.REACTION_PRICING.paper.minimum, ' cr'
            )
          )
        )
      ),
      React.createElement('h1', { className:'coll-hero-title' }, 'Amos of Rome'),
      React.createElement('div', { className:'coll-hero-tagline' },
        'A 2nd-century Jewish-Christian catechist. Born in Lyon, formed under Irenaeus, adopted by Rome after the persecution of 177.'
      ),
      React.createElement('p', { className:'coll-hero-sub' },
        'Three links from John: John \u2192 Polycarp \u2192 Irenaeus \u2192 Amos. He spent his Roman decades producing the bilingual Greek-Latin codex that scholars today recognize as the ancestor of Codex Bezae. His knowledge horizon is c. 180 AD. Every piece here is drawn only from the critical editions shelved in this Library \u2014 Didache, 1 Enoch, Odes of Solomon, Tertullian, Cyprian, Origen, Justin, Clement. When the Library does not hold the source, the piece does not cite it.'
      ),

      // Stat strip
      React.createElement('div', { className:'coll-stats' },
        stats.map((s, i) => React.createElement('div', { key: i, className:'coll-stat' },
          React.createElement('div', { className:'coll-stat-val' }, s.value),
          React.createElement('div', { className:'coll-stat-lbl' }, s.label)
        ))
      ),

      // Editorial bullets
      React.createElement('div', { className:'coll-editorial' },
        editorialLines.map((line, i) => React.createElement('div', { key:i, className:'coll-ed-line' },
          React.createElement('span', { className:'coll-ed-mark' }, '\u00a7'),
          React.createElement('span', null, line)
        ))
      )
    ),

    // ── Toolbar (kind filter + topic chips) ────────────────
    React.createElement('section', { className:'coll-toolbar amos-toolbar' },
      React.createElement('div', { className:'amos-toolbar-inner' },
        // Format filter — primary segmentation
        React.createElement('div', { className:'amos-format-seg' },
          React.createElement('button', {
            className:'amos-fseg' + (kindFilter==='all'?' on':''),
            onClick: () => setKindFilter('all')
          }, 'All formats'),
          React.createElement('button', {
            className:'amos-fseg' + (kindFilter==='reading'?' on':''),
            onClick: () => setKindFilter('reading')
          }, 'Readings'),
          React.createElement('button', {
            className:'amos-fseg' + (kindFilter==='reaction'?' on':''),
            onClick: () => setKindFilter('reaction')
          },
            React.createElement('span', { className:'amos-fseg-dot' }),
            'Reaction videos'
          )
        ),
        React.createElement('span', { className:'amos-toolbar-sep' }),
        // Topic chips
        React.createElement('button', {
          className:'amos-tchip' + (topic==='all'?' on':''),
          onClick: () => setTopic('all')
        }, 'All topics'),
        ...D.sections.map(s => React.createElement('button', {
          key: s.key,
          className:'amos-tchip' + (topic===s.key?' on':''),
          onClick: () => setTopic(s.key)
        }, s.label))
      )
    ),

    // ── Body ─────────────────────────────────
    React.createElement('section', { className:'coll-body amos-body' },

      // Your commissions — rail above the main feed when present
      myCommissions.length > 0 && React.createElement(React.Fragment, null,
        React.createElement('div', { className:'coll-body-head' },
          React.createElement('span', null, 'Your commissions \u00b7 ', React.createElement('b', null, myCommissions.length)),
          React.createElement('span', null, 'Articles you commissioned \u00b7 yours to keep')
        ),
        React.createElement('div', { className:'amos-mine-grid' },
          ...myCommissions.map(c => {
            const isReaction = c.kind === 'reaction';
            const canOpen = isReaction && (c.status === 'yours' || c.status === 'yours-private' || c.status === 'promoted');
            const statusMeta = isReaction ? ({
              'generating':     { label:'Amos is watching\u2026',             cls:'generating' },
              'yours':          { label:'Ready \u00b7 yours to keep',          cls:'yours' },
              'yours-private':  { label:'Ready \u00b7 private',                cls:'private' },
              'promoted':       { label:'Promoted to platform',              cls:'promoted' }
            }[c.status] || { label: c.status, cls:'' }) : ({
              'generating':     { label:'Drafting\u2026',                        cls:'generating' },
              'yours':          { label:'Yours \u00b7 eligible for promotion',   cls:'yours' },
              'yours-private':  { label:'Yours \u00b7 private',                  cls:'private' },
              'promoted':       { label:'Promoted to platform',                cls:'promoted' },
              'off-topic':      { label:'Amos declined',                      cls:'offtopic' }
            }[c.status] || { label: c.status, cls:'' });
            return React.createElement('div', {
              key: c.id,
              className:'amos-mine ' + statusMeta.cls + (isReaction ? ' reaction' : '') + (canOpen ? ' openable' : ''),
              onClick: canOpen ? () => onOpenArticle && onOpenArticle('reaction-penal-substitution-sermon') : null
            },
              // Small poster thumb for reaction commissions
              isReaction && React.createElement('div', { className:'mine-thumb' },
                React.createElement('span', { className:'mine-thumb-play' }, '\u25B6'),
                React.createElement('span', { className:'mine-thumb-meta' },
                  c.inputMinutes ? (c.inputMinutes + ' min') : (c.inputWords ? (c.inputWords + ' words') : 'sermon')
                )
              ),
              React.createElement('div', { className:'mine-status' },
                React.createElement('span', { className:'dot' }),
                React.createElement('span', { className:'kind-tag' }, isReaction ? 'Reaction video' : 'Reading'),
                React.createElement('span', { className:'sep' }, '\u00b7'),
                statusMeta.label
              ),
              React.createElement('div', { className:'mine-title' },
                c.title || c.topic || (c.brief ? c.brief.slice(0, 96) + (c.brief.length > 96 ? '\u2026' : '') : 'Untitled brief')
              ),
              isReaction
                ? React.createElement('div', { className:'mine-body' },
                    c.sourcePreacher ? React.createElement('span', { className:'mine-preacher' }, c.sourcePreacher, ' \u00b7 ') : null,
                    c.sourceTitle ? React.createElement('em', null, '\u201C', c.sourceTitle, '\u201D') : null,
                    c.note ? React.createElement(React.Fragment, null,
                      React.createElement('br', null),
                      React.createElement('span', { className:'mine-note' },
                        'Your note: ', c.note.length > 120 ? c.note.slice(0, 120) + '\u2026' : c.note
                      )
                    ) : null
                  )
                : (c.status === 'off-topic'
                    ? React.createElement('div', { className:'mine-body decline' },
                        c.amosReply ? c.amosReply.slice(0, 180) + (c.amosReply.length > 180 ? '\u2026' : '') : ''
                      )
                    : c.brief && React.createElement('div', { className:'mine-body' },
                        '\u201C', c.brief.slice(0, 140) + (c.brief.length > 140 ? '\u2026' : ''), '\u201D'
                      )
                  ),
              React.createElement('div', { className:'mine-foot' },
                React.createElement('span', null, relTime(c.createdAt)),
                isReaction && c.inputMinutes ? React.createElement(React.Fragment, null,
                  React.createElement('span', { className:'sep' }, '\u00b7'),
                  React.createElement('span', null, c.inputMinutes, ' min input')
                ) : null,
                !isReaction && c.words ? React.createElement(React.Fragment, null,
                  React.createElement('span', { className:'sep' }, '\u00b7'),
                  React.createElement('span', null, c.words, ' words')
                ) : null,
                c.credits ? React.createElement(React.Fragment, null,
                  React.createElement('span', { className:'sep' }, '\u00b7'),
                  React.createElement('span', null, c.credits, ' cr')
                ) : null
              ),
              c.status === 'generating' && React.createElement('div', { className:'mine-progress' },
                React.createElement('span', { className:'bar' })
              )
            );
          })
        )
      ),

      // Main feed header
      React.createElement('div', { className:'coll-body-head', style:{ marginTop: myCommissions.length > 0 ? 36 : 0 } },
        React.createElement('span', null,
          topic === 'all' ? 'All articles' : (D.sections.find(s=>s.key===topic)||{}).label,
          ' \u00b7 ',
          React.createElement('b', null, visible.length)
        ),
        topic !== 'all' && React.createElement('button', {
          className:'coll-clear',
          onClick: () => setTopic('all')
        }, 'Clear filter')
      ),

      // Article cards
      visible.length === 0
        ? React.createElement('div', { className:'amos-empty' }, 'No articles in this topic yet.')
        : React.createElement('div', { className:'amos-grid' },
            ...visible.map(a => {
              const sectionLabels = (a.sections || [])
                .map(k => (D.sections.find(s=>s.key===k)||{}).label)
                .filter(Boolean);
              const isPublished = a.status === 'published';
              const isReaction = a.kind === 'reaction';
              const fmtRt = (sec) => {
                if (!sec) return '';
                const m = Math.floor(sec/60);
                const r = sec%60;
                return m + ':' + (r<10?'0':'') + r;
              };
              return React.createElement('article', {
                key: a.id,
                className: 'amos-card' + (isPublished ? '' : ' in-prep') + (isReaction ? ' kind-reaction' : ''),
                onClick: isPublished ? () => onOpenArticle && onOpenArticle(a.id) : null
              },
                // Reaction poster (hero thumbnail)
                isReaction && React.createElement('div', {
                  className:'amos-card-poster',
                  style:{ '--hue': (a.video && a.video.posterHue) || 348 }
                },
                  React.createElement('div', { className:'poster-grain' }),
                  React.createElement('div', { className:'poster-kind' },
                    React.createElement('span', { className:'poster-play' }, '\u25B6'),
                    'Reaction video'
                  ),
                  a.duration && React.createElement('div', { className:'poster-runtime' }, fmtRt(a.duration)),
                  React.createElement('div', { className:'poster-amos' }, 'Amos watches')
                ),
                React.createElement('div', { className:'amos-card-top' },
                  React.createElement('span', { className: 'amos-card-kind ' + (isReaction ? 'reaction' : 'reading') },
                    isReaction ? React.createElement(React.Fragment, null,
                      React.createElement('span', { className:'kind-mark' }, '\u25B6'), 'Reaction'
                    ) : React.createElement(React.Fragment, null,
                      React.createElement('span', { className:'kind-mark' }, '\u00A7'), 'Reading'
                    )
                  ),
                  React.createElement('span', { className:'amos-card-date' }, fmtDate(a.date)),
                  !isPublished && React.createElement('span', { className:'amos-card-prep' }, 'In preparation')
                ),
                React.createElement('h3', { className:'amos-card-title' }, a.title),
                a.subtitle && React.createElement('div', { className:'amos-card-sub' }, a.subtitle),
                a.abstract && React.createElement('p', { className:'amos-card-abs' },
                  a.abstract.length > 240 ? a.abstract.slice(0, 240) + '\u2026' : a.abstract
                ),
                React.createElement('div', { className:'amos-card-foot' },
                  React.createElement('div', { className:'amos-card-tags' },
                    sectionLabels.slice(0, 3).map((lab, i) =>
                      React.createElement('span', { key:i, className:'amos-card-tag' }, lab)
                    )
                  ),
                  React.createElement('div', { className:'amos-card-stat' },
                    isReaction
                      ? React.createElement(React.Fragment, null,
                          a.pauses ? (a.pauses + ' pauses') : null,
                          a.runtime ? React.createElement(React.Fragment, null,
                            React.createElement('span', { className:'sep' }, '\u00b7'),
                            fmtRt(a.runtime), ' with commentary'
                          ) : null
                        )
                      : React.createElement(React.Fragment, null,
                          a.minutes ? (a.minutes + ' min') : null,
                          a.words ? React.createElement(React.Fragment, null,
                            React.createElement('span', { className:'sep' }, '\u00b7'),
                            a.words.toLocaleString(), ' words'
                          ) : null
                        )
                  )
                )
              );
            })
          )
    ),

    // ── Related (topic shortcuts styled like related-collections) ──
    React.createElement('section', { className:'coll-related' },
      React.createElement('div', { className:'coll-related-head' }, 'Browse by topic'),
      React.createElement('div', { className:'coll-related-grid' },
        D.sections.map(s => {
          const count = D.articles.filter(a => (a.sections||[]).includes(s.key)).length;
          return React.createElement('a', {
            key: s.key,
            className:'coll-related-card',
            onClick: () => setTopic(s.key)
          },
            React.createElement('div', {
              className:'coll-rel-tag',
              style:{ background: ACCENT }
            }, s.label.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase()),
            React.createElement('div', { className:'coll-rel-name' }, s.label),
            React.createElement('div', { className:'coll-rel-sub' },
              count === 0 ? 'No articles yet.' :
              count === 1 ? '1 article in this topic.' :
              count + ' articles in this topic.'
            ),
            React.createElement('div', { className:'coll-rel-count' },
              'Filter \u2192'
            )
          );
        })
      )
    ),

    // Commission modal
    React.createElement(window.AmosCommissionModal, {
      open: commissionOpen,
      initialKind: commissionKind,
      onClose: () => setCommissionOpen(false),
      onSubmitted: () => {}
    })
,
    React.createElement(window.Footer, null)
  )
}
Object.assign(window, { AmosTeachingsView });