import type { ReactNode } from 'react'
import { Box, Tooltip, Typography } from '@mui/material'
import { Info } from 'lucide-react'

export type CellHighlight = 'best' | 'worst' | 'critical' | 'future' | 'none'

interface Props {
  highlight?: CellHighlight
  icon?: ReactNode
  iconTooltip?: string
  children: ReactNode
}

const HIGHLIGHT_SX: Record<CellHighlight, object> = {
  best:     { bgcolor: '#f0fdf4', borderLeft: '3px solid #1a7a4a' },
  worst:    { bgcolor: '#fef3c7', borderLeft: '3px solid #d97706' },
  critical: { bgcolor: '#fef2f2', borderLeft: '3px solid #c0392b' },
  future:   { bgcolor: '#faf5ff', borderLeft: '3px solid #7c3aed' },
  none:     {},
}

export function CompareCell({ highlight = 'none', icon, iconTooltip, children }: Props) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, ...HIGHLIGHT_SX[highlight] }}>
      {icon && (
        iconTooltip
          ? <Tooltip title={iconTooltip}><Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box></Tooltip>
          : <Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box>
      )}
      <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
    </Box>
  )
}

export function MissingDataCell({ reason }: { reason?: string }) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
      <Tooltip title={reason ?? 'Keine Daten vorhanden — kann Konfidenz beeinflussen'}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Info size={12} color="#94a3b8" />
        </Box>
      </Tooltip>
      <Typography variant="body2" sx={{ color: '#94a3b8', fontStyle: 'italic' }}>
        Nicht verfügbar
      </Typography>
    </Box>
  )
}