import { Box, Chip, Stack, TextField, Typography } from '@mui/material'
import type { FollowUpQuestion } from '../../domain/needBuilder'

interface Props {
  question: FollowUpQuestion
  answer: string
  onAnswer: (answer: string) => void
}

const IMPORTANCE_LABEL: Record<FollowUpQuestion['importance'], string> = {
  required: 'Pflichtfeld',
  recommended: 'Empfohlen',
  optional: 'Optional',
}

const IMPORTANCE_COLOR: Record<FollowUpQuestion['importance'], 'error' | 'warning' | 'default'> = {
  required: 'error',
  recommended: 'warning',
  optional: 'default',
}

export function FollowUpQuestionCard({ question, answer, onAnswer }: Props) {
  return (
    <Box sx={{ pb: 2, borderBottom: '1px solid #f1f5f9' }}>
      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 1 }}>
        <Typography variant="body2" sx={{ fontWeight: 500, flex: 1 }}>
          {question.questionText}
        </Typography>
        <Chip
          label={IMPORTANCE_LABEL[question.importance]}
          size="small"
          color={IMPORTANCE_COLOR[question.importance]}
          variant="outlined"
          sx={{ flexShrink: 0 }}
        />
      </Box>
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
        {question.reason}
      </Typography>

      {question.suggestedAnswerOptions && question.suggestedAnswerOptions.length > 0 ? (
        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
          {question.suggestedAnswerOptions.map(opt => (
            <Chip
              key={opt}
              label={opt}
              size="small"
              clickable
              variant={answer === opt ? 'filled' : 'outlined'}
              color={answer === opt ? 'primary' : 'default'}
              onClick={() => onAnswer(answer === opt ? '' : opt)}
            />
          ))}
        </Stack>
      ) : (
        <TextField
          size="small"
          fullWidth
          placeholder="Ihre Antwort (optional)"
          value={answer}
          onChange={e => onAnswer(e.target.value)}
        />
      )}
    </Box>
  )
}
