import React, { useEffect, useState, useCallback, useMemo } from 'react';
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Checkbox,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  FormControlLabel,
  Grid,
  InputAdornment,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Tooltip,
  Typography,
} from '@mui/material';
import {
  Add,
  Check,
  Close,
  Edit,
  Delete,
  Search,
} from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { DataTable } from '../components/templates';
import type { Column } from '../components/templates';
import { atemschutzApi } from '../services/atemschutz';
import { membersService } from '../services/members';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { toGermanDate, fromGermanDate, isValidGermanDate } from '../utils/dateInput';
import type {
  AtemschutzUebersicht,
  AtemschutzStats,
  CreateAtemschutzPayload,
  UpdateAtemschutzPayload,
  UntersuchungErgebnis,
} from '../types/atemschutz.types';
import { UntersuchungErgebnisLabel } from '../types/atemschutz.types';
import { ConfirmDialog } from '../components/templates';
import type { MemberListItem } from '../types/member.types';

// ── Helpers ──────────────────────────────────────────────────────────────────

function formatDate(iso: string | null): string {
  if (!iso) return '—';
  return new Date(iso).toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  });
}

function getDisplayName(item: AtemschutzUebersicht): string {
  if (item.user_family_name || item.user_given_name) {
    return [item.user_family_name, item.user_given_name].filter(Boolean).join(', ');
  }
  return item.user_name || item.user_email;
}

type ValidityColor = 'success.main' | 'error.main' | 'warning.main' | 'text.secondary';

function getValidityColor(
  gueltigBis: string | null,
  tageRest: number | null,
  soonThresholdDays: number
): ValidityColor {
  if (!gueltigBis || tageRest === null) return 'text.secondary';
  if (tageRest < 0) return 'error.main';
  if (tageRest <= soonThresholdDays) return 'warning.main';
  return 'success.main';
}

// ── Initial form state ───────────────────────────────────────────────────────

interface AtemschutzFormState {
  user_id: string;
  atemschutz_lehrgang: boolean;
  lehrgang_datum: string;
  untersuchung_datum: string;
  untersuchung_gueltig_bis: string;
  untersuchung_ergebnis: UntersuchungErgebnis | '';
  leistungstest_datum: string;
  leistungstest_gueltig_bis: string;
  leistungstest_bestanden: boolean;
  bemerkung: string;
}

const EMPTY_FORM: AtemschutzFormState = {
  user_id: '',
  atemschutz_lehrgang: false,
  lehrgang_datum: '',
  untersuchung_datum: '',
  untersuchung_gueltig_bis: '',
  untersuchung_ergebnis: '',
  leistungstest_datum: '',
  leistungstest_gueltig_bis: '',
  leistungstest_bestanden: false,
  bemerkung: '',
};

// ── Stats Card ───────────────────────────────────────────────────────────────

interface StatCardProps {
  label: string;
  value: number;
  color?: string;
  bgcolor?: string;
}

const StatCard: React.FC<StatCardProps> = ({ label, value, color, bgcolor }) => (
  <Card sx={{ bgcolor: bgcolor || 'background.paper', height: '100%' }}>
    <CardContent sx={{ textAlign: 'center', py: 2 }}>
      <Typography variant="h3" fontWeight={700} color={color || 'text.primary'}>
        {value}
      </Typography>
      <Typography variant="body2" color={color ? color : 'text.secondary'} sx={{ mt: 0.5 }}>
        {label}
      </Typography>
    </CardContent>
  </Card>
);

// ── Main Page ────────────────────────────────────────────────────────────────

function Atemschutz() {
  const notification = useNotification();
  const { hasPermission } = usePermissionContext();
  const canViewAll = hasPermission('atemschutz:view');
  const canWrite = hasPermission('atemschutz:create');

  // Data state
  const [traeger, setTraeger] = useState<AtemschutzUebersicht[]>([]);
  const [stats, setStats] = useState<AtemschutzStats | null>(null);
  const [members, setMembers] = useState<MemberListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Filter state
  const [search, setSearch] = useState('');

  // Dialog state
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState<AtemschutzFormState>({ ...EMPTY_FORM });
  const [dialogLoading, setDialogLoading] = useState(false);
  const [dialogError, setDialogError] = useState<string | null>(null);
  const [dateErrors, setDateErrors] = useState<Partial<Record<keyof AtemschutzFormState, string>>>({});

  // Delete confirmation
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);

  // ── Data loading ─────────────────────────────────────────────────────────

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      if (canViewAll) {
        const [traegerData, statsData, membersData] = await Promise.all([
          atemschutzApi.getAll(),
          atemschutzApi.getStats(),
          membersService.getMembers({ pageSize: 500 }),
        ]);
        setTraeger(traegerData);
        setStats(statsData);
        setMembers(membersData.items);
      } else {
        const traegerData = await atemschutzApi.getAll();
        setTraeger(traegerData);
      }
    } catch {
      setError('Atemschutzdaten konnten nicht geladen werden. Bitte versuchen Sie es erneut.');
    } finally {
      setLoading(false);
    }
  }, [canViewAll]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // ── Filtering ────────────────────────────────────────────────────────────

  const filtered = useMemo(() => {
    if (!search.trim()) return traeger;
    const q = search.toLowerCase();
    return traeger.filter((item) => {
      const name = getDisplayName(item).toLowerCase();
      return name.includes(q);
    });
  }, [traeger, search]);

  // Members who do not already have an Atemschutz record
  const availableMembers = useMemo(() => {
    const existingUserIds = new Set(traeger.map((t) => t.user_id));
    return members.filter((m) => !existingUserIds.has(m.id));
  }, [members, traeger]);

  // ── Dialog handlers ──────────────────────────────────────────────────────

  const handleOpenCreate = () => {
    setEditingId(null);
    setForm({ ...EMPTY_FORM });
    setDialogError(null);
    setDialogOpen(true);
  };

  const handleOpenEdit = (item: AtemschutzUebersicht) => {
    setEditingId(item.id);
    setForm({
      user_id: item.user_id,
      atemschutz_lehrgang: item.atemschutz_lehrgang,
      lehrgang_datum: toGermanDate(item.lehrgang_datum),
      untersuchung_datum: toGermanDate(item.untersuchung_datum),
      untersuchung_gueltig_bis: toGermanDate(item.untersuchung_gueltig_bis),
      untersuchung_ergebnis: item.untersuchung_ergebnis || '',
      leistungstest_datum: toGermanDate(item.leistungstest_datum),
      leistungstest_gueltig_bis: toGermanDate(item.leistungstest_gueltig_bis),
      leistungstest_bestanden: item.leistungstest_bestanden || false,
      bemerkung: item.bemerkung || '',
    });
    setDialogError(null);
    setDialogOpen(true);
  };

  const handleDialogClose = () => {
    setDialogOpen(false);
    setEditingId(null);
    setForm({ ...EMPTY_FORM });
    setDialogError(null);
    setDateErrors({});
  };

  const handleFormChange = (
    field: keyof AtemschutzFormState,
    value: string | boolean
  ) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  /** Normalize dates before submit: parse DD.MM.YYYY → YYYY-MM-DD for API */
  const normalizeDate = (val: string | undefined): string | undefined => {
    if (!val) return undefined;
    const iso = fromGermanDate(val);
    return iso || undefined;
  };

  const handleSubmit = async () => {
    setDialogError(null);
    setDateErrors({});

    if (!editingId && !form.user_id) {
      setDialogError('Bitte ein Mitglied auswählen.');
      return;
    }

    // Validate date fields
    const newDateErrors: Partial<Record<keyof AtemschutzFormState, string>> = {};
    const dateFields: (keyof AtemschutzFormState)[] = [
      'lehrgang_datum', 'untersuchung_datum', 'untersuchung_gueltig_bis',
      'leistungstest_datum', 'leistungstest_gueltig_bis',
    ];
    for (const field of dateFields) {
      const val = form[field] as string;
      if (val && !isValidGermanDate(val)) {
        newDateErrors[field] = 'Ungültiges Datum (Format: TT.MM.JJJJ)';
      }
    }
    if (form.untersuchung_datum && form.untersuchung_gueltig_bis &&
        isValidGermanDate(form.untersuchung_datum) && isValidGermanDate(form.untersuchung_gueltig_bis)) {
      const from = new Date(fromGermanDate(form.untersuchung_datum)!);
      const to = new Date(fromGermanDate(form.untersuchung_gueltig_bis)!);
      if (to < from) {
        newDateErrors['untersuchung_gueltig_bis'] = 'Muss nach dem Untersuchungsdatum liegen';
      }
    }
    if (form.leistungstest_datum && form.leistungstest_gueltig_bis &&
        isValidGermanDate(form.leistungstest_datum) && isValidGermanDate(form.leistungstest_gueltig_bis)) {
      const from = new Date(fromGermanDate(form.leistungstest_datum)!);
      const to = new Date(fromGermanDate(form.leistungstest_gueltig_bis)!);
      if (to < from) {
        newDateErrors['leistungstest_gueltig_bis'] = 'Muss nach dem Leistungstestdatum liegen';
      }
    }
    if (Object.keys(newDateErrors).length > 0) {
      setDateErrors(newDateErrors);
      return;
    }

    setDialogLoading(true);
    try {
      if (editingId) {
        const payload: UpdateAtemschutzPayload = {
          atemschutz_lehrgang: form.atemschutz_lehrgang,
          lehrgang_datum: normalizeDate(form.lehrgang_datum || undefined),
          untersuchung_datum: normalizeDate(form.untersuchung_datum || undefined),
          untersuchung_gueltig_bis: normalizeDate(form.untersuchung_gueltig_bis || undefined),
          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || null,
          leistungstest_datum: normalizeDate(form.leistungstest_datum || undefined),
          leistungstest_gueltig_bis: normalizeDate(form.leistungstest_gueltig_bis || undefined),
          leistungstest_bestanden: form.leistungstest_bestanden,
          bemerkung: form.bemerkung || undefined,
        };
        await atemschutzApi.update(editingId, payload);
        notification.showSuccess('Atemschutzträger erfolgreich aktualisiert.');
      } else {
        const payload: CreateAtemschutzPayload = {
          user_id: form.user_id,
          atemschutz_lehrgang: form.atemschutz_lehrgang,
          lehrgang_datum: normalizeDate(form.lehrgang_datum || undefined),
          untersuchung_datum: normalizeDate(form.untersuchung_datum || undefined),
          untersuchung_gueltig_bis: normalizeDate(form.untersuchung_gueltig_bis || undefined),
          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || undefined,
          leistungstest_datum: normalizeDate(form.leistungstest_datum || undefined),
          leistungstest_gueltig_bis: normalizeDate(form.leistungstest_gueltig_bis || undefined),
          leistungstest_bestanden: form.leistungstest_bestanden,
          bemerkung: form.bemerkung || undefined,
        };
        await atemschutzApi.create(payload);
        notification.showSuccess('Atemschutzträger erfolgreich angelegt.');
      }
      handleDialogClose();
      fetchData();
    } catch (err: any) {
      const msg = err?.message || 'Ein Fehler ist aufgetreten.';
      setDialogError(msg);
      notification.showError(msg);
    } finally {
      setDialogLoading(false);
    }
  };

  // ── Delete handlers ──────────────────────────────────────────────────────

  const handleDeleteConfirm = async () => {
    if (!deleteId) return;
    setDeleteLoading(true);
    try {
      await atemschutzApi.delete(deleteId);
      notification.showSuccess('Atemschutzträger erfolgreich gelöscht.');
      setDeleteId(null);
      fetchData();
    } catch (err: any) {
      notification.showError(err?.message || 'Löschen fehlgeschlagen.');
    } finally {
      setDeleteLoading(false);
    }
  };

  // ── Render ───────────────────────────────────────────────────────────────

  return (
    <DashboardLayout>
      <Container maxWidth="lg">
        {/* Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
          <Box>
            <Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
              Atemschutzverwaltung
            </Typography>
            {!loading && !canViewAll && (
              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                Dein persönlicher Atemschutz-Status
              </Typography>
            )}
            {!loading && stats && canViewAll && (
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5 }}>
                <Typography variant="body2" color="text.secondary">
                  {stats.total} Gesamt
                </Typography>
                <Typography variant="body2" color="text.secondary">{'·'}</Typography>
                <Typography variant="body2" color="success.main" fontWeight={600}>
                  {stats.einsatzbereit} Einsatzbereit
                </Typography>
                <Typography variant="body2" color="text.secondary">{'·'}</Typography>
                <Typography
                  variant="body2"
                  color={stats.untersuchungAbgelaufen > 0 ? 'error.main' : 'text.secondary'}
                  fontWeight={stats.untersuchungAbgelaufen > 0 ? 600 : 400}
                >
                  {stats.untersuchungAbgelaufen} Untersuchung abgelaufen
                </Typography>
              </Box>
            )}
          </Box>
        </Box>

        {/* Stats cards */}
        {!loading && stats && canViewAll && (
          <Grid container spacing={2} sx={{ mb: 3 }}>
            <Grid item xs={6} sm={3}>
              <StatCard
                label="Einsatzbereit"
                value={stats.einsatzbereit}
                color="#fff"
                bgcolor="success.main"
              />
            </Grid>
            <Grid item xs={6} sm={3}>
              <StatCard label="Lehrgang absolviert" value={stats.mitLehrgang} />
            </Grid>
            <Grid item xs={6} sm={3}>
              <StatCard label="Untersuchung gültig" value={stats.untersuchungGueltig} />
            </Grid>
            <Grid item xs={6} sm={3}>
              <StatCard label="Leistungstest gültig" value={stats.leistungstestGueltig} />
            </Grid>
          </Grid>
        )}

        {/* Search bar */}
        {canViewAll && (
        <Box sx={{ mb: 3 }}>
          <TextField
            placeholder="Suchen (Name, E-Mail, Dienstgrad...)"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            size="small"
            sx={{ minWidth: 280, maxWidth: 480, width: '100%' }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Search />
                </InputAdornment>
              ),
            }}
          />
        </Box>
        )}

        {/* Loading state */}
        {loading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
            <CircularProgress />
          </Box>
        )}

        {/* Error state */}
        {!loading && error && (
          <Alert
            severity="error"
            sx={{ mb: 2 }}
            action={
              <Button color="inherit" size="small" onClick={fetchData}>
                Erneut versuchen
              </Button>
            }
          >
            {error}
          </Alert>
        )}

        {/* Empty state */}
        {!loading && !error && filtered.length === 0 && (
          <Box sx={{ textAlign: 'center', py: 8 }}>
            <Typography variant="h6" color="text.secondary">
              {traeger.length === 0
                ? 'Keine Atemschutzträger vorhanden'
                : 'Keine Ergebnisse gefunden'}
            </Typography>
          </Box>
        )}

        {/* Table */}
        {!loading && !error && filtered.length > 0 && (() => {
          const columns: Column<AtemschutzUebersicht>[] = [
            { key: 'user_name', label: 'Name', render: (item) => (
              <Typography variant="body2" fontWeight={500}>{getDisplayName(item)}</Typography>
            )},
            { key: 'atemschutz_lehrgang', label: 'Lehrgang', align: 'center', render: (item) => (
              item.atemschutz_lehrgang ? (
                <Tooltip title={item.lehrgang_datum ? `Lehrgang am ${formatDate(item.lehrgang_datum)}` : 'Lehrgang absolviert'}>
                  <Check color="success" fontSize="small" />
                </Tooltip>
              ) : (
                <Close color="disabled" fontSize="small" />
              )
            )},
            { key: 'untersuchung_gueltig_bis', label: 'Untersuchung gültig bis', render: (item) => (
              <Tooltip title={
                item.untersuchung_tage_rest !== null
                  ? item.untersuchung_tage_rest < 0
                    ? `Seit ${Math.abs(item.untersuchung_tage_rest)} Tagen abgelaufen`
                    : `Noch ${item.untersuchung_tage_rest} Tage gültig`
                  : 'Keine Untersuchung eingetragen'
              }>
                <Typography variant="body2" color={getValidityColor(item.untersuchung_gueltig_bis, item.untersuchung_tage_rest, 90)} fontWeight={500}>
                  {formatDate(item.untersuchung_gueltig_bis)}
                </Typography>
              </Tooltip>
            )},
            { key: 'leistungstest_gueltig_bis', label: 'Leistungstest gültig bis', render: (item) => (
              <Tooltip title={
                item.leistungstest_tage_rest !== null
                  ? item.leistungstest_tage_rest < 0
                    ? `Seit ${Math.abs(item.leistungstest_tage_rest)} Tagen abgelaufen`
                    : `Noch ${item.leistungstest_tage_rest} Tage gültig`
                  : 'Kein Leistungstest eingetragen'
              }>
                <Typography variant="body2" color={getValidityColor(item.leistungstest_gueltig_bis, item.leistungstest_tage_rest, 30)} fontWeight={500}>
                  {formatDate(item.leistungstest_gueltig_bis)}
                </Typography>
              </Tooltip>
            )},
            { key: 'einsatzbereit', label: 'Status', align: 'center', render: (item) => (
              <Chip
                label={item.einsatzbereit ? 'Einsatzbereit' : 'Nicht einsatzbereit'}
                color={item.einsatzbereit ? 'success' : 'error'}
                size="small"
                variant="filled"
              />
            )},
          ];

          if (canWrite) {
            columns.push({
              key: 'actions', label: 'Aktionen', align: 'right', sortable: false, searchable: false, render: (item) => (
                <>
                  <Tooltip title="Bearbeiten">
                    <Button size="small" onClick={(e) => { e.stopPropagation(); handleOpenEdit(item); }} sx={{ minWidth: 'auto', mr: 0.5 }}>
                      <Edit fontSize="small" />
                    </Button>
                  </Tooltip>
                  <Tooltip title="Löschen">
                    <Button size="small" color="error" onClick={(e) => { e.stopPropagation(); setDeleteId(item.id); }} sx={{ minWidth: 'auto' }}>
                      <Delete fontSize="small" />
                    </Button>
                  </Tooltip>
                </>
              ),
            });
          }

          return (
            <DataTable
              columns={columns}
              data={filtered}
              rowKey={(item) => item.id}
              emptyMessage={traeger.length === 0 ? 'Keine Atemschutzträger vorhanden' : 'Keine Ergebnisse gefunden'}
              searchEnabled={false}
              paginationEnabled={false}
            />
          );
        })()}

        {/* FAB to create */}
        {canWrite && (
        <ChatAwareFab
          color="primary"
          aria-label="Atemschutzträger hinzufügen"
          onClick={handleOpenCreate}
        >
          <Add />
        </ChatAwareFab>
        )}

        {/* ── Add / Edit Dialog ───────────────────────────────────────────── */}
        <Dialog
          open={dialogOpen}
          onClose={handleDialogClose}
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>
            {editingId ? 'Atemschutzträger bearbeiten' : 'Neuen Atemschutzträger anlegen'}
          </DialogTitle>
          <DialogContent>
            {dialogError && (
              <Alert severity="error" sx={{ mb: 2, mt: 1 }}>
                {dialogError}
              </Alert>
            )}

            <Grid container spacing={2} sx={{ mt: 0.5 }}>
              {/* User selection (only when creating) */}
              {!editingId && (
                <Grid item xs={12}>
                  <FormControl fullWidth size="small" required>
                    <InputLabel>Mitglied</InputLabel>
                    <Select
                      value={form.user_id}
                      label="Mitglied"
                      onChange={(e) => handleFormChange('user_id', e.target.value)}
                    >
                      {availableMembers.map((m) => {
                        const displayName = [m.family_name, m.given_name]
                          .filter(Boolean)
                          .join(', ') || m.name || m.email;
                        return (
                          <MenuItem key={m.id} value={m.id}>
                            {displayName}
                            {m.dienstgrad ? ` (${m.dienstgrad})` : ''}
                          </MenuItem>
                        );
                      })}
                      {availableMembers.length === 0 && (
                        <MenuItem disabled value="">
                          Keine verfügbaren Mitglieder
                        </MenuItem>
                      )}
                    </Select>
                  </FormControl>
                </Grid>
              )}

              {/* Lehrgang */}
              <Grid item xs={12}>
                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1 }}>
                  Lehrgang
                </Typography>
              </Grid>
              <Grid item xs={6}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={form.atemschutz_lehrgang}
                      onChange={(e) => handleFormChange('atemschutz_lehrgang', e.target.checked)}
                    />
                  }
                  label="Lehrgang absolviert"
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Lehrgang Datum"
                  size="small"
                  fullWidth
                  placeholder="TT.MM.JJJJ"
                  value={form.lehrgang_datum}
                  onChange={(e) => handleFormChange('lehrgang_datum', e.target.value)}
                  error={!!dateErrors.lehrgang_datum}
                  helperText={dateErrors.lehrgang_datum ?? 'Format: 01.03.2025'}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>

              {/* Untersuchung */}
              <Grid item xs={12}>
                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1, mt: 1 }}>
                  Untersuchung
                </Typography>
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Untersuchung Datum"
                  size="small"
                  fullWidth
                  placeholder="TT.MM.JJJJ"
                  value={form.untersuchung_datum}
                  onChange={(e) => handleFormChange('untersuchung_datum', e.target.value)}
                  error={!!dateErrors.untersuchung_datum}
                  helperText={dateErrors.untersuchung_datum ?? 'Format: 08.02.2023'}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Gültig bis"
                  size="small"
                  fullWidth
                  placeholder="TT.MM.JJJJ"
                  value={form.untersuchung_gueltig_bis}
                  onChange={(e) => handleFormChange('untersuchung_gueltig_bis', e.target.value)}
                  error={!!dateErrors.untersuchung_gueltig_bis}
                  helperText={dateErrors.untersuchung_gueltig_bis ?? 'Format: 08.02.2028'}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={12}>
                <FormControl fullWidth size="small">
                  <InputLabel>Ergebnis</InputLabel>
                  <Select
                    value={form.untersuchung_ergebnis}
                    label="Ergebnis"
                    onChange={(e) => handleFormChange('untersuchung_ergebnis', e.target.value)}
                  >
                    <MenuItem value="">— Nicht angegeben —</MenuItem>
                    {(Object.keys(UntersuchungErgebnisLabel) as UntersuchungErgebnis[]).map(
                      (key) => (
                        <MenuItem key={key} value={key}>
                          {UntersuchungErgebnisLabel[key]}
                        </MenuItem>
                      )
                    )}
                  </Select>
                </FormControl>
              </Grid>

              {/* Leistungstest */}
              <Grid item xs={12}>
                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1, mt: 1 }}>
                  Leistungstest
                </Typography>
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Leistungstest Datum"
                  size="small"
                  fullWidth
                  placeholder="TT.MM.JJJJ"
                  value={form.leistungstest_datum}
                  onChange={(e) => handleFormChange('leistungstest_datum', e.target.value)}
                  error={!!dateErrors.leistungstest_datum}
                  helperText={dateErrors.leistungstest_datum ?? 'Format: 25.08.2025'}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Gültig bis"
                  size="small"
                  fullWidth
                  placeholder="TT.MM.JJJJ"
                  value={form.leistungstest_gueltig_bis}
                  onChange={(e) => handleFormChange('leistungstest_gueltig_bis', e.target.value)}
                  error={!!dateErrors.leistungstest_gueltig_bis}
                  helperText={dateErrors.leistungstest_gueltig_bis ?? 'Format: 25.08.2026'}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={12}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={form.leistungstest_bestanden}
                      onChange={(e) => handleFormChange('leistungstest_bestanden', e.target.checked)}
                    />
                  }
                  label="Leistungstest bestanden"
                />
              </Grid>

              {/* Bemerkung */}
              <Grid item xs={12}>
                <TextField
                  label="Bemerkung"
                  multiline
                  rows={3}
                  size="small"
                  fullWidth
                  value={form.bemerkung}
                  onChange={(e) => handleFormChange('bemerkung', e.target.value)}
                />
              </Grid>
            </Grid>
          </DialogContent>
          <DialogActions>
            <Button onClick={handleDialogClose} disabled={dialogLoading}>
              Abbrechen
            </Button>
            <Button
              variant="contained"
              onClick={handleSubmit}
              disabled={dialogLoading}
              startIcon={dialogLoading ? <CircularProgress size={16} /> : undefined}
            >
              {editingId ? 'Speichern' : 'Anlegen'}
            </Button>
          </DialogActions>
        </Dialog>

        {/* ── Delete Confirmation Dialog ──────────────────────────────────── */}
        <ConfirmDialog
          open={deleteId !== null}
          onClose={() => setDeleteId(null)}
          onConfirm={handleDeleteConfirm}
          title="Atemschutzträger löschen"
          message="Soll dieser Atemschutzträger-Eintrag wirklich gelöscht werden? Diese Aktion kann nicht rückgängig gemacht werden."
          confirmLabel="Löschen"
          confirmColor="error"
          isLoading={deleteLoading}
        />
      </Container>
    </DashboardLayout>
  );
}

export default Atemschutz;
