;(function () {
/* PerfWidget — Summary card with allocation donut pie + legend column. */

const PerfWidget = () => {
  /* Pull live equity-aware total from the trade store so the Summary
     ticks with open-position P/L. The Trading slice's `value` is the
     live equity (balance + open P/L), not just the static balance —
     so as positions move, both the slice size and the centre TOTAL
     update together. Other slices stay at their static balances. */
  const live = window.useTradingNumbers ? window.useTradingNumbers() : null;
  const total = live ? live.total : getTotal();
  const baseSlices = getSlices();
  const SLICES = baseSlices.map((s) => {
    const value = s.id === 'trading' && live ? live.equity : s.value;
    const pct = total > 0 ? value / total : 0;
    return { ...s, value, pct, amount: formatWhole(value) };
  });
  return (
    <Card>
      <div style={styles.header}>
        <span style={styles.headerText}>Summary</span>
      </div>
      <div style={styles.body}>
        <div style={styles.pieWrap}>
          <AllocationPie slices={SLICES} size={132} />
          <div style={styles.center}>
            <span style={styles.totalLabel}>TOTAL</span>
            <span style={styles.totalValue}>
              {`$${(total / 1000).toFixed(1)}K`}
            </span>
          </div>
        </div>
        <div style={styles.legend}>
          {SLICES.map((s, i) => {
            const isLast = i === SLICES.length - 1;
            return (
              <div
                key={s.label}
                style={{
                  ...styles.legendRow,
                  ...(!isLast ? styles.legendRowBordered : null),
                }}
              >
                <div style={{ ...styles.dot, backgroundColor: s.color }} />
                <span style={styles.legendLabel}>{s.label}</span>
                <span style={styles.legendAmount}>{s.amount}</span>
              </div>
            );
          })}
        </div>
      </div>
    </Card>
  );
};

const styles = {
  header: {
    paddingLeft: '4px',
    paddingRight: '4px',
    marginBottom: '12px',
  },
  headerText: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    lineHeight: '20px',
    color: colors.ink2,
  },
  body: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '16px',
    paddingTop: '4px',
    paddingBottom: '8px',
  },
  pieWrap: {
    width: '132px',
    height: '132px',
    position: 'relative',
  },
  center: {
    position: 'absolute',
    top: 0, left: 0, right: 0, bottom: 0,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    pointerEvents: 'none',
  },
  totalLabel: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '10px',
    color: colors.muted2,
    letterSpacing: '0.2px',
  },
  totalValue: {
    marginTop: '2px',
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '16px',
    lineHeight: '18px',
    color: colors.ink,
  },
  legend: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
  },
  legendRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '8px',
    paddingTop: '7px',
    paddingBottom: '7px',
  },
  legendRowBordered: {
    borderBottom: '1px solid #F2F4F7',
  },
  dot: {
    width: '8px',
    height: '8px',
    borderRadius: '4px',
  },
  legendLabel: {
    flex: 1,
    fontFamily: 'Gilroy',
    fontWeight: 500,
    fontSize: '13px',
    color: colors.ink2,
  },
  legendAmount: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '13px',
    color: colors.ink,
    fontVariantNumeric: 'tabular-nums',
  },
};

Object.assign(window, { PerfWidget });
})();