import { Card } from 'antd'
import type { CSSProperties, ReactNode } from 'react'

type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red'

const colorMap: Record<Color, { bg: string; color: string }> = {
  blue:   { bg: '#e6f4ff', color: '#1677ff' },
  green:  { bg: '#f6ffed', color: '#52c41a' },
  orange: { bg: '#fff7e6', color: '#fa8c16' },
  purple: { bg: '#f9f0ff', color: '#722ed1' },
  red:    { bg: '#fff1f0', color: '#ff4d4f' },
}

interface StatCardProps {
  icon: ReactNode
  color?: Color
  title: string
  value: number | string
  suffix?: string
  precision?: number
  valueStyle?: CSSProperties
  subText?: string
}

export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle, subText }: StatCardProps) {
  const c = colorMap[color]
  const display = typeof value === 'number' && precision != null ? value.toFixed(precision) : value
  return (
    <Card styles={{ body: { padding: '14px 16px' } }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 42, height: 42, borderRadius: 10,
          background: c.bg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <span style={{ fontSize: 20, color: c.color, display: 'flex' }}>{icon}</span>
        </div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{
            fontSize: 12, color: 'rgba(0,0,0,0.45)', lineHeight: '18px',
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {title}
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: 24, fontWeight: 600, lineHeight: '30px', ...valueStyle }}>{display}</span>
            {suffix && <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{suffix}</span>}
          </div>
          <div style={{
            fontSize: 11, color: 'rgba(0,0,0,0.35)', lineHeight: '16px', height: 16,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {subText ?? ''}
          </div>
        </div>
      </div>
    </Card>
  )
}