// ============ 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 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(() => {});
  }, []);

  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(() => {});
  };

  // Numbers start at zero — they fill in once your agents are running.
  const summary = {
    handled: { n: 0, delta: "—", label: "things handled" },
    saved:   { n: "0h", delta: "—", label: "of your time back" },
    flagged: { n: 0, delta: "—", label: "things flagged for you" },
    booked:  { n: 0, delta: "—", label: "leads & meetings" },
  };
  const compare = [
    { label: "Mon", a: 0, b: 0 }, { label: "Tue", a: 0, b: 0 },
    { label: "Wed", a: 0, b: 0 }, { label: "Thu", a: 0, b: 0 },
    { label: "Fri", a: 0, b: 0 }, { label: "Sat", a: 0, b: 0 },
    { label: "Sun", a: 0, b: 0 },
  ];
  const max = 1; // avoid divide-by-zero in the chart
  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 week · 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;