import { Box, Divider, LinearProgress, Paper, Typography } from '@mui/material'
import type { Match } from '../../domain/match'

interface BreakdownRowProps {
  label: string
  value: number
  max: number
  description: string
  color?: 'success' | 'warning' | 'error' | 'primary'
  modifier?: boolean
}

function BreakdownRow({ label, value, max, description, color = 'primary', modifier }: BreakdownRowProps) {
  const pct = Math.round((Math.abs(value) / max) * 100)
  const isNegative = modifier && value < 0
  const isPositive = modifier && value > 0

  return (
    <Box sx={{ mb: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
        <Typography variant="body2" sx={{ fontWeight: 500 }}>{label}</Typography>
        <Typography
          variant="body2"
          sx={{ fontWeight: 700, color: isNegative ? '#c0392b' : isPositive ? '#1a7a4a' : 'text.primary' }}
        >
          {modifier && value > 0 ? '+' : ''}{modifier ? value : `${value}/${max}`}
        </Typography>
      </Box>
      {!modifier && (
        <LinearProgress
          variant="determinate"
          value={Math.min(pct, 100)}
          sx={{ height: 8, borderRadius: 4, mb: 0.5 }}
          color={color}
        />
      )}
      <Typography variant="caption" color="text.secondary">{description}</Typography>
    </Box>
  )
}

interface Props {
  match: Match
}

export function ScoreBreakdownPanel({ match }: Props) {
  const sb = match.scoreBreakdown

  const hardColor: 'success' | 'warning' | 'error' =
    sb.hardMatchScore >= 70 ? 'success' : sb.hardMatchScore >= 50 ? 'warning' : 'error'
  const softColor: 'success' | 'warning' | 'error' =
    sb.softFactorScore >= 70 ? 'success' : sb.softFactorScore >= 50 ? 'warning' : 'error'

  return (
    <Paper sx={{ p: 2.5, mb: 2 }}>
      <Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>Score Breakdown</Typography>

      <BreakdownRow
        label="Hard-Kriterien (60%)"
        value={sb.hardMatchScore}
        max={100}
        description="Fläche, Standort, Budget, Timing"
        color={hardColor}
      />
      <BreakdownRow
        label="Soft Factors (40%)"
        value={sb.softFactorScore}
        max={100}
        description="Prestige, Erreichbarkeit, ESG, Flexibilität"
        color={softColor}
      />

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

      <BreakdownRow
        label="Datenqualitäts-Modifier"
        value={sb.dataQualityModifier}
        max={15}
        description="Basierend auf Vollständigkeit und Aktualität der Objektdaten"
        modifier
      />
      <BreakdownRow
        label="Konfidenz-Modifier"
        value={sb.confidenceModifier}
        max={15}
        description="Basierend auf Quelltyp (Verified/Extern/Signal)"
        modifier
      />

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

      <Box sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', bgcolor: '#f8fafc', p: 1.5, borderRadius: 1 }}>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Gesamt-Score</Typography>
        <Typography
          variant="h4"
          sx={{
            fontWeight: 800,
            color: sb.totalScore >= 78 ? '#1a7a4a' : sb.totalScore >= 52 ? '#d97706' : '#c0392b',
          }}
        >
          {sb.totalScore}/100
        </Typography>
      </Box>
    </Paper>
  )
}
