import { Box, LinearProgress, Tooltip, Typography } from '@mui/material'

function scoreColor(score: number): string {
  if (score >= 0.85) return '#15803d'
  if (score >= 0.65) return '#a16207'
  return '#dc2626'
}

interface ReliabilityScorePanelProps {
  score: number
  compact?: boolean
}

export function ReliabilityScorePanel({ score, compact = false }: ReliabilityScorePanelProps) {
  const pct = Math.round(score * 100)
  const color = scoreColor(score)

  if (compact) {
    return (
      <Tooltip title={`Reliabilität: ${pct}%`}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
          <LinearProgress
            variant="determinate"
            value={pct}
            sx={{
              width: 48,
              height: 4,
              borderRadius: 2,
              bgcolor: 'rgba(0,0,0,0.08)',
              '& .MuiLinearProgress-bar': { bgcolor: color, borderRadius: 2 },
            }}
          />
          <Typography sx={{ fontSize: '0.7rem', color, fontWeight: 600 }}>{pct}%</Typography>
        </Box>
      </Tooltip>
    )
  }

  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Source Reliability
        </Typography>
        <Typography variant="caption" sx={{ color, fontWeight: 700 }}>
          {pct}%
        </Typography>
      </Box>
      <LinearProgress
        variant="determinate"
        value={pct}
        sx={{
          height: 6,
          borderRadius: 3,
          bgcolor: 'rgba(0,0,0,0.08)',
          '& .MuiLinearProgress-bar': { bgcolor: color, borderRadius: 3 },
        }}
      />
    </Box>
  )
}