import { Box, Button, Card, CardContent, Chip, Typography } from '@mui/material'
import type { DashboardReviewTask } from '../../domain/dashboard'

interface ReviewTaskWidgetProps {
  tasks: DashboardReviewTask[]
  onNavigate: () => void
}

const PRIORITY_LABELS: Record<string, string> = {
  HIGH: 'Hoch',
  MEDIUM: 'Mittel',
  LOW: 'Niedrig',
}

const STATUS_LABELS: Record<string, string> = {
  PENDING: 'Ausstehend',
  IN_REVIEW: 'In Bearbeitung',
  COMPLETED: 'Abgeschlossen',
}

function priorityColor(priority: string): 'error' | 'warning' | 'default' {
  if (priority === 'HIGH') return 'error'
  if (priority === 'MEDIUM') return 'warning'
  return 'default'
}

function statusColor(status: string): 'warning' | 'info' | 'success' | 'default' {
  if (status === 'PENDING') return 'warning'
  if (status === 'IN_REVIEW') return 'info'
  if (status === 'COMPLETED') return 'success'
  return 'default'
}

const PRIORITY_ORDER: Record<string, number> = { HIGH: 0, MEDIUM: 1, LOW: 2 }

export function ReviewTaskWidget({ tasks, onNavigate }: ReviewTaskWidgetProps) {
  const sorted = [...tasks].sort(
    (a, b) => (PRIORITY_ORDER[a.priority] ?? 9) - (PRIORITY_ORDER[b.priority] ?? 9),
  )

  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            Review Queue
          </Typography>
          <Button size="small" onClick={onNavigate}>
            Alle anzeigen
          </Button>
        </Box>

        {sorted.length === 0 ? (
          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center', py: 2 }}>
            Keine offenen Aufgaben.
          </Typography>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {sorted.map(task => (
              <Box
                key={task.id}
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                  py: 0.75,
                  borderBottom: '1px solid',
                  borderColor: 'divider',
                  '&:last-child': { borderBottom: 'none' },
                }}
              >
                <Chip
                  label={PRIORITY_LABELS[task.priority] ?? task.priority}
                  size="small"
                  color={priorityColor(task.priority)}
                  sx={{ flexShrink: 0 }}
                />
                <Typography variant="body2" sx={{ flex: 1 }}>
                  {task.title}
                </Typography>
                <Chip
                  label={STATUS_LABELS[task.status] ?? task.status}
                  size="small"
                  color={statusColor(task.status)}
                  variant="outlined"
                  sx={{ flexShrink: 0 }}
                />
              </Box>
            ))}
          </Box>
        )}
      </CardContent>
    </Card>
  )
}
