import { Box, Chip, Paper, Typography } from '@mui/material'
import { ArrowLeftRight } from 'lucide-react'
import type { Match } from '../../domain/match'

const SEVERITY_META: Record<string, { label: string; color: 'error' | 'warning' | 'default' }> = {
  HIGH:   { label: 'Hoch',    color: 'error' },
  MEDIUM: { label: 'Mittel',  color: 'warning' },
  LOW:    { label: 'Gering',  color: 'default' },
}

interface Props {
  match: Match
}

export function TradeoffPanel({ match }: Props) {
  const tradeoffs = match.tradeoffs ?? []
  if (tradeoffs.length === 0) return null

  return (
    <Paper sx={{ p: 2.5, mb: 2 }}>
      <Typography variant="h6" sx={{ fontWeight: 700, mb: 1.5 }}>Abwägungen</Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        {tradeoffs.map((t, i) => {
          const meta = SEVERITY_META[t.severity] ?? SEVERITY_META.LOW
          return (
            <Box
              key={i}
              sx={{ p: 1.5, bgcolor: '#fffbeb', border: '1px solid #fde68a', borderRadius: 1 }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.75 }}>
                <ArrowLeftRight size={15} color="#d97706" />
                <Typography variant="body2" sx={{ fontWeight: 600, flex: 1 }}>
                  {t.criterion}
                </Typography>
                <Chip label={meta.label} size="small" color={meta.color} variant="outlined" />
              </Box>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
                {t.concern}
              </Typography>
              {t.mitigation && (
                <Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                  Mitigation: {t.mitigation}
                </Typography>
              )}
              {t.impactOnScore !== undefined && (
                <Typography variant="caption" sx={{ display: 'block', mt: 0.5, color: '#c0392b' }}>
                  Score-Einfluss: {t.impactOnScore} Punkte
                </Typography>
              )}
            </Box>
          )
        })}
      </Box>
    </Paper>
  )
}