import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
import { Badge } from '@/components/reui/badge'
import { cn } from '@evobgp/ui/lib/utils'

export type AnalyticsKpiItem = {
  label: string
  value: string
  delta?: {
    direction: 'up' | 'down' | 'neutral'
    label: string
    tone?: 'success' | 'warning' | 'destructive' | 'muted'
  }
}

function deltaBadgeVariant(
  tone?: 'success' | 'warning' | 'destructive' | 'muted',
): 'success-light' | 'warning-light' | 'destructive-light' | 'outline' {
  if (tone === 'success') return 'success-light'
  if (tone === 'warning') return 'warning-light'
  if (tone === 'destructive') return 'destructive-light'
  return 'outline'
}

function toKpiItem(item: AnalyticsKpiItem): KpiStatItem {
  return {
    id: item.label,
    value: item.value,
    label: item.label,
    footer: item.delta ? (
      <Badge variant={deltaBadgeVariant(item.delta.tone)} size="sm">
        {item.delta.label}
      </Badge>
    ) : undefined,
  }
}

/** Compact KPI row inside analytics panels (stats-12 embedded tiles). */
export function AnalyticsKpiRow({
  items,
  className,
}: {
  items: AnalyticsKpiItem[]
  className?: string
}) {
  return (
    <KpiStatGrid
      items={items.map(toKpiItem)}
      embedded
      className={cn(className)}
      aria-label="Показатели"
    />
  )
}