// Mosaic Mobile — narrative comparison bottom sheet
// Depends on: framingColor, tickLabel (site-shared), Moodline, MFavRow (mobile-cards)
// Exports: StorySheet

const StorySheet = ({ story, mode, onClose }) => {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const r = requestAnimationFrame(() => setOpen(true));
    const onKey = (e) => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", onKey);
    return () => { cancelAnimationFrame(r); window.removeEventListener("keydown", onKey); };
  }, []);

  const close = () => { setOpen(false); setTimeout(onClose, 320); };

  return (
    <div className={"m-sheet-wrap" + (open ? " open" : "")}>
      <div className="m-scrim" onClick={close}></div>
      <div className="m-sheet" role="dialog" aria-modal="true">
        <button className="sh-close pinned" onClick={close} aria-label="Close">✕</button>
        <div className="sh-scroll">
          <div className="sh-cover">
            <SArt id={story.id} seed={story.seed} radius={0} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />
            <div className="sh-cover-scrim"></div>
            <span className="m-grab on-cover"></span>
            <div className="sh-cover-content">
              <span className="sh-cover-kicker">{story.cat} · updated {story.upd}</span>
              <h2 className="sh-cover-title">{story.title}</h2>
            </div>
          </div>
          <div className="sh-moodbar">
            <STicks story={story} mode={mode} tw={6} th={13} gap={2} />
            <span className="sh-moodlabel">{tickLabel(story, mode)}</span>
          </div>
          <div className="sh-body">
          <div className="sh-section-label m-kicker">How it's framed · {story.framings.length} frames</div>
          <div className="sh-frames-box">
          {story.framings.map((f, i) => (
            <div className="sh-frame" key={i}>
              <div className="f-rule" style={{ background: framingColor(f, i, mode) }}></div>
              <h4>{f.t}</h4>
              <p>{f.b}</p>
              {f.q && (
                <blockquote>
                  <div className="q">{f.q}</div>
                  <div className="m-micro" style={{ marginTop: 4 }}>— {f.a}</div>
                </blockquote>
              )}
              <div className="f-srcs">
                <MFavRow ids={f.srcs} size={17} max={6} ring="var(--bg-surface)" />
                <span className="m-micro">{f.n} source{f.n > 1 ? "s" : ""}</span>
              </div>
            </div>
          ))}
          </div>

          {story.body_md ? (<MD md={story.body_md} />) : (<React.Fragment>
          <div className="sh-section-label m-kicker">The fault line</div>
          <div className="sh-fault">{story.fault}</div>

          <div className="sh-section-label m-kicker">The facts — what everyone agrees on</div>
          <div className="sh-facts">
            {story.facts.map((f, i) => (
              <div className="sh-fact" key={i}><b>✓</b><span>{f}</span></div>
            ))}
          </div>

          <div className="sh-section-label m-kicker">The blind spot</div>
          <p style={{ fontSize: 13, lineHeight: "19px", color: "var(--text-secondary)", margin: 0 }}>{story.blind}</p>
          </React.Fragment>)}

          {(() => {
            const rec = recordOf(story);
            const total = rec.reduce((s, g) => s + g.items.length, 0);
            return (
              <React.Fragment>
                <div className="sh-section-label m-kicker">The full record · {total} items, grouped by framing</div>
                {rec.map((g, gi) => {
                  const f = story.framings[g.f];
                  return (
                    <div className="sh-recgroup" key={gi}>
                      <div className="sh-rec-head">
                        <span className="f-rule" style={{ background: framingColor(f, g.f, mode), width: 22, marginBottom: 0 }}></span>
                        <span className="sh-rec-title">{f.t}</span>
                        <span className="m-micro">{g.items.length}</span>
                      </div>
                      {g.items.map((it, i) => (
                        <div className="sh-rec-item" key={i}>
                          <span className="fav" style={{ width: 16, height: 16, background: (FAVS[it.s] || {}).bg || "#666", fontSize: 8, borderRadius: 4, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 600, flexShrink: 0 }}>{(FAVS[it.s] || {}).l || "?"}</span>
                          <span className="sh-rec-h">{it.h || (FAVS[it.s] || {}).n}</span>
                          <span className="m-micro" style={{ marginLeft: "auto", flexShrink: 0 }}>{it.d}</span>
                        </div>
                      ))}
                    </div>
                  );
                })}
              </React.Fragment>
            );
          })()}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { StorySheet });