import { Box } from '@mui/material'
import { useNavigate } from 'react-router'
import type { DashboardData, KpiCardData } from '../../domain/dashboard'
import { KpiCard } from './KpiCard'

interface KpiGridProps {
  data: DashboardData
}

export function KpiGrid({ data }: KpiGridProps) {
  const navigate = useNavigate()

  const qualityColor =
    data.avgDataQuality >= 80
      ? '#1a7a4a'
      : data.avgDataQuality >= 60
        ? '#d97706'
        : '#c0392b'

  const cards: KpiCardData[] = [
    {
      id: 'active-properties',
      label: 'Aktive Objekte',
      value: `${data.activeProperties} / ${data.totalProperties}`,
      tooltip: 'Objekte mit Status "Verfügbar jetzt" oder "Verfügbar bald"',
      onClick: () => navigate('/supply/properties'),
    },
    {
      id: 'avg-quality',
      label: 'Ø Datenqualität',
      value: `${data.avgDataQuality}%`,
      accent: qualityColor,
      tooltip: 'Durchschnittlicher Datenqualitäts-Score aller Objekte',
      onClick: () => navigate('/supply/data-quality'),
    },
    {
      id: 'market-signals',
      label: 'Marktsignale',
      value: data.futureSignals?.total ?? '–',
      tooltip: 'Erkannte Marktsignale und Future Availability Indikatoren',
    },
    {
      id: 'critical-gaps',
      label: 'Kritische Datenlücken',
      value: data.dataQuality?.critical ?? '–',
      accent: (data.dataQuality?.critical ?? 0) > 0 ? '#c0392b' : undefined,
      tooltip: 'Objekte mit Datenqualitäts-Score unter 50%',
      onClick: () => navigate('/supply/data-quality'),
    },
  ]

  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 2,
      }}
    >
      {cards.map(card => (
        <KpiCard key={card.id} card={card} />
      ))}
    </Box>
  )
}
