// Mosaic Mobile — moodline + two card directions
// Depends on globals from site-data.jsx (SENT_COLORS, NEUTRAL_PALETTE, FAVS)
// and site-shared.jsx (SCollage, tickLabel).
// Exports: Moodline, MiniMood, FramesChip, MFavRow, Banner, CardReader, CardPulse,
//          dominantColor, moodSegments

function moodSegments(story, mode) {
  if (mode === "neutral") {
    const total = story.framings.reduce((s, f) => s + f.n, 0);
    return story.framings.map((f, i) => ({ c: NEUTRAL_PALETTE[i % NEUTRAL_PALETTE.length], pct: (f.n / total) * 100 }));
  }
  const sums = { neg: 0, mix: 0, pos: 0 };
  story.framings.forEach((f) => { sums[f.lean] += f.n; });
  const total = sums.neg + sums.mix + sums.pos;
  return [["neg", SENT_COLORS.neg], ["mix", SENT_COLORS.mix], ["pos", SENT_COLORS.pos]]
    .filter(([k]) => sums[k] > 0)
    .map(([k, c]) => ({ c, pct: (sums[k] / total) * 100 }));
}

function dominantColor(story, mode) {
  if (mode === "neutral") return NEUTRAL_PALETTE[0];
  const sums = { neg: 0, mix: 0, pos: 0 };
  story.framings.forEach((f) => { sums[f.lean] += f.n; });
  const top = Object.entries(sums).sort((a, b) => b[1] - a[1])[0][0];
  return SENT_COLORS[top];
}

const Moodline = ({ story, mode, round = true }) => (
  <span className={"m-mood" + (round ? " round" : "")}>
    {moodSegments(story, mode).map((s, i) => <i key={i} style={{ width: s.pct + "%", background: s.c }}></i>)}
  </span>
);

const MiniMood = ({ story, mode, width = 28 }) => (
  <span className="m-mood round" style={{ width, height: 6, display: "inline-flex", flexShrink: 0 }}>
    {moodSegments(story, mode).map((s, i) => <i key={i} style={{ width: s.pct + "%", background: s.c }}></i>)}
  </span>
);

const FramesChip = ({ story, mode, onOpen }) => (
  <button className="m-frames" onClick={(e) => { e.stopPropagation(); onOpen(); }}>
    <MiniMood story={story} mode={mode} width={26} />
    <span className="lbl">{story.framings.length} frames</span>
    <span className="chev">›</span>
  </button>
);

const MFavRow = ({ ids, size = 18, max = 4 }) => {
  const all = [...new Set(ids)];
  const extra = all.length - Math.min(all.length, max);
  return (
    <span className="m-favrow" style={{ display: "inline-flex", alignItems: "center" }}>
      {all.slice(0, max).map((id, i) => (
        <span key={i} style={{ marginLeft: i === 0 ? 0 : 5, display: "inline-flex" }}>
          <SFav id={id} size={size} />
        </span>
      ))}
      {extra > 0 && <span className="m-micro" style={{ marginLeft: 8 }}>+{extra} more</span>}
    </span>
  );
};

// Use the real generated hero (story.hero, set by to_ui when assets/heroes/{id}.png exists)
// when present; else the procedural SArt collage. Mirrors the desktop Art helper (site-feed.jsx)
// so mobile no longer depends on the hardcoded HERO_MAP in SArt.
const Banner = ({ story }) => (
  <span className="m-banner">
    {story.hero
      ? <img src={story.hero} alt="" loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      : <SArt id={story.id} seed={story.seed} radius={0} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />}
  </span>
);

// ---------- Direction A: READER (airy, boxed, editorial) ----------
const CardReader = ({ story, mode, onOpen }) => (
  <article className="r-card" onClick={onOpen}>
    <Banner story={story} />
    <div className="r-body">
      <div className="r-eyebrow">
        <span className="m-kicker">{story.cat}</span>
        <span className="m-micro">· {story.upd}</span>
      </div>
      <h3>{story.title}</h3>
      <p className="r-sum">{story.standfirst}</p>
      <div className="r-meta">
        <MFavRow ids={story.framings.flatMap((f) => f.srcs)} size={19} max={4} ring="var(--bg-surface)" />
        <FramesChip story={story} mode={mode} onOpen={onOpen} />
      </div>
    </div>
  </article>
);

// ---------- Direction B: PULSE (dense, edge-to-edge, data-forward) ----------
const CardPulse = ({ story, mode, onOpen }) => (
  <article className="p-card" onClick={onOpen}>
    <Banner story={story} />
    <div className="p-top">
      <span className="p-dot" style={{ background: dominantColor(story, mode) }}></span>
      <span className="m-kicker">{story.cat} · {story.upd}</span>
    </div>
    <h3>{story.title}</h3>
    <div className="p-mood">
      <Moodline story={story} mode={mode} />
      <span className="p-moodlabel">{tickLabel(story, mode)}</span>
    </div>
    <p className="p-sum">{story.standfirst}</p>
    <div className="p-meta">
      <MFavRow ids={story.framings.flatMap((f) => f.srcs)} size={18} max={4} ring="var(--bg-primary)" />
      <FramesChip story={story} mode={mode} onOpen={onOpen} />
    </div>
  </article>
);

Object.assign(window, { Moodline, MiniMood, FramesChip, MFavRow, Banner, CardReader, CardPulse, dominantColor, moodSegments });