import type { ShareResponse } from '@/shared/api'

interface StockDetailsProps {
  stock: ShareResponse
}

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

export function StockDetails({ stock }: StockDetailsProps) {
  const md = stock.marketData
  const change = md.change ?? 0
  const changePercent = md.changePercent ?? 0
  const isPositive = change >= 0
  const changeLabel = `${isPositive ? '+' : ''}${change.toFixed(2)} (${changePercent.toFixed(2)}%)`

  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 }}>
          {stock.shortName} ({stock.secid})
        </h2>
        <div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
          {stock.name} &middot; {stock.isin}
        </div>
      </div>

      <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 4 }}>
        {md.price?.toLocaleString('ru-RU', { minimumFractionDigits: 2 }) ?? '—'}{' '}
        <span
          style={{
            fontSize: 18,
            color: isPositive ? 'var(--color-positive)' : 'var(--color-negative)',
          }}
        >
          {changeLabel}
        </span>
      </div>

      <div style={{ marginTop: 16 }}>
        <div style={rowStyle}>
          <span>Открытие</span>
          <span>{md.open?.toFixed(2) ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Максимум</span>
          <span>{md.high?.toFixed(2) ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Минимум</span>
          <span>{md.low?.toFixed(2) ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Объём</span>
          <span>{md.volume.toLocaleString('ru-RU')}</span>
        </div>
        <div style={rowStyle}>
          <span>Капитализация</span>
          <span>
            {md.issueCapitalization ? `${(md.issueCapitalization / 1e9).toFixed(2)} млрд ₽` : '—'}
          </span>
        </div>
        <div style={rowStyle}>
          <span>ISIN</span>
          <span>{stock.isin}</span>
        </div>
        <div style={rowStyle}>
          <span>Уровень листинга</span>
          <span>{stock.listLevel}</span>
        </div>
      </div>
    </div>
  )
}