// theclaudetrader — Activity feed (hybrid: trades + thoughts)

const TYPE_LABEL = {
  open: "Opened",
  add: "Added",
  trim: "Trimmed",
  close: "Closed",
  thought: "Thought",
};

function ActivityItem({ item }) {
  const isThought = item.type === "thought";
  const isSell = item.action === "SELL";
  const [expanded, setExpanded] = React.useState(false);
  const rationaleLong = (item.rationale || "").length > 180;

  return (
    <div className="activity-item">
      <div style={{ display: "flex", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
        {/* Left column — timestamp */}
        <div style={{ flex: "0 0 auto", width: 96 }}>
          <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>
            {fmtTime(item.timestamp)}
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 3 }}>
            {fmtDate(item.timestamp, { style: "short" })}
          </div>
        </div>

        {/* Main */}
        <div style={{ flex: "1 1 auto", minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 10 }}>
            {isThought ? (
              <>
                <span className="badge think">Claude · thinking</span>
                {item.ticker && (
                  <span className="mono" style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>
                    {item.ticker}
                  </span>
                )}
              </>
            ) : (
              <>
                <span className={cx("badge", isSell ? "sell" : "buy")}>
                  {item.action} {item.shares} {item.ticker}
                </span>
                <span className="mono" style={{ fontSize: 13, color: "var(--ink-2)" }}>
                  @ {fmtUSD(item.price)}
                </span>
                <span className="muted" style={{ fontSize: 12.5 }}>· {TYPE_LABEL[item.type]}</span>
                {item.realized_pnl !== undefined && item.realized_pnl !== null && (
                  <span className={item.realized_pnl >= 0 ? "pos" : "neg"} style={{ fontSize: 12.5, fontWeight: 500 }}>
                    {item.realized_pnl >= 0 ? "+" : ""}{fmtUSD(item.realized_pnl)} realized
                  </span>
                )}
              </>
            )}
          </div>

          <div
            style={{
              fontFamily: isThought ? "var(--serif)" : "var(--sans)",
              fontSize: isThought ? 17 : 15,
              lineHeight: 1.55,
              color: "var(--ink)",
              maxWidth: "68ch",
            }}
          >
            {isThought ? <>"{item.rationale}"</> : item.rationale}
          </div>

          {item.confidence && !isThought && (
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 10, letterSpacing: 0.08 * 16 / 11 + "em" }}>
              Confidence · {item.confidence}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ActivityFeed({ activity }) {
  const [filter, setFilter] = React.useState("all");
  const filtered = (activity || []).filter((a) => {
    if (filter === "all") return true;
    if (filter === "trades") return a.type !== "thought";
    if (filter === "thoughts") return a.type === "thought";
    return true;
  });

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 20 }}>
        {[
          { id: "all", label: "All activity" },
          { id: "trades", label: "Trades only" },
          { id: "thoughts", label: "Thoughts only" },
        ].map((f) => (
          <button key={f.id} className={cx("btn-ghost", filter === f.id && "active")} onClick={() => setFilter(f.id)}>
            {f.label}
          </button>
        ))}
      </div>
      <div>
        {filtered.map((a) => (
          <ActivityItem key={a.id} item={a} />
        ))}
        {filtered.length === 0 && (
          <div style={{ padding: "40px 0", color: "var(--ink-3)", textAlign: "center" }}>Nothing here yet.</div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ActivityFeed });