/* ============================================================
   EMM — screens: Cockpit, Channel, Topic
   Consume window.* components + EMM data.
   ============================================================ */
(function () {
  "use strict";
  const { useMemo } = React;
  const E = window.EMM, C = E.fmt, L = window.emmL;
  const FN_KIND = { deepfake: "kindDeepfake", doctored: "kindDoctored", falseclaim: "kindFalseclaim", miscontext: "kindMiscontext", rumour: "kindRumour" };

  function lensVal(cell, lens) { return E.metric(cell, lens); }
  function lensLabel(t, lens) {
    return { count: t("L1"), reach: t("L2"), duration: t("L3"), media: t("L4"), journalists: t("L5") }[lens];
  }
  // trend window: widen short windows for context
  function trendDays(time) {
    if (time === "today" || time === "yesterday") return Array.from({ length: 14 }, (_, i) => E.TODAY - 13 + i);
    return E.daysFor(time);
  }

  // ============================================================
  //  EXECUTIVE COCKPIT
  // ============================================================
  function CockpitScreen({ lens, time, filters, role, 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 chBoard = useMemo(() => E.channelBoard(days, filters).filter((c) => window.emmChannelOn(c.id)), [time, filters]);
    const tpBoard = useMemo(() => E.topicBoard(days, filters).filter((x) => x.count > 0).slice(0, 5), [time, filters]);
    const heat = useMemo(() => E.heatmap(trendDays(time), filters), [time, filters]);
    const split = useMemo(() => E.reachSplit(trendDays(time), filters), [time, filters]);
    const spark = useMemo(() => E.series(Array.from({ length: 14 }, (_, i) => E.TODAY - 13 + i), filters).map((s) => s.count), [filters]);
    const reachSpark = useMemo(() => E.series(Array.from({ length: 14 }, (_, i) => E.TODAY - 13 + i), filters).map((s) => s.reach), [filters]);
    const alerts = useMemo(() => E.alerts(days), []);
    const demo = useMemo(() => E.demographics().map((d, i) => ({ ...d, v: d.pct, c: DEMO_COCKPIT[i] })), []);
    const region = useMemo(() => E.regional(), []);
    const tags = useMemo(() => E.hashtags(), []);
    const cloud = useMemo(() => E.wordCloud(), []);
    const feed = useMemo(() => E.liveFeed(7), []);
    const misinfo = useMemo(() => E.misinformation().filter((m) => m.status !== "resolved"), []);

    const nssVal = E.nss(agg), pNss = E.nss(pAgg);
    const k = E.crisisKpis().openThreads;
    const donutSegs = [
      { v: agg.pos, c: "var(--pos)", label: t("positive") },
      { v: agg.neu, c: "var(--neu)", label: t("neutral") },
      { v: agg.neg, c: "var(--neg)", label: t("negative") },
    ];
    const analyst = role === "analyst";

    return (
      <div className="emm-screen cockpit">
        <ScreenHead title={t("mainFeed")} sub={t("mainFeedSub")} time={time} lang={lang}
          right={<RoleNote analyst={analyst} t={t} />} />

        {/* KPI ROW (4) */}
        <div className="emm-kpi-grid four">
          <KPIStat label={t("kpiMentions")} value={C.n(agg.count)} delta={E.delta(agg.count, pAgg.count)}
            spark={spark} accent="var(--accent)" big onClick={() => nav.goStories({})} />
          <NSSCard value={nssVal} delta={nssVal - pNss} />
          <KPIStat label={t("kpiReach")} value={C.compact(agg.reach)} delta={E.delta(agg.reach, pAgg.reach)}
            spark={reachSpark} sparkColor="var(--accent)" onClick={() => nav.goViewership()} />
          <ActiveAlertsCard critical={k.critical} warning={k.warning} flag={k.flag} onClick={() => nav.goCrisis()} />
        </div>

        <div className="emm-grid12">
          {/* TV vs Online + demographics */}
          <Panel title={t("kpiReach")} sub={t("tvOnline")} className="col7">
            <DualTrend series={split} height={188} 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")} size={120} />
              <DonutLegend items={demo.map((d) => ({ c: d.c, label: d.label, v: d.pct }))} />
            </div>
          </Panel>

          {/* sentiment donut + by topic */}
          <Panel title={t("overallSent")} className="col4">
            <div className="emm-donut-wrap col">
              <Donut segments={donutSegs} center={`${Math.round((agg.pos / (agg.count || 1)) * 100)}%`} centerSub={t("positive")} size={120} />
              <DonutLegend items={donutSegs} />
            </div>
          </Panel>
          <Panel title={t("byTopic")} className="col8">
            <TopicSentStack rows={tpBoard} lang={lang} onClick={(r) => nav.goTopic(r.id)} />
          </Panel>

          {/* needs attention + leaderboard */}
          <Panel title={t("needsAttention")} sub={t("needsAttentionSub")} className="col5"
            right={<button className="emm-btn ghost mono" onClick={() => nav.goStories({ sentiment: "neg" })}>{t("viewAllNeg")} →</button>}>
            <div className="emm-alert-list">
              {alerts.map((s) => <AlertCard key={s.id} story={s} onOpen={nav.openStory} lang={lang} />)}
            </div>
          </Panel>
          <Panel title={t("chLeaderboard")} className="col7"
            right={<span className="emm-panel-hint mono">{t("drillHint")} →</span>}>
            <BarsH items={chBoard.slice(0, 7)} rank sentiment
              valueFn={(c) => lensVal(c, lens)}
              labelFn={(c) => L(c, lang) || c.name}
              subFn={(c) => `${c.tier} · ${C.compact(c.reach)} ${t("reach")}`}
              onClick={(c) => nav.goChannel(c.id)} activeId={filters.channel} />
          </Panel>

          {/* regional + heatmap */}
          <Panel title={t("regionalCov")} className="col4">
            <BarsH items={region.slice(0, 8)} sentiment valueFn={(r) => r.reach}
              labelFn={(r) => L(r.name, lang)} height={18} showValue={false} />
          </Panel>
          <Panel title={t("topicHeatmap")} sub={lensLabel(t, lens)} className="col8" right={<HeatLegend t={t} />}>
            <Heatmap rows={heat} valueFn={(c) => lensVal(c, lens)}
              labelFn={(tp) => L(tp, lang)} activeTopic={filters.topic}
              onCell={(tp) => nav.goTopic(tp.id)} colLabelEvery={time === "30d" ? 6 : 4} />
          </Panel>

          {/* trending hashtag cards across social platforms */}
          <Panel title={t("trendingSocial")} sub={t("trendingSocialSub")} className="col12">
            <HashtagCards items={tags} />
          </Panel>

          {/* live feed + word cloud */}
          <Panel title={t("liveFeedT")} className="col7" pad={false}
            right={<span className="emm-live-pill mono"><span className="emm-live-dot" />{t("live")}</span>}>
            <LiveFeed items={feed} lang={lang} onOpen={nav.openStory} />
          </Panel>
          <Panel title={t("wordCloudT")} sub={t("wordCloudSub")} className="col5">
            <WordCloud words={cloud} />
          </Panel>

          {/* critical alerts table */}
          <Panel title={t("criticalAlerts")} sub={t("criticalAlertsSub")} className="col12" pad={false}
            right={<button className="emm-btn ghost mono" onClick={() => nav.goCrisis()}>{t("goToCrisis")} →</button>}>
            <div className="emm-critable">
              <div className="emm-critable-row head mono">
                <span>{t("rType")}</span><span>{t("headline")}</span><span>{t("reach")}</span><span>{t("time")}</span><span>{t("sentiment")}</span>
              </div>
              {misinfo.map((m) => (
                <div key={m.id} className="emm-critable-row clickable" onClick={() => nav.goCrisis()}>
                  <span><span className={"emm-sev-dot " + m.sev} />{t(FN_KIND[m.kind] || "fnAlertType")}</span>
                  <span className="emm-critable-head">{L(m.head, lang)}</span>
                  <span className="mono">{C.compact(m.reach)}</span>
                  <span className="mono emm-critable-dim">{m.mins}m</span>
                  <span><StatusPill status={m.status} /></span>
                </div>
              ))}
            </div>
          </Panel>
        </div>
      </div>
    );
  }
  const DEMO_COCKPIT = ["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)"];

  function BigSentiment({ pos, neu, neg, t }) {
    const total = pos + neu + neg || 1;
    const p = (v) => Math.round((v / total) * 100);
    return (
      <div className="emm-bigsent">
        <div className="emm-bigsent-bars">
          {[["pos", pos], ["neu", neu], ["neg", neg]].map(([k, v]) => (
            <div key={k} className="emm-bigsent-row">
              <span className={"emm-bigsent-num mono " + k}>{p(v)}%</span>
              <div className="emm-bigsent-track"><div className={"emm-bigsent-fill " + k} style={{ width: p(v) + "%" }} /></div>
              <span className="emm-bigsent-lab mono">{t({ pos: "positive", neu: "neutral", neg: "negative" }[k])}</span>
              <span className="emm-bigsent-cnt mono">{C.n(v)}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function HeatLegend({ t }) {
    return (
      <div className="emm-heatleg mono">
        <span>low</span>
        <div className="emm-heatleg-ramp" />
        <span>high</span>
      </div>
    );
  }
  function RoleNote({ analyst, t }) {
    return <span className="emm-rolenote mono">{t("role")}: <b>{analyst ? t("roleAnalyst") : t("roleSecretary")}</b></span>;
  }

  // ============================================================
  //  CHANNEL SCREEN
  // ============================================================
  function ChannelScreen({ channelId, lens, time, filters, lang, nav }) {
    const { t } = window.useEmmT();
    const ch = E.channel(channelId);
    const f = { ...filters, channel: channelId };
    const days = E.daysFor(time), prev = E.prevDaysFor(time);
    const agg = useMemo(() => E.aggregate(days, f), [channelId, time, filters]);
    const pAgg = useMemo(() => E.aggregate(prev, f), [channelId, time, filters]);
    const tpBoard = useMemo(() => E.topicBoard(days, f), [channelId, time, filters]);
    const tSeries = useMemo(() => E.series(trendDays(time), f), [channelId, time, filters]);
    const grid = useMemo(() => E.daypartGrid(channelId), [channelId]);
    const storyRows = useMemo(() => E.stories(f), [channelId, filters]);
    const social = useMemo(() => E.channelSocial(channelId), [channelId]);
    const ratio = agg.pos + agg.neg ? Math.round((agg.pos / (agg.pos + agg.neg)) * 100) : 0;
    const isDur = lens === "duration";

    return (
      <div className="emm-screen channel">
        {/* channel header */}
        <div className="emm-chhead">
          <ChannelLogo ch={ch} size={56} />
          <div className="emm-chhead-main">
            <h1 className="emm-chhead-name">{L(ch, lang) || ch.name}</h1>
            <div className="emm-chhead-meta mono">
              <span>{ch.medium}</span>
              <span className="emm-tier">{ch.tier}</span>
              <span>{t("viewershipTier")}: {ch.base > 0.8 ? "A" : ch.base > 0.5 ? "B" : "C"}</span>
            </div>
          </div>
          <div className="emm-chhead-sent">
            <div className="emm-chhead-sent-cap mono">{t("sentimentToward")}</div>
            <div className="emm-chhead-ratio mono"><b style={{ color: "var(--pos)" }}>{ratio}</b> : <b style={{ color: "var(--neg)" }}>{100 - ratio}</b></div>
            <SentimentMeter pos={agg.pos} neu={agg.neu} neg={agg.neg} height={8} />
          </div>
        </div>

        <div className="emm-kpi-grid four">
          <KPIStat label={t("kpiTotal")} value={C.n(agg.count)} delta={E.delta(agg.count, pAgg.count)} accent={lens === "count" ? "var(--accent)" : null} />
          <KPIStat label={t("kpiReach")} value={C.compact(agg.reach)} delta={E.delta(agg.reach, pAgg.reach)} accent={lens === "reach" ? "var(--accent)" : null} />
          <KPIStat label={t("totalAirtime")} value={C.dur(agg.dur)} accent="var(--accent)" />
          <KPIStat label={t("totalRepeats")} value={C.n(agg.repeats)} accent="var(--accent)" />
        </div>

        <div className="emm-channel-grid">
          <Panel title={t("coverageTrend")} sub={lensLabel(t, lens)} className="span-trend">
            <TrendChart series={tSeries} valueFn={(s) => lensVal(s, lens)} height={200} split={lens === "count"} accent="var(--accent)" />
          </Panel>

          <Panel title={t("topicBreakdown")} className="span-topics" right={<span className="emm-panel-hint mono">→ {t("drillTopic")}</span>}>
            <BarsH items={tpBoard.filter((x) => x.count > 0)} sentiment valueFn={(x) => lensVal(x, lens)}
              labelFn={(x) => L(x, lang)} onClick={(x) => nav.goTopic(x.id)} activeId={filters.topic} />
          </Panel>

          <Panel title={t("daypartGrid")} sub={t("daypartSub")} className="span-daypart">
            <DaypartGrid grid={grid} labelKey={lang === "hi" ? "dpHi" : "daypart"} />
          </Panel>

          <Panel title={t("durationStats")} sub={t("L3full")} className="span-dur">
            <StatStrip items={[
              { label: t("avgDuration"), value: C.dur(Math.round(agg.dur / Math.max(1, agg.count))) },
              { label: t("totalAirtime"), value: C.dur(agg.dur) },
              { label: t("totalRepeats"), value: C.n(agg.repeats) },
              { label: t("avgDuration") + "/" + t("repeats"), value: (agg.repeats / Math.max(1, agg.count)).toFixed(1) + "×" },
            ]} />
          </Panel>

          <Panel title={t("storyList")} className="span-stories" pad={false}
            right={<span className="emm-count-badge mono">{storyRows.length}</span>}>
            <StoryList rows={storyRows} onRow={nav.openStory} lang={lang} lens={lens} showChannelCol={false} />
          </Panel>
        </div>

        <div className="emm-grid12 emm-l4-row">
          <Panel title={t("reachBySent")} sub={t("reachBySentSub")} className="col6">
            <SentMetricSplit pos={agg.posReach} neu={agg.neuReach} neg={agg.negReach} fmt={(v) => C.compact(v)} />
            <div className="emm-subhead mono">{t("durBySent")}</div>
            <SentMetricSplit pos={agg.posDur} neu={agg.neuDur} neg={agg.negDur} fmt={(v) => C.dur(v)} />
          </Panel>
          <Panel title={t("socialPresence")} sub={t("socialPresenceSub")} className="col6" pad={false}>
            <ChannelSocial rows={social} />
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  TOPIC / TREND SCREEN
  // ============================================================
  function TopicScreen({ topicId, lens, time, filters, lang, nav }) {
    const { t } = window.useEmmT();
    const tp = E.topic(topicId);
    const f = { ...filters, topic: topicId };
    const days = E.daysFor(time), prev = E.prevDaysFor(time);
    const agg = useMemo(() => E.aggregate(days, f), [topicId, time, filters]);
    const pAgg = useMemo(() => E.aggregate(prev, f), [topicId, time, filters]);
    const chBoard = useMemo(() => E.channelBoard(days, f).filter((c) => c.count > 0), [topicId, time, filters]);
    const tSeries = useMemo(() => E.series(trendDays(time), f), [topicId, time, filters]);
    const storyRows = useMemo(() => E.stories(f), [topicId, filters]);
    const ratio = agg.pos + agg.neg ? Math.round((agg.pos / (agg.pos + agg.neg)) * 100) : 0;
    const journos = useMemo(() => {
      const set = new Map();
      storyRows.forEach((s) => s.airings.forEach((a) => {
        const j = E.journalist(a.journalist);
        if (j) set.set(j.id, (set.get(j.id) || 0) + 1);
      }));
      return [...set.entries()].map(([id, n]) => ({ j: E.journalist(id), n })).sort((a, b) => b.n - a.n).slice(0, 4);
    }, [topicId, filters]);

    return (
      <div className="emm-screen topic">
        <div className="emm-tphead">
          <div className="emm-tphead-main">
            <div className="emm-tphead-cap mono">{t("topic")}</div>
            <h1 className="emm-tphead-name">{L(tp, lang)}</h1>
          </div>
          <div className="emm-tphead-stats">
            <div className="emm-tphead-stat"><div className="mono lab">{t("kpiTotal")}</div><div className="mono val">{C.n(agg.count)}</div></div>
            <div className="emm-tphead-stat"><div className="mono lab">{t("reach")}</div><div className="mono val">{C.compact(agg.reach)}</div></div>
            <div className="emm-tphead-stat sent"><div className="mono lab">{t("sentiment")}</div>
              <div className="mono val"><b style={{ color: "var(--pos)" }}>{ratio}</b>:<b style={{ color: "var(--neg)" }}>{100 - ratio}</b></div>
            </div>
          </div>
        </div>

        <div className="emm-topic-grid">
          <Panel title={t("sentimentTrend")} sub={t("sentimentTrendSub")} className="span-trend">
            <TrendChart series={tSeries} split height={210} 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("crossChannel")} className="span-cross" right={<span className="emm-panel-hint mono">→ {t("drillChannel")}</span>}>
            <BarsH items={chBoard} sentiment valueFn={(c) => lensVal(c, lens)}
              labelFn={(c) => L(c, lang) || c.name}
              onClick={(c) => nav.goChannel(c.id)} activeId={filters.channel} />
          </Panel>

          <Panel title={t("carryingJ")} className="span-journos">
            <div className="emm-jlist">
              {journos.map(({ j, n }) => <JournalistCard key={j.id} j={j} lang={lang} count={n} onClick={() => nav.goJournalists()} />)}
            </div>
          </Panel>

          <Panel title={t("storyList")} className="span-stories" pad={false}
            right={<span className="emm-count-badge mono">{storyRows.length}</span>}>
            <StoryList rows={storyRows} onRow={nav.openStory} lang={lang} lens={lens} />
          </Panel>
        </div>
      </div>
    );
  }

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

  Object.assign(window, { CockpitScreen, ChannelScreen, TopicScreen });
})();