/* recaps.jsx — Historical Recaps tab.
   Cards for each closed/expired position with PnL, contract, and timeline of events.
*/

function RecapCard({ recap, analysts }) {
  const win = recap.pnlPct >= 0;
  const basis = recap.basis != null ? recap.basis : recap.entryPrice;
  return (
    <div className="recap">
      <div className="top">
        <div>
          <div className="ticker-big">${recap.ticker}</div>
          <div className="contract" style={{ marginTop: 4, color: "var(--fg-1)" }}>{recap.contract || "shares"}</div>
          <div style={{ marginTop: 8 }}>
            <AnalystChip analyst={recap.analyst} analysts={analysts} />
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className={cx("pnl", win ? "win" : "loss")}>{fmtPct(recap.pnlPct)}</div>
          <div className="pnl-sub">
            {recap.events.length} interactions
            {basis != null && <> · {recap.avgPrice != null ? "avg" : "entry"} {fmtNum(basis)}</>}
          </div>
          <div className="pnl-sub">{fmtDay(recap.entryTs || recap.events[0].ts)} → {fmtDay(recap.updatedTs)}</div>
        </div>
      </div>
      <TradeTimeline events={recap.events} />
      <div className="footer">
        <span style={{ textTransform: "uppercase", letterSpacing: ".10em" }}>{recap.status === "expired" ? "Expired" : "Closed"}</span>
        <span><span className="pill" style={{ color: win ? "var(--c-up)" : "var(--c-down)" }}>{win ? "WIN" : "LOSS"}</span></span>
      </div>
    </div>
  );
}

function Recaps({ recaps, analysts, enabled, filter }) {
  const [sort, setSort] = useState("recent");
  const filtered = useMemo(() => {
    const fl = (filter || "").toLowerCase().trim();
    let arr = recaps.filter(r => enabled.has(r.analyst));
    if (fl) arr = arr.filter(r => r.ticker.toLowerCase().includes(fl) || r.analyst.toLowerCase().includes(fl));
    if (sort === "pnl_desc") arr = [...arr].sort((a, b) => b.pnlPct - a.pnlPct);
    else if (sort === "pnl_asc") arr = [...arr].sort((a, b) => a.pnlPct - b.pnlPct);
    else if (sort === "recent") arr = [...arr].sort((a, b) => b.updatedTs - a.updatedTs);
    return arr;
  }, [recaps, enabled, filter, sort]);

  const wins = filtered.filter(r => r.pnlPct >= 0).length;
  const losses = filtered.length - wins;
  const avgPnl = filtered.length ? filtered.reduce((s,r) => s + r.pnlPct, 0) / filtered.length : 0;

  return (
    <div>
      <div className="filterbar" style={{ gridTemplateColumns: "1fr auto" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 4, fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: ".10em" }}>
            <span>{filtered.length} recaps</span>
            <span>·</span>
            <span style={{ color: "var(--c-up)" }}>{wins} wins</span>
            <span>·</span>
            <span style={{ color: "var(--c-down)" }}>{losses} losses</span>
            <span>·</span>
            <span>avg <span style={{ color: avgPnl >= 0 ? "var(--c-up)" : "var(--c-down)" }}>{fmtPct(avgPnl)}</span></span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {[["recent","Recent"],["pnl_desc","Top wins"],["pnl_asc","Top losses"]].map(([v,l]) => (
            <button key={v} className="btn" onClick={() => setSort(v)} style={{
              padding: "8px 12px", fontSize: 12,
              background: sort === v ? "var(--bg-3)" : "var(--bg-1)",
              color: sort === v ? "var(--accent)" : "var(--fg-1)",
            }}>{l}</button>
          ))}
        </div>
      </div>
      <div className="recap-grid">
        {filtered.map(r => <RecapCard key={r.key} recap={r} analysts={analysts} />)}
      </div>
      {filtered.length === 0 && <Empty msg="No closed positions match the filter." />}
    </div>
  );
}

Object.assign(window, { Recaps, RecapCard });