import { Box, Chip, Typography } from '@mui/material'
import type { SuggestedQuestion } from '../../domain/assistant'
import { BADGE_COLORS, DS_BORDER, DS_SLATE, DS_SURFACE, DS_TEXT } from '../../lib/ds'

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

const CATEGORY_COLORS: Record<string, string> = {
  Match: '#4f46e5',
  Datenqualität: DS_TEXT.warning,
  Priorisierung: DS_TEXT.brand,
  Empfehlung: DS_TEXT.success,
  Risiko: DS_TEXT.error,
  Tradeoffs: '#ea580c',
  Strategie: '#0891b2',
  Analyse: BADGE_COLORS.preMarket,
  Erklärung: '#0891b2',
  Evidenz: DS_TEXT.muted,
  Review: BADGE_COLORS.preMarket,
  Konfidenz: DS_TEXT.warning,
  Fehler: DS_TEXT.error,
  Fehleranalyse: '#ea580c',
  Eskalation: '#ea580c',
  Prozess: DS_TEXT.muted,
  Kosten: DS_TEXT.success,
  Impact: DS_TEXT.warning,
  Optimierung: DS_TEXT.success,
  Aktion: DS_TEXT.brand,
  Überblick: DS_TEXT.muted,
  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: DS_TEXT.disabled, 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] ?? DS_TEXT.muted
          return (
            <Box
              key={s.id}
              onClick={() => !disabled && onSelect(s.question)}
              sx={{
                px: 1.25,
                py: 0.875,
                borderRadius: 1.5,
                border: `1px solid ${DS_BORDER.default}`,
                cursor: disabled ? 'default' : 'pointer',
                bgcolor: 'white',
                opacity: disabled ? 0.5 : 1,
                '&:hover': disabled ? {} : { bgcolor: DS_SURFACE.neutral.bg, borderColor: DS_BORDER.strong },
                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: DS_SLATE[700], 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>
  )
}