// ============ INSIGHTS TAB ============
// Period switcher → topline summary → goals + week-vs-week + standout moments.

const IN_SERVER = () =>
  (typeof window !== "undefined" && window.CITRUS_CONFIG && window.CITRUS_CONFIG.SERVER_URL) ||
  "http://localhost:3001";

function InsightsTab({ agents }) {
  const [period, setPeriod] = useState("week");
  const [goals, setGoals]           = useState([]);
  const [addingGoal, setAddingGoal] = useState(false);
  const [goalDraft, setGoalDraft]   = useState({ label: "", agent: "", target: 95 });
  const [ins, setIns]               = useState(null);

  const emailReport = () => window.toast(`This ${period}'s report sent to your email`, "good");

  // Load persisted goals from server on mount.
  useEffect(() => {
    fetch(`${IN_SERVER()}/insights/goals`)
      .then((r) => r.ok ? r.json() : [])
      .then(setGoals)
      .catch(() => {});
  }, []);

  // Load topline analytics (summary + timeline) for the selected period. The
  // backend (GET /insights) already computes these tenant-scoped; the UI just
  // never called it — hence the all-zero cards. Re-fetches when the period
  // switches.
  useEffect(() => {
    let cancelled = false;
    fetch(`${IN_SERVER()}/insights?period=${period}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => { if (!cancelled && d) setIns(d); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [period]);

  const submitGoal = () => {
    if (!goalDraft.label.trim()) { window.toast("Describe the goal first", "warn"); return; }
    const agentId = goalDraft.agent || (agents[0] && agents[0].id) || "";
    fetch(`${IN_SERVER()}/insights/goals`, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ label: goalDraft.label, agentId, target: goalDraft.target }),
    })
      .then((r) => r.ok ? r.json() : null)
      .then((g) => {
        if (g) setGoals((xs) => [...xs, g]);
        setGoalDraft({ label: "", agent: "", target: 95 });
        setAddingGoal(false);
        window.toast("Goal added", "good");
      })
      .catch(() => window.toast("Couldn't save goal", "warn"));
  };

  const removeGoal = (id) => {
    fetch(`${IN_SERVER()}/insights/goals/${id}`, { method: "DELETE" })
      .then(() => setGoals((xs) => xs.filter((g) => g.id !== id)))
      .catch(() => {});
  };

  // Real topline numbers from GET /insights (zeros while loading / when empty).
  const s = ins?.summary || {};
  const summary = {
    conversations: { n: s.conversations ?? 0, delta: "—", label: "conversations" },
    messages:      { n: s.messages ?? 0,      delta: "—", label: "messages handled" },
    leads:         { n: s.leads ?? 0,         delta: "—", label: "leads captured" },
    wrapRate:      { n: `${s.wrapRate ?? 0}%`, delta: "—", label: "wrap-up rate" },
  };
  // Message-volume timeline for the period → the activity chart. Single series
  // (no period-over-period compare yet — that needs a second backend range).
  const timeline = ins?.timeline || [];
  const compare = timeline.length
    ? timeline.map((n, i) => ({ label: String(i + 1), a: n, b: 0 }))
    : [{ label: "", a: 0, b: 0 }];
  const max = Math.max(1, ...timeline);
  const moments = [];

  return (
    <div className="in-page">
      <div className="in-period">
        {[["day", "Today"], ["week", "This week"], ["month", "This month"], ["qtr", "Quarter"]].map(([k, l]) => (
          <button key={k} className={`in-period-b ${period === k ? "is-on" : ""}`} onClick={() => setPeriod(k)}>{l}</button>
        ))}
        <div className="in-period-spacer" />
        <button className="btn btn-ghost btn-sm" onClick={emailReport}>Email me a copy</button>
      </div>

      <div className="in-summary">
        {Object.entries(summary).map(([k, v]) => (
          <div key={k} className="in-sum">
            <div className="in-sum-n">{v.n}</div>
            <div className="in-sum-l">{v.label}</div>
            <div className="in-sum-d">{v.delta} <span>vs. last {period}</span></div>
          </div>
        ))}
      </div>

      <div className="in-grid">
        <div className="in-card in-goals">
          <div className="in-card-head">
            <h3 className="in-card-t">Goals you set</h3>
            <button className="in-card-link" onClick={() => setAddingGoal((v) => !v)}>
              {addingGoal ? "Cancel" : "+ Add a goal"}
            </button>
          </div>
          {addingGoal ? (
            <div className="in-goal-add">
              <input
                className="tl-sched-input"
                placeholder="What should be true? (e.g. respond within 5 minutes)"
                value={goalDraft.label}
                onChange={(e) => setGoalDraft({ ...goalDraft, label: e.target.value })}
                autoFocus
              />
              <select className="tl-sched-input" value={goalDraft.agent} onChange={(e) => setGoalDraft({ ...goalDraft, agent: e.target.value })}>
                {agents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
              </select>
              <input
                className="tl-sched-input"
                type="number"
                min="0" max="100"
                placeholder="Target %"
                value={goalDraft.target}
                onChange={(e) => setGoalDraft({ ...goalDraft, target: Number(e.target.value) })}
              />
              <button className="btn btn-primary btn-sm" onClick={submitGoal}>Add</button>
            </div>
          ) : null}
          <div className="in-goal-list">
            {goals.length === 0 ? (
              <div className="kn-empty">No goals set yet. Add one and we'll track it weekly.</div>
            ) : null}
            {goals.map((g, i) => {
              const a = agents.find(x => x.id === (g.agentId || g.agent));
              if (!a) return null;
              const pct = Math.min(100, (g.now / g.target) * 100);
              const hit = g.now >= g.target;
              return (
                <div key={g.id || i} className="in-goal">
                  <div className="in-goal-top">
                    <div className="in-goal-l">{g.label}</div>
                    <div className="in-goal-actions">
                      <div className={`in-goal-trend ${hit ? "is-good" : ""}`}>{g.trend || "new"}</div>
                      <button className="in-goal-del" onClick={() => removeGoal(g.id)} title="Remove goal">×</button>
                    </div>
                  </div>
                  <div className="in-goal-bar">
                    <div className="in-goal-fill" style={{ width: pct + "%", background: a.palette.skin }} />
                    <div className="in-goal-target" style={{ left: "100%" }} />
                  </div>
                  <div className="in-goal-meta">
                    <span className="in-goal-mark" style={{ background: a.palette.skin }}>{a.name[0]}</span>
                    <span>{a.name}</span>
                    <span className="in-goal-sep">·</span>
                    <span>{g.now}{typeof g.now === "number" ? "%" : ""} of {g.target}{typeof g.target === "number" ? "%" : ""}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="in-card in-compare">
          <div className="in-card-head">
            <h3 className="in-card-t">This week vs. last</h3>
            <div className="in-legend">
              <span className="in-legend-i"><i style={{ background: "var(--ink)" }} /> This {period} · {timeline.reduce((a, b) => a + b, 0)}</span>
              <span className="in-legend-i"><i style={{ background: "color-mix(in oklab, var(--ink) 30%, transparent)" }} /> Last week · 0</span>
            </div>
          </div>
          <div className="in-chart">
            {compare.map((d, i) => (
              <div key={i} className="in-bar-col">
                <div className="in-bar-pair">
                  <div className="in-bar in-bar-b" style={{ height: (d.b / max * 100) + "%" }} />
                  <div className="in-bar in-bar-a" style={{ height: (d.a / max * 100) + "%" }} />
                </div>
                <div className="in-bar-l">{d.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="in-card in-moments">
          <div className="in-card-head">
            <h3 className="in-card-t">Moments worth knowing</h3>
            <span className="in-card-sub">Hand-picked by your agents</span>
          </div>
          <div className="in-moment-list">
            {moments.length === 0 ? (
              <div className="kn-empty">Nothing yet. Your agents will surface notable moments once they're working.</div>
            ) : null}
            {moments.map((m, i) => {
              const a = agents.find(x => x.id === m.agent);
              if (!a) return null;
              return (
                <div key={i} className="in-moment">
                  <div className="in-moment-mark" style={{ background: a.palette.skin }}>{a.name[0]}</div>
                  <div className="in-moment-body">
                    <div className="in-moment-t">{a.name} · {m.t}</div>
                    <div className="in-moment-text">{m.text}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

window.InsightsTab = InsightsTab;