// PericopeCommissionModal — single-pericope flows from the reader drawer.
//
// Two kinds:
//   • kind: 'ai'      → AI-only commission (uses wallet credits)
//   • kind: 'review'  → Request a Linguist Review. There's no available linguist
//                       to assign, so the request escalates this pericope's
//                       priority in the admin queue. Free to request, no credit cost.
//
// Triggered from ReaderDrawerV2 when:
//   • An unavailable product chip (B / D) is clicked              → ai
//   • "Commission ... in another language" secondary button       → ai
//   • "Request Linguist Review" secondary button                  → review
function PericopeCommissionModal({ target, onClose, onSubmit }) {
  const I = window.useI18n();
  const w = window.useWallet ? window.useWallet() : null;
  if (!target) return null;

  const kind = target.kind || 'ai';

  // ─────────────────────────────────────────────────────────────
  // REVIEW REQUEST — no payment, just a priority bump
  // ─────────────────────────────────────────────────────────────
  if (kind === 'review') {
    return React.createElement(LinguistReviewRequestModal, { target, onClose, onSubmit });
  }

  // ─────────────────────────────────────────────────────────────
  // AI COMMISSION
  // ─────────────────────────────────────────────────────────────
  const initialLang = target.lang || 'ca';
  const initialMode = target.mode || 'B';

  // A commission can target ONE or SEVERAL languages at once (multi-select).
  const [langs, setLangs] = React.useState([initialLang]);
  const [mode, setMode] = React.useState(initialMode);
  const toggleLang = (code) => setLangs(prev =>
    prev.includes(code) ? prev.filter(c => c !== code) : [...prev, code]);

  const GATEWAY = (window.I18n && window.I18n.GATEWAY) || [];
  const selectedLangs = GATEWAY.filter(l => langs.includes(l.code));
  const langNamesJoined = selectedLangs.map(l => l.native).join(', ');
  const langSummary = selectedLangs.length === 0 ? '—'
    : selectedLangs.length === 1 ? selectedLangs[0].native
    : selectedLangs.length + ' languages';

  const RATES = { C: 6, B: 60, D: 18 };
  const SLAS  = { C: '~5 min', B: '~30 min', D: '~10 min' };
  const ENGINES = {
    C: { name: 'TANhub Reader Engine',     model: 'Claude Sonnet 4.7 · single-pass', detail: 'Faithful readable translation from the base critical text. No apparatus.' },
    B: { name: 'TANhub Analytical Engine', model: 'Claude Opus 4.7 · multi-pass',    detail: 'Morphological tagging, lexical layer, full apparatus, theological-grammatical synthesis.' },
    D: { name: 'TANhub Annotated Engine',  model: 'Claude Opus 4.7 · two-pass',      detail: 'Readable translation plus layered footnotes — manuscript, lexical, intertextual.' }
  };

  const perLang = RATES[mode];
  const credits = perLang * langs.length;   // total across every selected language
  const dollarsEq = (credits * 0.10).toFixed(2).replace(/\.00$/, '');
  const engine = ENGINES[mode];

  return React.createElement('div', {
    className: 'amos-modal-backdrop',
    onClick: onClose
  },
    React.createElement('div', {
      className: 'amos-modal pericope-commission',
      onClick: (e) => e.stopPropagation(),
      style: { maxWidth: 640 }
    },
      React.createElement('div', { className:'amos-modal-head' },
        React.createElement('div', null,
          React.createElement('div', { className:'mh-kicker' }, 'Pericope commission · AI'),
          React.createElement('h3', null, 'Commission ', React.createElement('em', null, target.pericope || 'this pericope')),
          React.createElement('div', { className:'mh-sub' },
            'Single passage, AI-only. The output joins the library and becomes available to all readers.'
          )
        ),
        React.createElement('button', { className:'amos-icon-btn', onClick: onClose }, window.I.x(16))
      ),

      React.createElement('div', { className:'bcm-row' },
        React.createElement('div', { className:'bcm-row-lbl' }, 'Mode'),
        React.createElement('div', { className:'bcm-mode-grid' },
          [
            { k:'C', t:'Mode C',   d:"Reader's translation" },
            { k:'B', t:'Mode B',   d:'Analytical apparatus' },
            { k:'D', t:'Mode D',   d:'Layered annotations' },
          ].map(m => React.createElement('button', {
            key: m.k,
            className: 'bcm-mode ' + (mode === m.k ? 'on' : ''),
            onClick: () => setMode(m.k)
          },
            React.createElement('div', { className:'t' }, m.t),
            React.createElement('div', { className:'d' }, m.d)
          ))
        )
      ),

      React.createElement('div', { className:'bcm-row' },
        React.createElement('div', { className:'bcm-row-lbl' },
          'Target language',
          React.createElement('span', { className:'bcm-row-hint' }, 'Select one or more')
        ),
        React.createElement('div', { className:'bcm-lang-grid' },
          GATEWAY.slice(0, 10).map(l => {
            const on = langs.includes(l.code);
            return React.createElement('button', {
              key: l.code,
              type: 'button',
              className: 'bcm-lang ' + (on ? 'on' : ''),
              'aria-pressed': on,
              onClick: () => toggleLang(l.code)
            },
              on && React.createElement('span', { className:'bcm-lang-check', 'aria-hidden':'true' }, '✓'),
              React.createElement('span', { className:'c' }, l.code),
              React.createElement('span', { className:'n' }, l.native)
            );
          })
        )
      ),

      React.createElement('div', { className:'bcm-panel' },
        React.createElement('div', { className:'bcm-lead' },
          React.createElement('div', { className:'bcm-av engine' }, '✨'),
          React.createElement('div', null,
            React.createElement('div', { className:'n' }, engine.name),
            React.createElement('div', { className:'r' }, engine.model),
            React.createElement('div', { className:'c' }, engine.detail)
          )
        ),
        React.createElement('div', { className:'bcm-quote' },
          React.createElement('div', { className:'bcm-q-item' },
            React.createElement('div', { className:'k' }, selectedLangs.length > 1 ? 'Targets' : 'Target'),
            React.createElement('div', { className:'v' }, langSummary),
            selectedLangs.length > 1 && React.createElement('div', {
              style:{ font:'400 11px Roboto', color:'rgba(6,31,39,.5)', marginTop:2, lineHeight:1.3 }
            }, langNamesJoined)
          ),
          React.createElement('div', { className:'bcm-q-item' },
            React.createElement('div', { className:'k' }, 'Mode'),
            React.createElement('div', { className:'v' }, 'Mode ' + mode)
          ),
          React.createElement('div', { className:'bcm-q-item' },
            React.createElement('div', { className:'k' }, 'Estimated delivery'),
            React.createElement('div', { className:'v' }, SLAS[mode])
          ),
          React.createElement('div', { className:'bcm-q-item price' },
            React.createElement('div', { className:'k' }, 'Total cost'),
            React.createElement('div', { className:'v' },
              credits.toLocaleString(),
              React.createElement('span', { style:{ font:'500 11px Roboto', letterSpacing:'.08em', textTransform:'uppercase', color:'rgba(6,31,39,.55)', marginLeft:6 } }, 'CR')
            ),
            React.createElement('div', { style:{ font:'400 11px Roboto', color:'rgba(6,31,39,.5)', marginTop:2 } },
              '≈ $', dollarsEq,
              selectedLangs.length > 1 ? (' · ' + perLang + ' cr × ' + langs.length) : ''
            )
          )
        )
      ),

      w && React.createElement('div', { className: 'bcm-wallet-check ' + (w.balance >= credits ? 'ok' : 'short') },
        React.createElement('span', { className: 'bcm-wc-dot' }),
        React.createElement('span', { className: 'bcm-wc-main' },
          'Your wallet: ',
          React.createElement('strong', null, w.balance.toLocaleString(), ' cr'),
          w.balance >= credits
            ? React.createElement('span', { className: 'bcm-wc-sub' }, ' — covers this with ', (w.balance - credits).toLocaleString(), ' cr left.')
            : React.createElement('span', { className: 'bcm-wc-sub' }, ' — need ', (credits - w.balance).toLocaleString(), ' more credits.')
        ),
        w.balance < credits && React.createElement('button', {
          className: 'bcm-wc-link',
          onClick: (e) => { e.preventDefault(); w.openTopUp(); }
        }, 'Top up')
      ),

      React.createElement('div', { className:'avail-foot' },
        React.createElement('div', { style:{ color:'rgba(6,31,39,.55)' } },
          'AI translation — no human reviewer. Output becomes a ', React.createElement('b', null, 'library contribution'), ' visible to all readers. For human review, request ', React.createElement('em', null, 'Linguist Review'), ' separately. Credits deducted only after you confirm.'
        ),
        React.createElement('button', {
          className:'btn btn-primary',
          disabled: langs.length === 0,
          onClick: () => {
            if (langs.length === 0) return;
            const payload = { ref: target, langs, lang: langs[0], mode, perLang, credits };
            if (w) {
              w.requestSpend({
                credits,
                label: (target.pericope || 'Pericope') + ' · ' + langSummary + ' · Mode ' + mode,
                description: 'Commission AI Mode ' + mode + ' for ' + (target.pericope || 'this pericope') + ' in ' + langNamesJoined + '. Output joins the library.',
                onConfirm: () => onSubmit && onSubmit(payload)
              });
            } else {
              onSubmit && onSubmit(payload);
            }
          }
        }, langs.length > 1 ? ('Request ' + langs.length + ' commissions →') : 'Request commission →')
      )
    )
  );
}

// ─────────────────────────────────────────────────────────────────────
// LinguistReviewRequestModal
// ─────────────────────────────────────────────────────────────────────
// No payment. The request just bumps this pericope's priority in the
// admin review queue. We show a deterministic "current priority" and a
// preview of what the bump looks like.
function LinguistReviewRequestModal({ target, onClose, onSubmit }) {
  const I = window.useI18n();

  // Deterministic existing-request count from the pericope label.
  const seed = (target.pericope || 'x').split('').reduce((a,c) => a + c.charCodeAt(0), 0);
  const existing = (seed % 7) + 2;       // 2–8 prior requests
  const newCount = existing + 1;
  const tier = newCount >= 8 ? 'Critical' : newCount >= 5 ? 'High' : 'Standard';
  const tierColor = tier === 'Critical' ? '#b8443a' : tier === 'High' ? '#c76622' : '#8b6d9e';

  const [note, setNote] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  function submit() {
    setSubmitted(true);
    onSubmit && onSubmit({ ref: target, kind: 'review', note });
  }

  return React.createElement('div', {
    className: 'amos-modal-backdrop',
    onClick: onClose
  },
    React.createElement('div', {
      className: 'amos-modal pericope-commission',
      onClick: (e) => e.stopPropagation(),
      style: { maxWidth: 600 }
    },
      React.createElement('div', { className:'amos-modal-head' },
        React.createElement('div', null,
          React.createElement('div', { className:'mh-kicker', style:{ color:'#7a2e26' } }, 'Linguist Review · request'),
          React.createElement('h3', null, 'Request human review of ', React.createElement('em', null, target.pericope || 'this pericope')),
          React.createElement('div', { className:'mh-sub' },
            'No linguist is currently assigned to this passage. Your request joins the queue and increases its priority for the next available reviewer.'
          )
        ),
        React.createElement('button', { className:'amos-icon-btn', onClick: onClose }, window.I.x(16))
      ),

      submitted
        // ────────────────── Confirmation state ──────────────────
        ? React.createElement('div', { style:{ padding:'24px 26px 4px' } },
            React.createElement('div', { className:'lrr-confirm' },
              React.createElement('div', { className:'lrr-check' }, '✓'),
              React.createElement('div', null,
                React.createElement('div', { className:'lrr-c-title' }, 'Request logged'),
                React.createElement('div', { className:'lrr-c-sub' },
                  'This pericope is now flagged as ',
                  React.createElement('b', { style:{ color: tierColor } }, tier),
                  ' priority in the editorial queue. We\u2019ll notify you when a linguist picks it up.'
                )
              )
            ),
            React.createElement('div', { className:'lrr-stats' },
              React.createElement('div', { className:'lrr-stat' },
                React.createElement('div', { className:'k' }, 'Total requests for this pericope'),
                React.createElement('div', { className:'v' }, newCount)
              ),
              React.createElement('div', { className:'lrr-stat' },
                React.createElement('div', { className:'k' }, 'Estimated time in queue'),
                React.createElement('div', { className:'v' }, tier === 'Critical' ? '~2 weeks' : tier === 'High' ? '~6 weeks' : '~3 months')
              )
            )
          )

        // ────────────────── Form state ──────────────────
        : React.createElement(React.Fragment, null,

          // Queue state panel
          React.createElement('div', { className: 'lrr-queue' },
            React.createElement('div', { className:'lrr-q-row' },
              React.createElement('div', { className:'lrr-q-cell' },
                React.createElement('div', { className:'lrr-q-k' }, 'Current requests'),
                React.createElement('div', { className:'lrr-q-v' }, existing,
                  React.createElement('span', { className:'lrr-q-vsmall' }, ' from ', existing, ' readers')
                )
              ),
              React.createElement('div', { className:'lrr-arrow' }, '→'),
              React.createElement('div', { className:'lrr-q-cell' },
                React.createElement('div', { className:'lrr-q-k' }, 'After your request'),
                React.createElement('div', { className:'lrr-q-v', style:{ color: tierColor } }, newCount,
                  React.createElement('span', { className:'lrr-q-tier', style:{ background: tierColor } }, tier)
                )
              )
            ),
            React.createElement('div', { className:'lrr-q-help' },
              'Pericopes with more reader requests bubble to the top of the queue. The editorial team reviews the top of the queue weekly and assigns linguists from the Amos Project reviewer pool.'
            )
          ),

          // Optional note
          React.createElement('div', { className:'lrr-note' },
            React.createElement('label', { className:'lrr-note-l' }, 'Why this passage matters to you ', React.createElement('span', null, '(optional, helps the editorial team triage)')),
            React.createElement('textarea', {
              className:'lrr-note-ta',
              rows: 3,
              value: note,
              onChange: e => setNote(e.target.value),
              placeholder: 'e.g. Teaching this passage in a small group next month and want to make sure the apparatus holds up.'
            })
          ),

          React.createElement('div', { className:'avail-foot' },
            React.createElement('div', { style:{ color:'rgba(6,31,39,.55)' } },
              React.createElement('b', null, 'Free to request.'),
              ' No charge today. If you commission an AI Mode B / D first, the linguist will review your output specifically.'
            ),
            React.createElement('button', { className:'btn btn-primary', onClick: submit }, 'Submit request →')
          )
        )
    )
  );
}

Object.assign(window, { PericopeCommissionModal, LinguistReviewRequestModal });