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

interface ReviewGatePanelProps {
  gate: GateEvaluation
}

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

  const reviewerNotes = gate.checks.filter(
    c => c.value && c.label.toLowerCase().includes('review')
  )

  return (
    <Paper variant="outlined" sx={{ mb: 1.5, borderRadius: 1.5 }}>
      <Box sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
        <ClipboardCheck size={14} color="#64748b" />
        <Typography variant="subtitle2" sx={{ fontWeight: 600, fontSize: '0.8rem' }}>
          Review-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>
              )}
            </Typography>
          </Box>
        ))}

        {reviewerNotes.length > 0 && (
          <Box sx={{ mt: 1, p: 1, bgcolor: 'rgba(30,58,95,0.04)', borderRadius: 1, border: '1px solid rgba(30,58,95,0.1)' }}>
            <Typography variant="caption" sx={{ fontWeight: 600, color: '#152642', display: 'block', mb: 0.5 }}>
              Reviewer-Informationen
            </Typography>
            {reviewerNotes.map((note, i) => (
              <Typography key={i} variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
                {note.label}: {note.value}
              </Typography>
            ))}
          </Box>
        )}

        {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>
  )
}