// StudyView — renders a completed Mode B analytical study inside the reader drawer.
// Uses React.createElement (Babel-free nested safe) — matching the ReaderDrawer style.

// ── Canonical spine ────────────────────────────────────────────
// Every pericope gets the same 8-section menu. Authored sections render
// their content; unauthored ones render a small "Commission this section →"
// card and appear grayed in the rail. Order is reader-progression.
//
// The 'standard' label is dynamic per study language — resolves to e.g.
// "BEC Read" for Catalan, "NVI Read" for Castellano, "NIV Read" for English.
const CANONICAL_SPINE = [
  { id: 'standard',  getLabel: (study) => readLabelFor(study),   blurb: 'A clean translation in your language.' },
  { id: 'retrans',   label: 'Analytical Draft',                  blurb: 'A grammar-faithful rendering with bracketed glosses where the Greek is stronger. AI-generated, awaiting linguist review.' },
  { id: 'patristic', label: 'What the early church taught',      blurb: 'Pre-Nicene voices on this passage, anchored to a thesis.' },
  { id: 'library',   label: 'The library Paul was reading',      blurb: 'Second Temple resonances — preterocanonical, Qumran, T12P.' },
  { id: 'structure', label: 'How the passage is built',          blurb: 'Movements, chiasm, fronting — the architecture beneath the prose.' },
  { id: 'word',      label: 'The Greek up close',                blurb: 'Word-by-word: lemma, parsing, theological weight.' },
  { id: 'compare',   label: 'Where later traditions diverge',    blurb: 'Where confessional readings silently rewrite the grammar.' },
  { id: 'conflicts', label: 'Theological conflicts addressed',   blurb: 'A short summary of the doctrinal disputes this passage has been pulled into.' }
];

// Compute the user-facing read label for the standard section.
// Maps study.langLabel → "<Bible> Read" pattern.
function readLabelFor(study) {
  const lang = ((study && study.langLabel) || '').toLowerCase();
  if (lang.indexOf('cat') === 0 || lang.indexOf('català') >= 0)         return 'BEC Read';
  if (lang.indexOf('castel') >= 0 || lang.indexOf('españ') >= 0)         return 'NVI Read';
  if (lang.indexOf('niv') >= 0)                                          return 'NIV Read';
  if (lang.indexOf('eng') >= 0)                                          return 'NIV Read';
  if (lang.indexOf('no translation') >= 0)                               return 'Read (commission)';
  return 'Read';
}

function StudyView({ study, onBack, onCommissionSection, onCommissionAll }) {
  // Build a unified rail/sections list: each canonical spine entry is
  // either authored (we have the section in the study) or unauthored
  // (rail item shows grayed; body shows a commission card).
  const authoredById = {};
  (study.sections || []).forEach(s => { authoredById[s.id] = s; });

  const unifiedItems = CANONICAL_SPINE.map(spine => {
    // Resolve the rail label — dynamic for items that carry getLabel().
    const resolvedLabel = spine.getLabel ? spine.getLabel(study) : spine.label;
    const authored = authoredById[spine.id];
    if (authored) {
      return { ...spine, label: resolvedLabel, authored: true, section: authored };
    }
    return { ...spine, label: resolvedLabel, authored: false };
  });

  const missingCount = unifiedItems.filter(i => !i.authored).length;

  const [activeMap, setActiveMap] = React.useState(unifiedItems[0].id);
  const bodyRef = React.useRef(null);
  const sectionRefs = React.useRef({});

  // Observe which section is in view — update the left-hand map.
  React.useEffect(() => {
    const body = bodyRef.current;
    if (!body) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActiveMap(e.target.dataset.sid);
      });
    }, { root: body, rootMargin: '-20% 0px -60% 0px', threshold: 0 });
    Object.values(sectionRefs.current).forEach(el => el && io.observe(el));
    return () => io.disconnect();
  }, [study.id]);

  const jumpTo = (id) => {
    const el = sectionRefs.current[id];
    if (el && bodyRef.current) {
      bodyRef.current.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
    }
  };

  const commissionSection = (item) => {
    if (onCommissionSection) onCommissionSection({ studyId: study.id, sectionId: item.id, label: item.label });
    else console.log('Commission section:', item.id, 'for', study.id);
  };
  const commissionAll = () => {
    const missing = unifiedItems.filter(i => !i.authored).map(i => ({ id: i.id, label: i.label }));
    if (onCommissionAll) onCommissionAll({ studyId: study.id, missing });
    else console.log('Commission all missing for', study.id, missing);
  };

  return React.createElement('div', { className: 'study-shell' },

    // ── Left rail: study map ──
    React.createElement('aside', { className: 'study-map' },
      // Back button is optional — only shown when an onBack handler is provided
      // (i.e., when StudyView is opened on top of another view).
      onBack && React.createElement('button', { className: 'study-back', onClick: onBack },
        React.createElement('span', { style: { display:'inline-block', transform:'rotate(180deg)', lineHeight: 0 } }, window.I.chevron(14)),
        ' Back to document'
      ),
      React.createElement('div', { className: 'study-map-kicker' }, 'Analytical study'),
      React.createElement('div', { className: 'study-map-ref' }, study.ref),
      React.createElement('div', { className: 'study-map-list' },
        unifiedItems.map(item =>
          React.createElement('div', {
            key: item.id,
            className: 'study-map-item '
              + (activeMap === item.id ? 'on ' : '')
              + (item.authored ? '' : 'unauthored'),
            onClick: () => jumpTo(item.id),
            title: item.authored ? '' : 'Not yet authored — click to see commission options'
          },
            React.createElement('span', { className: 'dot' }),
            React.createElement('span', { className: 'lbl' }, item.label),
            !item.authored && React.createElement('span', { className: 'unauth-tag', title: 'Commission this section' }, '+ commission')
          )
        )
      ),
      // Author footer — only shown when a real author is attached.
      study.completedBy && study.completedOn && React.createElement('div', { className: 'study-map-footer' },
        React.createElement('div', { className: 'author' },
          React.createElement('div', { className: 'avatar-chip' }, study.completedBy.split(' ').map(s=>s[0]).join('').slice(0,2)),
          React.createElement('div', null,
            React.createElement('div', { className: 'nm' }, study.completedBy),
            React.createElement('div', { className: 'dt' }, 'Completed ', new Date(study.completedOn).toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'}))
          )
        )
      )
    ),

    // ── Main scrolling column ──
    React.createElement('div', { className: 'study-main', ref: bodyRef },

      // Cover / title card
      React.createElement('div', { className: 'study-cover tradition-' + (study.traditionClass || 'greek') },
        React.createElement('div', { className: 'sc-top' },
          study.modeLabel && React.createElement('span', { className: 'sc-chip' }, study.modeLabel),
          study.baseText && React.createElement('span', { className: 'sc-chip muted' }, 'Base: ' + study.baseText),
          study.langLabel && React.createElement('span', { className: 'sc-chip muted' }, study.langLabel),
          study.readingTime && React.createElement('span', { className: 'sc-chip muted' }, study.readingTime),
          // Agency-reviewed strip when present — kicks in only for 'sealed' pericopes
          study.reviewedBy && React.createElement('span', { className: 'sc-chip sc-chip-reviewed' },
            React.createElement('span', { className: 'sc-chip-check' }, '✓'),
            ' Reviewed by ', React.createElement('strong', null, study.reviewedBy.agency)
          )
        ),
        React.createElement('h1', { className: 'sc-title' }, study.ref),
        study.subtitle && React.createElement('p',  { className: 'sc-subtitle' }, study.subtitle),
        // Detailed reviewer strip — sits between subtitle and signature, with
        // agency seals, reviewer name, credential, scope, and date.
        study.reviewedBy && React.createElement('div', { className: 'sc-reviewed-strip' },
          React.createElement('div', { className: 'sc-rs-top' },
            React.createElement('span', { className: 'sc-rs-check' }, '✓'),
            React.createElement('span', { className: 'sc-rs-label' }, 'Agency-reviewed translation'),
            React.createElement('span', { className: 'sc-rs-seals' },
              (study.reviewedBy.seals || []).map(c =>
                React.createElement(window.SealBadge, { key: c, code: c, sm: true })
              )
            )
          ),
          React.createElement('div', { className: 'sc-rs-body' },
            React.createElement('span', { className: 'sc-rs-name' }, study.reviewedBy.reviewerName),
            study.reviewedBy.reviewerCredential && React.createElement('span', { className: 'sc-rs-cred' },
              ' · ', study.reviewedBy.reviewerCredential
            )
          ),
          React.createElement('div', { className: 'sc-rs-meta' },
            study.reviewedBy.scope && React.createElement('span', null, 'Scope: ', study.reviewedBy.scope, '. '),
            study.reviewedBy.date && React.createElement('span', null,
              'Signed off ', new Date(study.reviewedBy.date).toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'})
            )
          )
        ),
        study.signature && React.createElement('blockquote', { className: 'sc-signature' },
          '“', study.signature, '”'
        ),
        study.stats && study.stats.length > 0 && React.createElement('div', { className: 'sc-stats' },
          study.stats.map((s, i) =>
            React.createElement('div', { key: i, className: 'sc-stat' },
              React.createElement('div', { className: 'n' }, s.n),
              React.createElement('div', { className: 'l' }, s.l)
            )
          )
        ),
        // Commission-all CTA: appears only when at least one section is unauthored.
        missingCount > 0 && React.createElement('div', { className: 'sc-commission-all' },
          React.createElement('button', {
            className: 'sc-commission-all-btn',
            onClick: commissionAll
          },
            'Commission ',
            React.createElement('strong', null, missingCount + ' remaining'),
            missingCount === 1 ? ' section' : ' sections'
          ),
          React.createElement('span', { className: 'sc-commission-all-hint' },
            ' or click any grayed section in the menu to commission individually'
          )
        )
      ),

      // NIV fallback panel — appears only in demo state 'niv-only', when no
      // Reader's translation has been authored in the user's language. Sits
      // between the cover and the spine, with a clear "commission a Reader's"
      // CTA so the user can upgrade.
      study.nivFallback && React.createElement('section', { className: 'niv-fallback-panel' },
        React.createElement('div', { className: 'niv-fallback-head' },
          React.createElement('span', { className: 'niv-fallback-kicker' }, 'Default scripture text'),
          React.createElement('h3', { className: 'niv-fallback-label' }, study.nivFallback.label)
        ),
        React.createElement('div', { className: 'niv-fallback-body' },
          (study.nivFallback.verses || []).map(v =>
            React.createElement('p', { key: v.n, className: 'vline' },
              React.createElement('span', { className: 'vn' }, v.n),
              ' ', v.t
            )
          )
        ),
        React.createElement('button', {
          className: 'niv-fallback-cta',
          onClick: () => { if (onCommissionSection) onCommissionSection({ studyId: study.id, sectionId: 'standard', label: 'Translation' }); }
        }, study.nivFallback.ctaLabel || 'Commission a Reader’s translation in your language →')
      ),

      // Sections — every canonical spine entry, authored or not.
      unifiedItems.map(item =>
        React.createElement('section', {
          key: item.id,
          'data-sid': item.id,
          ref: el => sectionRefs.current[item.id] = el,
          className: 'study-section ' + (item.authored ? '' : 'unauthored-section')
        },
          item.authored
            ? [
                React.createElement('h2', { key:'h', className: 'sec-head' }, item.section.heading || item.label),
                item.section.note && React.createElement('p', { key:'n', className: 'sec-note' }, item.section.note),
                React.createElement('div', { key:'b' }, renderSectionBody(item.section))
              ]
            : [
                React.createElement('h2', { key:'h', className: 'sec-head sec-head-unauthored' }, item.label),
                React.createElement('p', { key:'b', className: 'sec-note sec-note-unauthored' }, item.blurb),
                React.createElement('div', { key:'c', className: 'empty-section-card' },
                  React.createElement('p', { className: 'esc-msg' },
                    'This section hasn’t been authored yet for this passage.'
                  ),
                  React.createElement('button', {
                    className: 'esc-cta',
                    onClick: () => commissionSection(item)
                  }, 'Commission this section →')
                )
              ]
        )
      ),

      // End mark
      React.createElement('div', { className: 'study-endmark' },
        React.createElement('span', null, '❧'),
        React.createElement('div', { className: 'em-line' }),
        React.createElement('div', { className: 'em-meta' },
          'Mode B · ', study.baseText, ' · ', study.langLabel
        )
      )
    )
  );
}

function renderSectionBody(sec) {
  switch (sec.kind) {
    case 'passage-plain':       return renderPassagePlain(sec);
    case 'passage-annotated':   return renderPassageAnnotated(sec);
    case 'greek-text':          return renderGreekText(sec);
    case 'lxx-mt-parallel':     return renderLxxMt(sec);
    case 'word-by-word':        return renderWordByWord(sec);
    case 'structure':           return renderStructure(sec);
    case 'patristic':           return renderPatristic(sec);
    case 'greek-vs-calvin':     return renderGreekVsCalvin(sec);
    case 'comparison-table':    return renderComparison(sec);
    default: return null;
  }
}

// ─── Renderers ──────────────────────────────────────────

function renderPassagePlain(sec) {
  return React.createElement('div', { className: 'sty-passage plain' },
    sec.verses.map(v => React.createElement('p', { key: v.n, className: 'vline' },
      React.createElement('span', { className: 'vn' }, v.n),
      ' ', v.t
    ))
  );
}

function renderPassageAnnotated(sec) {
  const renderSegments = (v) => {
    // Re-assemble alternating t / tags / t2 / tags2 / ... using index numbering
    const parts = [];
    const keys = ['t','tags','t2','tags2','t3','tags3','t4','tags4','t5','tags5'];
    keys.forEach((k, i) => {
      const val = v[k];
      if (!val) return;
      if (k.startsWith('tags')) {
        val.forEach((tag, j) =>
          parts.push(React.createElement('span', { key: k+j, className: 'gk-gloss' },
            React.createElement('span', { className: 'gg-term' }, tag.t),
            React.createElement('span', { className: 'gg-tip'  }, tag.gk)
          ))
        );
      } else {
        parts.push(React.createElement('span', { key: k }, val));
      }
    });
    return parts;
  };

  return React.createElement('div', { className: 'sty-passage annotated' },
    sec.verses.map(v => React.createElement('p', { key: v.n, className: 'vline' },
      React.createElement('span', { className: 'vn' }, v.n),
      ' ', renderSegments(v)
    ))
  );
}

function renderGreekText(sec) {
  return React.createElement('div', { className: 'sty-greek' },
    sec.blocks.map((b, i) => React.createElement('div', { key: i, className: 'gk-block' },
      React.createElement('div', { className: 'gk-label' }, b.label),
      React.createElement('div', { className: 'gk-body'  }, b.t)
    ))
  );
}

function renderLxxMt(sec) {
  return React.createElement('div', { className: 'sty-lxxmt' },
    React.createElement('div', { className: 'lm-head' },
      React.createElement('div', { className: 'lm-col lxx-col' }, 'LXX · Greek'),
      React.createElement('div', { className: 'lm-col mt-col'  }, 'MT · Hebrew')
    ),
    sec.rows.map(r => React.createElement('div', { key: r.n, className: 'lm-row' },
      React.createElement('div', { className: 'lm-vn' }, 'v.' + r.n),
      React.createElement('div', { className: 'lm-col lxx-col gk' }, r.lxx),
      React.createElement('div', { className: 'lm-col mt-col heb' }, r.mt)
    )),
    sec.divergences && React.createElement('div', { className: 'lm-divergences' },
      React.createElement('h4', null, 'LXX-MT divergences'),
      sec.divergences.map((d, i) => React.createElement('div', { key: i, className: 'div-row' },
        React.createElement('div', { className: 'div-head' },
          React.createElement('span', { className: 'div-token' }, d.token),
          React.createElement('span', { className: 'div-cls ' + d.cls.toLowerCase().replace(' ','-') }, d.cls)
        ),
        React.createElement('div', { className: 'div-two' },
          React.createElement('div', { className: 'div-cell lxx-cell' },
            React.createElement('div', { className: 'dc-label' }, 'LXX'),
            React.createElement('div', { className: 'dc-body gk'  }, d.lxx)
          ),
          React.createElement('div', { className: 'div-cell mt-cell' },
            React.createElement('div', { className: 'dc-label' }, 'MT'),
            React.createElement('div', { className: 'dc-body heb' }, d.mt)
          )
        ),
        React.createElement('div', { className: 'div-note' }, d.note)
      ))
    )
  );
}

function renderWordByWord(sec) {
  return React.createElement('div', { className: 'sty-wxw' },
    sec.pericopes.map((p, pi) => React.createElement('div', { key: pi, className: 'wxw-pericope' },
      React.createElement('div', { className: 'wxw-head' }, p.label),
      React.createElement('div', { className: 'wxw-entries' },
        p.entries.map((e, ei) => React.createElement('div', { key: ei, className: 'wxw-entry ' + (e.risk ? 'risk' : '') },
          React.createElement('div', { className: 'wxw-left' },
            React.createElement('div', { className: 'wxw-gk' }, e.gk,
              e.risk && React.createElement('span', { className: 'risk-pill' }, 'double register')
            ),
            React.createElement('div', { className: 'wxw-en' }, e.en),
            e.parse && React.createElement('div', { className: 'wxw-parse' }, e.parse)
          ),
          React.createElement('div', { className: 'wxw-notes' }, e.notes)
        ))
      )
    ))
  );
}

function renderStructure(sec) {
  return React.createElement('div', { className: 'sty-struct' },
    sec.movements && React.createElement('div', { className: 'mvmts' },
      sec.movements.map((m, i) => React.createElement('div', { key: i, className: 'mvmt' },
        React.createElement('div', { className: 'mv-n' }, m.n),
        React.createElement('div', null,
          React.createElement('div', { className: 'mv-label' }, m.label),
          React.createElement('div', { className: 'mv-body'  }, m.t)
        )
      ))
    ),
    sec.chiasm && React.createElement('div', { className: 'chiasm-box' },
      React.createElement('div', { className: 'ch-title' }, sec.chiasm.title),
      React.createElement('div', { className: 'ch-lines' },
        sec.chiasm.lines.map((l, i) => React.createElement('div', { key: i, className: 'ch-line' },
          React.createElement('span', { className: 'ch-k' }, l.k),
          React.createElement('span', { className: 'ch-t' }, l.t)
        ))
      ),
      sec.chiasm.conclusion && React.createElement('div', { className: 'ch-concl' }, sec.chiasm.conclusion)
    )
  );
}

function renderPatristic(sec) {
  return React.createElement('div', { className: 'sty-patristic' },
    sec.thesis && React.createElement('div', { className: 'pt-thesis' },
      React.createElement('div', { className: 'pt-thesis-label' }, 'Thesis'),
      React.createElement('p', null, sec.thesis)
    ),
    React.createElement('div', { className: 'pt-voices' },
      sec.voices.map((v, i) => React.createElement('article', { key: i, className: 'pt-voice' },
        React.createElement('header', { className: 'pv-head' },
          React.createElement('div', { className: 'pv-mono' }, (i+1).toString().padStart(2, '0')),
          React.createElement('div', null,
            React.createElement('div', { className: 'pv-name'  }, v.name),
            React.createElement('div', { className: 'pv-dates' }, v.dates, ' · ', v.work)
          )
        ),
        React.createElement('ul', { className: 'pv-points' },
          v.points.map((p, pi) => React.createElement('li', { key: pi }, p))
        )
      ))
    )
  );
}

function renderGreekVsCalvin(sec) {
  return React.createElement('div', { className: 'sty-gvc' },
    sec.note && React.createElement('p', { className: 'gvc-note' }, sec.note),
    React.createElement('div', { className: 'gvc-table' },
      React.createElement('div', { className: 'gvc-row head' },
        React.createElement('div', null, 'Feature'),
        React.createElement('div', null, 'The Greek'),
        React.createElement('div', null, 'Calvin / Augustine'),
        React.createElement('div', null, 'Comment')
      ),
      sec.rows.map((r, i) => React.createElement('div', { key: i, className: 'gvc-row' },
        React.createElement('div', { className: 'gvc-feature gk' }, r.feature),
        React.createElement('div', { className: 'gvc-greek' }, r.greek),
        React.createElement('div', { className: 'gvc-calvin' }, r.calvin),
        React.createElement('div', { className: 'gvc-comment' }, r.comment)
      ))
    )
  );
}

function renderComparison(sec) {
  return React.createElement('div', { className: 'sty-cmp' },
    sec.note && React.createElement('p', { className: 'cmp-note' }, sec.note),
    React.createElement('div', { className: 'cmp-table' },
      React.createElement('div', { className: 'cmp-row head' },
        React.createElement('div', null, 'Greek'),
        React.createElement('div', null, 'Standard'),
        React.createElement('div', null, 'Analytical'),
        React.createElement('div', null, 'What\u2019s recovered')
      ),
      sec.rows.map((r, i) => React.createElement('div', { key: i, className: 'cmp-row' },
        React.createElement('div', { className: 'cmp-greek gk' }, r.greek),
        React.createElement('div', { className: 'cmp-standard' }, r.standard),
        React.createElement('div', { className: 'cmp-analytical' }, r.analytical),
        React.createElement('div', { className: 'cmp-gain' }, r.gain)
      ))
    )
  );
}

Object.assign(window, { StudyView });