'use client'

import { useTranslations } from 'next-intl'
import type { BotPerformance } from '@/types'
import { formatPrice, formatPct } from '@/lib/utils'
import { useDashboardStore } from '@/store/dashboard'

interface KpiRowProps {
  performance?: BotPerformance
  postsCount?: number
}

interface StatCard {
  labelKey: string
  value: string
  change?: string
  changePositive?: boolean
}

export default function KpiRow({ performance, postsCount }: KpiRowProps) {
  const t = useTranslations('kpi')
  const { livePrices } = useDashboardStore()

  const stats: StatCard[] = [
    {
      labelKey: 'btcPrice',
      value: formatPrice(livePrices.BTC ?? 94230),
      change: livePrices.BTC ? 'live' : '+1.4%',
      changePositive: true,
    },
    {
      labelKey: 'ethPrice',
      value: formatPrice(livePrices.ETH ?? 1847),
      change: livePrices.ETH ? 'live' : '-0.8%',
      changePositive: false,
    },
    {
      labelKey: 'postsTracked',
      value: postsCount != null ? postsCount.toLocaleString() : '1,247',
      change: '+12 today',
      changePositive: true,
    },
    {
      labelKey: 'avgMove',
      value: performance
        ? formatPct(performance.net_pnl_usd > 0 ? 2.3 : -2.3)
        : formatPct(2.3),
      change: 'after Trump posts',
      changePositive: true,
    },
  ]

  return (
    <div className="grid grid-cols-4 gap-4">
      {stats.map((stat) => (
        <div
          key={stat.labelKey}
          className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5"
        >
          <p className="text-[11px] uppercase tracking-wider text-[#555555] mb-2">
            {t(stat.labelKey as 'btcPrice' | 'ethPrice' | 'postsTracked' | 'avgMove')}
          </p>
          <p className="text-[22px] font-medium text-white leading-none mb-1.5">{stat.value}</p>
          {stat.change && (
            <p
              className={`text-[12px] ${
                stat.changePositive ? 'text-[#4ade80]' : 'text-[#ef4444]'
              }`}
            >
              {stat.change}
            </p>
          )}
        </div>
      ))}
    </div>
  )
}