// BookCommissionModal — whole-book commission flow.
// Books are commissioned whole (not pericope-by-pericope). User picks
// target language + mode; modal shows scope (pericopes × words), lead
// translator profile and an indicative price + SLA.
//
// Wired through AppV2: when the user clicks "Commission book" on a
// doc card or the coverage map, a { whole:true, book:'<id>' } ref
// flows in. We render this modal instead of AvailabilityGrid.
function BookCommissionModal({ target, onClose, onSubmit }) {
  const I = window.useI18n();
  const w = window.useWallet ? window.useWallet() : null;
  if (!target || !target.whole) return null;
  const bookRef = target;

  // Book meta — prefer pericope data, fall back to id uppercased
  const BOOKS = (window.PERICOPE_DATA && window.PERICOPE_DATA.BOOKS) || [];
  const PERICOPES = (window.PERICOPE_DATA && window.PERICOPE_DATA.PERICOPES) || [];
  const book = BOOKS.find(b => b.id === bookRef.book) || { id: bookRef.book, name: bookRef.book };
  const pericopes = PERICOPES.filter(p => p.book === book.id);
  const done = pericopes.filter(p => p.state === 'sealed' || p.state === 'b').length;
  const missing = pericopes.length - done;

  // Pricing heuristic: credits per pericope × count, derived from AI API cost × 100% markup. 1 cr = $0.10.
  // Mode C (readable translation) is the lightest single-pass run; Mode D (layered annotations) adds a second pass; Mode B (analytical apparatus) is the deepest multi-pass run with morphological tagging and apparatus generation. No human reviewer in scope — that's the Linguist Reviewed product, commissioned separately.
  // Example: 30-pericope book in Mode C ≈ 180 cr ≈ $18; Mode B ≈ 1800 cr ≈ $180 for a full critical edition.
  const RATES = { C: 6, B: 60, D: 18 };
  const SLAS  = { C: '~2 hours', B: '~24 hours', D: '~6 hours' };

  const GATEWAY = (window.I18n && window.I18n.GATEWAY) || [];
  const [lang, setLang] = React.useState('ca');
  const [mode, setMode] = React.useState('C');

  const units = Math.max(pericopes.length, 1);
  const credits = RATES[mode] * units;
  const creditsDisplay = credits.toLocaleString();
  const dollarsEq = (credits * 0.10).toFixed(2).replace(/\.00$/, '');
  const langObj = GATEWAY.find(l => l.code === lang) || GATEWAY[0];

  // AI engine card — one row per mode. No human translator; this is machine-only.
  // The Linguist Reviewed add-on (a separate product) is what brings a human into the loop.
  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, no notes.' },
    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 engine = ENGINES[mode];

  return React.createElement('div', {
    className: 'amos-modal-backdrop',
    onClick: onClose
  },
    React.createElement('div', {
      className: 'amos-modal book-commission',
      onClick: (e) => e.stopPropagation(),
      style: { maxWidth: 720 }
    },
      React.createElement('div', { className:'amos-modal-head' },
        React.createElement('div', null,
          React.createElement('div', { className:'mh-kicker' }, 'Whole-book commission'),
          React.createElement('h3', null, I.t('commission.modal.title'), ' · ', React.createElement('em', null, book.name)),
          React.createElement('div', { className:'mh-sub' }, I.t('commission.modal.sub'))
        ),
        React.createElement('button', { className:'amos-icon-btn', onClick: onClose }, window.I.x(16))
      ),

      // Scope row
      React.createElement('div', { className:'bcm-scope' },
        React.createElement('div', { className:'bcm-stat' },
          React.createElement('div', { className:'n' }, pericopes.length || '—'),
          React.createElement('div', { className:'l' }, 'pericopes in scope')
        ),
        React.createElement('div', { className:'bcm-stat' },
          React.createElement('div', { className:'n' }, done),
          React.createElement('div', { className:'l' }, 'already worked')
        ),
        React.createElement('div', { className:'bcm-stat' },
          React.createElement('div', { className:'n' }, missing),
          React.createElement('div', { className:'l' }, 'to translate')
        ),
      ),

      // Language picker — gateway only for demo
      React.createElement('div', { className:'bcm-row' },
        React.createElement('div', { className:'bcm-row-lbl' }, 'Target language'),
        React.createElement('div', { className:'bcm-lang-grid' },
          GATEWAY.slice(0, 10).map(l => React.createElement('button', {
            key: l.code,
            className: 'bcm-lang ' + (lang === l.code ? 'on' : ''),
            onClick: () => setLang(l.code)
          },
            React.createElement('span', { className:'c' }, l.code),
            React.createElement('span', { className:'n' }, l.native)
          ))
        )
      ),

      // Mode picker
      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:'Readable 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)
          ))
        )
      ),

      // AI engine card + quote
      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' }, 'Target'),
            React.createElement('div', { className:'v' }, langObj ? langObj.native : lang)
          ),
          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' }, 'Commission cost'),
            React.createElement('div', { className:'v' },
              creditsDisplay,
              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)
          )
        )
      ),

      // Wallet balance readout — so user sees affordability in context
      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 commission 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 \u2014 no human reviewer in scope. Output becomes a ', React.createElement('b', null, 'library contribution'), ' visible to all readers. For human review, commission ', React.createElement('em', null, 'Linguist Reviewed'), ' separately. Credits are deducted only after you confirm.'
        ),
        React.createElement('button', {
          className:'btn btn-primary',
          onClick: () => {
            if (w) {
              w.requestSpend({
                credits,
                label: book.name + ' · ' + (langObj ? langObj.native : lang) + ' · Mode ' + mode,
                description: 'Commission the complete book in ' + (langObj ? langObj.native : lang) + ', Mode ' + mode + '. Delivered as a library contribution visible to all readers.',
                onConfirm: () => onSubmit && onSubmit({ ref: bookRef, lang, mode, credits, book: book.name })
              });
            } else {
              onSubmit && onSubmit({ ref: bookRef, lang, mode, credits });
            }
          }
        }, I.t('commission.request'), ' →')
      )
    )
  );
}
Object.assign(window, { BookCommissionModal });