import type { BondResponse } from '../api/responses';

interface BondDetailsProps {
  bond: BondResponse;
}

const rowStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  padding: '8px 0',
  borderBottom: '1px solid #eee',
};

export function BondDetails({ bond }: BondDetailsProps) {
  const md = bond.marketData;

  return (
    <div
      style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--border-radius)',
        boxShadow: 'var(--shadow)',
        padding: 24,
      }}
    >
      <div style={{ marginBottom: 16 }}>
        <h2 style={{ fontSize: 28, fontWeight: 700 }}>{bond.shortName}</h2>
        <div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>{bond.isin}</div>
      </div>

      <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 4 }}>
        {md.price?.toFixed(2) ?? '—'}%
      </div>

      <div style={{ marginTop: 16 }}>
        <div style={rowStyle}>
          <span>Номинал</span>
          <span>
            {bond.faceValue.toLocaleString('ru-RU')} {bond.faceUnit}
          </span>
        </div>
        <div style={rowStyle}>
          <span>Дата погашения</span>
          <span>{bond.matDate}</span>
        </div>
        <div style={rowStyle}>
          <span>Купон</span>
          <span>
            {md.couponValue ?? '—'} ₽ {md.couponPercent != null ? `(${md.couponPercent}%)` : ''}
          </span>
        </div>
        <div style={rowStyle}>
          <span>Период купона</span>
          <span>{bond.couponPeriod} дней</span>
        </div>
        <div style={rowStyle}>
          <span>Следующий купон</span>
          <span>{md.nextCouponDate ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>НКД</span>
          <span>{md.accruedInt?.toFixed(2) ?? '—'} ₽</span>
        </div>
        <div style={rowStyle}>
          <span>Доходность к погашению</span>
          <span>{md.yieldToMaturity != null ? md.yieldToMaturity.toFixed(2) + '%' : '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Дюрация</span>
          <span>{md.duration != null ? md.duration.toFixed(2) : '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Тип</span>
          <span>{bond.bondType}</span>
        </div>
        <div style={rowStyle}>
          <span>ISIN</span>
          <span>{bond.isin}</span>
        </div>
      </div>
    </div>
  );
}