import {
  Gauge,
  Power,
  Radio,
  Route,
  Timer,
} from 'lucide-react'
import type { ReactNode } from 'react'

import type { MachineUsageSummary } from '../../../../entities/machine/model/types'
import {
  formatAnalyticsDuration,
  formatAnalyticsPercent,
} from './utils'

type MachineUsageKpiCardsProps = {
  summary: MachineUsageSummary
}

type KpiCard = {
  key: string
  label: string
  value: string
  icon: ReactNode
}

export function MachineUsageKpiCards({ summary }: MachineUsageKpiCardsProps) {
  const cards: KpiCard[] = [
    {
      key: 'moving',
      label: 'В движении',
      value: formatAnalyticsDuration(summary.movingSeconds),
      icon: <Route size={18} />,
    },
    {
      key: 'engine-on',
      label: 'Холостой ход',
      value: formatAnalyticsDuration(summary.engineOnSeconds),
      icon: <Power size={18} />,
    },
    {
      key: 'idle',
      label: 'Простой',
      value: formatAnalyticsDuration(summary.idleSeconds),
      icon: <Timer size={18} />,
    },
    {
      key: 'no-data',
      label: 'Нет данных',
      value: formatAnalyticsDuration(summary.noDataSeconds),
      icon: <Radio size={18} />,
    },
    {
      key: 'utilization',
      label: 'КПИ использования',
      value: formatAnalyticsPercent(summary.utilizationPercent),
      icon: <Gauge size={18} />,
    },
  ]

  return (
    <div className="machine-usage-kpi-grid">
      {cards.map((card) => (
        <div
          className={`machine-usage-kpi-card machine-usage-kpi-card--${card.key}`}
          key={card.key}
        >
          {card.icon}
          <div>
            <span>{card.label}</span>
            <b>{card.value}</b>
          </div>
        </div>
      ))}
    </div>
  )
}
