// AmosArticleReader — long-form reader for a single Amos article.
// Renders the block tree from window.AMOS_BODIES[articleId]; supports inline
// links into Library docs / collections and footnote popovers.

function AmosArticleReader({ articleId, onBack, onOpenDoc, onOpenCollection }) {
  const I = window.useI18n();
  const meta = (window.AMOS_DATA.articles || []).find(a => a.id === articleId);
  const body = (window.AMOS_BODIES || {})[articleId];

  // Hamburger so the main sidebar is reachable from inside the reader on mobile
  // (audit rank 9 — the Amos readers were the only views missing it, trapping
  // phone users with no way back to Library/Search/Saved).
  const burger = React.createElement('button', {
    className:'amos-sidebar-toggle', type:'button',
    onClick: () => window.dispatchEvent(new CustomEvent('amos:toggle-sidebar')),
    title:'Open navigation  ([)', 'aria-label':'Open navigation'
  },
    React.createElement('svg',{width:16,height:16,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:'2',strokeLinecap:'round'},
      React.createElement('line',{x1:3,y1:6,x2:21,y2:6}),
      React.createElement('line',{x1:3,y1:12,x2:21,y2:12}),
      React.createElement('line',{x1:3,y1:18,x2:21,y2:18})
    )
  );

  if (!meta || !body) {
    return React.createElement('div', { className:'amos-reader' },
      React.createElement('div', { className:'car-topbar' },
        burger,
        React.createElement('button', { className:'back', onClick: onBack }, window.I.chevron(14), 'Back to Amos of Rome')
      ),
      React.createElement('div', { style:{ padding:48, fontFamily:'Iowan Old Style, serif', color:'#7d5a17' } },
        'This reading is in preparation.')
    );
  }

  const openDocByKey = (key) => {
    // Hand a synthetic doc object to readerMetaForDoc-compatible routing.
    const synthetic = { id: key };
    if (key === 'enoch-1') Object.assign(synthetic, { id:'enoch-1' });
    if (key === 'odes')    Object.assign(synthetic, { id:'odes' });
    if (key === 'didache') Object.assign(synthetic, { id:'didache' });
    onOpenDoc && onOpenDoc(synthetic);
  };

  // Render an inline-children array of strings + objects
  const renderInline = (children) => {
    if (typeof children === 'string') return [children];
    if (!Array.isArray(children)) return [];
    return children.map((c, i) => {
      if (typeof c === 'string') return c;
      if (c.em)      return React.createElement('em',     { key:i }, c.em);
      if (c.strong)  return React.createElement('strong', { key:i }, c.strong);
      if (c.link)    return React.createElement('a', {
        key:i, className:'car-link', onClick:()=>openDocByKey(c.link)
      }, c.label || c.link);
      if (c.collection) return React.createElement('a', {
        key:i, className:'car-link', onClick:()=>onOpenCollection && onOpenCollection(c.collection)
      }, c.label || c.collection);
      if (c.fn != null) return React.createElement('a', {
        key:i, className:'car-fn', href:`#fn-${c.fn}`,
        onClick:(e)=>{ /* native anchor jumps */ },
        title:'See source'
      }, c.fn);
      return null;
    });
  };

  // Build the TOC from heading + subheading blocks
  const toc = body.blocks
    .filter(b => b.type === 'heading' || b.type === 'subheading')
    .map(b => ({ id: b.id, text: b.text, sub: b.type === 'subheading' }));

  // Track which paragraph gets the drop cap: first 'prose' block after Preface.
  let firstProseHandled = false;

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

    // Topbar
    React.createElement('div', { className:'car-topbar' },
      burger,
      React.createElement('button', { className:'back', onClick: onBack },
        window.I.chevron(14), 'Amos of Rome'
      ),
      React.createElement('div', { className:'crumb' },
        React.createElement('span', null, 'Teacher\u2019s Room'),
        React.createElement('span', { className:'sep' }, '›'),
        React.createElement('span', { className:'here' }, meta.title.length > 60 ? meta.title.slice(0,58) + '…' : meta.title)
      ),
      React.createElement('div', { className:'spacer' }),
      React.createElement('span', { className:'byline' }, 'Amos of Rome \u00b7 Catechist'),
      // Cite/Share reuse
      window.CiteButton && React.createElement(window.CiteButton, { compact:true, refFor: () => ({
        kind:'article',
        title: meta.title,
        subtitle: meta.subtitle,
        author:'Amos of Rome (ed.)',
        editor:'The Amos Project',
        year:2026,
        url:'https://worldmission.media/amos/' + (meta.slug || meta.id),
        description: meta.abstract
      })}),
      window.ShareButton && React.createElement(window.ShareButton, { compact:true, collectionKey:'parabiblical', refFor: () => ({
        kind:'article',
        title: meta.title,
        subtitle: meta.subtitle,
        author:'Amos of Rome',
        collectionKey:'parabiblical',
        year:2026,
        url:'https://worldmission.media/amos/' + (meta.slug || meta.id),
        description: meta.abstract
      })})
    ),

    // Hero
    React.createElement('section', { className:'car-hero' },
      React.createElement('div', { className:'car-eyebrow' }, body.hero.eyebrow),
      React.createElement('h1', { className:'car-title' }, body.hero.title),
      React.createElement('p', { className:'car-subtitle' }, body.hero.subtitle),
      React.createElement('div', { className:'car-byline' },
        React.createElement('div', { className:'mark' }, 'A'),
        React.createElement('div', null,
          React.createElement('div', { className:'who' }, body.hero.byline.split(' · ')[0]),
          React.createElement('div', { className:'tagline' }, body.hero.byline.split(' · ').slice(1).join(' · '))
        ),
        React.createElement('div', { className:'stats' }, body.hero.stats)
      )
    ),

    // Body — prose column + right rail
    React.createElement('div', { className:'car-body' },
      React.createElement('div', { className:'car-prose' },
        ...body.blocks.map((b, i) => {
          switch (b.type) {
            case 'heading':
              return React.createElement('h2', { key:i, id:b.id }, b.text);
            case 'subheading':
              return React.createElement('h3', { key:i, id:b.id }, b.text);
            case 'amos-setup':
              return React.createElement('div', { key:i, className:'car-amos-setup' }, b.text);
            case 'amos':
              return React.createElement('div', { key:i, className:'car-amos' }, b.text);
            case 'prose': {
              const isFirst = !firstProseHandled;
              firstProseHandled = true;
              const props = { key:i };
              if (isFirst) props.className = 'drop';
              return React.createElement('p', props,
                ...(b.text ? [b.text] : renderInline(b.children))
              );
            }
            case 'pullquote':
              return React.createElement('blockquote', { key:i, className:'car-pullquote' }, b.text);
            case 'fathersquote':
              return React.createElement('figure', { key:i, className:'car-fathers' },
                React.createElement('div', { className:'car-fathers-text' }, b.text),
                React.createElement('figcaption', { className:'car-fathers-cite' }, '— ' + b.cite)
              );
            case 'list':
              return React.createElement('ul', { key:i, className:'car-list' },
                ...b.items.map((it, j) => React.createElement('li', { key:j }, it))
              );
            case 'kingdom-close':
              return React.createElement('div', { key:i, className:'car-kingdom' }, b.text);
            default:
              return null;
          }
        })
      ),

      // Rail
      React.createElement('aside', { className:'car-rail' },
        React.createElement('div', { className:'toc' },
          React.createElement('h4', null, 'In this reading'),
          ...toc.map(t => React.createElement('a', {
            key:t.id, href:'#' + t.id,
            className: t.sub ? 'sub' : ''
          }, t.text))
        ),
        meta.referenced && meta.referenced.length > 0 && React.createElement('div', { className:'refs' },
          React.createElement('h4', null, 'Library sources'),
          ...meta.referenced.map((r, j) => React.createElement('a', {
            key:j, className:'ref',
            onClick: () => {
              if (r.docKey) openDocByKey(r.docKey);
              else if (r.collectionKey) onOpenCollection && onOpenCollection(r.collectionKey);
            }
          },
            React.createElement('div', { className:'rtitle' }, r.label),
            r.scope && React.createElement('div', { className:'rscope' }, r.scope)
          ))
        )
      )
    ),

    // Footnote section
    React.createElement('section', { className:'car-footnotes' },
      React.createElement('h2', null, 'Sources Referenced'),
      React.createElement('ol', null,
        ...(body.footnotes || []).map(f => React.createElement('li', { key:f.n, id:`fn-${f.n}` },
          React.createElement('div', { className:'num' }, f.n),
          React.createElement('div', null,
            React.createElement('span', { className:'author' }, f.author),
            ', ',
            React.createElement('span', { className:'work' }, f.work),
            f.scope ? React.createElement('span', { className:'scope' }, ' · ' + f.scope) : null,
            f.date ? React.createElement('span', { className:'date' }, '— ' + f.date) : null
          )
        ))
      )
    )
,
    React.createElement(window.Footer, null)
  )
}
Object.assign(window, { AmosArticleReader });