;(function () {
/* PositionCard — single open position, plain fields only.

   Per spec: NO inline chart. Just the facts the trader needs at a glance:
   symbol mark + side pill + lot size, then a 4-cell grid with Open price,
   Current price, P/L value, P/L %. Close button at the bottom.

   Reads sym live via useSymbol so Current and P/L tick with the engine. */

const PositionCard = ({ position, onClose }) => {
  const sym = window.useSymbol(position.sym);
  const current = sym ? sym.bid : position.open;
  const pl = window.computeLivePL(position, sym);
  const positive = pl >= 0;
  const plColor = positive ? '#079455' : '#F04438';
  const [editOpen, setEditOpen] = React.useState(false);

  const lotSyms = ['XAUUSD','XAGUSD','BTCUSD','ETHUSD','SOLUSD','EURUSD','GBPUSD','AUDUSD','USDJPY','USDCAD','USDCHF','NZDUSD','EURGBP','EURJPY'];
  const unitLabel = lotSyms.indexOf(position.sym) >= 0 ? 'lots' : 'units';

  /* Tabular-nums field — small label + larger value, used for each cell
     in the 2x2 stats grid. */
  const Field = ({ label, value, color }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
      <span style={{ fontFamily: 'Inter', fontSize: '11px', color: colors.muted2 }}>{label}</span>
      <span style={{
        fontFamily: 'Gilroy',
        fontWeight: 600,
        fontSize: '14px',
        color: color || colors.ink,
        fontVariantNumeric: 'tabular-nums',
      }}>{value}</span>
    </div>
  );

  return (
    <div style={{
      backgroundColor: '#fff',
      borderRadius: '20px',
      boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
      padding: '16px',
      display: 'flex',
      flexDirection: 'column',
      gap: '14px',
    }}>
      {/* Header — mark + symbol + side + size. */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <window.SymbolMark sym={sym} size={36} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'Gilroy', fontWeight: 600, fontSize: '15px', color: colors.ink }}>
            {position.sym}
          </div>
          <div style={{ fontFamily: 'Inter', fontSize: '12px', color: colors.muted2, marginTop: '2px' }}>
            <span style={{
              display: 'inline-block',
              padding: '2px 8px',
              borderRadius: '999px',
              fontSize: '11px',
              fontWeight: 600,
              fontFamily: 'Gilroy',
              backgroundColor: position.side === 'buy' ? 'rgba(0,175,171,0.12)' : 'rgba(240,68,56,0.10)',
              color: position.side === 'buy' ? colors.teal2 : colors.red,
              marginRight: '8px',
            }}>{position.side === 'buy' ? 'Buy' : 'Sell'}</span>
            {position.size} {unitLabel}
          </div>
        </div>
      </div>

      {/* 2-col grid with conditional SL/TP row. */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        rowGap: '10px',
        columnGap: '12px',
      }}>
        <Field label="Open price" value={sym ? window.formatPrice(position.open, sym) : '—'} />
        <Field label="Current price" value={sym ? window.formatPrice(current, sym) : '—'} />
        <Field label="P/L" value={window.formatPL(pl)} color={plColor} />
        <Field label="Volume" value={position.size + ' ' + unitLabel} />
        {/* SL/TP only render when the order ticket actually set them.
           When only one of the pair is set we still keep the grid
           balanced by passing '—' for the missing side. */}
        {(position.sl != null || position.tp != null) ? (
          <React.Fragment>
            <Field
              label="Stop Loss"
              value={position.sl != null && sym ? window.formatPrice(position.sl, sym) : '—'}
              color={position.sl != null ? colors.red : undefined}
            />
            <Field
              label="Take Profit"
              value={position.tp != null && sym ? window.formatPrice(position.tp, sym) : '—'}
              color={position.tp != null ? colors.green : undefined}
            />
          </React.Fragment>
        ) : null}
      </div>

      {/* Action row — Edit (opens SL/TP sheet) + Close (with toast) */}
      <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
        <button
          onClick={() => setEditOpen(true)}
          style={{
            flex: 1,
            border: `1px solid ${colors.line}`,
            background: '#fff',
            color: colors.ink2,
            padding: '10px 16px',
            borderRadius: '12px',
            fontFamily: 'Gilroy',
            fontWeight: 600,
            fontSize: '13px',
            cursor: 'pointer',
          }}
        >
          Edit SL/TP
        </button>
        <button
          onClick={() => {
            onClose(position.id);
            if (window.showToast) {
              window.showToast('Position closed · ' + position.sym, 'success');
            }
          }}
          style={{
            flex: 1,
            border: 'none',
            background: 'rgba(240, 68, 56, 0.08)',
            color: colors.red,
            padding: '10px 16px',
            borderRadius: '12px',
            fontFamily: 'Gilroy',
            fontWeight: 600,
            fontSize: '13px',
            cursor: 'pointer',
          }}
        >
          Close position
        </button>
      </div>
      {editOpen && window.EditSLTP ? (
        <window.EditSLTP position={position} onClose={() => setEditOpen(false)} />
      ) : null}
    </div>
  );
};

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