import React, { useEffect, useState, useCallback, useMemo } from 'react';
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Checkbox,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Fab,
  FormControl,
  FormControlLabel,
  Grid,
  InputAdornment,
  InputLabel,
  MenuItem,
  Select,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from '@mui/material';
import {
  Add,
  Check,
  Close,
  Edit,
  Delete,
  Search,
} from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { atemschutzApi } from '../services/atemschutz';
import { membersService } from '../services/members';
import { useNotification } from '../contexts/NotificationContext';
import type {
  AtemschutzUebersicht,
  AtemschutzStats,
  CreateAtemschutzPayload,
  UpdateAtemschutzPayload,
  UntersuchungErgebnis,
} from '../types/atemschutz.types';
import { UntersuchungErgebnisLabel } from '../types/atemschutz.types';
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();

  // 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);

  // 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);
      const [traegerData, statsData, membersData] = await Promise.all([
        atemschutzApi.getAll(),
        atemschutzApi.getStats(),
        membersService.getMembers({ pageSize: 500 }),
      ]);
      setTraeger(traegerData);
      setStats(statsData);
      setMembers(membersData.items);
    } catch {
      setError('Atemschutzdaten konnten nicht geladen werden. Bitte versuchen Sie es erneut.');
    } finally {
      setLoading(false);
    }
  }, []);

  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();
      const email = item.user_email.toLowerCase();
      const dienstgrad = (item.dienstgrad || '').toLowerCase();
      return name.includes(q) || email.includes(q) || dienstgrad.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: item.lehrgang_datum || '',
      untersuchung_datum: item.untersuchung_datum || '',
      untersuchung_gueltig_bis: item.untersuchung_gueltig_bis || '',
      untersuchung_ergebnis: item.untersuchung_ergebnis || '',
      leistungstest_datum: item.leistungstest_datum || '',
      leistungstest_gueltig_bis: 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);
  };

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

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

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

    setDialogLoading(true);
    try {
      if (editingId) {
        const payload: UpdateAtemschutzPayload = {
          atemschutz_lehrgang: form.atemschutz_lehrgang,
          lehrgang_datum: form.lehrgang_datum || undefined,
          untersuchung_datum: form.untersuchung_datum || undefined,
          untersuchung_gueltig_bis: form.untersuchung_gueltig_bis || undefined,
          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || undefined,
          leistungstest_datum: form.leistungstest_datum || undefined,
          leistungstest_gueltig_bis: 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: form.lehrgang_datum || undefined,
          untersuchung_datum: form.untersuchung_datum || undefined,
          untersuchung_gueltig_bis: form.untersuchung_gueltig_bis || undefined,
          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || undefined,
          leistungstest_datum: form.leistungstest_datum || undefined,
          leistungstest_gueltig_bis: 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 && stats && (
              <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 && (
          <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 */}
        <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 && (
          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Dienstgrad</TableCell>
                  <TableCell align="center">Lehrgang</TableCell>
                  <TableCell>Untersuchung gültig bis</TableCell>
                  <TableCell>Leistungstest gültig bis</TableCell>
                  <TableCell align="center">Status</TableCell>
                  <TableCell align="right">Aktionen</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filtered.map((item) => {
                  const untersuchungColor = getValidityColor(
                    item.untersuchung_gueltig_bis,
                    item.untersuchung_tage_rest,
                    90
                  );
                  const leistungstestColor = getValidityColor(
                    item.leistungstest_gueltig_bis,
                    item.leistungstest_tage_rest,
                    30
                  );

                  return (
                    <TableRow key={item.id} hover>
                      <TableCell>
                        <Typography variant="body2" fontWeight={500}>
                          {getDisplayName(item)}
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                          {item.user_email}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2">
                          {item.dienstgrad || '—'}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        {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" />
                        )}
                      </TableCell>
                      <TableCell>
                        <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={untersuchungColor} fontWeight={500}>
                            {formatDate(item.untersuchung_gueltig_bis)}
                          </Typography>
                        </Tooltip>
                      </TableCell>
                      <TableCell>
                        <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={leistungstestColor} fontWeight={500}>
                            {formatDate(item.leistungstest_gueltig_bis)}
                          </Typography>
                        </Tooltip>
                      </TableCell>
                      <TableCell align="center">
                        <Chip
                          label={item.einsatzbereit ? 'Einsatzbereit' : 'Nicht einsatzbereit'}
                          color={item.einsatzbereit ? 'success' : 'error'}
                          size="small"
                          variant="filled"
                        />
                      </TableCell>
                      <TableCell align="right">
                        <Tooltip title="Bearbeiten">
                          <Button
                            size="small"
                            onClick={() => handleOpenEdit(item)}
                            sx={{ minWidth: 'auto', mr: 0.5 }}
                          >
                            <Edit fontSize="small" />
                          </Button>
                        </Tooltip>
                        <Tooltip title="Löschen">
                          <Button
                            size="small"
                            color="error"
                            onClick={() => setDeleteId(item.id)}
                            sx={{ minWidth: 'auto' }}
                          >
                            <Delete fontSize="small" />
                          </Button>
                        </Tooltip>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
        )}

        {/* FAB to create */}
        <Fab
          color="primary"
          aria-label="Atemschutzträger hinzufügen"
          sx={{ position: 'fixed', bottom: 32, right: 32 }}
          onClick={handleOpenCreate}
        >
          <Add />
        </Fab>

        {/* ── 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"
                  type="date"
                  size="small"
                  fullWidth
                  value={form.lehrgang_datum}
                  onChange={(e) => handleFormChange('lehrgang_datum', e.target.value)}
                  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"
                  type="date"
                  size="small"
                  fullWidth
                  value={form.untersuchung_datum}
                  onChange={(e) => handleFormChange('untersuchung_datum', e.target.value)}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Gültig bis"
                  type="date"
                  size="small"
                  fullWidth
                  value={form.untersuchung_gueltig_bis}
                  onChange={(e) => handleFormChange('untersuchung_gueltig_bis', e.target.value)}
                  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"
                  type="date"
                  size="small"
                  fullWidth
                  value={form.leistungstest_datum}
                  onChange={(e) => handleFormChange('leistungstest_datum', e.target.value)}
                  InputLabelProps={{ shrink: true }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label="Gültig bis"
                  type="date"
                  size="small"
                  fullWidth
                  value={form.leistungstest_gueltig_bis}
                  onChange={(e) => handleFormChange('leistungstest_gueltig_bis', e.target.value)}
                  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 ──────────────────────────────────── */}
        <Dialog open={deleteId !== null} onClose={() => setDeleteId(null)}>
          <DialogTitle>Atemschutzträger löschen</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Soll dieser Atemschutzträger-Eintrag wirklich gelöscht werden? Diese Aktion kann
              nicht rückgängig gemacht werden.
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setDeleteId(null)} disabled={deleteLoading}>
              Abbrechen
            </Button>
            <Button
              color="error"
              variant="contained"
              onClick={handleDeleteConfirm}
              disabled={deleteLoading}
              startIcon={deleteLoading ? <CircularProgress size={16} /> : undefined}
            >
              Löschen
            </Button>
          </DialogActions>
        </Dialog>
      </Container>
    </DashboardLayout>
  );
}

export default Atemschutz;