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

function severityColor(severity: TradeOff['severity']): string {
  if (severity === 'HIGH') return '#d97706'
  if (severity === 'MEDIUM') return '#92400e'
  return '#64748b'
}

interface Props {
  tradeoffs: TradeOff[]
  maxItems?: number
  compact?: boolean
}

export function TradeoffList({ tradeoffs, maxItems = 3, compact }: Props) {
  if (tradeoffs.length === 0) return null
  const shown = tradeoffs.slice(0, maxItems)

  return (
    <Box>
      <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
        Abwägungen
      </Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
        {shown.map((t, i) => (
          <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
            <ArrowLeftRight size={14} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
            <Box>
              {compact ? (
                <Typography variant="caption" sx={{ color: severityColor(t.severity) }}>
                  {t.concern}
                </Typography>
              ) : (
                <>
                  <Typography variant="caption" sx={{ fontWeight: 600, color: severityColor(t.severity) }}>
                    {t.criterion}
                  </Typography>
                  <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                    {t.concern}
                  </Typography>
                  {t.mitigation && (
                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontStyle: 'italic' }}>
                      → {t.mitigation}
                    </Typography>
                  )}
                </>
              )}
            </Box>
          </Box>
        ))}
      </Box>
    </Box>
  )
}