// Mosaic Mobile — app shell: header, feed, bottom tab bar, sources, sheet state
// Depends on: SITE_STORIES, SOURCE_DIR, FAVS (site-data), CardReader/CardPulse (mobile-cards),
//             StorySheet (mobile-sheet)
// Exports: MosaicApp

const M_TABS = [
  { k: "today", label: "Today", icon: "ph-newspaper", cat: null },
  { k: "politics", label: "Politics", icon: "ph-bank", cat: "Politics" },
  { k: "economy", label: "Economy", icon: "ph-trend-up", cat: "Economy" },
  { k: "sources", label: "Sources", icon: "ph-list-bullets", sources: true },
];

const SourcesScreen = () => {
  // One flat list — filter chips do the grouping, no section headings (parity with web).
  const all = [
    ...SOURCE_DIR.outlets.map((r) => ({ ...r, g: "outlets" })),
    ...SOURCE_DIR.independent.map((r) => ({ ...r, g: "independent" })),
    ...SOURCE_DIR.youtube.map((r) => ({ ...r, g: "youtube" })),
    ...SOURCE_DIR.international.map((r) => ({ ...r, g: "international" })),
  ];
  const [filter, setFilter] = React.useState("all");
  const rows = filter === "all" ? all : all.filter((r) => r.g === filter);
  const chips = [["all", "All"], ["outlets", "Outlets"], ["independent", "Independent"], ["youtube", "YouTube"], ["international", "International"]];
  return (
    <div>
      <div className="s-head">
        <span className="m-kicker">Source directory · who owns what</span>
        <h2>Sources</h2>
        <p>Verifiable ownership facts only. Where a source leans is shown per story, based on what it actually published.</p>
      </div>
      <div className="s-filter">
        {chips.map(([k, label]) => (
          <button key={k} className={"s-chip" + (filter === k ? " on" : "")} onClick={() => setFilter(k)}>{label}</button>
        ))}
      </div>
      <div className="s-group">
        {rows.map((r, i) => {
          const f = FAVS[r.f] || { l: "?", bg: "#666", n: r.f };
          return (
            <div className="s-row" key={i}>
              <span className="fav" style={{ width: 34, height: 34, background: f.bg, fontSize: 15, borderRadius: 8, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 600, flexShrink: 0 }}>{f.l}</span>
              <span style={{ minWidth: 0 }}>
                <span className="s-name" style={{ display: "block" }}>{f.n}</span>
                <span className="s-sub" style={{ display: "block" }}>{r.k} · {r.t}</span>
              </span>
              <span className="s-country">{r.c}</span>
            </div>
          );
        })}
      </div>
      <div style={{ height: 18 }}></div>
    </div>
  );
};

function MosaicApp({ variant, theme, mode }) {
  const [tab, setTab] = React.useState("today");
  const [sheet, setSheet] = React.useState(null);
  const feedRef = React.useRef(null);
  const current = M_TABS.find((t) => t.k === tab);
  const stories = current.sources ? [] : SITE_STORIES.filter((s) => !current.cat || s.cat === current.cat);
  const Card = variant === "pulse" ? CardPulse : CardReader;

  const goTab = (k) => { setTab(k); if (feedRef.current) feedRef.current.scrollTop = 0; };

  return (
    <div className="mob" data-theme={theme}>
      <header className="m-head">
        <img src={theme === "dark" ? "assets/logo-dark.png" : "assets/logo-light.png"} alt="Mosaic" />
        <div className="h-right">
          <button className="m-iconbtn" aria-label="Search"><i className="ph ph-magnifying-glass"></i></button>
        </div>
      </header>

      <div className="m-feed" ref={feedRef}>
        {current.sources ? <SourcesScreen /> : (
          <React.Fragment>
            <div className="m-feedtop">
              <span className="m-kicker">{current.k === "today" ? "Today · " + new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long" }) : current.label}</span>
              <span className="m-micro">{stories.length} stories</span>
            </div>
            {stories.map((s) => <Card key={s.id} story={s} mode={mode} onOpen={() => setSheet(s)} />)}
            <div style={{ height: 18 }}></div>
          </React.Fragment>
        )}
      </div>

      <nav className="m-tabs">
        {M_TABS.map((t) => (
          <button key={t.k} className={"m-tab" + (tab === t.k ? " on" : "")} onClick={() => goTab(t.k)}>
            <i className={"ph " + t.icon}></i>
            <span className="t-lbl">{t.label}</span>
          </button>
        ))}
      </nav>

      {sheet && <StorySheet story={sheet} mode={mode} onClose={() => setSheet(null)} />}
    </div>
  );
}

Object.assign(window, { MosaicApp, SourcesScreen });