property-match/src/components/team/AgentDossierHeader.tsx

import { useState } from 'react'
import { Box, FormControlLabel, Switch, Typography } from '@mui/material'
import { AlertTriangle, Mail } from 'lucide-react'
import type { TeamAgent } from '../../domain/teamAgent'
import { AgentStatus } from '../../domain/teamAgent'
import { AgentAvatar } from './AgentAvatar'
import { AgentAutonomyBadge, AgentStatusBadge } from './AgentBadges'
import { ConfirmDialog } from '../ui'
import { useSetAgentActive } from '../../hooks/useTeamAgents'
import { DS_BG, DS_BORDER, DS_SURFACE, DS_TEXT } from '../../lib/ds'
import { formatTeamDateTime } from '../../lib/teamClock'

interface Props {
  agent: TeamAgent
}

function MetaField({ label, value }: { label: string; value: string }) {
  return (
    <Box>
      <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block' }}>
        {label}
      </Typography>
      <Typography variant="body2" sx={{ color: DS_TEXT.primary, fontWeight: 600 }}>
        {value}
      </Typography>
    </Box>
  )
}

/**
 * Kopfbereich des Personalblatts (§7.3).
 *
 * Das Pausieren läuft über einen Bestätigungsdialog mit Hinweis auf die
 * betroffenen Aufgaben — ein versehentlich pausierter Fristen-Wächter würde
 * echte Termine verpassen (§7.5, §17.3).
 */
export function AgentDossierHeader({ agent }: Props) {
  const [confirmPause, setConfirmPause] = useState(false)
  const setActive = useSetAgentActive()
  const isActive = agent.status === AgentStatus.ACTIVE
  const enabledTasks = agent.tasks.filter(t => t.enabled).length

  const handleToggle = (next: boolean) => {
    if (next) setActive.mutate({ id: agent.id, active: true })
    else setConfirmPause(true)
  }

  return (
    <Box sx={{ px: 3, pt: 2.5, pb: 2, bgcolor: DS_BG.surface, borderBottom: `1px solid ${DS_BORDER.default}` }}>
      <Box sx={{ display: 'flex', gap: 2.5, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        <AgentAvatar agent={agent} size="large" status={agent.status} tone={agent.avatarTone} showStatus />

        <Box sx={{ flex: 1, minWidth: 240 }}>
          <Typography component="h2" sx={{ fontWeight: 700, fontSize: '1.25rem', color: DS_TEXT.primary, lineHeight: 1.25 }}>
            {agent.name}
          </Typography>
          <Typography variant="body2" sx={{ color: DS_TEXT.secondary }}>
            {agent.role}
          </Typography>

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
            <Mail size={13} color={DS_TEXT.muted} aria-hidden />
            <Typography variant="caption" sx={{ color: DS_TEXT.secondary }}>{agent.email}</Typography>
          </Box>

          <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap', mt: 1 }}>
            <AgentStatusBadge status={agent.status} />
            <AgentAutonomyBadge autonomy={agent.autonomyLevel} note={agent.autonomyNote} />
          </Box>
        </Box>

        <FormControlLabel
          control={
            <Switch
              checked={isActive}
              disabled={setActive.isPending}
              onChange={(e) => handleToggle(e.target.checked)}
              slotProps={{ input: { 'aria-label': `${agent.name} aktiv` } }}
            />
          }
          label="Agent aktiv"
          sx={{ mr: 0, '& .MuiFormControlLabel-label': { fontWeight: 600, fontSize: '0.875rem' } }}
        />
      </Box>

      {/* Stammdaten */}
      <Box
        sx={{
          display: 'grid',
          gap: 1.5,
          gridTemplateColumns: { xs: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
          mt: 2,
          pt: 2,
          borderTop: `1px solid ${DS_BORDER.muted}`,
        }}
      >
        <MetaField label="Personalnummer" value={agent.personnelNumber} />
        <MetaField label="Abteilung" value={agent.department} />
        <MetaField label="Autonomiegrad" value={agent.autonomyNote} />
        <MetaField
          label="Letzter Lauf"
          value={agent.lastRun ? formatTeamDateTime(agent.lastRun) : 'Noch nicht gelaufen'}
        />
      </Box>

      {/* Warnung im Personalblatt, solange pausiert (§7.5) */}
      {!isActive && (
        <Box
          sx={{
            display: 'flex',
            gap: 1,
            alignItems: 'flex-start',
            mt: 2,
            p: 1.5,
            borderRadius: 2,
            bgcolor: DS_SURFACE.warning.bg,
            border: `1px solid ${DS_SURFACE.warning.border}`,
          }}
        >
          <AlertTriangle size={16} color={DS_TEXT.warning} aria-hidden style={{ flexShrink: 0, marginTop: 1 }} />
          <Typography variant="body2" sx={{ color: DS_TEXT.warningDark }}>
            {agent.name} ist pausiert. Bis zur Reaktivierung werden keine Aufgaben ausgeführt und es
            entstehen keine neuen Vorgänge.
          </Typography>
        </Box>
      )}

      <ConfirmDialog
        open={confirmPause}
        destructive
        title={`${agent.name} pausieren?`}
        message={`${enabledTasks} aktive Aufgaben werden ausgesetzt, bis Sie ${agent.name} wieder aktivieren. Laufende Fristen und Anfragen werden in dieser Zeit nicht bearbeitet. Der Vorgang wird protokolliert.`}
        confirmLabel="Pausieren"
        onConfirm={() => {
          setActive.mutate({ id: agent.id, active: false })
          setConfirmPause(false)
        }}
        onCancel={() => setConfirmPause(false)}
      />
    </Box>
  )
}