import { Box, Chip, Divider, Paper, Typography } from '@mui/material'
import { CheckCircle2, ChevronRight, Target, XCircle } from 'lucide-react'
import type { GateEvaluation } from '../../domain/signalPipeline'
import { GateStatus, GATE_STATUS_LABELS, GATE_STATUS_COLORS } from '../../domain/signalPipeline'

interface ConfidenceGatePanelProps {
  gate: GateEvaluation
}

function ConfidenceBar({ value }: { value: string | undefined }) {
  if (!value) return null

  const score = parseFloat(value)
  if (isNaN(score)) return null

  const pct = Math.round(score * 100)

  const barColor =
    score >= 0.75 ? '#15803d'
    : score >= 0.35 ? '#d97706'
    : '#dc2626'

  const threshold =
    score >= 0.75 ? 'Hoch (≥ 75%)'
    : score >= 0.35 ? 'Mittel (≥ 35%)'
    : 'Niedrig (< 35%)'

  return (
    <Box sx={{ mt: 1.25 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Konfidenz-Schwelle: {threshold}
        </Typography>
        <Typography variant="caption" sx={{ color: barColor, fontWeight: 600 }}>
          {pct}%
        </Typography>
      </Box>
      <Box sx={{ height: 6, bgcolor: 'rgba(148,163,184,0.2)', borderRadius: 3, overflow: 'hidden' }}>
        <Box
          sx={{
            height: '100%',
            width: `${pct}%`,
            bgcolor: barColor,
            borderRadius: 3,
            transition: 'width 0.3s ease',
          }}
        />
      </Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 0.25 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.65rem' }}>
          0%
        </Typography>
        <Typography variant="caption" sx={{ color: '#d97706', fontSize: '0.65rem' }}>
          35%
        </Typography>
        <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.65rem' }}>
          75%
        </Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.65rem' }}>
          100%
        </Typography>
      </Box>
    </Box>
  )
}

export function ConfidenceGatePanel({ gate }: ConfidenceGatePanelProps) {
  const { bg, fg } = GATE_STATUS_COLORS[gate.status]

  const confidenceCheck = gate.checks.find(c => c.label.startsWith('Konfidenz'))
  const confidenceValue = confidenceCheck?.value

  return (
    <Paper variant="outlined" sx={{ mb: 1.5, borderRadius: 1.5 }}>
      <Box sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
        <Target size={14} color="#64748b" />
        <Typography variant="subtitle2" sx={{ fontWeight: 600, fontSize: '0.8rem' }}>
          Konfidenz-Gate
        </Typography>
        <Box sx={{ ml: 'auto' }}>
          <Chip
            size="small"
            label={GATE_STATUS_LABELS[gate.status]}
            sx={{ bgcolor: bg, color: fg, border: 'none', fontSize: '0.7rem', fontWeight: 600 }}
          />
        </Box>
      </Box>
      <Divider />
      <Box sx={{ p: 1.5 }}>
        {gate.checks.map((check, i) => (
          <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
            {check.passed
              ? <CheckCircle2 size={13} color="#15803d" />
              : <XCircle size={13} color="#dc2626" />
            }
            <Typography variant="caption">
              {check.label}
              {check.value && (
                <Box component="span" sx={{ color: 'text.secondary', ml: 0.5 }}>
                  {check.value}
                </Box>
              )}
              {check.note && (
                <Box component="span" sx={{ color: '#a16207', ml: 0.5, fontStyle: 'italic' }}>
                  ({check.note})
                </Box>
              )}
            </Typography>
          </Box>
        ))}
        <ConfidenceBar value={confidenceValue} />
        {gate.reason && (
          <Typography
            variant="caption"
            sx={{ color: 'text.secondary', mt: 1, display: 'block' }}
          >
            {gate.reason}
          </Typography>
        )}
        {gate.nextAction && gate.status !== GateStatus.PASSED && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, mt: 0.5 }}>
            <ChevronRight size={12} color="#1d4ed8" />
            <Typography variant="caption" sx={{ color: '#1d4ed8', display: 'block' }}>
              {gate.nextAction}
            </Typography>
          </Box>
        )}
      </Box>
    </Paper>
  )
}
