// =============================================================================
// NEWSGUYRY TAB
// Content pipeline, top posts, platform activity, quick-idea capture.
// =============================================================================

(function () {
  const { C } = window.JD_THEME;
  const { card, ct, inp, bg, Empty, Loading, ErrorBox } = window.JD_STYLES;

  function News() {
    const contentQ = window.useJarvisData("content");
    const c = contentQ.data || {};
    const pipeline = c.pipeline || [];
    const topPosts = c.topPosts || [];
    const platformActivity = c.platformActivity || [];

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {contentQ.error && <ErrorBox message={contentQ.error.message} />}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12 }}>
          {[["Followers", c.followers, C.gold], ["Avg Views", c.avgViews, C.blue], ["Engagement", c.engagement, C.green], ["Posts MTD", c.postsMTD, C.purple], ["Newsletter Subs", c.subs, C.yellow]].map(([l, v, col]) => (
            <div key={l} style={card()}>
              <div style={{ fontSize: 12, color: C.muted, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 6 }}>{l}</div>
              <div style={{ fontSize: 26, color: v ? col : C.muted, fontVariantNumeric: "tabular-nums" }}>{v || "—"}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
          <div style={card()}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
              <div style={ct}>Content Pipeline</div>
              <button style={{ ...bg, fontSize: 13 }}>+ New Idea</button>
            </div>
            {contentQ.loading ? <Loading /> :
             pipeline.length === 0 ? <Empty label="No content in pipeline" /> : pipeline.map((a, i) => (
              <div key={i} style={{ padding: "12px 0", borderBottom: "0.5px solid " + C.border }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
                  <div style={{ fontSize: 16, color: C.cream, lineHeight: 1.4, flex: 1 }}>{a.t}</div>
                  <span style={{ fontSize: 12, padding: "3px 10px", borderRadius: 10, background: a.s === "Scheduled" ? "rgba(62,207,142,0.15)" : a.s === "Draft" ? "rgba(212,160,23,0.15)" : "rgba(159,117,9,0.15)", color: a.s === "Scheduled" ? C.green : a.s === "Draft" ? C.yellow : C.gold, flexShrink: 0, letterSpacing: "0.06em" }}>{a.s}</span>
                </div>
                {a.notes && <div style={{ fontSize: 13, color: "rgba(222,214,185,0.55)", marginTop: 4, fontStyle: "italic" }}>{a.notes}</div>}
                <div style={{ display: "flex", gap: 8, marginTop: 6, alignItems: "center" }}>
                  <span style={{ fontSize: 13, color: C.muted }}>{a.d}</span>
                  {a.tag && <span style={{ fontSize: 12, padding: "2px 8px", borderRadius: 10, background: "rgba(74,159,212,0.12)", color: C.blue }}>{a.tag}</span>}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={card()}>
              <div style={ct}>Top Performing · 30d</div>
              {topPosts.length === 0 ? <Empty label="No posts yet" /> : topPosts.map(([t, p, m, col]) => (
                <div key={t} style={{ padding: "9px 0", borderBottom: "0.5px solid " + C.border }}>
                  <div style={{ fontSize: 14, color: C.cream, marginBottom: 3, lineHeight: 1.3 }}>{t}</div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}>
                    <span style={{ color: col }}>{p}</span>
                    <span style={{ color: C.muted }}>{m}</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={card()}>
              <div style={ct}>Platform Activity · Today</div>
              {(platformActivity.length ? platformActivity : [["TikTok", false, "—"], ["Instagram", false, "—"], ["Facebook", false, "—"], ["LinkedIn", false, "—"], ["YouTube", false, "—"], ["Newsletter", false, "—"]]).map(([p, done, metric]) => (
                <div key={p} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 0", borderBottom: "0.5px solid " + C.border, fontSize: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ color: done ? C.green : C.muted, fontSize: 13 }}>{done ? "●" : "○"}</span><span style={{ color: "rgba(222,214,185,0.82)" }}>{p}</span></div>
                  <span style={{ color: done ? C.green : C.muted, fontSize: 13 }}>{metric}</span>
                </div>
              ))}
            </div>
            <div style={card()}>
              <div style={ct}>Quick Idea</div>
              <textarea placeholder="Story idea, headline..." style={{ ...inp, resize: "vertical", minHeight: 70, fontSize: 14 }} />
              <button style={{ ...bg, marginTop: 8, width: "100%" }}>Save to vault</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.JD_TABS = window.JD_TABS || {};
  window.JD_TABS.NewsGuyRy = News;
})();