/* global React, DATA, Panel, mdToHtml, fmtSAR, fmtN, fmtPct */
const Briefing = () => {
  const desks = ['Network', 'Domestic', 'International', 'Umrah'];
  const [desk, setDesk] = useState('Network');
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState(null);

  const run = async (d) => {
    setLoading(true); setErr(null); setData(null);
    try {
      const base = (window.API_BASE_URL || '');
      const res = await fetch(base + '/api/briefing', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ desk: d }) });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      setData(await res.json());
    } catch (e) { setErr(e.message); } finally { setLoading(false); }
  };
  useEffect(() => { run('Network'); }, []);

  const ctx = data && data.context;
  const cur = ctx && ctx.performance_last7_vs_prev7 && ctx.performance_last7_vs_prev7.cur;
  const fwd = ctx && ctx.forward_30d;

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'Daily RM Briefing · C2'),
      React.createElement('h1', { className: 'headline', style: { fontSize: 46 } }, 'The desk\'s ', React.createElement('em', null, 'morning read.')),
      React.createElement('div', { className: 'subhead' }, 'A one-page briefing generated each morning per desk: what changed, why, what competitors did, what the agent recommends, and what needs human judgement today.')),

    React.createElement('div', { className: 'row between', style: { marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
      React.createElement('div', { className: 'filterbar' },
        desks.map(d => React.createElement('button', { key: d, className: 'filter-chip' + (desk === d ? ' active' : ''),
          onClick: () => { setDesk(d); run(d); } }, d, ' desk'))),
      React.createElement('button', { className: 'btn btn-sm btn-primary', onClick: () => run(desk), disabled: loading },
        loading ? 'Generating…' : '↻ Regenerate')),

    React.createElement('div', { className: 'grid gap-3', style: { gridTemplateColumns: '1.5fr 1fr' } },
      React.createElement(Panel, { title: `${desk} desk briefing`, sub: data ? `As of ${data.as_of} · Anthropic Claude` : 'loading…' },
        loading ? React.createElement('div', { style: { padding: 24, color: 'var(--text-muted)', fontStyle: 'italic' } }, '· · · the briefing writer is reading the overnight book')
          : err ? React.createElement('div', { className: 'text-neg', style: { padding: 16 } }, 'Could not generate briefing: ' + err)
          : data ? React.createElement('div', { className: 'article-col', style: { maxWidth: 'none', fontSize: 18.5, lineHeight: 1.6 }, dangerouslySetInnerHTML: { __html: mdToHtml(data.markdown) } })
          : null),
      React.createElement('div', { className: 'grid gap-2' },
        cur ? React.createElement(Panel, { title: 'Fact-pack', sub: 'Deterministic inputs behind the narrative' },
          React.createElement('div', { className: 'grid grid-2 gap-2' },
            React.createElement(MiniStat, { label: 'Rev · last 7d', value: fmtSAR(cur.rev) }),
            React.createElement(MiniStat, { label: 'LF · last 7d', value: fmtPct(cur.lf) }),
            fwd ? React.createElement(MiniStat, { label: 'Fwd rev · 30d', value: fmtSAR(fwd.frev) }) : null,
            fwd ? React.createElement(MiniStat, { label: 'YoY · fwd', value: fwd.yoy != null ? fwd.yoy + '%' : '—' }) : null)) : null,
        ctx && ctx.tight_ods_21d && ctx.tight_ods_21d.length ? React.createElement(Panel, { title: 'Tightest O&Ds · 21d', flush: true },
          React.createElement('table', { className: 'tbl' }, React.createElement('tbody', null,
            ctx.tight_ods_21d.map((r, i) => React.createElement('tr', { key: i },
              React.createElement('td', { style: { fontWeight: 600 } }, r.od),
              React.createElement('td', { className: 'text-muted' }, r.market),
              React.createElement('td', { className: 'num mono text-pos' }, fmtPct(r.lf))))))) : null,
        ctx && ctx.competitor_undercuts && ctx.competitor_undercuts.length ? React.createElement(Panel, { title: 'Competitor undercuts', flush: true },
          React.createElement('table', { className: 'tbl' }, React.createElement('tbody', null,
            ctx.competitor_undercuts.slice(0, 5).map((r, i) => React.createElement('tr', { key: i },
              React.createElement('td', { style: { fontWeight: 600 } }, r.od),
              React.createElement('td', null, React.createElement('span', { className: 'pill pill-info' }, r.carrier)),
              React.createElement('td', { className: 'num mono text-neg' }, r.gap_pct + '%')))))) : null)));
};
const MiniStat = ({ label, value }) => React.createElement('div', { className: 'boxed', style: { padding: '10px 12px' } },
  React.createElement('div', { className: 'label', style: { marginBottom: 3 } }, label),
  React.createElement('div', { className: 'mono', style: { fontSize: 16, fontWeight: 600 } }, value));
window.Briefing = Briefing;
window.MiniStat = MiniStat;