/* ============================================================
   Screen 1 — Market Overview ("the radar")
   ============================================================ */

/* shared aggregation helpers */
function qLabel(q) { return 'Q' + q[1] + "'" + q.slice(-2); }
function chronoQuarters(filters) {
  const all = [...DATA.quarters].reverse();
  return filters.quarters.length ? all.filter((q) => filters.quarters.includes(q)) : all;
}
function coverage(deals) {
  const rel = deals.filter((d) => d.relevant);
  const seen = rel.filter((d) => d.seenBefore).length;
  return { rel: rel.length, seen, pct: rel.length ? Math.round((seen / rel.length) * 100) : 0 };
}
const RELEVANCE_NOTE = 'Relevant = IT or software · sub-€25m enterprise value · ≤100 FTE. Coverage = relevant deals seen before they went public.';

function ChartCard({ title, sub, children, legend, footnote, height }) {
  return (
    <div className="card" style={{ padding: '15px 16px 14px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ marginBottom: 10 }}>
        <h3 style={{ fontSize: 13.5, fontWeight: 700 }}>{title}</h3>
        {sub && <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 2, fontWeight: 500 }}>{sub}</div>}
      </div>
      <div style={{ flex: 1 }}>{children}</div>
      {legend && <ChartLegend items={legend} />}
      {footnote && <div style={{ fontSize: 10.5, color: 'var(--ink-faint)', marginTop: 9, lineHeight: 1.4 }}>{footnote}</div>}
    </div>
  );
}

/* ---------------- Market Overview ---------------- */
function MarketOverview({ deals, filters, openDrawer }) {
  const cov = coverage(deals);
  const relevant = deals.filter((d) => d.relevant);
  const missed = relevant.filter((d) => !d.seenBefore);
  const lostCore = missed.filter((d) => d.winnerTier === 'core');

  // Coverage trend across the shown window (newest complete quarter vs the oldest) — a rate,
  // so it reads correctly regardless of how many quarters are in view.
  const chrono = chronoQuarters(filters);
  const complete = chrono.filter((q) => q !== DATA.partialQuarter);
  let covTrend = null, covFrom = null, covTo = null;
  if (complete.length >= 2) {
    const cOld = coverage(deals.filter((d) => d.quarter === complete[0]));
    const cNew = coverage(deals.filter((d) => d.quarter === complete[complete.length - 1]));
    if (cOld.rel >= 2 && cNew.rel >= 2) { covTrend = cNew.pct - cOld.pct; covFrom = complete[0]; covTo = complete[complete.length - 1]; }
  }

  // chart 1 — all scored deals per quarter (relevant vs other)
  const allDealsData = chrono.map((q) => {
    const dq = deals.filter((d) => d.quarter === q);
    const rel = dq.filter((d) => d.relevant).length;
    return { label: qLabel(q), q, relevant: rel, other: dq.length - rel, total: dq.length,
      pct: dq.length ? Math.round((rel / dq.length) * 100) : 0, partial: q === DATA.partialQuarter };
  });
  // chart 2 — the same deals, split by competition type (who won them)
  const compTypeData = chrono.map((q) => {
    const dq = deals.filter((d) => d.quarter === q);
    const t = (tier) => dq.filter((d) => d.primaryTier === tier).length;
    const core = t('core'), buyout = t('buyout'), vc = t('vc');
    return { label: qLabel(q), q, partial: q === DATA.partialQuarter,
      core, buyout, vc, other: dq.length - core - buyout - vc };
  });
  // chart 3 — seen vs outcome
  const bucket = (d) => d.buyerCompId ? (d.primaryTier || 'other') : 'other';
  const flowLinks = [];
  ['seen', 'unseen'].forEach((s) => ['core', 'buyout', 'vc', 'other'].forEach((o) => {
    const v = relevant.filter((d) => (d.seenBefore ? 'seen' : 'unseen') === s && bucket(d) === o).length;
    flowLinks.push({ from: s, to: o, value: v });
  }));

  const topMissed = [...missed].sort((a, b) => b.fit - a.fit || (b.dealSize || 0) - (a.dealSize || 0)).slice(0, 5);

  return (
    <div className="screen-in">
      <PageHead icon="radar" title="Market Overview" />

      {/* KPI strip — funnel: scored → relevant → seen → missed → lost */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 22 }}>
        <KpiCell label="Scored deals" value={deals.length}
          sub="all deals we scored, this window" onClick={() => openDrawer('All scored deals', 'Every deal we scored in the current filter', deals)} />
        <KpiCell label="Relevant" value={relevant.length}
          sub={`${Math.round((relevant.length / Math.max(1, deals.length)) * 100)}% fit the thesis`}
          onClick={() => openDrawer('Relevant deals', RELEVANCE_NOTE, relevant)} />
        <KpiCell label="Coverage" value={cov.pct + '%'} accent delta={covTrend} hint="pp"
          sub={`${cov.seen} of ${cov.rel} seen first`} active
          onClick={() => openDrawer('Covered deals', 'Relevant deals we saw before they went public', relevant.filter((d) => d.seenBefore))} />
        <KpiCell label="Missed" value={missed.length} sub="relevant, off our radar"
          onClick={() => openDrawer('Missed relevant deals', 'Relevant, and not on our radar before going public', missed, true)} />
        <KpiCell label="Lost to core" value={lostCore.length} sub="missed & won by a core rival"
          onClick={() => openDrawer('Lost to a core competitor', 'Relevant deals we missed that a core rival won', lostCore, true)} />
      </div>


      {/* charts row — all deals we scored, then those same deals by competition type */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
        <ChartCard title="All deals we scored"
          legend={[{ label: 'Relevant', color: CH.core }, { label: 'Other', color: CH.other }]}>
          <StackedBar data={allDealsData} keys={['relevant', 'other']}
            colors={{ relevant: CH.core, other: CH.other }}
            labels={{ relevant: 'Relevant', other: 'Other' }}
            onSegment={(d, k) => openDrawer(`${k === 'relevant' ? 'Relevant' : 'Other'} deals · ${d.q}`, `${d.total} deals scored that quarter`,
              deals.filter((x) => x.quarter === d.q && (k === 'relevant' ? x.relevant : !x.relevant)))} />
        </ChartCard>
        <ChartCard title="Deals by competition type"
          legend={[{ label: 'Core', color: CH.core }, { label: 'Buyout', color: CH.buyout }, { label: 'VC', color: CH.vc }, { label: 'No tracked rival', color: CH.other }]}>
          <StackedBar data={compTypeData} keys={['core', 'buyout', 'vc', 'other']}
            colors={{ core: CH.core, buyout: CH.buyout, vc: CH.vc, other: CH.other }}
            labels={{ core: 'Core', buyout: 'Buyout', vc: 'VC', other: 'No tracked rival' }}
            onSegment={(d, k) => openDrawer(
              k === 'other' ? `No tracked rival · ${d.q}` : `${DATA.tierLabel(k)} won · ${d.q}`,
              k === 'other' ? 'Deals won by a buyer we do not track' : 'Deals won by ' + DATA.tierLabel(k).toLowerCase() + ' competitors',
              deals.filter((x) => x.quarter === d.q && (k === 'other' ? !x.primaryTier : x.primaryTier === k)))} />
        </ChartCard>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 16 }}>
        <ChartCard title="Seen vs outcome"
          footnote={RELEVANCE_NOTE}
          legend={[{ label: 'Seen before', color: '#3f7d58' }, { label: 'Unseen', color: '#a4453c' }]}>
          <SeenOutcomeFlow links={flowLinks}
            onLink={(s, o) => {
              const set = relevant.filter((d) => (d.seenBefore ? 'seen' : 'unseen') === s && bucket(d) === o);
              const ol = { core: 'won by Core', buyout: 'won by Buyout', vc: 'won by VC', other: 'won by others / us' }[o];
              openDrawer(`${s === 'seen' ? 'Seen' : 'Unseen'} → ${ol}`, 'Relevant deals on this path', set, s === 'unseen');
            }} />
        </ChartCard>

        {/* top missed preview */}
        <div className="card" style={{ padding: '15px 16px 12px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <h3 style={{ fontSize: 13.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 7 }}>
                <Icon name="alert" size={15} style={{ color: 'var(--danger)' }} /> Top missed deals
              </h3>

            </div>
            <button className="btn sm" onClick={() => openDrawer('Missed relevant deals', 'Relevant, and not on our radar before going public', missed, true)}>Open all <Icon name="chevronRight" size={13} /></button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {topMissed.map((d, i) => (
              <button key={d.id} onClick={() => openDrawer('Missed relevant deals', 'Relevant, and not on our radar before going public', missed, true)}
                style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 4px', border: 'none', borderTop: i ? '1px solid var(--line-soft)' : 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left', width: '100%' }}>
                <span className="fit" style={fitBadgeStyle(d.fit)}>{d.fit}/5</span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'block', fontWeight: 600, fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</span>
                  <span style={{ display: 'block', fontSize: 11, color: 'var(--ink-soft)' }}>{d.sector} · {DATA.fmtSize(d.dealSize)}</span>
                </span>
                <span style={{ textAlign: 'right', flexShrink: 0 }}>
                  <span style={{ display: 'block', fontSize: 11, color: 'var(--ink-soft)' }}>won by</span>
                  <span style={{ display: 'block', fontWeight: 600, fontSize: 12, color: d.winnerTier === 'core' ? 'var(--danger)' : 'var(--ink)' }}>{d.winner}</span>
                </span>
              </button>
            ))}
            {topMissed.length === 0 && <div style={{ color: 'var(--ink-faint)', padding: '20px 0', textAlign: 'center', fontSize: 12.5 }}>No missed deals in this filter. Full coverage.</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MarketOverview, ChartCard, qLabel, chronoQuarters, coverage, RELEVANCE_NOTE });