import type { TooltipProps } from 'recharts'
import styles from './ChartTooltip.module.css'

function formatValue(val: number): string {
  if (val >= 1_000_000) return `${(val / 1_000_000).toFixed(1)}M`
  if (val >= 1000) return `${(val / 1000).toFixed(1)}k`
  if (Number.isInteger(val)) return String(val)
  return val.toFixed(1)
}

function formatTimestamp(val: unknown): string | null {
  if (val == null) return null
  const str = String(val)
  const ms = typeof val === 'number' && val > 1e12 ? val
    : typeof val === 'number' && val > 1e9 ? val * 1000
    : Date.parse(str)
  if (isNaN(ms)) return str
  return new Date(ms).toLocaleString([], {
    month: 'short', day: 'numeric',
    hour: '2-digit', minute: '2-digit', second: '2-digit',
  })
}

export function ChartTooltip({ active, payload, label }: TooltipProps<number, string>) {
  if (!active || !payload?.length) return null

  const timeLabel = formatTimestamp(label)

  return (
    <div className={styles.tooltip}>
      {timeLabel && <div className={styles.time}>{timeLabel}</div>}
      {payload.map((entry) => (
        <div key={entry.dataKey as string} className={styles.row}>
          <span className={styles.dot} style={{ background: entry.color }} />
          <span className={styles.label}>{entry.name}:</span>
          <span className={styles.value}>{formatValue(entry.value as number)}</span>
        </div>
      ))}
    </div>
  )
}
