import { Box, Button, CircularProgress } from '@mui/material'
import { CheckCircle, XCircle, AlertTriangle, ArrowUpCircle } from 'lucide-react'
import type { ReviewTask, ReviewTaskStatus } from '../../domain/review'
import type { UserRole } from '../../domain/enums'

interface ReviewActionToolbarProps {
  task: ReviewTask
  userRole: UserRole
  onAction: (status: ReviewTaskStatus, note?: string) => void
  isSubmitting?: boolean
}

export function ReviewActionToolbar({ task, userRole, onAction, isSubmitting }: ReviewActionToolbarProps) {
  const isActive = task.status === 'PENDING' || task.status === 'IN_REVIEW' || task.status === 'ESCALATED'
  const canApproveReject = isActive && (userRole === 'REVIEWER' || userRole === 'ORGANIZATION_ADMIN' || userRole === 'SUPER_ADMIN')
  const canEscalate = task.status !== 'ESCALATED' && task.status !== 'APPROVED' && task.status !== 'REJECTED'
    && (userRole === 'ORGANIZATION_ADMIN' || userRole === 'SUPER_ADMIN')
  const canRequestMore = task.status !== 'NEEDS_MORE_DATA' && task.status !== 'APPROVED' && task.status !== 'REJECTED'

  if (!canApproveReject && !canEscalate && !canRequestMore) return null

  return (
    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
      {canApproveReject && (
        <>
          <Button
            size="small"
            variant="contained"
            disabled={isSubmitting}
            startIcon={isSubmitting ? <CircularProgress size={12} /> : <CheckCircle size={14} />}
            onClick={() => onAction('APPROVED')}
            sx={{
              bgcolor: '#1a7a4a',
              '&:hover': { bgcolor: '#155f3a' },
              textTransform: 'none',
              fontSize: '0.75rem',
            }}
          >
            Genehmigen
          </Button>
          <Button
            size="small"
            variant="outlined"
            disabled={isSubmitting}
            startIcon={<XCircle size={14} />}
            onClick={() => onAction('REJECTED')}
            sx={{
              color: '#c0392b',
              borderColor: '#c0392b',
              '&:hover': { borderColor: '#a93226', bgcolor: '#fef2f2' },
              textTransform: 'none',
              fontSize: '0.75rem',
            }}
          >
            Ablehnen
          </Button>
        </>
      )}
      {canRequestMore && (
        <Button
          size="small"
          variant="outlined"
          disabled={isSubmitting}
          startIcon={<AlertTriangle size={14} />}
          onClick={() => onAction('NEEDS_MORE_DATA')}
          sx={{
            color: '#d97706',
            borderColor: '#d97706',
            '&:hover': { borderColor: '#b45309', bgcolor: '#fffbeb' },
            textTransform: 'none',
            fontSize: '0.75rem',
          }}
        >
          Mehr Daten
        </Button>
      )}
      {canEscalate && (
        <Button
          size="small"
          variant="outlined"
          disabled={isSubmitting}
          startIcon={<ArrowUpCircle size={14} />}
          onClick={() => onAction('ESCALATED')}
          sx={{
            color: '#ea580c',
            borderColor: '#ea580c',
            '&:hover': { borderColor: '#c2410c', bgcolor: '#fff7ed' },
            textTransform: 'none',
            fontSize: '0.75rem',
          }}
        >
          Eskalieren
        </Button>
      )}
    </Box>
  )
}
