import { Box, Paper, Typography, Skeleton } from '@mui/material'
import { AlertTriangle, Calendar, CalendarDays, Eye } from 'lucide-react'
import { useReminderInsights } from '../../hooks/useReminders'

interface KpiItemProps {
  icon: React.ReactNode
  label: string
  value: number | string
  color: string
}

function KpiItem({ icon, label, value, color }: KpiItemProps) {
  return (
    <Paper
      variant="outlined"
      sx={{
        flex: 1,
        p: 1.5,
        display: 'flex',
        alignItems: 'center',
        gap: 1.5,
        borderColor: '#e2e8f0',
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          width: 36,
          height: 36,
          borderRadius: 1,
          bgcolor: `${color}18`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        {icon}
      </Box>
      <Box sx={{ minWidth: 0 }}>
        <Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
          {value}
        </Typography>
        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>
          {label}
        </Typography>
      </Box>
    </Paper>
  )
}

export function ReminderKpiBar() {
  const { data, isLoading } = useReminderInsights()

  if (isLoading) {
    return (
      <Box className="flex gap-3">
        {[1, 2, 3, 4].map(i => (
          <Skeleton key={i} variant="rounded" height={68} sx={{ flex: 1 }} />
        ))}
      </Box>
    )
  }

  const insights = data ?? { urgentCount: 0, dueThisWeek: 0, dueThisMonth: 0, schattenmarktReadyCount: 0 }

  return (
    <Box className="flex gap-3">
      <KpiItem
        icon={<AlertTriangle size={18} color="#dc2626" />}
        label="Dringend"
        value={insights.urgentCount}
        color="#dc2626"
      />
      <KpiItem
        icon={<Calendar size={18} color="#ea580c" />}
        label="Diese Woche"
        value={insights.dueThisWeek}
        color="#ea580c"
      />
      <KpiItem
        icon={<CalendarDays size={18} color="#0369a1" />}
        label="Dieser Monat"
        value={insights.dueThisMonth}
        color="#0369a1"
      />
      <KpiItem
        icon={<Eye size={18} color="#be185d" />}
        label="Schattenmarkt-Risiko"
        value={insights.schattenmarktReadyCount}
        color="#be185d"
      />
    </Box>
  )
}