// theclaudetrader — Holdings list, expandable thesis

function HoldingsList({ holdings }) {
  const [open, setOpen] = React.useState(null);
  const sorted = [...(holdings || [])].sort((a, b) => b.weight - a.weight);

  return (
    <div>
      {/* Header row */}
      <div className="holding-row" style={{ cursor: "default", padding: "12px 0" }}>
        <div></div>
        <div className="micro">Position</div>
        <div className="micro hide-mobile">Weight</div>
        <div className="micro hide-mobile">Avg. cost</div>
        <div className="micro tnum" style={{ textAlign: "right" }}>Unrealized</div>
        <div></div>
      </div>

      {sorted.map((h, i) => {
        const isOpen = open === h.ticker;
        const isCash = h.ticker === "CASH";
        return (
          <React.Fragment key={h.ticker}>
            <div className={cx("holding-row", isOpen && "expanded")} onClick={() => setOpen(isOpen ? null : h.ticker)}>
              <div className="ticker-chip">{isCash ? "$" : h.ticker.slice(0, 4)}</div>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink)" }}>{h.name}</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{h.sector}</div>
              </div>
              <div className="tnum hide-mobile" style={{ color: "var(--ink-2)" }}>
                {(h.weight * 100).toFixed(1)}%
                <div style={{ height: 3, marginTop: 6, background: "var(--line)", borderRadius: 2, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: `${Math.min(100, h.weight * 100)}%`, background: isCash ? "var(--ink-3)" : "var(--accent)" }} />
                </div>
              </div>
              <div className="tnum hide-mobile" style={{ color: "var(--ink-2)" }}>
                {h.avg_cost ? fmtUSD(h.avg_cost) : "—"}
              </div>
              <div className="tnum" style={{ textAlign: "right" }}>
                {isCash ? (
                  <span className="muted">—</span>
                ) : (
                  <span className={h.unrealized_pnl >= 0 ? "pos" : "neg"} style={{ fontWeight: 500 }}>
                    {fmtPct(h.unrealized_pnl, { decimals: 2 })}
                  </span>
                )}
              </div>
              <div style={{ color: "var(--ink-4)", transition: "transform .2s ease", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}>
                ›
              </div>
            </div>
            {isOpen && (
              <div className="thesis-panel">
                <div className="micro" style={{ marginBottom: 8, color: "var(--accent)" }}>Claude's thesis</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.55, color: "var(--ink)" }}>
                  "{h.thesis}"
                </div>
                {!isCash && (
                  <div className="tnum" style={{ marginTop: 14, display: "flex", gap: 24, fontSize: 13, color: "var(--ink-3)" }}>
                    {h.opened_on && <div>Opened {fmtDate(h.opened_on, { style: "long" })}</div>}
                    {h.shares && <div>{h.shares} shares</div>}
                    {h.last_price && <div>Last {fmtUSD(h.last_price)}</div>}
                  </div>
                )}
              </div>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

Object.assign(window, { HoldingsList });