import { Box, Button, Chip, Divider, Typography } from '@mui/material'
import { AlertTriangle, Info } from 'lucide-react'
import type { RecommendedAction } from '../../services/dataQualityService'

interface MissingDataListProps {
  criticalFields: string[]
  optionalFields: string[]
  recommendedActions: RecommendedAction[]
  onAction?: (action: RecommendedAction) => void
}

export function MissingDataList({
  criticalFields,
  optionalFields,
  recommendedActions,
  onAction,
}: MissingDataListProps) {
  if (criticalFields.length === 0 && optionalFields.length === 0) {
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1.5, px: 2, bgcolor: '#f0fdf4', borderRadius: 1, mb: 2 }}>
        <Info size={14} color="#1a7a4a" />
        <Typography variant="body2" sx={{ color: '#1a7a4a', fontWeight: 500 }}>
          Alle wichtigen Felder sind vollständig.
        </Typography>
      </Box>
    )
  }

  const criticalActions = recommendedActions.filter(a => a.priority === 'HIGH')
  const otherActions = recommendedActions.filter(a => a.priority !== 'HIGH')

  return (
    <Box sx={{ mb: 2 }}>
      {criticalFields.length > 0 && (
        <Box sx={{ mb: 1.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.75 }}>
            <AlertTriangle size={13} color="#c0392b" />
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#c0392b', textTransform: 'uppercase', letterSpacing: 0.5 }}>
              Pflichtfelder ({criticalFields.length})
            </Typography>
          </Box>
          {criticalActions.map(a => (
            <Box
              key={a.id}
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                px: 1.5,
                py: 0.75,
                mb: 0.5,
                bgcolor: '#fff1f2',
                border: '1px solid #fecdd3',
                borderRadius: 1,
              }}
            >
              <Box>
                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.8125rem' }}>{a.label}</Typography>
                <Typography variant="caption" color="text.secondary">{a.detail}</Typography>
              </Box>
              {onAction && (
                <Button size="small" variant="outlined" color="error"
                  onClick={() => onAction(a)}
                  sx={{ textTransform: 'none', fontSize: '0.75rem', flexShrink: 0, ml: 1 }}>
                  Ergänzen
                </Button>
              )}
            </Box>
          ))}
          {criticalFields
            .filter(f => !criticalActions.find(a => a.field === f))
            .map(f => (
              <Box key={f} sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
                <Chip label={f} size="small" color="error" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
              </Box>
            ))
          }
        </Box>
      )}

      {optionalFields.length > 0 && (
        <>
          {criticalFields.length > 0 && <Divider sx={{ mb: 1.5 }} />}
          <Box>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}>
              Optionale Felder ({optionalFields.length})
            </Typography>
            {otherActions.map(a => (
              <Box
                key={a.id}
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  px: 1.5,
                  py: 0.75,
                  mb: 0.5,
                  bgcolor: '#fffbeb',
                  border: '1px solid #fde68a',
                  borderRadius: 1,
                }}
              >
                <Box>
                  <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '0.8125rem' }}>{a.label}</Typography>
                  <Typography variant="caption" color="text.secondary">{a.detail}</Typography>
                </Box>
                {onAction && (
                  <Button size="small" variant="outlined" color="warning"
                    onClick={() => onAction(a)}
                    sx={{ textTransform: 'none', fontSize: '0.75rem', flexShrink: 0, ml: 1 }}>
                    Ergänzen
                  </Button>
                )}
              </Box>
            ))}
            {optionalFields
              .filter(f => !otherActions.find(a => a.field === f))
              .map(f => (
                <Chip key={f} label={f} size="small" color="warning" variant="outlined"
                  sx={{ height: 20, fontSize: '0.7rem', mr: 0.5, mb: 0.5 }} />
              ))
            }
          </Box>
        </>
      )}
    </Box>
  )
}
