// =============================================================================
// NEWSGUYRY TAB — Journalism + content brand
// Separate LLC. Substack · TikTok · YouTube
// Boss: News Boss (claude-sonnet-4-6)
// =============================================================================

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

  function NewsGuyRy() {
    const [bossMsg, setBossMsg] = useState("");
    const [bossMsgs, setBossMsgs] = useState([]);

    const sendBoss = async () => {
      if (!bossMsg.trim()) return;
      const msg = bossMsg;
      setBossMsgs(m => [...m, { role: "user", msg }]);
      setBossMsg("");
      try {
        const reply = await window.JD.mutate("sendNewsGuyRyMessage", msg);
        if (reply && reply.msg) setBossMsgs(m => [...m, reply]);
      } catch (e) {
        setBossMsgs(m => [...m, { role: "assistant", msg: "Agent error: " + e.message }]);
      }
    };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 22, color: C.gold }}>NewsGuyRy</div>
            <div style={{ fontSize: 14, color: C.muted, marginTop: 2 }}>Independent journalism · NewsGuyRy LLC</div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            {["Substack", "TikTok", "YouTube"].map(p => (
              <div key={p} style={{ padding: "5px 12px", borderRadius: 14, background: "rgba(74,159,212,0.1)", border: "0.5px solid rgba(74,159,212,0.25)", fontSize: 12, color: C.blue }}>{p}</div>
            ))}
          </div>
        </div>

        {/* Pipeline + metrics */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
          {[["Stories in Pipeline", null, C.blue], ["Published This Month", null, C.green], ["Subscribers", null, C.gold], ["Avg Engagement", null, C.purple]].map(([l, v, c]) => (
            <div key={l} style={card({ textAlign: "center" })}>
              <div style={{ fontSize: 11, color: C.muted, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>{l}</div>
              <div style={{ fontSize: 28, color: v ? c : C.muted }}>{v || "—"}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={card()}>
              <div style={ct}>Story Pipeline</div>
              <Empty label="No stories in pipeline" sub="Connect NewsGuyRy adapter to populate · Substack / TikTok / YouTube" />
            </div>
            <div style={card()}>
              <div style={ct}>Content Calendar</div>
              <Empty label="No scheduled content" sub="News Boss will surface upcoming publish dates here" />
            </div>
          </div>

          <div style={card()}>
            <div style={ct}>Talk to News Boss</div>
            <div style={{ maxHeight: 200, overflow: "auto", marginBottom: 8, padding: "6px 0" }}>
              {bossMsgs.length === 0
                ? <div style={{ fontSize: 13, color: C.muted, fontStyle: "italic", textAlign: "center", padding: "12px 0" }}>No messages yet</div>
                : bossMsgs.map((m, i) => (
                  <div key={i} style={{ marginBottom: 8, padding: "6px 8px", background: m.role === "user" ? "rgba(159,117,9,0.06)" : "rgba(74,159,212,0.06)", borderRadius: 6, border: "0.5px solid " + (m.role === "user" ? "rgba(159,117,9,0.15)" : "rgba(74,159,212,0.2)") }}>
                    <div style={{ fontSize: 11, color: m.role === "user" ? C.gold : C.blue, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 2 }}>{m.role === "user" ? "You" : "News Boss"}</div>
                    <div style={{ fontSize: 14, color: "rgba(222,214,185,0.82)", lineHeight: 1.5 }}>{m.msg}</div>
                  </div>
                ))
              }
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <input value={bossMsg} onChange={e => setBossMsg(e.target.value)} onKeyDown={e => e.key === "Enter" && sendBoss()} placeholder="Brief News Boss..." style={{ ...inp, flex: 1 }} />
              <button onClick={sendBoss} style={bg}>Send</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

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