import { Box, Button, Paper, Typography } from '@mui/material'
import { MessageSquare } from 'lucide-react'
import type { Match, NextBestAction } from '../../domain/match'

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

interface Props {
  match: Match
  onCompare?: () => void
  onPipeline?: () => void
  onInquire?: () => void
}

export function NextActionsPanel({ match, onCompare, onPipeline, onInquire }: Props) {
  const engineActions: NextBestAction[] = [...(match.nextBestActions ?? [])].sort(
    (a, b) => (PRIORITY_ORDER[a.priority] ?? 2) - (PRIORITY_ORDER[b.priority] ?? 2)
  )

  return (
    <Paper sx={{ p: 2.5, mb: 2 }}>
      <Typography variant="h6" sx={{ fontWeight: 700, mb: 1.5 }}>Empfohlene Aktionen</Typography>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
        {onInquire && (
          <Button
            fullWidth
            size="small"
            variant="contained"
            startIcon={<MessageSquare size={14} />}
            onClick={onInquire}
            sx={{ justifyContent: 'flex-start', bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
          >
            Anfrage senden
          </Button>
        )}

        {engineActions.length > 0 && engineActions.map((action, i) => (
          <Box key={i}>
            <Button
              fullWidth
              size="small"
              variant="outlined"
              sx={{ justifyContent: 'flex-start' }}
            >
              {action.label}
            </Button>
            {action.description && (
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25, px: 1 }}>
                {action.description}
              </Typography>
            )}
          </Box>
        ))}

        {onPipeline && (
          <Button fullWidth size="small" variant="outlined" onClick={onPipeline} sx={{ justifyContent: 'flex-start' }}>
            Zur Pipeline hinzufügen
          </Button>
        )}
        {onCompare && (
          <Button fullWidth size="small" variant="outlined" onClick={onCompare} sx={{ justifyContent: 'flex-start' }}>
            Zum Vergleich hinzufügen
          </Button>
        )}
      </Box>
    </Paper>
  )
}