// TenorMD training — screen recreations (composed from the design system).
const React = window.React;
const { Card, Button, Badge, Avatar, StatTile, ScoreBand, DistributionBar, Select, PlanPill } = window;
const { Icon, AppTopbar, TypedField } = window.TM;

const regBox = (reg, name, children, style) =>
  React.createElement('div', { ref: reg && reg(name), style }, children);

/* ---- demo data ----------------------------------------------------------- */
const ORG = 'Barkley Hospitalist Group';
const ADMIN = 'Dr. Morgan Hale';
const PROVIDERS = [
  { name: 'Jordan Avery, MD', specialty: 'Cardiology', cycles: 3, tone: 'harbor' },
  { name: 'Priya Nair, DO', specialty: 'Hospital Medicine', cycles: 2, tone: 'sage' },
  { name: 'Sam Ellison, APRN', specialty: 'Hospital Medicine', cycles: 1, tone: 'clay' },
];
const TREND = [{ label: 'H1 ’25', value: 58 }, { label: 'H2 ’25', value: 67 }, { label: 'H1 ’26', value: 79 }];
const QUESTIONS = [
  { text: 'It is easy to refer patients to this provider', n: 14, dist: { 4: 9, 3: 4, 2: 1, 1: 0 } },
  { text: 'Communicates findings and plan back in a timely manner', n: 14, dist: { 4: 6, 3: 5, 2: 2, 1: 1 } },
  { text: 'Consult / visit notes are clear and useful', n: 13, dist: { 4: 7, 3: 5, 2: 1, 1: 0 } },
  { text: 'Is accessible when I need to discuss a patient', n: 14, dist: { 4: 4, 3: 5, 2: 3, 1: 2 } },
  { text: 'Demonstrates sound clinical judgment', n: 14, dist: { 4: 11, 3: 2, 2: 1, 1: 0 } },
  { text: 'Treats my patients with compassion and respect', n: 14, dist: { 4: 8, 3: 5, 2: 1, 1: 0 } },
];
const COMMENTS = {
  'What would make you refer (more) to this provider?': [
    'Quicker turnaround on the consult note would help me close the loop with patients.',
    'More availability for curbside questions — when I reach him it’s always worthwhile.',
  ],
  'Additional comments': [
    'Genuinely thoughtful with complex cases. My patients consistently feel heard.',
    'Communication has clearly improved over the last year.',
  ],
};

const BANDS = {
  4: { label: 'Among the strongest', color: 'var(--score-a)' },
  3: { label: 'On par with peers', color: 'var(--score-b)' },
  2: { label: 'Still developing', color: 'var(--score-c)' },
  1: { label: 'A concern', color: 'var(--score-d)' },
};
function modalBand(dist) { let best = 3, bn = -1;[4, 3, 2, 1].forEach((v) => { if ((dist[v] || 0) > bn) { bn = dist[v] || 0; best = v; } }); return BANDS[best]; }
function aggregateDist(qs) { const a = { 4: 0, 3: 0, 2: 0, 1: 0 }; qs.forEach((q) => [4, 3, 2, 1].forEach((v) => { a[v] += q.dist[v] || 0; })); return a; }

/* ---- inline trend chart -------------------------------------------------- */
function TrendChart({ points }) {
  const W = 880, H = 200, padX = 52, padY = 26;
  const xs = (i) => padX + (i / (points.length - 1)) * (W - padX * 2);
  const ys = (v) => H - padY - (v / 100) * (H - padY * 2);
  const path = points.map((p, i) => `${i ? 'L' : 'M'}${xs(i).toFixed(1)},${ys(p.value).toFixed(1)}`).join(' ');
  const area = `${path} L${xs(points.length - 1).toFixed(1)},${H - padY} L${xs(0).toFixed(1)},${H - padY} Z`;
  return React.createElement('svg', { viewBox: `0 0 ${W} ${H}`, style: { width: '100%', height: 200 }, preserveAspectRatio: 'none' },
    [0, 25, 50, 75, 100].map((g) => React.createElement('g', { key: g },
      React.createElement('line', { x1: padX, x2: W - padX, y1: ys(g), y2: ys(g), stroke: 'var(--border-default)', strokeWidth: 1, strokeDasharray: g === 0 ? '0' : '3 4' }),
      React.createElement('text', { x: padX - 12, y: ys(g) + 4, textAnchor: 'end', fontSize: 12, fill: 'var(--text-subtle)', fontFamily: 'var(--font-mono)' }, g + '%'))),
    React.createElement('path', { d: area, fill: 'var(--harbor-50)' }),
    React.createElement('path', { d: path, fill: 'none', stroke: 'var(--harbor-500)', strokeWidth: 3, strokeLinejoin: 'round', strokeLinecap: 'round' }),
    points.map((p, i) => React.createElement('g', { key: i },
      React.createElement('circle', { cx: xs(i), cy: ys(p.value), r: 6, fill: 'var(--surface)', stroke: 'var(--harbor-600)', strokeWidth: 3 }),
      React.createElement('text', { x: xs(i), y: H - 6, textAnchor: 'middle', fontSize: 13, fill: 'var(--text-muted)', fontFamily: 'var(--font-sans)' }, p.label),
      React.createElement('text', { x: xs(i), y: ys(p.value) - 14, textAnchor: 'middle', fontSize: 13, fontWeight: 600, fill: 'var(--harbor-700)', fontFamily: 'var(--font-mono)' }, p.value + '%'))));
}

/* ===== 1 · SIGN IN ======================================================== */
function SignInScreen({ reg, state }) {
  const s = state || {};
  const link = { color: 'var(--text-link)', cursor: 'pointer' };
  return React.createElement('div', { className: 'console' },
    React.createElement('div', { style: { height: 28, background: 'var(--harbor-900)' } }),
    React.createElement('div', { className: 'page page--narrow', style: { paddingTop: 52 } },
      regBox(reg, 'signin.card',
        React.createElement(Card, null,
          React.createElement('h1', { style: { marginBottom: 18 } }, 'Sign in'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            React.createElement(TypedField, { reg, name: 'signin.email', label: 'Email', value: s.email, caret: s.focus === 'email', placeholder: '' }),
            React.createElement(TypedField, { reg, name: 'signin.pw', label: 'Password', value: s.pw, caret: s.focus === 'pw', mono: true, placeholder: '' }),
            regBox(reg, 'signin.btn', React.createElement(Button, { block: true }, 'Sign in'))),
          React.createElement('div', { style: { marginTop: 16, display: 'flex', flexDirection: 'column', gap: 9, font: 'var(--type-body)' } },
            React.createElement('a', { style: link }, 'Forgot your password?'),
            React.createElement('div', { className: 'muted' }, 'Your organization uses single sign-on? ', React.createElement('a', { style: link }, 'Sign in with SSO.')),
            React.createElement('div', { className: 'muted' }, 'No account? ', React.createElement('a', { style: link }, 'Create an organization'), ' to get one.')),
        )),
      React.createElement('footer', { style: { textAlign: 'center', marginTop: 72, paddingTop: 26, borderTop: '1px solid var(--border-default)', display: 'flex', flexDirection: 'column', gap: 7 } },
        React.createElement('div', { style: { font: 'var(--type-caption)', color: 'var(--text-link)' } }, 'TenorMD · multi-source provider feedback · anonymous & aggregate-only'),
        React.createElement('div', { style: { font: 'var(--type-caption)', color: 'var(--text-link)' } }, 'Anonymity · Pricing · Resources · Terms · Privacy'),
        React.createElement('div', { style: { font: 'var(--type-caption)', color: 'var(--text-muted)' } }, '© 2026 Willowcare LLC. TenorMD is a product of Willowcare LLC.')),
    ),
  );
}

/* ===== 2 · DASHBOARD / ADD PROVIDERS ====================================== */
function DashboardScreen({ reg, state }) {
  const s = state || {};
  const rows = PROVIDERS.map((p, i) => React.createElement('tr', { key: i, className: 'clickable' },
    React.createElement('td', null, React.createElement('div', { className: 'name-cell' },
      React.createElement(Avatar, { name: p.name, tone: p.tone, size: 'sm' }), React.createElement('span', { className: 'name' }, p.name))),
    React.createElement('td', null, p.specialty),
    React.createElement('td', null, p.cycles),
    React.createElement('td', null, React.createElement(Icon, { name: 'chevron-right', size: 18, style: { color: 'var(--text-subtle)' } }))));
  if (s.added) rows.push(React.createElement('tr', { key: 'new', className: 'successrow', ref: reg && reg('dash.newRow') },
    React.createElement('td', null, React.createElement('div', { className: 'name-cell' },
      React.createElement(Avatar, { name: 'Jane Okafor', tone: 'harbor', size: 'sm' }),
      React.createElement('span', { className: 'name' }, 'Jane Okafor, MD'),
      React.createElement(Badge, { tone: 'success' }, 'New'))),
    React.createElement('td', null, 'Nephrology'),
    React.createElement('td', null, '0'),
    React.createElement('td', null, React.createElement(Icon, { name: 'chevron-right', size: 18, style: { color: 'var(--text-subtle)' } }))));

  const ghost = (icon, label) => React.createElement(Button, { variant: 'ghost', size: 'sm', iconLeft: React.createElement(Icon, { name: icon, size: 16 }) }, label);
  return React.createElement('div', { className: 'console' },
    React.createElement(AppTopbar, { org: ORG, who: ADMIN }),
    React.createElement('div', { className: 'page' },
      React.createElement('div', { className: 'crumbs' }, React.createElement('a', null, 'Home'), React.createElement('span', { className: 'sep' }, '›'), ORG),
      React.createElement('div', { className: 'pagehead' },
        React.createElement('h1', { ref: reg && reg('dash.head') }, ORG),
        React.createElement('div', { className: 'actions' }, ghost('list-checks', 'Questionnaires'), ghost('mail', 'Outbox'), ghost('users', 'Admins'))),
      React.createElement('p', { className: 'pagesub' }, 'Run candid, anonymous review cycles and coach from the trends.'),
      React.createElement('div', { className: 'stack' },
        React.createElement('div', { className: 'kpi-row' },
          React.createElement(StatTile, { label: 'Providers', value: s.added ? '4' : '3', sub: 'on Practice' }),
          React.createElement(StatTile, { label: 'Open cycles', value: '4' }),
          React.createElement(StatTile, { label: 'Responses this period', value: '38', mono: true }),
          React.createElement(StatTile, { label: 'At / above peers', value: '71%', delta: 6 })),
        regBox(reg, 'dash.table', React.createElement(Card, { title: 'Providers', flush: true },
          React.createElement('table', { className: 'tbl' },
            React.createElement('thead', null, React.createElement('tr', null,
              React.createElement('th', null, 'Name'), React.createElement('th', null, 'Specialty'),
              React.createElement('th', null, 'Cycles'), React.createElement('th', { style: { width: 40 } }, ''))),
            React.createElement('tbody', null, rows)))),
        regBox(reg, 'dash.addCard', React.createElement(Card, { title: 'Add a provider' },
          regBox(reg, 'dash.lookup', React.createElement('div', { style: { background: 'var(--paper-shade)', borderRadius: 'var(--radius-md)', padding: '14px 16px' } },
            React.createElement('div', { style: { marginBottom: 12 } },
              React.createElement('span', { style: { font: 'var(--type-eyebrow)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', color: 'var(--text-secondary)' } }, 'Look up by NPI'),
              React.createElement('span', { style: { font: 'var(--type-caption)', color: 'var(--text-muted)', marginLeft: 8 } }, '(optional — standardizes name, credential & specialty)')),
            React.createElement('div', { style: { display: 'flex', gap: 10, alignItems: 'center' } },
              React.createElement('div', { style: { flex: 1 } }, React.createElement(TypedField, { reg, name: 'dash.fn', value: s.fn, caret: s.focus === 'fn', placeholder: 'First name' })),
              React.createElement('div', { style: { flex: 1 } }, React.createElement(TypedField, { reg, name: 'dash.ln', value: s.ln, caret: s.focus === 'ln', placeholder: 'Last name' })),
              React.createElement('div', { style: { width: 84 } }, React.createElement(TypedField, { reg, name: 'dash.st', value: s.st, caret: s.focus === 'st', placeholder: 'ST' })),
              React.createElement('span', { style: { font: 'var(--type-body)', color: 'var(--text-muted)' } }, 'or'),
              React.createElement('div', { style: { flex: 1.3 } }, React.createElement(TypedField, { name: 'dash.npi', value: s.npi, placeholder: '10-digit NPI', mono: true })),
              regBox(reg, 'dash.searchBtn', React.createElement(Button, { variant: 'ghost', iconLeft: React.createElement(Icon, { name: 'search', size: 15 }) }, s.searching ? 'Searching…' : 'Search')))),
          ),
          s.results && regBox(reg, 'dash.result', React.createElement('div', {
            style: { display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap', marginTop: 12, padding: '13px 15px', border: '1px solid ' + (s.added ? 'var(--success-line)' : 'var(--border-default)'), background: s.added ? 'var(--success-bg)' : 'var(--surface)', borderRadius: 'var(--radius-sm)', cursor: 'pointer' },
          },
            React.createElement('span', { style: { fontWeight: 'var(--weight-semibold)', color: 'var(--text-primary)' } }, 'Jane Okafor, MD'),
            React.createElement('span', { style: { color: 'var(--text-link)' } }, 'Nephrology, Internal Medicine'),
            React.createElement('span', { style: { color: 'var(--text-muted)' } }, '· Columbus, OH ·'),
            React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' } }, 'NPI 1487654321'),
            React.createElement('span', { style: { flex: 1 } }),
            s.added
              ? React.createElement(Badge, { tone: 'success' }, React.createElement(Icon, { name: 'check', size: 12, stroke: 2.4 }), 'Added')
              : React.createElement('span', { style: { font: 'var(--type-label)', color: 'var(--text-link)', display: 'inline-flex', alignItems: 'center', gap: 5 } }, 'Add', React.createElement(Icon, { name: 'plus', size: 14 }))),
          )),
        ),
        React.createElement(Card, { title: 'Anonymity', accentTop: true },
          React.createElement('p', { className: 'muted' }, 'Reports stay locked until at least 4 responses arrive, so no single reviewer can ever be identified.')),
      ),
    ),
  );
}

/* ===== 3 · REVIEW CYCLE · INVITE REVIEWERS =============================== */
const rcPill = { font: 'var(--type-caption)', color: 'var(--text-muted)', background: 'var(--paper-shade)', padding: '5px 12px', borderRadius: 999, whiteSpace: 'nowrap', flex: 'none' };
const rcLink = { font: 'var(--type-label)', color: 'var(--text-link)', cursor: 'pointer' };

function emailArea(reg, name, value, focus) {
  return React.createElement('div', { className: 'tm-field' + (focus ? ' is-focus' : '') },
    React.createElement('label', { className: 'tm-field__label' }, 'Reviewer emails ', React.createElement('span', { style: { color: 'var(--text-muted)', fontWeight: 400 } }, '(one per line, or comma-separated)')),
    React.createElement('div', { ref: reg && reg(name), className: 'tm-field__control', style: { minHeight: 76, whiteSpace: 'pre-wrap', lineHeight: 1.7, color: 'var(--text-primary)' } },
      value ? value : React.createElement('span', { style: { color: 'var(--text-subtle)' } }, 'jane.smith@clinic.org\ntjones@familymed.com'),
      focus && React.createElement('span', { className: 'tm-caret' })));
}

function GroupCard({ reg, id, title, desc, responses, emailsName, emails, focus, inviteName, queued, note }) {
  return regBox(reg, id, React.createElement(Card, null,
    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 } },
      React.createElement('div', { style: { minWidth: 0 } },
        React.createElement('h2', { style: { marginBottom: 6 } }, title),
        React.createElement('p', { style: { font: 'var(--type-caption)', color: 'var(--text-muted)', maxWidth: 660 } }, desc)),
      React.createElement('span', { style: rcPill }, responses)),
    React.createElement('div', { style: { height: 8, borderRadius: 999, background: 'var(--paper-shade)', margin: '14px 0 16px' } }),
    emailArea(reg, emailsName, emails, focus),
    React.createElement('div', { style: { marginTop: 14, display: 'flex', alignItems: 'center', gap: 16 } },
      regBox(reg, inviteName, React.createElement(Button, null, 'Invite & queue emails')),
      queued
        ? React.createElement(Badge, { tone: 'success' }, React.createElement(Icon, { name: 'check', size: 12, stroke: 2.4 }), note || 'Queued')
        : React.createElement('a', { style: rcLink }, 'Manage section (links, SMS, status) →')),
    React.createElement('div', { style: { marginTop: 14, display: 'flex', gap: 12, alignItems: 'center' } },
      React.createElement('div', { style: { width: 300 } }, React.createElement(TypedField, { placeholder: 'Save these as a list (e.g. ICU nursing)' })),
      React.createElement(Button, { variant: 'ghost', size: 'sm' }, 'Save list'))));
}

function ReviewCycleScreen({ reg, state }) {
  const s = state || {};
  return React.createElement('div', { className: 'console' },
    React.createElement(AppTopbar, { org: ORG, who: ADMIN }),
    React.createElement('div', { className: 'page' },
      React.createElement('div', { className: 'crumbs' },
        React.createElement('a', null, 'Home'), React.createElement('span', { className: 'sep' }, '›'),
        React.createElement('a', null, ORG), React.createElement('span', { className: 'sep' }, '›'),
        React.createElement('a', null, 'Jordan Avery, MD'), React.createElement('span', { className: 'sep' }, '›'), 'Jan–Jun 2026'),
      regBox(reg, 'cyc.head', React.createElement('div', null,
        React.createElement('div', { className: 'eyebrow', style: { marginBottom: 4 } }, 'Review cycle'),
        React.createElement('div', { className: 'pagehead', style: { marginBottom: 6 } },
          React.createElement('div', null,
            React.createElement('h1', null, 'Jordan Avery · MD'),
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 } },
              React.createElement('span', { className: 'muted', style: { font: 'var(--type-body)' } }, 'Jan–Jun 2026 ·'),
              React.createElement(Badge, { tone: 'open', dot: true }, 'open'))),
          React.createElement('div', { className: 'actions' },
            regBox(reg, 'cyc.report', React.createElement(Button, { variant: 'primary', size: 'sm' }, 'View combined report')),
            React.createElement(Button, { variant: 'ghost', size: 'sm' }, 'Close cycle'))),
        React.createElement('p', { className: 'muted', style: { maxWidth: 880, marginTop: 8 } },
          'Invite reviewers for each group below. Each section is ', React.createElement('strong', null, 'anonymous and unlocks to you on its own'),
          ' — 3 responses for peers, ancillary staff, and referring providers; the self-assessment shows as soon as it’s completed. Leave a section empty to skip it.'),
        React.createElement('p', { className: 'muted', style: { marginTop: 6, font: 'var(--type-caption)' } }, 'Your Practice plan includes unlimited emailed invites + SMS for this cycle.'),
        React.createElement('a', { style: { ...rcLink, display: 'inline-block', marginTop: 6 } }, 'Manage saved reviewer lists →'))),
      React.createElement('div', { className: 'stack', style: { marginTop: 20 } },
        React.createElement(GroupCard, { reg, id: 'cyc.peer', title: 'Peer reviewer', desc: 'Same or similar specialty — e.g., a cardiologist reviewing another cardiologist.', responses: '0 / 3 responses', emailsName: 'cyc.peerEmails', emails: s.peerEmails, focus: s.focus === 'peer', inviteName: 'cyc.peerInvite', queued: s.peerQueued, note: '2 invites queued' }),
        React.createElement(GroupCard, { reg, id: 'cyc.anc', title: 'Ancillary / support service (nursing, lab, case mgmt, …)', desc: 'Nursing, lab, pharmacy, case management, and other support services.', responses: '0 / 3 responses', emailsName: 'cyc.ancEmails' }),
        React.createElement(GroupCard, { reg, id: 'cyc.ref', title: 'Referring providers', desc: 'PCPs and specialists who refer patients to this provider.', responses: '0 / 3 responses', emailsName: 'cyc.refEmails', emails: s.refEmails, focus: s.focus === 'ref', inviteName: 'cyc.refInvite', queued: s.refQueued, note: '3 invites queued' }),
        regBox(reg, 'cyc.self', React.createElement(Card, null,
          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 } },
            React.createElement('div', { style: { minWidth: 0 } },
              React.createElement('h2', { style: { marginBottom: 6 } }, 'Self-assessment'),
              React.createElement('p', { style: { font: 'var(--type-caption)', color: 'var(--text-muted)' } }, 'The provider rates themselves, to compare with how others see them.')),
            React.createElement('span', { style: rcPill }, '0 / 1 responses')),
          React.createElement('div', { style: { height: 8, borderRadius: 999, background: 'var(--paper-shade)', margin: '14px 0 16px' } }),
          React.createElement(TypedField, { reg, name: 'cyc.selfEmail', label: 'Provider’s email (sends them a self-assessment)', value: s.selfEmail, caret: s.focus === 'self', placeholder: 'jordan.avery@barkley.org' }),
          React.createElement('div', { style: { marginTop: 14, display: 'flex', alignItems: 'center', gap: 16 } },
            regBox(reg, 'cyc.selfSend', React.createElement(Button, null, 'Send self-assessment')),
            s.selfSent
              ? React.createElement(Badge, { tone: 'success' }, React.createElement(Icon, { name: 'check', size: 12, stroke: 2.4 }), 'Sent')
              : React.createElement('a', { style: rcLink }, 'Manage section (links, SMS, status) →')))),
      ),
    ),
  );
}

/* ===== 3b · REVIEWER VIEW (anonymity) ===================================== */
function ReviewerScreen({ reg, state }) {
  const s = state || {};
  const rowsData = [
    { v: 4, label: 'Among the strongest I work with', color: 'var(--score-a)' },
    { v: 3, label: 'About the same as peers', color: 'var(--score-b)' },
    { v: 2, label: 'Still developing', color: 'var(--score-c)' },
    { v: 1, label: 'A concern for me', color: 'var(--score-d)' },
  ];
  const pick = s.pick || 0;
  return React.createElement('div', { className: 'console' },
    React.createElement('header', { className: 'topbar' },
      React.createElement('div', { className: 'topbar__brand' }, React.createElement('img', { src: 'assets/logo-wordmark-light.svg', alt: 'TenorMD', style: { height: 28 } })),
      React.createElement('span', { className: 'topbar__tag' }, 'Confidential reviewer survey')),
    React.createElement('div', { className: 'page page--reader', style: { paddingTop: 28 } },
      regBox(reg, 'rev.card', React.createElement(Card, { accentTop: true },
        React.createElement('div', { className: 'eyebrow', style: { marginBottom: 10 } }, 'Anonymous · aggregate-only'),
        React.createElement('h1', { style: { marginBottom: 8 } }, 'Feedback on Jordan Avery, MD'),
        React.createElement('div', {
          style: { display: 'flex', gap: 10, alignItems: 'flex-start', background: 'var(--harbor-50)', border: '1px solid var(--harbor-100)', borderRadius: 'var(--radius-md)', padding: '12px 14px', margin: '4px 0 22px' },
        },
          React.createElement(Icon, { name: 'shield-check', size: 18, style: { color: 'var(--harbor-600)', marginTop: 2 } }),
          React.createElement('p', { style: { font: 'var(--type-caption)', color: 'var(--text-secondary)' } },
            React.createElement('strong', null, 'You’re responding as: External referring provider.'),
            ' Your answers are anonymous and reported only in aggregate. Your single-use link is never connected to your responses.')),
        React.createElement('div', { ref: reg && reg('rev.q') },
          React.createElement('p', { style: { font: 'var(--type-title)', fontSize: 'var(--text-md)', color: 'var(--text-primary)', marginBottom: 14 } },
            'Compared with other specialists you refer to, how would you rate this provider?'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
            rowsData.map((r) => {
              const on = pick === r.v;
              return React.createElement('div', { key: r.v, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '13px 15px', borderRadius: 'var(--radius-sm)', border: '1.5px solid ' + (on ? 'var(--harbor-500)' : 'var(--border-strong)'), background: on ? 'var(--harbor-50)' : 'var(--surface)', boxShadow: on ? 'inset 0 0 0 2px var(--harbor-100)' : 'none' } },
                React.createElement('span', { style: { width: 18, height: 18, borderRadius: '50%', flex: 'none', border: '2px solid ' + (on ? 'var(--harbor-600)' : 'var(--border-strong)'), display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                  on && React.createElement('span', { style: { width: 8, height: 8, borderRadius: '50%', background: 'var(--harbor-600)' } })),
                React.createElement('span', { style: { width: 10, height: 10, borderRadius: 3, background: r.color, flex: 'none' } }),
                React.createElement('span', { style: { font: 'var(--type-body)', color: 'var(--text-primary)', fontWeight: on ? 600 : 400 } }, r.label));
            }))),
        React.createElement('div', { style: { marginTop: 24 } },
          regBox(reg, 'rev.submit', React.createElement(Button, { iconLeft: React.createElement(Icon, { name: 'shield-check', size: 16 }) }, 'Submit anonymously'))),
      )),
    ),
  );
}

/* ===== 4 · REPORT · COACHING ============================================= */
function ReportScreen({ reg }) {
  const agg = aggregateDist(QUESTIONS);
  const qRows = QUESTIONS.map((q, i) => {
    const b = modalBand(q.dist);
    const low = i === 3;
    return React.createElement('tr', { key: i, ref: low && reg ? reg('rep.lowRow') : null, className: low ? 'successrow' : '' },
      React.createElement('td', { className: 'qrow-label' }, q.text),
      React.createElement('td', { className: 'qrow-result' }, React.createElement('span', { className: 'band-tag' },
        React.createElement('span', { className: 'band-tag__dot', style: { background: b.color } }), b.label)),
      React.createElement('td', { style: { fontVariantNumeric: 'tabular-nums' } }, q.n),
      React.createElement('td', null, React.createElement(DistributionBar, { dist: q.dist, width: 200 })));
  });
  return React.createElement('div', { className: 'console' },
    React.createElement(AppTopbar, { org: ORG, who: ADMIN }),
    React.createElement('div', { className: 'page' },
      React.createElement('div', { className: 'crumbs' },
        React.createElement('a', null, ORG), React.createElement('span', { className: 'sep' }, '›'),
        React.createElement('a', null, 'Jordan Avery, MD'), React.createElement('span', { className: 'sep' }, '›'), 'Report'),
      React.createElement('div', { className: 'pagehead' },
        React.createElement('div', null, React.createElement('h1', null, 'Feedback report'),
          React.createElement('p', { className: 'muted', style: { marginTop: 4 } }, 'Jordan Avery, MD · External referring provider · Jan–Jun 2026')),
        React.createElement('div', { className: 'actions' },
          React.createElement(Button, { variant: 'ghost', size: 'sm', iconLeft: React.createElement(Icon, { name: 'download', size: 16 }) }, 'CSV'),
          React.createElement(Button, { variant: 'ghost', size: 'sm', iconLeft: React.createElement(Icon, { name: 'printer', size: 16 }) }, 'Print / PDF'))),
      React.createElement('div', { className: 'stack', style: { marginTop: 6 } },
        regBox(reg, 'rep.standing', React.createElement(Card, null,
          React.createElement('div', { className: 'report-summary' },
            React.createElement('div', null,
              React.createElement('div', { className: 'eyebrow', style: { marginBottom: 10 } }, 'Overall standing'),
              React.createElement(ScoreBand, { dist: agg, n: 14, size: 'lg' })),
            React.createElement('div', { className: 'spacer' }),
            React.createElement('div', { className: 'kpi-row' },
              React.createElement(StatTile, { label: 'Responses', value: '14', mono: true }),
              React.createElement(StatTile, { label: 'Confidence', value: '93%', sub: 'agree' }))))),
        regBox(reg, 'rep.trend', React.createElement(Card, { title: 'Standing over time' },
          React.createElement(TrendChart, { points: TREND }),
          React.createElement('p', { className: 'trend-cap' }, 'Each point is the share of reviewers who placed this provider ', React.createElement('strong', null, 'at or above their peers'), ', one cycle at a time.'))),
        regBox(reg, 'rep.questions', React.createElement(Card, { title: 'By question', flush: true },
          React.createElement('table', { className: 'tbl' },
            React.createElement('thead', null, React.createElement('tr', null,
              React.createElement('th', null, 'Item'), React.createElement('th', { style: { width: 150 } }, 'Standing'),
              React.createElement('th', { style: { width: 40 } }, 'n'), React.createElement('th', { style: { width: 220 } }, 'Distribution'))),
            React.createElement('tbody', null, qRows)))),
        regBox(reg, 'rep.comments', React.createElement(Card, { title: 'Comments' },
          Object.entries(COMMENTS).map(([h, list], i) => React.createElement('div', { className: 'comment-group', key: i },
            React.createElement('h3', null, h),
            React.createElement('ul', { className: 'comment-list' }, list.map((c, j) => React.createElement('li', { key: j }, c))))),
          React.createElement('p', { className: 'muted', style: { marginTop: 6, font: 'var(--type-caption)' } }, 'Comments are shown without attribution, only after the response threshold is met.'))),
      ),
    ),
  );
}

/* ===== 3c · OUTBOX · SEND QUEUED INVITES ================================= */
function OutboxScreen({ reg, state }) {
  const s = state || {};
  const sent = s.sent;
  const recipients = ['k.rao@cardiospec.org', 'm.chen@heartcare.org', 'p.shaw@northside.health', 'j.lee@primarycare.org', 'jordan.avery@barkley.org'];
  const rows = recipients.map((to, i) => React.createElement('tr', { key: i, ref: i === 0 && reg ? reg('ob.row0') : null, className: sent ? 'successrow' : '' },
    React.createElement('td', { className: 'name' }, to),
    React.createElement('td', null, 'Confidential feedback request: Jordan Avery, MD'),
    React.createElement('td', null, 'Jordan Avery · Jan–Jun 2026'),
    React.createElement('td', null, sent
      ? React.createElement(Badge, { tone: 'success' }, 'sent')
      : React.createElement(Badge, { tone: 'neutral' }, 'queued')),
    React.createElement('td', { style: { textAlign: 'right' } }, React.createElement('a', { style: { font: 'var(--type-label)', color: 'var(--text-link)' } }, 'Preview'))));
  return React.createElement('div', { className: 'console' },
    React.createElement(AppTopbar, { org: ORG, who: ADMIN }),
    React.createElement('div', { className: 'page' },
      React.createElement('div', { className: 'crumbs' },
        React.createElement('a', null, 'Home'), React.createElement('span', { className: 'sep' }, '›'),
        React.createElement('a', null, ORG), React.createElement('span', { className: 'sep' }, '›'), 'Outbox'),
      regBox(reg, 'ob.head', React.createElement('div', null,
        React.createElement('h1', null, 'Outbox'),
        React.createElement('p', { className: 'muted', style: { maxWidth: 880, marginTop: 8 } },
          'Invitation messages queue here. Email driver: ', React.createElement('strong', null, 'postmark'),
          ' · SMS driver: ', React.createElement('strong', null, 'stub'), ' (stub drivers don’t send for real — wiring a provider later only changes the driver).'))),
      React.createElement('div', { className: 'stack', style: { marginTop: 18 } },
        regBox(reg, 'ob.emailCard', React.createElement(Card, {
          title: 'Email (5)',
          action: regBox(reg, 'ob.sendBtn', React.createElement(Button, { variant: 'primary', size: 'sm', disabled: sent }, sent ? 'All sent' : 'Send all queued')),
        },
          React.createElement('table', { className: 'tbl', style: { marginTop: 4 } },
            React.createElement('thead', null, React.createElement('tr', null,
              React.createElement('th', null, 'To'), React.createElement('th', null, 'Subject'),
              React.createElement('th', null, 'Regarding'), React.createElement('th', null, 'Status'),
              React.createElement('th', { style: { width: 70 } }, ''))),
            React.createElement('tbody', null, rows)))),
        React.createElement(Card, { title: 'Text messages (0)' },
          React.createElement('p', { className: 'muted' }, 'No texts yet. Invite reviewers by SMS from a review cycle page.')),
      ),
    ),
  );
}

window.TM.screens = { SignInScreen, DashboardScreen, ReviewCycleScreen, OutboxScreen, ReviewerScreen, ReportScreen };