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 pendingCount = data.reviewTasks?.filter(t => t.status === 'PENDING').length ?? 0

  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: 'strong-matches',
      label: 'Starke Matches',
      value: data.strongMatchCount,
      accent: '#1a7a4a',
      tooltip: 'Matches mit einem Match-Score ≥ 80',
      onClick: () => navigate('/supply/match-center'),
    },
    {
      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',
      onClick: () => navigate('/supply/future-availability'),
    },
    {
      id: 'review-pending',
      label: 'Review ausstehend',
      value: pendingCount,
      accent: pendingCount > 0 ? '#d97706' : undefined,
      tooltip: 'Matches und Signale, die eine manuelle Prüfung erfordern',
      onClick: () => navigate('/ops/review-queue'),
    },
    {
      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(3, 1fr)',
        gap: 2,
      }}
    >
      {cards.map(card => (
        <KpiCard key={card.id} card={card} />
      ))}
    </Box>
  )
}
