/* ============================================================
   EMM — PRD v2 screens
   Sentiment Analysis · Viewership · Crisis Center · Reports · Settings
   ============================================================ */
(function () {
  "use strict";
  const { useMemo, useState } = React;
  const E = window.EMM, C = E.fmt, L = window.emmL;
  const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
  const MX_DIMS = ["channel", "anchor", "topic", "category", "region", "medium", "sentiment", "authenticity"];

  function trendDays(time) {
    if (time === "today" || time === "yesterday") return Array.from({ length: 14 }, (_, i) => E.TODAY - 13 + i);
    return E.daysFor(time);
  }
  const DEMO_COLORS = ["oklch(0.46 0.10 264)", "oklch(0.40 0.095 264)", "oklch(0.55 0.085 240)", "oklch(0.64 0.07 220)", "oklch(0.74 0.05 210)"];

  // ============================================================
  //  SENTIMENT ANALYSIS
  // ============================================================
  function SentimentScreen({ time, filters, lang, nav }) {
    const { t } = window.useEmmT();
    const days = E.daysFor(time), prev = E.prevDaysFor(time);
    const agg = useMemo(() => E.aggregate(days, filters), [time, filters]);
    const pAgg = useMemo(() => E.aggregate(prev, filters), [time, filters]);
    const tSeries = useMemo(() => E.series(trendDays(time), filters), [time, filters]);
    const emo = useMemo(() => E.emotions(days, filters), [time, filters]);
    const sov = useMemo(() => E.shareOfVoice(), []);
    const ling = useMemo(() => E.linguistic(), []);
    const tpBoard = useMemo(() => E.topicBoard(days, filters).filter((x) => x.count > 0).slice(0, 6), [time, filters]);
    const nssVal = E.nss(agg), pNss = E.nss(pAgg);
    const amp = E.amplification(days, filters);
    const ndom = E.narrativeDominance(days, filters);

    const anxiety = emo.find((e) => e.id === "anxiety");
    const anger = emo.find((e) => e.id === "anger");
    const signal = anxiety.pct >= 22
      ? { en: `Anxiety at ${anxiety.pct}% — lead health & disaster messaging with reassurance, not statistics.`, hi: `चिंता ${anxiety.pct}% — स्वास्थ्य व आपदा संदेश आँकड़ों के बजाय आश्वासन से शुरू करें।` }
      : anger.pct >= 28
      ? { en: `Anger at ${anger.pct}% — counter-narrative pressure rising on Bastar/Law topics; brief anchors with verified facts.`, hi: `क्रोध ${anger.pct}% — बस्तर/कानून विषयों पर दबाव; एंकरों को सत्यापित तथ्य दें।` }
      : { en: `Trust and Hope dominate — official framing is landing. Maintain steady positive cadence.`, hi: `विश्वास व आशा प्रमुख — आधिकारिक फ्रेमिंग प्रभावी। सकारात्मक लय बनाए रखें।` };

    const donutSegs = [
      { k: "pos", v: agg.pos, c: "var(--pos)", label: t("positive") },
      { k: "neu", v: agg.neu, c: "var(--neu)", label: t("neutral") },
      { k: "neg", v: agg.neg, c: "var(--neg)", label: t("negative") },
    ];

    return (
      <div className="emm-screen sentiment">
        <ScreenHead2 title={t("sentimentScreen")} sub={t("sentimentScreenSub")} time={time} />
        <div className="emm-kpi-grid four">
          <NSSCard value={nssVal} delta={nssVal - pNss} />
          <KPIStat label={t("mentionsAnalysed")} value={C.n(agg.count)} delta={E.delta(agg.count, pAgg.count)} />
          <KPIStat label={t("amplification")} value={amp + "×"} delta={null}>
            <div className="emm-kpi-foot mono">{t("amplificationSub")}</div>
          </KPIStat>
          <KPIStat label={t("narrativeDom")} value={ndom + "%"} delta={null}>
            <div className="emm-kpi-foot mono">{t("narrativeDomSub")}</div>
          </KPIStat>
        </div>

        <div className="emm-grid12">
          <Panel title={t("overallSent")} className="col5" sub={t("clickSliceHint")}>
            <div className="emm-donut-wrap">
              <Donut segments={donutSegs} center={`${Math.round((agg.pos / (agg.count || 1)) * 100)}%`} centerSub={t("positive")}
                onClick={(s) => nav.goMentionLog({ sentiment: s.k })} />
              <DonutLegend items={donutSegs} />
            </div>
          </Panel>
          <Panel title={t("sentTrend")} sub={t("sentimentTrendSub")} className="col7">
            <TrendChart series={tSeries} split height={190} accent="var(--accent)" />
            <div className="emm-trend-legend mono">
              <span><span className="emm-dot" style={{ background: "var(--pos)" }} /> {t("positive")}</span>
              <span><span className="emm-dot" style={{ background: "var(--neu)" }} /> {t("neutral")}</span>
              <span><span className="emm-dot" style={{ background: "var(--neg)" }} /> {t("negative")}</span>
            </div>
          </Panel>

          <Panel title={t("emotionMap")} sub={t("emotionMapSub")} className="col12 emm-emotion-panel">
            <div className="emm-emogrid">
              {emo.map((e) => <EmotionCard key={e.id} emo={e} />)}
            </div>
            <div className="emm-opsignal">
              <span className="emm-opsignal-cap mono">{t("opSignal")}</span>
              <span className="emm-opsignal-txt">{L(signal, lang)}</span>
            </div>
          </Panel>

          <Panel title={t("shareOfVoice")} className="col6">
            <ShareBars items={sov} lang={lang} />
          </Panel>
          <Panel title={t("linguisticSpread")} sub={t("linguisticSub")} className="col6">
            <ShareBars items={ling} lang={lang} />
          </Panel>

          <Panel title={t("byTopic")} className="col12">
            <TopicSentStack rows={tpBoard} lang={lang} onClick={(r) => nav.goTopic(r.id)} />
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  VIEWERSHIP
  // ============================================================
  function ViewershipScreen({ time, filters, lang, nav }) {
    const { t } = window.useEmmT();
    const days = E.daysFor(time), prev = E.prevDaysFor(time);
    const agg = useMemo(() => E.aggregate(days, filters), [time, filters]);
    const pAgg = useMemo(() => E.aggregate(prev, filters), [time, filters]);
    const split = useMemo(() => E.reachSplit(trendDays(time), filters), [time, filters]);
    const chBoard = useMemo(() => E.channelBoard(days, filters).filter((c) => c.reach > 0).slice(0, 9), [time, filters]);
    const demo = useMemo(() => E.demographics().map((d, i) => ({ ...d, v: d.pct, c: DEMO_COLORS[i] })), []);
    const demoLoc = useMemo(() => E.demoLocation(), []);
    const vs = useMemo(() => E.videoStats(), []);
    const tvReach = Math.round(agg.reach * 0.72);
    const onlineReach = Math.round(agg.reach * 0.46 + agg.count * 9000);

    return (
      <div className="emm-screen viewership">
        <ScreenHead2 title={t("viewership")} sub={t("viewershipSub")} time={time} tag="L2" />
        <div className="emm-kpi-grid">
          <KPIStat label={t("kpiReach")} value={C.compact(agg.reach)} delta={E.delta(agg.reach, pAgg.reach)} accent="var(--accent)" big />
          <KPIStat label={t("tvReach")} value={C.compact(tvReach)} delta={E.delta(agg.reach, pAgg.reach)} />
          <KPIStat label={t("onlineReach")} value={C.compact(onlineReach)} delta={E.delta(agg.count, pAgg.count) + 6} />
          <KPIStat label={t("videoWatch")} value={vs.watch} delta={4}>
            <div className="emm-kpi-foot mono">{vs.watchPct}% of full message</div>
          </KPIStat>
          <KPIStat label={t("videoCTR")} value={vs.ctr + "%"} delta={vs.ctrDelta} accent="var(--accent)">
            <div className="emm-kpi-foot mono">{t("videoCTRSub")}</div>
          </KPIStat>
        </div>

        <div className="emm-grid12">
          <Panel title={t("kpiReach")} sub={t("tvOnline")} className="col7">
            <DualTrend series={split} height={200} labelEvery={time === "30d" ? 5 : 3} />
          </Panel>
          <Panel title={t("demographics")} sub={t("demoSub")} className="col5">
            <div className="emm-donut-wrap">
              <Donut segments={demo} center={"25–34"} centerSub={t("now")} />
              <DonutLegend items={demo.map((d) => ({ c: d.c, label: d.label, v: d.pct }))} />
            </div>
            <div className="emm-demoloc">
              <div className="emm-demoloc-cap mono">{t("demoByLocation")} · {t("demoLocationSub")}</div>
              <ShareBars items={demoLoc} lang={lang} onClick={(it) => { if (it.id !== "other") nav.goMentionLog({ region: it.id }); }} />
            </div>
          </Panel>

          <Panel title={t("chReachRank")} className="col7" right={<span className="emm-panel-hint mono">{t("drillHint")} →</span>}>
            <BarsH items={chBoard} rank valueFn={(c) => c.reach}
              labelFn={(c) => L(c, lang) || c.name}
              subFn={(c) => `${c.tier} · ${c.medium}`} color="var(--accent)"
              onClick={(c) => nav.goChannel(c.id)} activeId={filters.channel} />
          </Panel>
          <Panel title={t("reachBySent")} sub={t("reachBySentSub")} className="col5"
            right={<button className="emm-btn ghost mono" onClick={() => nav.goAdspend()}>{t("navAdspend")} →</button>}>
            <SentMetricSplit pos={agg.posReach} neu={agg.neuReach} neg={agg.negReach} fmt={C.compact} />
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  CRISIS CENTER  (urgent register)
  // ============================================================
  function CrisisScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const k = useMemo(() => E.crisisKpis(), []);
    const vel = useMemo(() => E.velocitySeries(), []);
    const misinfo = useMemo(() => E.misinformation(), []);
    const plays = useMemo(() => E.playbook(), []);
    const res = useMemo(() => E.resolutions(), []);
    const gz = { en: "@cg_satya (anon.) → 14 Facebook pages", hi: "@cg_satya (अनाम) → 14 फेसबुक पेज" };
    const st = window.EMM_SETTINGS || {};
    const thresholdsLine = t("crisisThresholds")
      .replace("%p%", st.velocityPct != null ? st.velocityPct : 200)
      .replace("%h%", st.windowH != null ? st.windowH : 2)
      .replace("%n%", st.nssDrop != null ? st.nssDrop : 15)
      .replace("%r%", C.compact(st.reachThresh != null ? st.reachThresh : 500000));

    return (
      <div className="emm-screen crisis" data-register="urgent">
        <div className="emm-screenhead">
          <div>
            <h1 className="emm-screenhead-title">{t("crisisCenter")}
              <span className="emm-live-pill mono crisis"><span className="emm-live-dot" />{k.openThreads.critical} {t("stCritical")}</span>
            </h1>
            <p className="emm-screenhead-sub mono">{t("crisisCenterSub")}</p>
          </div>
        </div>

        <div className="emm-kpi-grid four emm-crisis-kpis">
          <OpsKpi label={t("frt")} sub={t("frtSub")} value={k.frt.val} unit={k.frt.unit} good={k.frt.good}
            foot={`${t("target")} <${k.frt.target}${k.frt.unit} · ${t("avg")} ${k.frt.avg}${k.frt.unit}`} />
          <OpsKpi label={t("grievanceVel")} sub={t("grievanceSub")} value={k.grievance.val} unit={k.grievance.unit} good={k.grievance.good}
            foot={`${t("target")} <${k.grievance.target}${k.grievance.unit} · ${t("avg")} ${k.grievance.avg}${k.grievance.unit}`} />
          <OpsKpi label={t("saturation")} sub={t("saturationSub")} value={k.saturation.val} unit={k.saturation.unit} good={k.saturation.good}
            foot={`${t("avg")} ${k.saturation.avg}${k.saturation.unit} · ${t("rising")}`} />
          <OpsKpi label={t("openThreads")} value={k.openThreads.val} unit="" good={false}
            foot={`${k.openThreads.critical} ${t("stCritical")} · ${k.openThreads.warning} ${t("stFlagged")} · ${k.openThreads.flag} ${t("stReview")}`} />
        </div>

        <div className="emm-grid12">
          <Panel title={t("velocityTracker")} sub={thresholdsLine} className="col12 emm-velocity-panel">
            <VelocityMeter spike={340} source={gz} series={vel} lang={lang} />
          </Panel>

          <Panel title={t("misinfoTracker")} sub={t("misinfoSub")} className="col7" pad={false}
            right={<button className="emm-btn ghost mono" onClick={() => nav.goFakeNews()}>{t("openDetector")} →</button>}>
            <div className="emm-misinfo-list">
              {misinfo.filter((m) => m.status !== "resolved").slice(0, 3).map((m) => <MisinfoRow key={m.id} row={m} lang={lang} />)}
            </div>
          </Panel>

          <div className="col5 emm-crisis-side">
            <Panel title={t("crisisPlaybook")} sub={t("playbookSub")}>
              <ol className="emm-playbook">
                {plays.map((p, i) => (
                  <li key={i} className="emm-playbook-item">
                    <span className="emm-playbook-num mono">{i + 1}</span>
                    <span className="emm-playbook-txt">{L(p, lang)}</span>
                  </li>
                ))}
              </ol>
            </Panel>
            <Panel title={t("recentResolutions")}>
              <div className="emm-resolutions">
                {res.map((r) => (
                  <div key={r.id} className="emm-resolution">
                    <span className="emm-resolution-check">✓</span>
                    <div className="emm-resolution-body">
                      <div className="emm-resolution-head">{L(r.head, lang)}</div>
                      <div className="emm-resolution-meta mono">{r.id} · {t("resolvedIn")} {r.time} · {t("satTime")} {r.sat}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    );
  }

  function OpsKpi({ label, sub, value, unit, good, foot }) {
    return (
      <div className="emm-kpi emm-ops-kpi">
        <div className="emm-kpi-label">{label}</div>
        <div className="emm-kpi-row">
          <div className={"emm-kpi-value mono " + (good ? "ops-good" : "ops-bad")}>{value}<span className="emm-kpi-unit">{unit}</span></div>
        </div>
        {sub && <div className="emm-ops-sub mono">{sub}</div>}
        <div className="emm-ops-foot mono">{foot}</div>
      </div>
    );
  }

  // ============================================================
  //  REPORTS
  // ============================================================
  function ReportsScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const types = useMemo(() => E.reportTypes(), []);
    const recent = useMemo(() => E.recentReports(), []);
    return (
      <div className="emm-screen reports">
        <ScreenHead2 title={t("reportsScreen")} sub={t("reportsScreenSub")} />
        <div className="emm-report-grid">
          {types.map((r) => <ReportCard key={r.id} report={r} lang={lang} onGenerate={() => nav.openReport(r.id)} />)}
        </div>
        <Panel title={t("recentReports")} className="emm-recent-panel" pad={false}
          right={<span className="emm-count-badge mono">{recent.length}</span>}>
          <div className="emm-rtable">
            <div className="emm-rtable-row head mono">
              <span>{t("rType")}</span><span>{t("rWhen")}</span><span>{t("rBy")}</span><span>{t("rTo")}</span><span>{t("rFmt")}</span><span></span>
            </div>
            {recent.map((r, i) => (
              <div key={i} className="emm-rtable-row clickable" onClick={() => nav.openReport(r.id)}>
                <span className="emm-rtable-type">{L(r.type, lang)}</span>
                <span className="mono emm-rtable-dim">{r.when}</span>
                <span className="mono emm-rtable-dim">{r.by}</span>
                <span className="emm-rtable-dim">{r.to}</span>
                <span className="mono"><span className="emm-fmt-pill">{r.fmt}</span></span>
                <button className="emm-rtable-dl mono" onClick={(e) => { e.stopPropagation(); nav.openReport(r.id); }}>{t("download")} ↓</button>
              </div>
            ))}
          </div>
        </Panel>
      </div>
    );
  }

  // ============================================================
  //  SETTINGS  (structural placeholder)
  // ============================================================
  function SettingsScreen({ lang, tweaks, setTweak, setLang, accents, filters, setRegion, setDept, settings, setSetting, resetSettings, showToast, nav }) {
    const { t } = window.useEmmT();
    const tw = tweaks || {};
    const sx = settings || {};
    const ch = sx.channels || {};
    const integ = sx.integrations || {};
    const accentList = accents || window.EMM_ACCENTS || [];
    const channels = E.CHANNELS || [];
    const monitored = channels.filter((c) => ch[c.id] !== false).length;
    const readViews = () => { try { return JSON.parse(localStorage.getItem("emm.savedViews") || "[]"); } catch (e) { return []; } };
    const [views, setViews] = useState(readViews);

    const setCh = (id, on) => setSetting("channels", { ...ch, [id]: on });
    const setInteg = (k, v) => setSetting("integrations", { ...integ, [k]: v });
    const onReset = () => { resetSettings(); showToast && showToast(t("toastReset")); };
    const recall = (v) => nav.recallView(v);
    const delView = (i) => { nav.deleteView(i); setViews(readViews().filter((_, j) => j !== i)); };

    const caps = [
      { code: "L1", name: t("L1"), scope: t("L1full"), by: [t("navMainFeed"), t("navChannels"), t("navTopics")], status: t("statusLive") },
      { code: "L2", name: t("L2"), scope: t("L2full"), by: [t("navViewership"), t("navAdspend")], status: t("statusLive") },
      { code: "L3", name: t("L3"), scope: t("L3full"), by: [t("navChannels"), t("storyDetail")], status: t("statusLive") },
      { code: "L4", name: t("L4"), scope: t("L4full"), by: [t("navMatrix"), t("storyDetail")], status: t("statusLive") },
      { code: "L5", name: t("L5"), scope: t("L5full"), by: [t("navJournalists")], status: t("statusDpia") },
    ];
    const Row = ({ label, sub, children }) => (
      <div className="emm-setrow">
        <div className="emm-setrow-l"><div className="emm-setrow-label">{label}</div>{sub && <div className="emm-setrow-sub mono">{sub}</div>}</div>
        <div className="emm-setrow-ctl">{children}</div>
      </div>
    );

    return (
      <div className="emm-screen settings">
        <ScreenHead2 title={t("settingsScreen")} sub={t("settingsScreenSub")}
          right={<button className="emm-btn ghost mono" onClick={onReset}>{t("resetDefaults")}</button>} />

        <div className="emm-grid12">
          {/* Appearance & language */}
          <Panel title={t("setAppearance")} className="col6">
            <Row label={t("setTheme")}>
              <div className="emm-segctl mono">
                {["light", "dark"].map((m) => <button key={m} className={"emm-seg" + (tw.theme === m ? " active" : "")} onClick={() => setTweak("theme", m)}>{t("theme_" + m)}</button>)}
              </div>
            </Row>
            <Row label={t("setAccent")}>
              <div className="emm-accent-swatches">
                {accentList.map((a) => <button key={a.id} title={a.name}
                  className={"emm-accent-sw" + (tw.accent === a.id ? " active" : "")}
                  style={{ background: a.css }} onClick={() => setTweak("accent", a.id)} />)}
              </div>
            </Row>
            <Row label={t("setDensity")}>
              <div className="emm-segctl mono">
                {["comfortable", "compact"].map((m) => <button key={m} className={"emm-seg" + (tw.density === m ? " active" : "")} onClick={() => setTweak("density", m)}>{t("density_" + m)}</button>)}
              </div>
            </Row>
            <Row label={t("setFontScale")} sub={(tw.fontScale || 100) + "%"}>
              <input type="range" className="emm-range" min={90} max={115} step={5} value={tw.fontScale || 100} onChange={(e) => setTweak("fontScale", +e.target.value)} />
            </Row>
            <Row label={t("setLanguage")}>
              <div className="emm-segctl mono">
                <button className={"emm-seg" + (lang === "en" ? " active" : "")} onClick={() => setLang("en")}>EN</button>
                <button className={"emm-seg dev" + (lang === "hi" ? " active" : "")} onClick={() => setLang("hi")}>हिं</button>
              </div>
            </Row>
            <Row label={t("setRole")} sub={t("setRoleSub")}>
              <div className="emm-segctl mono">
                {["secretary", "analyst"].map((m) => <button key={m} className={"emm-seg" + (tw.role === m ? " active" : "")} onClick={() => setTweak("role", m)}>{t("role_" + m)}</button>)}
              </div>
            </Row>
          </Panel>

          {/* Default filters + thresholds */}
          <Panel title={t("setDefaults")} className="col6">
            <Row label={t("region")}>
              <select className="emm-uselect mono" value={filters.region || ""} onChange={(e) => setRegion(e.target.value)}>
                <option value="">{t("allRegions")}</option>
                {(E.REGIONS || []).map((r) => <option key={r.id} value={r.id}>{L(r, lang) || r.name}</option>)}
              </select>
            </Row>
            <Row label={t("department")}>
              <select className="emm-uselect mono" value={filters.entity || ""} onChange={(e) => setDept(e.target.value)}>
                <option value="">{t("allDepts")}</option>
                {(E.ENTITIES || []).map((en) => <option key={en.id} value={en.id}>{L(en, lang) || en.name}</option>)}
              </select>
            </Row>
            <div className="emm-set-divider" />
            <div className="emm-setrow-grouptitle mono">{t("setThresholds")}</div>
            <Row label={t("thVelocity")} sub={t("thVelocitySub")}>
              <span className="emm-th-inline">+<NumField value={sx.velocityPct} min={50} max={1000} step={10} unit="%" onChange={(v) => setSetting("velocityPct", v)} />
                / <NumField value={sx.windowH} min={1} max={24} step={1} unit="h" onChange={(v) => setSetting("windowH", v)} /></span>
            </Row>
            <Row label={t("thNss")} sub={t("thNssSub")}>
              <span className="emm-th-inline">−<NumField value={sx.nssDrop} min={1} max={100} step={1} onChange={(v) => setSetting("nssDrop", v)} /></span>
            </Row>
            <Row label={t("thReach")} sub={t("thReachSub")}>
              <NumField value={sx.reachThresh} min={0} max={5000000} step={50000} width={120} onChange={(v) => setSetting("reachThresh", v)} />
            </Row>
          </Panel>

          {/* Monitored channels */}
          <Panel title={t("setChannels")} sub={t("setChannelsCount").replace("%n%", monitored).replace("%m%", channels.length)} className="col6" pad={false}>
            <div className="emm-chtoggle-list">
              {channels.map((c) => (
                <div key={c.id} className="emm-chtoggle">
                  <div className="emm-chtoggle-main">
                    <span className="emm-chtoggle-name">{L(c, lang) || c.name}</span>
                    <span className="emm-chtoggle-meta mono">{c.medium}{c.tier ? " · " + c.tier : ""}</span>
                  </div>
                  <Toggle on={ch[c.id] !== false} onChange={(v) => setCh(c.id, v)} label={c.name} />
                </div>
              ))}
            </div>
          </Panel>

          {/* Sources & integrations */}
          <Panel title={t("setIntegrations")} className="col6">
            <Row label={t("setDprSource")} sub={t("setDprSourceSub")}>
              <Toggle on={sx.dprSource !== false} onChange={(v) => setSetting("dprSource", v)} label={t("setDprSource")} />
            </Row>
            <Row label={t("intBarc")} sub={t("intBarcSub")}><Toggle on={!!integ.barc} onChange={(v) => setInteg("barc", v)} label={t("intBarc")} /></Row>
            <Row label={t("intWa")} sub={t("intWaSub")}><Toggle on={!!integ.wa} onChange={(v) => setInteg("wa", v)} label={t("intWa")} /></Row>
            <Row label={t("intSso")} sub={t("intSsoSub")}><Toggle on={!!integ.sso} onChange={(v) => setInteg("sso", v)} label={t("intSso")} /></Row>
          </Panel>

          {/* Saved views */}
          <Panel title={t("savedViews")} sub={t("savedViewsSub")} className="col12" pad={false}>
            {views.length === 0
              ? <div className="emm-settings-note mono">{t("noSavedViews")}</div>
              : (
                <div className="emm-savedviews">
                  {views.map((v, i) => (
                    <div key={i} className="emm-savedview">
                      <span className="emm-savedview-label">{v.label || v.screen}</span>
                      <span className="emm-savedview-meta mono">{[v.filters && Object.keys(v.filters).filter((k) => v.filters[k]).length ? Object.keys(v.filters).filter((k) => v.filters[k]).length + " " + t("filtered").toLowerCase() : null, v.time].filter(Boolean).join(" · ")}</span>
                      <button className="emm-btn ghost mono" onClick={() => recall(v)}>{t("recall")} →</button>
                      <button className="emm-savedview-x" onClick={() => delView(i)}>×</button>
                    </div>
                  ))}
                </div>
              )}
          </Panel>
        </div>

        {/* Capability framework (informational) */}
        <Panel title={t("capLevels")} sub={t("capLevelsSub")} className="emm-caplevels-panel" pad={false}>
          <div className="emm-caplevels">
            <div className="emm-caplevel-row head mono">
              <span>{t("capLevel")}</span><span>{t("capMeasures")}</span><span>{t("capDeliveredBy")}</span><span>{t("capStatus")}</span>
            </div>
            {caps.map((c) => (
              <div key={c.code} className="emm-caplevel-row">
                <span className="emm-caplevel-lv"><span className="emm-caplevel-code mono">{c.code}</span>{c.name}</span>
                <span className="emm-caplevel-scope">{c.scope}</span>
                <span className="emm-caplevel-by">{c.by.map((b, i) => <span key={i} className="emm-caplevel-chip mono">{b}</span>)}</span>
                <span className="emm-caplevel-status mono"><span className="emm-caplevel-dot" />{c.status}</span>
              </div>
            ))}
          </div>
        </Panel>
      </div>
    );
  }

  function ScreenHead2({ title, sub, time, tag, right }) {
    const { t } = window.useEmmT();
    const live = time === "today";
    return (
      <div className="emm-screenhead">
        <div>
          <h1 className="emm-screenhead-title">{title}
            {tag && <span className="emm-lens-tag mono">{tag}</span>}
            {live && <span className="emm-live-pill mono"><span className="emm-live-dot" />{t("live")}</span>}
          </h1>
          {sub && <p className="emm-screenhead-sub mono">{sub}</p>}
        </div>
        {right}
      </div>
    );
  }

  // ============================================================
  //  FAKE NEWS  (promoted page — full detector)
  // ============================================================
  function FakeNewsScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const misinfo = useMemo(() => E.misinformation(), []);
    const summary = useMemo(() => E.fakeNewsSummary(), []);
    const vel = useMemo(() => E.velocitySeries(), []);
    const [selId, setSelId] = useState(misinfo[0].id);
    const [focusNode, setFocusNode] = useState(null);
    const prop = useMemo(() => E.propagation(selId), [selId]);
    React.useEffect(() => { setFocusNode(null); }, [selId]);
    const tierName = (tr) => tr === 0 ? t("propGroundZero") : tr === 1 ? t("propAmplifier") : t("propSecondary");
    const selCase = misinfo.find((m) => m.id === selId) || misinfo[0];
    const gz = { en: selCase.ground.handle + " → " + (selCase.ground.network.en || ""), hi: selCase.ground.handle + " → " + (selCase.ground.network.hi || "") };
    return (
      <div className="emm-screen crisis" data-register="urgent">
        <div className="emm-screenhead">
          <div>
            <h1 className="emm-screenhead-title">{t("fakeNewsTitle")}
              <span className="emm-live-pill mono crisis"><span className="emm-live-dot" />{summary.active} {t("fnAlertType").toLowerCase()}</span>
            </h1>
            <p className="emm-screenhead-sub mono">{t("fakeNewsScreenSub")}</p>
          </div>
        </div>
        <div className="emm-grid12">
          <Panel title={t("fakeNewsTitle")} sub={t("fakeNewsSub")} className="col12">
            <FakeNewsDetector rows={misinfo} summary={summary} lang={lang} onSelect={(r) => setSelId(r.id)} selectedId={selId} />
          </Panel>

          <Panel title={t("propagation")} sub={t("propClickHint")} className="col7">
            <div className="emm-prop-head">
              <span className="emm-prop-case">{L(selCase.head, lang)}</span>
              <span className="emm-prop-stat mono">+{prop.velocity}% · {prop.amplifiers} {t("accountsN")} · {C.compact(prop.totalReach)} {t("reach")}</span>
            </div>
            <PropagationGraph data={prop} onNode={setFocusNode} />
            {focusNode && (
              <div className="emm-prop-focus mono">
                <span className="emm-prop-focus-handle">{focusNode.handle}</span>
                <span className={"emm-prop-focus-tier t" + focusNode.tier}>{tierName(focusNode.tier)}</span>
                <span className="emm-prop-focus-meta">{(E.PLATFORMS[focusNode.platform] && E.PLATFORMS[focusNode.platform].label) || focusNode.platform} · {C.compact(focusNode.reach)} {t("reach")} · +{focusNode.joinMin}m</span>
                <button className="emm-prop-focus-x" onClick={() => setFocusNode(null)}>×</button>
              </div>
            )}
          </Panel>
          <Panel title={t("velocityTracker")} className="col5 emm-velocity-panel">
            <VelocityMeter spike={selCase.velocity} source={gz} series={vel} lang={lang} />
          </Panel>

          <Panel title={t("spreaderList")} className="col12" pad={false}
            right={<span className="emm-count-badge mono">{prop.nodes.length}</span>}>
            <SpreaderList nodes={prop.nodes} />
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  SPOKESPERSONS  (promoted page)
  // ============================================================
  function SpokespersonsScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const [focus, setFocus] = useState(null);
    const spox = useMemo(() => E.spokespersons(), []);
    const sum = useMemo(() => E.spokespersonsSummary(), []);
    const board = useMemo(() => spox.map((s) => ({
      id: s.id, name: { en: s.name.en, hi: s.name.hi }, count: s.quotes,
      pos: Math.round(s.quotes * s.pos / 100), neu: Math.round(s.quotes * s.neu / 100), neg: Math.round(s.quotes * s.neg / 100),
    })), [spox]);
    const donutSegs = spox.map((s, i) => ({ id: s.id, v: s.quotes, c: DEMO_COLORS[i % DEMO_COLORS.length], label: L(s.name, lang) }));
    const risk = sum.atRisk;
    const signal = risk.neg >= 18
      ? t("spxSignalRisk").replace("%role%", L(risk.role, lang)).replace("%neg%", risk.neg + "%").replace("%trend%", risk.trend < 0 ? t("falling") : t("steady"))
      : t("spxSignalOk");
    return (
      <div className="emm-screen">
        <ScreenHead2 title={t("spokespersons")} sub={t("spokespersonsScreenSub")} />
        <div className="emm-kpi-grid four">
          <KPIStat label={t("spxTracked")} value={sum.tracked} />
          <KPIStat label={t("spxTotalQuotes")} value={C.n(sum.totalQuotes)} accent="var(--accent)" />
          <KPIStat label={t("spxMostProminent")} value={L(sum.prominent.name, lang)} truncate>
            <div className="emm-kpi-foot mono">{sum.prominent.quotes} {t("quotes")} · {sum.prominent.share}% {t("shareOfQuotes")}</div>
          </KPIStat>
          <KPIStat label={t("spxMostAtRisk")} value={L(risk.name, lang)} truncate>
            <div className="emm-kpi-foot mono">{risk.neg}% {t("negative")} · <span style={{ color: risk.trend < 0 ? "var(--neg)" : "var(--pos)" }}>{risk.trend < 0 ? "▼" : "▲"}{Math.abs(risk.trend)}</span></div>
          </KPIStat>
        </div>
        <div className="emm-grid12">
          <Panel title={t("spxProminence")} className="col7" sub={t("spxClickHint")}>
            <BarsH items={board} sentiment valueFn={(x) => x.count} labelFn={(x) => L(x.name, lang)}
              onClick={(x) => setFocus(x.id)} activeId={focus} />
          </Panel>
          <Panel title={t("spxShareVoice")} className="col5">
            <div className="emm-donut-wrap">
              <Donut segments={donutSegs} center={C.n(sum.totalQuotes)} centerSub={t("quotes")} onClick={(s) => setFocus(s.id)} />
              <DonutLegend items={donutSegs} />
            </div>
          </Panel>
          <Panel title={t("surroundingTone")} className="col12">
            <SpokespersonTracker rows={spox} lang={lang} highlightId={focus} />
          </Panel>
          <div className="col12 emm-opsignal">
            <span className="emm-opsignal-cap mono">{t("opSignal")}</span>
            <span className="emm-opsignal-txt">{signal}</span>
          </div>
        </div>
      </div>
    );
  }

  // ============================================================
  //  AD-SPEND & ROI  (promoted page — by format + by medium)
  // ============================================================
  function AdSpendScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const spend = useMemo(() => E.adSpend(), []);
    const spendMax = Math.max(...spend.map((s) => s.rpr));
    const adMedia = useMemo(() => E.adSpendMedia(), []);
    const adMediaMax = Math.max(...adMedia.map((s) => s.rpr));
    const bud = useMemo(() => E.adBudget(), []);
    const allocSegs = adMedia.map((s, i) => ({ v: s.spend, c: DEMO_COLORS[i % DEMO_COLORS.length], label: L(s.label, lang) }));
    return (
      <div className="emm-screen">
        <ScreenHead2 title={t("adSpendScreen")} sub={t("adSpendScreenSub")} tag="L2 · L4" />
        <div className="emm-kpi-grid four">
          <KPIStat label={t("adTotalBudget")} value={bud.totalCr + " Cr"} accent="var(--accent)" big />
          <KPIStat label={t("adBlended")} value={bud.blendedRpr} unit={" " + t("perRupee")} />
          <KPIStat label={t("adBestFormat")} value={L(bud.bestFormat.label, lang)} truncate>
            <div className="emm-kpi-foot mono">{bud.bestFormat.rpr.toFixed(1)} {t("perRupee")}</div>
          </KPIStat>
          <KPIStat label={t("adBestMedium")} value={L(bud.bestMedium.label, lang)} truncate>
            <div className="emm-kpi-foot mono">{bud.bestMedium.rpr.toFixed(1)} {t("perRupee")}</div>
          </KPIStat>
        </div>
        <div className="emm-grid12">
          <Panel title={t("adSpendEff")} sub={t("adSpendSub")} className="col6">
            <SpendBars items={spend} lang={lang} />
            <div className="emm-recommend">
              <span className="emm-recommend-cap mono">{t("recommendation")}</span>
              <span className="emm-recommend-txt">{t("adRecommend")}</span>
            </div>
          </Panel>
          <Panel title={t("adAcrossMedia")} sub={t("adAcrossMediaSub")} className="col6">
            <SpendBars items={adMedia} lang={lang} />
            <div className="emm-recommend">
              <span className="emm-recommend-cap mono">{t("recommendation")}</span>
              <span className="emm-recommend-txt">{t("adMediaRecommend")}</span>
            </div>
          </Panel>

          <Panel title={t("adAllocation")} sub={t("adAllocationSub")} className="col5">
            <div className="emm-donut-wrap">
              <Donut segments={allocSegs} center={bud.totalCr + " Cr"} centerSub={t("adTotalBudget")} />
              <DonutLegend items={allocSegs} />
            </div>
          </Panel>
          <Panel title={t("adReallocation")} className="col7">
            <StatStrip items={[
              { label: t("adUplift"), value: "+" + bud.uplift + "%" },
              { label: t("adBlended"), value: bud.blendedRpr + " " + t("perRupee") },
              { label: t("adBestMedium"), value: L(bud.bestMedium.label, lang) },
            ]} />
            <div className="emm-kpi-foot mono" style={{ marginTop: 10 }}>{t("adUpliftSub")}</div>
            <div className="emm-recommend">
              <span className="emm-recommend-cap mono">{t("recommendation")}</span>
              <span className="emm-recommend-txt">{t("adMediaRecommend")}</span>
            </div>
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  MENTION LOG  (promoted page — global raw log, filter-aware)
  // ============================================================
  function MentionLogScreen({ filters, lang, nav }) {
    const { t } = window.useEmmT();
    const facts = useMemo(() => E.mentionFacts(filters).filter((m) => window.emmChannelOn(m.channel)), [filters]);
    const rows = useMemo(() => facts.slice(0, 80).map((m) => ({
      id: m.id, day: m.day, time: m.time, daypart: m.daypart, ch: m.channel, dur: m.dur, reach: m.reach,
      sent: m.sentiment, topicName: m.topicName, snippet: m.head, matched: m.authenticity === "genuine",
    })), [facts]);
    const hasFilter = Object.keys(filters).some((k) => filters[k]);
    function exportLog() {
      const header = ["ID", "Day", "Time", "Daypart", "Channel", "Topic", "Sentiment", "Reach", "Duration(s)", "Authenticity", "Headline"];
      const body = facts.map((m) => [m.id, m.day, m.time, m.daypart, m.channel, m.topicName.en, m.sentiment, m.reach, m.dur, m.authenticity, m.head.en]);
      window.downloadCsv("emm-mention-log.csv", header, body);
    }
    return (
      <div className="emm-screen">
        <ScreenHead2 title={t("rawLog")} sub={t("mentionLogScreenSub")} />
        {hasFilter && facts[0] && <RelationshipStrip item={facts[0]} lang={lang} onPivot={(k, id) => nav.goMentionLog({ [k]: id })} />}
        <Panel pad={false}
          right={<button className="emm-btn ghost mono" onClick={exportLog}>{t("exportCsv")} ↓</button>}>
          <div className="emm-mentionlog-meta mono">{t("showingN")} {rows.length} / {facts.length} {t("items")}</div>
          <RawMentionLog rows={rows} lang={lang} />
        </Panel>
      </div>
    );
  }

  // ============================================================
  //  MATRIX EXPLORER  (free pivot — any dimension × any)
  // ============================================================
  function MatrixScreen({ filters, lang, nav }) {
    const { t } = window.useEmmT();
    const [rowDim, setRowDim] = useState("channel");
    const [colDim, setColDim] = useState("authenticity");
    const [metric, setMetric] = useState("count");
    const [colourBy, setColourBy] = useState("authenticity");
    const data = useMemo(() => E.matrix(rowDim, colDim, metric, filters), [rowDim, colDim, metric, filters]);
    function swap() { setRowDim(colDim); setColDim(rowDim); }
    const dimSelect = (val, set, other) => (
      <select className="emm-uselect mono" value={val} onChange={(e) => set(e.target.value)}>
        {MX_DIMS.map((o) => <option key={o} value={o} disabled={o === other}>{t("dim" + cap(o))}</option>)}
      </select>
    );
    return (
      <div className="emm-screen">
        <ScreenHead2 title={t("matrixScreen")} sub={t("matrixScreenSub")} />
        <div className="emm-matrix-controls">
          <label className="emm-uselect-wrap"><span className="emm-uselect-cap mono">{t("mxRows")}</span>{dimSelect(rowDim, setRowDim, colDim)}</label>
          <button className="emm-btn ghost mono emm-mx-swap" onClick={swap} title={t("mxSwap")}>⇄</button>
          <label className="emm-uselect-wrap"><span className="emm-uselect-cap mono">{t("mxCols")}</span>{dimSelect(colDim, setColDim, rowDim)}</label>
          <span className="emm-mx-divider" />
          <label className="emm-uselect-wrap"><span className="emm-uselect-cap mono">{t("mxMetric")}</span>
            <select className="emm-uselect mono" value={metric} onChange={(e) => setMetric(e.target.value)}>
              <option value="count">{t("mCount")}</option><option value="reach">{t("mReach")}</option><option value="duration">{t("mDuration")}</option>
            </select>
          </label>
          <label className="emm-uselect-wrap"><span className="emm-uselect-cap mono">{t("mxColour")}</span>
            <select className="emm-uselect mono" value={colourBy} onChange={(e) => setColourBy(e.target.value)}>
              <option value="intensity">{t("colIntensity")}</option><option value="sentiment">{t("colSentiment")}</option><option value="authenticity">{t("colAuthenticity")}</option>
            </select>
          </label>
        </div>
        <Panel sub={t("mxClickHint")}>
          <MatrixGrid data={data} lang={lang} colourBy={colourBy} onCell={(r, c) => nav.goMentionLog({ [rowDim]: r.id, [colDim]: c.id })} />
        </Panel>
      </div>
    );
  }

  // ============================================================
  //  REPORT PREVIEW  (full-screen, print-to-PDF + CSV)
  // ============================================================
  // which data sections each report type renders
  const REPORT_SECTIONS = {
    daily:      ["trend", "channels", "topics", "stories"],
    weekly:     ["trend", "channels", "topics", "sov", "stories"],
    monthly:    ["trend", "channels", "topics", "narrative", "sov", "stories"],
    crisis:     ["crisis", "trend", "stories"],
    sentiment:  ["trend", "emotion", "narrative", "sov", "topics"],
    viewership: ["reachsplit", "demographics", "location", "channels", "adspend"],
    campaign:   ["trend", "topics", "channels", "stories"],
    custom:     ["trend", "channels", "topics", "sov", "stories"],
  };

  function ReportPreview({ reportId, lang, time, filters, onClose, showToast }) {
    const { t } = window.useEmmT();
    const meta = E.reportTypes().find((r) => r.id === reportId) || E.reportTypes()[0];
    const sections = REPORT_SECTIONS[reportId] || REPORT_SECTIONS.custom;
    const has = (s) => sections.indexOf(s) >= 0;

    const days = E.daysFor(time), prev = E.prevDaysFor(time);
    const agg = E.aggregate(days, filters);
    const pAgg = E.aggregate(prev, filters);
    const nssVal = E.nss(agg);
    const tSeries = E.series(trendDays(time), filters);
    const chBoard = E.channelBoard(days, filters).filter((c) => c.count > 0 && window.emmChannelOn(c.id)).slice(0, 8);
    const tpBoard = E.topicBoard(days, filters).filter((x) => x.count > 0).slice(0, 6);
    const storyList = E.stories(filters).slice(0, 10);
    const k = E.crisisKpis();
    const emo = E.emotions(days, filters);
    const ndom = E.narrativeDominance(days, filters);
    const sov = E.shareOfVoice();
    const demo = E.demographics().map((d, i) => ({ ...d, v: d.pct, c: DEMO_COLORS[i] }));
    const demoLoc = E.demoLocation();
    const split = E.reachSplit(trendDays(time), filters);
    const budget = E.adBudget();
    const res = E.resolutions();

    const fmtDate = (idx) => { const d = new Date(); d.setDate(d.getDate() - (E.TODAY - idx)); return d.toLocaleDateString(undefined, { day: "2-digit", month: "short", year: "numeric" }); };
    const range = days.length > 1 ? fmtDate(days[0]) + " – " + fmtDate(days[days.length - 1]) : fmtDate(days[0]);
    const sentLabel = (s) => t(s === "pos" ? "positive" : s === "neg" ? "negative" : "neutral");
    const sentColor = (s) => s === "pos" ? "var(--pos)" : s === "neg" ? "var(--neg)" : "var(--neu)";

    function exportCsv() {
      const header = ["ID", "Day", "Time", "Channel", "Topic", "Sentiment", "Reach", "Duration(s)", "Authenticity", "Headline"];
      const facts = E.mentionFacts(filters).filter((m) => window.emmChannelOn(m.channel));
      window.downloadCsv("emm-" + reportId + "-report.csv", header,
        facts.map((m) => [m.id, m.day, m.time, m.channel, m.topicName.en, m.sentiment, m.reach, m.dur, m.authenticity, m.head.en]));
      showToast && showToast(t("toastExported"));
    }
    // Esc closes
    React.useEffect(() => {
      const h = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
    }, [onClose]);

    const KpiCell = ({ lab, val }) => <div className="emm-report-kpi"><span className="lab mono">{lab}</span><span className="val mono">{val}</span></div>;

    return (
      <div className="emm-report-doc">
        <div className="emm-report-bar emm-noprint">
          <div className="emm-report-bar-l">
            <span className="emm-report-bar-ico">{meta.icon}</span>
            <span className="emm-report-bar-title">{L(meta.title, lang)}</span>
          </div>
          <div className="emm-report-bar-r">
            <button className="emm-btn ghost mono" onClick={() => window.print()}>⎙ {t("printPdf")}</button>
            <button className="emm-btn ghost mono" onClick={exportCsv}>{t("downloadCsv")} ↓</button>
            <button className="emm-btn accent mono" onClick={onClose}>{t("close")} ×</button>
          </div>
        </div>

        <div className="emm-report-page">
          <div className="emm-report-masthead">
            <div>
              <div className="emm-report-org mono">{t("appOrg")}</div>
              <h1 className="emm-report-h1">{L(meta.title, lang)}</h1>
              <div className="emm-report-descline">{L(meta.desc, lang)}</div>
            </div>
            <div className="emm-report-meta mono">
              <div>{t("rRange")}: {range}</div>
              <div>{t("rGenerated")}: {new Date().toLocaleString()}</div>
              <div>EMM · DPR-CG</div>
            </div>
          </div>

          <div className="emm-report-kpis">
            <KpiCell lab={t("netSentiment")} val={(nssVal > 0 ? "+" : "") + nssVal} />
            <KpiCell lab={t("kpiMentions")} val={C.n(agg.count)} />
            <KpiCell lab={t("kpiReach")} val={C.compact(agg.reach)} />
            <KpiCell lab={t("openThreads")} val={k.openThreads.critical} />
          </div>

          {has("trend") && <Panel title={t("sentTrend")} className="emm-report-block"><TrendChart series={tSeries} split height={200} accent="var(--accent)" /></Panel>}
          {has("channels") && <Panel title={t("chLeaderboard")} className="emm-report-block"><BarsH items={chBoard} rank sentiment valueFn={(c) => c.count} labelFn={(c) => L(c, lang) || c.name} /></Panel>}
          {has("topics") && <Panel title={t("byTopic")} className="emm-report-block"><TopicSentStack rows={tpBoard} lang={lang} /></Panel>}
          {has("emotion") && <Panel title={t("emotionMap")} className="emm-report-block"><div className="emm-emogrid">{emo.map((e) => <EmotionCard key={e.id} emo={e} />)}</div></Panel>}
          {has("narrative") && <Panel title={t("narrativeDom")} className="emm-report-block"><div className="emm-report-big mono">{ndom}%</div><div className="emm-report-note">{t("narrativeDomSub")}</div></Panel>}
          {has("sov") && <Panel title={t("shareOfVoice")} className="emm-report-block"><ShareBars items={sov} lang={lang} /></Panel>}
          {has("reachsplit") && <Panel title={t("kpiReach")} sub={t("tvOnline")} className="emm-report-block"><DualTrend series={split} height={200} /></Panel>}
          {has("demographics") && <Panel title={t("demographics")} className="emm-report-block"><div className="emm-donut-wrap"><Donut segments={demo} center="25–34" /><DonutLegend items={demo.map((d) => ({ c: d.c, label: d.label, v: d.pct }))} /></div></Panel>}
          {has("location") && <Panel title={t("demoByLocation")} className="emm-report-block"><ShareBars items={demoLoc} lang={lang} /></Panel>}
          {has("adspend") && <Panel title={t("navAdspend")} className="emm-report-block"><div className="emm-report-big mono">₹{budget.totalCr} Cr</div><div className="emm-report-note">{t("rAdNote").replace("%u%", budget.uplift)}</div></Panel>}
          {has("crisis") && (
            <Panel title={t("crisisCenter")} className="emm-report-block">
              <div className="emm-report-kpis">
                <KpiCell lab={t("frt")} val={k.frt.val + k.frt.unit} />
                <KpiCell lab={t("grievanceVel")} val={k.grievance.val + k.grievance.unit} />
                <KpiCell lab={t("saturation")} val={k.saturation.val + k.saturation.unit} />
                <KpiCell lab={t("openThreads")} val={k.openThreads.val} />
              </div>
              <div className="emm-report-reslist">
                {res.map((r) => <div key={r.id} className="emm-report-resitem"><b>{L(r.head, lang)}</b> <span className="mono">{r.id} · {r.time}</span></div>)}
              </div>
            </Panel>
          )}
          {has("stories") && (
            <Panel title={t("topStories")} className="emm-report-block" pad={false}>
              <div className="emm-report-table">
                <div className="emm-report-trow head mono"><span>{t("rHeadline")}</span><span>{t("topic")}</span><span>{t("sentiment")}</span><span>{t("reach")}</span></div>
                {storyList.map((s) => (
                  <div key={s.id} className="emm-report-trow">
                    <span>{L(s.headline, lang)}</span>
                    <span className="mono">{L(s.topicName, lang)}</span>
                    <span className="mono"><span className="emm-dot" style={{ background: sentColor(s.sentiment) }} /> {sentLabel(s.sentiment)}</span>
                    <span className="mono">{C.compact(s.reach)}</span>
                  </div>
                ))}
              </div>
            </Panel>
          )}

          <div className="emm-report-foot mono">{t("appName")} · {t("appOrg")} · {range}</div>
        </div>
      </div>
    );
  }

  Object.assign(window, {
    SentimentScreen, ViewershipScreen, CrisisScreen, ReportsScreen, SettingsScreen,
    FakeNewsScreen, SpokespersonsScreen, AdSpendScreen, MentionLogScreen, MatrixScreen,
    ReportPreview,
  });
})();