/* ============================================================
   EMM — Story Detail, Journalists, Reach Explorer, Compare, Mobile
   ============================================================ */
(function () {
  "use strict";
  const { useState, useMemo } = React;
  const E = window.EMM, C = E.fmt, L = window.emmL;

  // ============================================================
  //  STORY DETAIL  (slide-over body + full page)
  // ============================================================
  function StoryDetail({ story, lang, full, onFull, onClose, nav }) {
    const { t } = window.useEmmT();
    const [airIdx, setAirIdx] = useState(0);
    const airing = story.airings[airIdx];
    const sortedAir = story.airings.slice().sort((a, b) => b.reach - a.reach);
    const totalReps = story.airings.reduce((s, a) => s + a.repeats, 0);
    const totalAir = story.airings.reduce((s, a) => s + a.repeats * a.dur, 0);
    const cm = story.crossMedia;
    const cmRows = [
      { k: "web", label: "Web portals", v: cm.web },
      { k: "youtube", label: "YouTube", v: cm.youtube },
      { k: "facebook", label: "Facebook", v: cm.facebook },
      { k: "instagram", label: "Instagram", v: cm.instagram },
      { k: "x", label: "X", v: cm.x },
      { k: "whatsapp", label: "WhatsApp fwd.", v: cm.whatsapp },
    ];
    const cmMax = Math.max(...cmRows.map((r) => r.v), 1);

    return (
      <div className={"emm-story-detail" + (full ? " full" : "")}>
        <header className="emm-sd-head">
          <div className="emm-sd-head-top">
            <div className="emm-sd-tags">
              {story.hot && <span className="emm-hot mono">HOT</span>}
              <button className="emm-tag topic mono" onClick={() => { nav.goTopic(story.topic); onClose && onClose(); }}>
                {L(story.topicName, lang)}
              </button>
              <span className="emm-story-id mono">{story.id}</span>
            </div>
            <div className="emm-sd-head-actions">
              {!full && <button className="emm-btn ghost mono" onClick={onFull}>{t("seeFull")} ⤢</button>}
              {onClose && <button className="emm-iconbtn" onClick={onClose} aria-label="close">×</button>}
            </div>
          </div>
          <h1 className="emm-sd-headline">{L(story.headline, lang)}</h1>
          <div className="emm-sd-subrow">
            <SentChip s={story.sentiment} />
            <span className="emm-sd-reach mono">{C.compact(story.reach)} {t("reach")}</span>
            <span className="emm-sd-freq mono" title={t("frequency")}>{totalReps}{t("timesToday")} · {C.dur(totalAir)}</span>
            <span className="emm-sd-day mono">Day {story.day + 1}</span>
          </div>
          <div className="emm-sd-entities">
            <span className="emm-sd-ent-cap mono">{t("entities")}:</span>
            {story.entities.map((id) => {
              const e = E.entity(id);
              return <span key={id} className="emm-ent-chip">{L(e, lang)}</span>;
            })}
          </div>
          {(() => {
            const topAir = story.airings.slice().sort((a, b) => b.reach - a.reach)[0];
            const relItem = { channel: topAir.ch, anchor: topAir.journalist, topic: story.topic,
              category: (E.topic(story.topic) || {}).cat, sentiment: story.sentiment };
            return <RelationshipStrip item={relItem} lang={lang} onPivot={(k, id) => { nav.goMentionLog({ [k]: id }); onClose && onClose(); }} />;
          })()}
        </header>

        <div className={"emm-sd-body" + (full ? " full" : "")}>
          <div className="emm-sd-col main">
            {/* clip player */}
            <section className="emm-sd-section">
              <h3 className="emm-sd-sectitle">{t("playClip")}</h3>
              {story.airings.length > 1 && (
                <div className="emm-air-tabs">
                  {story.airings.map((a, i) => (
                    <button key={i} className={"emm-air-tab mono" + (i === airIdx ? " active" : "")} onClick={() => setAirIdx(i)}>
                      {E.channel(a.ch).name}
                    </button>
                  ))}
                </div>
              )}
              <ClipPlayer story={story} airing={airing} lang={lang} />
            </section>

            {/* matched release */}
            <section className="emm-sd-section">
              <h3 className="emm-sd-sectitle">{t("matchedRelease")}</h3>
              {story.matchedRelease ? (
                <div className="emm-release matched">
                  <span className="emm-release-icon mono">✓</span>
                  <div>
                    <div className="emm-release-id mono">{story.matchedRelease.id}</div>
                    <div className="emm-release-title">{L(story.matchedRelease.title, lang)}</div>
                  </div>
                </div>
              ) : (
                <div className="emm-release nomatch">
                  <span className="emm-release-icon mono">∅</span>
                  <div className="emm-release-title">{t("noMatch")}</div>
                </div>
              )}
            </section>
          </div>

          <div className="emm-sd-col side">
            {/* where it aired */}
            <section className="emm-sd-section">
              <h3 className="emm-sd-sectitle">{t("whereAired")} <span className="emm-count-badge mono">{story.airings.length}</span></h3>
              <div className="emm-airfreq-note mono">{t("frequency")}: {totalReps}{t("timesToday")} · {t("totalAirtime")} {C.dur(totalAir)}</div>
              <div className="emm-airings">
                {sortedAir.map((a, i) => (
                  <button key={i} className={"emm-airing" + (a === airing ? " sel" : "")}
                    onClick={() => setAirIdx(story.airings.indexOf(a))}>
                    <ChannelLogo ch={E.channel(a.ch)} size={26} />
                    <div className="emm-airing-main">
                      <div className="emm-airing-ch">{E.channel(a.ch).name}</div>
                      <div className="emm-airing-meta mono">{a.daypart} · {a.time}</div>
                    </div>
                    <div className="emm-airing-stats mono">
                      <span className="emm-airing-freq">{a.repeats}× · {C.dur(a.dur)} {t("each")}</span>
                      <span className="reach">{C.compact(a.reach)}</span>
                    </div>
                  </button>
                ))}
              </div>
            </section>

            {/* cross-media */}
            <section className="emm-sd-section">
              <h3 className="emm-sd-sectitle">{t("crossMedia")} <span className="emm-lens-tag mono">L4</span></h3>
              <div className="emm-crossmedia">
                {cmRows.map((r) => (
                  <div key={r.k} className="emm-cm-row">
                    <span className="emm-cm-label">{r.label}</span>
                    <div className="emm-cm-track"><div className="emm-cm-fill" style={{ width: Math.max(3, (r.v / cmMax) * 100) + "%" }} /></div>
                    <span className="emm-cm-val mono">{C.compact(r.v)}</span>
                  </div>
                ))}
                <div className="emm-cm-total mono">
                  Σ {C.compact(story.reach + Object.values(cm).reduce((a, b) => a + b, 0))} {t("views")}
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    );
  }

  // ============================================================
  //  JOURNALISTS  (L5 — representative)
  // ============================================================
  function JournalistsScreen({ lang, nav }) {
    const { t } = window.useEmmT();
    const data = useMemo(() => E.JOURNALISTS.map((j) => {
      const stories = E.STORIES.filter((s) => s.airings.some((a) => a.journalist === j.id));
      const reach = stories.reduce((sum, s) => sum + s.airings.filter((a) => a.journalist === j.id).reduce((x, a) => x + a.reach, 0), 0);
      const pos = stories.filter((s) => s.sentiment === "pos").length;
      return { j, count: stories.length, reach, pos, neg: stories.filter((s) => s.sentiment === "neg").length, stories };
    }).sort((a, b) => b.reach - a.reach), []);

    return (
      <div className="emm-screen journalists">
        <div className="emm-screenhead">
          <div>
            <h1 className="emm-screenhead-title">{t("navJournalists")} <span className="emm-lens-tag mono">L5</span></h1>
            <p className="emm-screenhead-sub mono">{t("L5full")}</p>
          </div>
          <span className="emm-rep-banner mono">{t("representative")} · DPDP / DPIA approval pending</span>
        </div>
        <div className="emm-jgrid">
          {data.map(({ j, count, reach, pos, neg }) => (
            <div key={j.id} className="emm-jprofile">
              <div className="emm-jprofile-head">
                <span className="emm-javatar lg mono">{j.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}</span>
                <div>
                  <div className="emm-jname">{L({ en: j.name, hi: j.hi }, lang)}</div>
                  <div className="emm-jmeta mono">{j.role} · {E.channel(j.ch).name}</div>
                  <div className="emm-jhandle mono">{j.handle} · {C.compact(j.followers)} {t("followers")}</div>
                </div>
              </div>
              <div className="emm-jprofile-stats">
                <div className="emm-jstat"><div className="mono val">{count}</div><div className="mono lab">{t("items")}</div></div>
                <div className="emm-jstat"><div className="mono val">{C.compact(reach)}</div><div className="mono lab">{t("reach")}</div></div>
                <div className="emm-jstat sent"><SentimentMeter pos={pos} neu={0} neg={neg} height={6} /></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ============================================================
  //  REACH EXPLORER  (L2 — representative)
  // ============================================================
  function ReachExplorer({ time, lang, nav }) {
    const { t } = window.useEmmT();
    const days = E.daysFor(time);
    const chBoard = useMemo(() => E.channelBoard(days).sort((a, b) => b.reach - a.reach), [time]);
    const grid = useMemo(() => E.daypartGrid("all"), []);
    const spend = [
      { fmt: "Live coverage", rpr: 8.4 }, { fmt: "L-band tickers", rpr: 5.1 },
      { fmt: "Spot bulletins", rpr: 3.6 }, { fmt: "Success stories", rpr: 6.8 },
    ];
    const spendMax = Math.max(...spend.map((s) => s.rpr));
    const districtVals = useMemo(() => {
      const o = {};
      E.STORIES.forEach((s, i) => { });
      return o;
    }, []);

    return (
      <div className="emm-screen reach">
        <div className="emm-screenhead">
          <div>
            <h1 className="emm-screenhead-title">{t("navReach")} <span className="emm-lens-tag mono">L2</span></h1>
            <p className="emm-screenhead-sub mono">Reach-first analysis for the communications strategist</p>
          </div>
          <span className="emm-rep-banner mono">{t("representative")}</span>
        </div>
        <div className="emm-reach-grid">
          <Panel title="Geographic reach — Chhattisgarh" sub="District viewership intensity" className="span-map">
            <Choropleth onCell={() => {}} />
            <div className="emm-map-note mono">Stylised district layout · representative shading</div>
          </Panel>
          <Panel title="Reach-weighted channel ranking" className="span-rank">
            <BarsH items={chBoard.slice(0, 8)} rank valueFn={(c) => c.reach}
              labelFn={(c) => c.name}
              color="var(--accent)" />
          </Panel>
          <Panel title="Daypart heatmap" sub="Reach by hour of day × weekday" className="span-daypart">
            <DaypartGrid grid={grid} labelKey={lang === "hi" ? "dpHi" : "daypart"} />
          </Panel>
          <Panel title="Ad-spend efficiency" sub="Reach per rupee by format" className="span-spend">
            <div className="emm-spend">
              {spend.map((s) => (
                <div key={s.fmt} className="emm-spend-row">
                  <span className="emm-spend-fmt">{s.fmt}</span>
                  <div className="emm-spend-track"><div className="emm-spend-fill" style={{ width: (s.rpr / spendMax) * 100 + "%" }} /></div>
                  <span className="emm-spend-val mono">{s.rpr.toFixed(1)}<small>/₹</small></span>
                </div>
              ))}
            </div>
          </Panel>
        </div>
      </div>
    );
  }

  // ============================================================
  //  COMPARE MODE
  // ============================================================
  function CompareScreen({ lens, time, lang, nav }) {
    const { t } = window.useEmmT();
    const [panels, setPanels] = useState(["ibc24", "aajtak"]);
    const days = E.daysFor(time);
    function setPanel(i, id) { setPanels((p) => p.map((x, j) => (j === i ? id : x))); }
    function addPanel() { if (panels.length < 3) setPanels((p) => [...p, E.CHANNELS.find((c) => !p.includes(c.id)).id]); }
    function removePanel(i) { if (panels.length > 2) setPanels((p) => p.filter((_, j) => j !== i)); }

    return (
      <div className="emm-screen compare">
        <div className="emm-screenhead">
          <div>
            <h1 className="emm-screenhead-title">{t("compare")}</h1>
            <p className="emm-screenhead-sub mono">{t("compareSub")}</p>
          </div>
          {panels.length < 3 && <button className="emm-btn mono" onClick={addPanel}>+ {t("addPanel")}</button>}
        </div>
        <div className="emm-compare-grid" style={{ gridTemplateColumns: `repeat(${panels.length},1fr)` }}>
          {panels.map((cid, i) => {
            const ch = E.channel(cid);
            const f = { channel: cid };
            const agg = E.aggregate(days, f);
            const tpBoard = E.topicBoard(days, f).filter((x) => x.count > 0).slice(0, 5);
            const series = E.series(time === "today" || time === "yesterday" ? Array.from({ length: 14 }, (_, k) => E.TODAY - 13 + k) : days, f);
            const ratio = agg.pos + agg.neg ? Math.round((agg.pos / (agg.pos + agg.neg)) * 100) : 0;
            return (
              <div key={i} className="emm-compare-panel">
                <div className="emm-compare-head">
                  <ChannelLogo ch={ch} size={28} />
                  <select className="emm-compare-select mono" value={cid} onChange={(e) => setPanel(i, e.target.value)}>
                    {E.CHANNELS.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                  {panels.length > 2 && <button className="emm-iconbtn sm" onClick={() => removePanel(i)}>×</button>}
                </div>
                <div className="emm-compare-kpis">
                  <div className="emm-compare-kpi"><div className="mono val">{C.n(agg.count)}</div><div className="mono lab">{t("items")}</div></div>
                  <div className="emm-compare-kpi"><div className="mono val">{C.compact(agg.reach)}</div><div className="mono lab">{t("reach")}</div></div>
                  <div className="emm-compare-kpi"><div className="mono val">{ratio}:{100 - ratio}</div><div className="mono lab">{t("sentiment")}</div></div>
                </div>
                <SentimentMeter pos={agg.pos} neu={agg.neu} neg={agg.neg} height={8} />
                <div className="emm-compare-trend">
                  <TrendChart series={series} valueFn={(s) => E.metric(s, lens)} height={130} labelEvery={6} accent="var(--accent)" />
                </div>
                <div className="emm-compare-topics">
                  <BarsH items={tpBoard} sentiment valueFn={(x) => E.metric(x, lens)} labelFn={(x) => L(x, lang)} height={18} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // ============================================================
  //  MOBILE COCKPIT  (one key mobile screen)
  // ============================================================
  function MobileCockpit({ lang, nav }) {
    const { t } = window.useEmmT();
    const days = E.daysFor("today");
    const agg = E.aggregate(days);
    const chBoard = E.channelBoard(days).slice(0, 4);
    const alerts = E.alerts(days).slice(0, 2);
    const ratio = Math.round((agg.pos / (agg.pos + agg.neg)) * 100);
    return (
      <div className="emm-phone">
        <div className="emm-phone-notch" />
        <div className="emm-phone-screen">
          <div className="emm-mob-statusbar mono"><span>9:41</span><span>EMM · CG</span><span>▮▮▮ 􀙙</span></div>
          <div className="emm-mob-head">
            <div>
              <div className="emm-mob-org mono">DPR Chhattisgarh</div>
              <div className="emm-mob-title">{t("cockpit")}</div>
            </div>
            <span className="emm-live-pill mono"><span className="emm-live-dot" />{t("live")}</span>
          </div>
          <div className="emm-mob-kpis">
            <div className="emm-mob-kpi big"><div className="mono val">{C.n(agg.count)}</div><div className="mono lab">{t("kpiTotal")}</div></div>
            <div className="emm-mob-kpi"><div className="mono val">{ratio}:{100 - ratio}</div><div className="mono lab">{t("kpiRatio")}</div></div>
            <div className="emm-mob-kpi"><div className="mono val">{C.compact(agg.reach)}</div><div className="mono lab">{t("kpiReach")}</div></div>
          </div>
          <div className="emm-mob-sent"><SentimentMeter pos={agg.pos} neu={agg.neu} neg={agg.neg} height={10} showPct /></div>
          <div className="emm-mob-section mono">{t("needsAttention")}</div>
          {alerts.map((s) => (
            <div key={s.id} className="emm-mob-alert">
              <span className="emm-alert-bar" />
              <div>
                <div className="emm-mob-alert-head">{L(s.headline, lang)}</div>
                <div className="emm-mob-alert-meta mono">{L(s.topicName, lang)} · {C.compact(s.reach)} {t("reach")}</div>
              </div>
            </div>
          ))}
          <div className="emm-mob-section mono">{t("chLeaderboard")}</div>
          <div className="emm-mob-board">
            {chBoard.map((c, i) => (
              <div key={c.id} className="emm-mob-brow">
                <span className="mono rank">{i + 1}</span>
                <ChannelLogo ch={c} size={20} />
                <span className="name">{c.name}</span>
                <span className="mono val">{c.count}</span>
              </div>
            ))}
          </div>
          <div className="emm-mob-nav">
            {["navCockpit", "navChannels", "navTopics", "navStories"].map((k, i) => (
              <div key={k} className={"emm-mob-navitem mono" + (i === 0 ? " active" : "")}><span className="dot" />{t(k)}</div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { StoryDetail, JournalistsScreen, ReachExplorer, CompareScreen, MobileCockpit });
})();