import { Box, Chip, Typography } from '@mui/material'
import type { SuggestedQuestion } from '../../domain/assistant'

interface Props {
  suggestions: SuggestedQuestion[]
  onSelect: (question: string) => void
  disabled?: boolean
}

const CATEGORY_COLORS: Record<string, string> = {
  Match: '#4f46e5',
  Datenqualität: '#d97706',
  Priorisierung: '#1e3a5f',
  Empfehlung: '#1a7a4a',
  Risiko: '#c0392b',
  Tradeoffs: '#ea580c',
  Strategie: '#0891b2',
  Analyse: '#7c3aed',
  Erklärung: '#0891b2',
  Evidenz: '#64748b',
  Review: '#7c3aed',
  Konfidenz: '#d97706',
  Fehler: '#c0392b',
  Fehleranalyse: '#ea580c',
  Eskalation: '#ea580c',
  Prozess: '#64748b',
  Kosten: '#1a7a4a',
  Impact: '#d97706',
  Optimierung: '#1a7a4a',
  Aktion: '#1e3a5f',
  Überblick: '#64748b',
  Ranking: '#4f46e5',
}

export function AssistantPromptSuggestions({ suggestions, onSelect, disabled }: Props) {
  if (suggestions.length === 0) return null

  return (
    <Box sx={{ px: 2, py: 1.25 }}>
      <Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#94a3b8', display: 'block', mb: 0.75, fontSize: '0.65rem' }}>
        Vorschläge
      </Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
        {suggestions.map(s => {
          const catColor = CATEGORY_COLORS[s.category] ?? '#64748b'
          return (
            <Box
              key={s.id}
              onClick={() => !disabled && onSelect(s.question)}
              sx={{
                px: 1.25,
                py: 0.875,
                borderRadius: 1.5,
                border: '1px solid #e2e8f0',
                cursor: disabled ? 'default' : 'pointer',
                bgcolor: 'white',
                opacity: disabled ? 0.5 : 1,
                '&:hover': disabled ? {} : { bgcolor: '#f8fafc', borderColor: '#cbd5e1' },
                transition: 'all 0.1s ease',
                display: 'flex',
                alignItems: 'center',
                gap: 1,
              }}
            >
              <Box
                sx={{
                  width: 3,
                  height: 28,
                  borderRadius: 2,
                  bgcolor: catColor,
                  flexShrink: 0,
                  opacity: 0.7,
                }}
              />
              <Box sx={{ flex: 1, minWidth: 0 }}>
                <Typography variant="caption" sx={{ fontSize: '0.8rem', color: '#334155', lineHeight: 1.4 }}>
                  {s.question}
                </Typography>
                <Chip
                  label={s.category}
                  size="small"
                  sx={{ height: 16, fontSize: '0.6rem', bgcolor: `${catColor}14`, color: catColor, fontWeight: 600, ml: 0.5, verticalAlign: 'middle' }}
                />
              </Box>
            </Box>
          )
        })}
      </Box>
    </Box>
  )
}