// ============ APPROVALS TAB ============
// Anything an agent kicked up to you for sign-off. Inline edit, approve, reject.

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

function ApprovalsTab({ agents, onCountChange }) {
  const byId = Object.fromEntries(agents.map((a) => [a.id, a]));
  const [pending, setPending] = useState([]);
  const [editingId, setEditingId] = useState(null);
  const [draft, setDraft] = useState(null);
  const [decided, setDecided] = useState(null); // { id, kind: "approved" | "rejected" }

  // Load pending approvals from server on mount.
  useEffect(() => {
    fetch(`${AP_SERVER()}/approvals?status=pending`)
      .then((r) => r.ok ? r.json() : [])
      .then((list) => {
        setPending(list);
        onCountChange && onCountChange(list.length);
      })
      .catch(() => {});
  }, []);

  const startEdit = (it) => {
    setEditingId(it.id);
    setDraft({ title: it.title, body: it.body, amount: it.amount || "" });
  };
  const cancelEdit = () => { setEditingId(null); setDraft(null); };
  const saveEdit = (id) => {
    const body = { title: draft.title, body: draft.body, amount: draft.amount || null };
    fetch(`${AP_SERVER()}/approvals/${id}`, {
      method: "PUT",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(body),
    })
      .then((r) => r.ok ? r.json() : null)
      .then((updated) => {
        if (updated) setPending((p) => p.map((x) => x.id === id ? updated : x));
      })
      .catch(() => {
        // Optimistic local update if server unreachable
        setPending((p) => p.map((x) => x.id === id
          ? { ...x, ...body, edited: true } : x));
      });
    cancelEdit();
  };
  const decide = (id, kind) => {
    setDecided({ id, kind });
    fetch(`${AP_SERVER()}/approvals/${id}/${kind === "approved" ? "approve" : "reject"}`, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({}),
    }).catch(() => {});
    setTimeout(() => {
      setPending((p) => {
        const next = p.filter((x) => x.id !== id);
        onCountChange && onCountChange(next.length);
        return next;
      });
      setDecided(null);
    }, 700);
  };

  if (pending.length === 0) {
    return (
      <div className="ap-empty">
        <div className="ap-empty-mark">✓</div>
        <div className="ap-empty-t">All caught up</div>
        <div className="ap-empty-s">No approvals waiting on you. Your agents are running clean.</div>
      </div>
    );
  }

  return (
    <div className="ap-page">
      <div className="ap-head">
        <div className="ap-head-c">{pending.length}</div>
        <div className="ap-head-l">items waiting on your call</div>
      </div>
      <div className="ap-list">
        {pending.map((it) => {
          const a = byId[it.agentId] || byId[it.agent];
          if (!a) return null; // agent not in dashboard yet
          const isEditing = editingId === it.id;
          const isDecided = decided && decided.id === it.id;
          const timeLabel = it.createdAt
            ? new Date(it.createdAt).toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })
            : it.raised || "";
          return (
            <div key={it.id} className={`ap-card ${isEditing ? "is-editing" : ""} ${isDecided ? `is-${decided.kind}` : ""}`}>
              <div className="ap-card-side" style={{ background: a.palette.skin }} />
              <div className="ap-card-body">
                <div className="ap-card-meta">
                  <div className="ap-card-agent">
                    <span className="ap-card-mark" style={{ background: a.palette.skin }}>{a.name[0]}</span>
                    {a.name} · {a.role}
                    {it.edited ? <span className="ap-edited">edited</span> : null}
                  </div>
                  <div className="ap-card-time">{timeLabel}</div>
                </div>

                {isEditing ? (
                  <>
                    <input
                      className="ap-input ap-input-title"
                      value={draft.title}
                      onChange={(e) => setDraft({ ...draft, title: e.target.value })}
                      placeholder="Title"
                    />
                    <textarea
                      className="ap-input ap-input-body"
                      value={draft.body}
                      onChange={(e) => setDraft({ ...draft, body: e.target.value })}
                      placeholder="Details"
                      rows={4}
                    />
                    <div className="ap-input-row">
                      <label className="ap-input-l">Amount</label>
                      <input
                        className="ap-input ap-input-amount"
                        value={draft.amount}
                        onChange={(e) => setDraft({ ...draft, amount: e.target.value })}
                        placeholder="$0.00 (optional)"
                      />
                    </div>
                    <div className="ap-card-cta">
                      <button className="btn btn-primary btn-sm" onClick={() => saveEdit(it.id)}>Save & approve</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => { saveEdit(it.id); }}>Save changes</button>
                      <button className="btn btn-ghost btn-sm" onClick={cancelEdit}>Cancel</button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="ap-card-title">{it.title}</div>
                    <div className="ap-card-text">{it.body}</div>
                    {it.amount ? <div className="ap-card-amount">{it.amount}</div> : null}
                    <div className="ap-card-cta">
                      <button className="btn btn-primary btn-sm" onClick={() => decide(it.id, "approved")}>Approve</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => startEdit(it)}>Edit</button>
                      <button className="btn btn-ghost btn-sm ap-reject" onClick={() => decide(it.id, "rejected")}>Reject</button>
                    </div>
                  </>
                )}

                {isDecided ? (
                  <div className={`ap-decided ap-decided-${decided.kind}`}>
                    {decided.kind === "approved" ? "✓ Approved — sending back to " + a.name : "✕ Rejected — letting " + a.name + " know"}
                  </div>
                ) : null}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ApprovalsTab = ApprovalsTab;