import { Box, Typography } from '@mui/material'
import { Bot, Filter, MousePointer } from 'lucide-react'

interface Props {
  context: 'no-outputs' | 'filtered-empty' | 'no-selection'
}

const CONFIG = {
  'no-outputs': {
    icon: Bot,
    color: '#94a3b8',
    title: 'Keine AI-Outputs',
    desc: 'Es wurden noch keine AI-Outputs generiert.',
  },
  'filtered-empty': {
    icon: Filter,
    color: '#94a3b8',
    title: 'Keine Ergebnisse',
    desc: 'Kein AI-Output entspricht den aktiven Filtern.',
  },
  'no-selection': {
    icon: MousePointer,
    color: '#94a3b8',
    title: 'Output auswählen',
    desc: 'Klicken Sie auf eine Zeile, um Details und Aktionen anzuzeigen.',
  },
}

export function AIMonitoringEmptyState({ context }: Props) {
  const { icon: Icon, color, title, desc } = CONFIG[context]
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 200, p: 4, textAlign: 'center' }}>
      <Icon size={36} color={color} style={{ marginBottom: 12, opacity: 0.6 }} />
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5, color: '#1e293b' }}>{title}</Typography>
      <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 260 }}>{desc}</Typography>
    </Box>
  )
}
