import { Box, LinearProgress, Typography } from '@mui/material'
import { Calendar, User } from 'lucide-react'
import { ReviewStatusBadge } from './ReviewStatusBadge'
import { ReviewPriorityBadge } from './ReviewPriorityBadge'
import { ReviewEntityTypeBadge } from './ReviewEntityTypeBadge'
import type { ReviewTask } from '../../domain/review'

interface ReviewTaskCardProps {
  task: ReviewTask
  isSelected: boolean
  onSelect: (task: ReviewTask) => void
}

function isOverdue(dueDate?: string): boolean {
  if (!dueDate) return false
  return new Date(dueDate) < new Date()
}

export function ReviewTaskCard({ task, isSelected, onSelect }: ReviewTaskCardProps) {
  const overdue = isOverdue(task.dueDate)
  const isActive = task.status === 'PENDING' || task.status === 'IN_REVIEW' || task.status === 'ESCALATED'

  return (
    <Box
      onClick={() => onSelect(task)}
      sx={{
        px: 1.5,
        py: 1.25,
        cursor: 'pointer',
        borderBottom: '1px solid #f1f5f9',
        borderLeft: isSelected
          ? '3px solid #1e3a5f'
          : overdue && isActive
            ? '3px solid #c0392b'
            : task.priority === 'CRITICAL' && isActive
              ? '3px solid #ea580c'
              : '3px solid transparent',
        bgcolor: isSelected ? '#eff6ff' : 'white',
        '&:hover': { bgcolor: isSelected ? '#eff6ff' : '#f8fafc' },
        transition: 'background-color 0.1s ease',
      }}
    >
      {/* Badges row */}
      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 0.5 }}>
        <ReviewEntityTypeBadge entityType={task.entityType} />
        <ReviewPriorityBadge priority={task.priority} />
        <ReviewStatusBadge status={task.status} />
      </Box>

      {/* Title */}
      <Typography
        variant="body2"
        sx={{ fontWeight: 600, fontSize: '0.8125rem', lineHeight: 1.3, mb: 0.25 }}
        noWrap
      >
        {task.title}
      </Typography>

      {/* Description */}
      {task.description && (
        <Typography
          variant="caption"
          color="text.secondary"
          sx={{ display: 'block', mb: 0.5, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
        >
          {task.description}
        </Typography>
      )}

      {/* Confidence bar */}
      {task.confidenceScore !== undefined && (
        <Box sx={{ mb: 0.75 }}>
          <LinearProgress
            variant="determinate"
            value={task.confidenceScore * 100}
            sx={{
              height: 3,
              borderRadius: 2,
              bgcolor: '#e2e8f0',
              '& .MuiLinearProgress-bar': {
                bgcolor: task.confidenceScore >= 0.7 ? '#1a7a4a' : task.confidenceScore >= 0.5 ? '#d97706' : '#c0392b',
              },
            }}
          />
        </Box>
      )}

      {/* Footer: meta */}
      <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
        {task.assignedTo && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
            <User size={10} color="#94a3b8" />
            <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.65rem' }}>
              {task.assignedTo}
            </Typography>
          </Box>
        )}
        {task.dueDate && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
            <Calendar size={10} color={overdue ? '#c0392b' : '#94a3b8'} />
            <Typography variant="caption" sx={{ fontSize: '0.65rem', color: overdue ? '#c0392b' : 'text.secondary', fontWeight: overdue ? 600 : 400 }}>
              {new Date(task.dueDate).toLocaleDateString('de-CH')}
            </Typography>
          </Box>
        )}
        <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.65rem', ml: 'auto' }}>
          {new Date(task.createdAt).toLocaleDateString('de-CH')}
        </Typography>
      </Box>
    </Box>
  )
}
