import { Alert, Box, Card, Chip, Divider, Typography } from '@mui/material'
import { AlertTriangle } from 'lucide-react'
import { MatchCardHeader } from './MatchCardHeader'
import { MatchReasonList } from './MatchReasonList'
import { MatchDataQualitySummary } from './MatchDataQualitySummary'
import { MatchActionToolbar } from './MatchActionToolbar'
import type { MatchCardViewModel } from './MatchCardViewModel'
import type { Risk } from '../../domain/match'

function riskChipColor(level: Risk['level']): 'error' | 'warning' | 'success' {
  if (level === 'CRITICAL' || level === 'HIGH') return 'error'
  if (level === 'MEDIUM') return 'warning'
  return 'success'
}

interface Props {
  vm: MatchCardViewModel
}

export function MatchCardReview({ vm }: Props) {
  return (
    <Card sx={{ p: 2.5, mb: 1.5, border: '1px solid #fde68a', bgcolor: '#fffbeb' }}>
      {vm.disclaimer && (
        <Alert severity="warning" sx={{ mb: 1.5 }}>
          {vm.disclaimer}
        </Alert>
      )}

      <MatchCardHeader vm={vm} />

      <Box sx={{ mt: 1.5, mb: 1.5 }}>
        <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
          {vm.title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {vm.locationLabel}
        </Typography>
        {vm.explainabilitySummary && (
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75, fontStyle: 'italic' }}>
            {vm.explainabilitySummary}
          </Typography>
        )}
      </Box>

      <Divider sx={{ mb: 1.5 }} />

      {/* Reasons with scores */}
      {vm.reasons.length > 0 && (
        <Box sx={{ mb: 1.5 }}>
          <MatchReasonList reasons={vm.reasons} maxItems={3} />
        </Box>
      )}

      {/* Risks — prominent in review context */}
      {vm.risks.length > 0 && (
        <Box sx={{ mb: 1.5 }}>
          <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
            Risiken
          </Typography>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
            {vm.risks.map((r, i) => (
              <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
                <AlertTriangle size={14} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
                <Box>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.25 }}>
                    <Chip
                      label={r.category}
                      size="small"
                      color={riskChipColor(r.level)}
                      variant="outlined"
                    />
                  </Box>
                  <Typography variant="caption" color="text.secondary">
                    {r.description}
                  </Typography>
                  {r.mitigation && (
                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontStyle: 'italic' }}>
                      → {r.mitigation}
                    </Typography>
                  )}
                </Box>
              </Box>
            ))}
          </Box>
        </Box>
      )}

      {/* Missing data — full detail for review */}
      <Box sx={{ mb: 1.5 }}>
        <MatchDataQualitySummary
          dataQualityScore={vm.dataQualityScore}
          missingData={vm.missingData}
        />
      </Box>

      <Divider sx={{ mb: 1.5 }} />
      <MatchActionToolbar actions={vm.actions} />
    </Card>
  )
}
