import { Link } from 'react-router-dom';
import type { Portfolio } from '@/shared/api/responses';
import { pluralize } from '@/shared/lib/formatters';

export function PortfolioCard({ portfolio }: { portfolio: Portfolio }) {
  const chipStyle = (bg: string): React.CSSProperties => ({
    background: bg,
    padding: '4px 10px',
    borderRadius: 6,
    fontSize: 12,
    color: '#fff',
    fontWeight: 500,
  });

  return (
    <Link
      to={`/portfolios/${portfolio.id}`}
      style={{
        display: 'block',
        padding: 20,
        background: 'var(--color-surface)',
        border: '1px solid #e0e0e0',
        borderRadius: 'var(--border-radius)',
        textDecoration: 'none',
        color: 'inherit',
        transition: 'box-shadow 0.2s',
      }}
      onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)')}
      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          marginBottom: 12,
        }}
      >
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, flex: 1 }}>{portfolio.name}</h3>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.2 }}>
            {portfolio.totalValue?.toLocaleString('ru-RU', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          </div>
          <div style={{ fontSize: 11, color: 'var(--color-text-secondary)' }}>
            {portfolio.currency}
          </div>
        </div>
      </div>

      {portfolio.description && (
        <p style={{ margin: '0 0 12px', fontSize: 13, color: 'var(--color-text-secondary)' }}>
          {portfolio.description}
        </p>
      )}

      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        {portfolio.shareCount > 0 && (
          <span style={chipStyle('#1b5e20')}>
            {portfolio.shareCount} {pluralize(portfolio.shareCount, 'акция', 'акции', 'акций')}
          </span>
        )}
        {portfolio.bondCount > 0 && (
          <span style={chipStyle('#0d47a1')}>
            {portfolio.bondCount}{' '}
            {pluralize(portfolio.bondCount, 'облигация', 'облигации', 'облигаций')}
          </span>
        )}
        <span style={chipStyle('#424242')}>
          {portfolio.positionCount}{' '}
          {pluralize(portfolio.positionCount, 'позиция', 'позиции', 'позиций')}
        </span>
      </div>

      <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>
        обновлён {new Date(portfolio.updatedAt).toLocaleDateString('ru-RU')}
      </span>
    </Link>
  );
}