import { Box, Popover, Typography } from '@mui/material'
import type { AgentDirectoryEntry } from '../../domain/agentDirectory'
import { AgentAvatar } from './AgentAvatar'
import { GenericBadge } from '../shared/GenericBadge'
import { AGENT_LEVEL_LABELS, AGENT_ROLLOUT_LABELS } from '../../lib/constants'
import { DS_TEXT } from '../../lib/ds'

interface Props {
  agent: AgentDirectoryEntry | null
  anchorEl: HTMLElement | null
  onClose: () => void
}

/**
 * Kompakte Vorschau für Mitarbeitende ausserhalb des Kernteams.
 *
 * Bewusst kein Dossier: nur die sieben Kernteammitglieder besitzen ein
 * gepflegtes Personalblatt. Für die übrigen 29 zeigt die Vorschau ausschliesslich
 * das, was im Verzeichnis steht — Name, Funktion, Bereich, Aufbaustand. Es
 * werden keine Aufgaben, Kanäle oder Tätigkeiten erfunden.
 */
export function AgentPreviewPopover({ agent, anchorEl, onClose }: Props) {
  return (
    <Popover
      open={!!agent && !!anchorEl}
      anchorEl={anchorEl}
      onClose={onClose}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      transformOrigin={{ vertical: 'top', horizontal: 'center' }}
      slotProps={{ paper: { sx: { p: 2, maxWidth: 300, borderRadius: 2 } } }}
    >
      {agent && (
        <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start' }}>
          <AgentAvatar agent={agent} size="medium" loading="eager" />
          <Box sx={{ minWidth: 0 }}>
            <Typography sx={{ fontWeight: 700, fontSize: '0.9375rem', color: DS_TEXT.primary }}>
              {agent.name}
            </Typography>
            <Typography variant="body2" sx={{ color: DS_TEXT.secondary }}>
              {agent.role}
            </Typography>
            <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', mt: 0.5 }}>
              {AGENT_LEVEL_LABELS[agent.level] ?? agent.level}
            </Typography>

            <Box sx={{ mt: 1 }}>
              <GenericBadge
                label={AGENT_ROLLOUT_LABELS[agent.rollout] ?? agent.rollout}
                semanticVariant="muted"
              />
            </Box>

            <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', mt: 1.25 }}>
              Für diese Stufe ist noch kein Personaldossier hinterlegt.
            </Typography>
          </Box>
        </Box>
      )}
    </Popover>
  )
}