import React, { useEffect, useState, useCallback } from 'react';
import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  Fab,
  FormControl,
  Grid,
  IconButton,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Tab,
  Tabs,
  TextField,
  Tooltip,
  Typography,
} from '@mui/material';
import {
  Add,
  ArrowBack,
  Build,
  CheckCircle,
  DeleteOutline,
  Edit,
  Error as ErrorIcon,
  MoreHoriz,
  PauseCircle,
  RemoveCircle,
  Star,
  Verified,
  Warning,
} from '@mui/icons-material';
import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { equipmentApi } from '../services/equipment';
import {
  AusruestungDetail,
  AusruestungWartungslog,
  AusruestungWartungslogArt,
  AusruestungStatus,
  AusruestungStatusLabel,
  UpdateAusruestungStatusPayload,
  CreateAusruestungWartungslogPayload,
} from '../types/equipment.types';
import { usePermissions } from '../hooks/usePermissions';
import { useNotification } from '../contexts/NotificationContext';

// -- Tab Panel ----------------------------------------------------------------

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => (
  <div role="tabpanel" hidden={value !== index}>
    {value === index && <Box sx={{ pt: 3 }}>{children}</Box>}
  </div>
);

// -- Status config ------------------------------------------------------------

const STATUS_ICONS: Record<AusruestungStatus, React.ReactElement> = {
  [AusruestungStatus.Einsatzbereit]: <CheckCircle color="success" />,
  [AusruestungStatus.Beschaedigt]:   <ErrorIcon color="error" />,
  [AusruestungStatus.InWartung]:     <PauseCircle color="warning" />,
  [AusruestungStatus.AusserDienst]:  <RemoveCircle color="action" />,
};

const STATUS_CHIP_COLOR: Record<AusruestungStatus, 'success' | 'error' | 'warning' | 'default'> = {
  [AusruestungStatus.Einsatzbereit]: 'success',
  [AusruestungStatus.Beschaedigt]:   'error',
  [AusruestungStatus.InWartung]:     'warning',
  [AusruestungStatus.AusserDienst]:  'default',
};

// -- Date helpers -------------------------------------------------------------

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

// -- Wartungslog Art config ---------------------------------------------------

const WARTUNG_ART_CHIP_COLOR: Record<AusruestungWartungslogArt, 'info' | 'warning' | 'default'> = {
  'Prüfung':    'info',
  'Reparatur':  'warning',
  'Sonstiges':  'default',
};

const WARTUNG_ART_ICONS: Record<string, React.ReactElement> = {
  'Prüfung':   <Verified color="info" />,
  'Reparatur': <Build color="warning" />,
  'Sonstiges': <MoreHoriz color="action" />,
  default:     <Build color="action" />,
};

const ERGEBNIS_CHIP_COLOR: Record<string, 'success' | 'warning' | 'error'> = {
  bestanden:                'success',
  bestanden_mit_maengeln:   'warning',
  nicht_bestanden:          'error',
};

const ERGEBNIS_LABEL: Record<string, string> = {
  bestanden:              'Bestanden',
  bestanden_mit_maengeln: 'Bestanden (mit Mängeln)',
  nicht_bestanden:        'Nicht bestanden',
};

// -- Uebersicht Tab -----------------------------------------------------------

interface UebersichtTabProps {
  equipment: AusruestungDetail;
  onStatusUpdated: () => void;
  canChangeStatus: boolean;
}

const UebersichtTab: React.FC<UebersichtTabProps> = ({ equipment, onStatusUpdated, canChangeStatus }) => {
  const [statusDialogOpen, setStatusDialogOpen] = useState(false);
  const [newStatus, setNewStatus]               = useState<AusruestungStatus>(equipment.status);
  const [bemerkung, setBemerkung]               = useState(equipment.status_bemerkung ?? '');
  const [saving, setSaving]                     = useState(false);
  const [saveError, setSaveError]               = useState<string | null>(null);

  const openDialog = () => {
    setNewStatus(equipment.status);
    setBemerkung(equipment.status_bemerkung ?? '');
    setSaveError(null);
    setStatusDialogOpen(true);
  };

  const closeDialog = () => {
    setSaveError(null);
    setStatusDialogOpen(false);
  };

  const handleSaveStatus = async () => {
    try {
      setSaving(true);
      setSaveError(null);
      const payload: UpdateAusruestungStatusPayload = { status: newStatus, bemerkung };
      await equipmentApi.updateStatus(equipment.id, payload);
      setStatusDialogOpen(false);
      onStatusUpdated();
    } catch {
      setSaveError('Status konnte nicht gespeichert werden.');
    } finally {
      setSaving(false);
    }
  };

  const isBeschaedigt = equipment.status === AusruestungStatus.Beschaedigt;

  // Inspection deadline
  const pruefTage = equipment.pruefung_tage_bis_faelligkeit;

  // Data grid fields
  const dataFields: { label: string; value: React.ReactNode }[] = [
    { label: 'Kategorie', value: equipment.kategorie_name },
    { label: 'Seriennummer', value: equipment.seriennummer ?? '---' },
    { label: 'Inventarnummer', value: equipment.inventarnummer ?? '---' },
    { label: 'Hersteller', value: equipment.hersteller ?? '---' },
    { label: 'Baujahr', value: equipment.baujahr ?? '---' },
    {
      label: 'Fahrzeug',
      value: equipment.fahrzeug_id ? (
        <Typography
          component={RouterLink}
          to={`/fahrzeuge/${equipment.fahrzeug_id}`}
          variant="body1"
          sx={{ color: 'primary.main', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
        >
          {equipment.fahrzeug_bezeichnung}
        </Typography>
      ) : '---',
    },
    ...(!equipment.fahrzeug_id ? [{ label: 'Standort', value: equipment.standort || '---' }] : []),
    {
      label: 'Wichtig',
      value: equipment.ist_wichtig ? (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Star fontSize="small" color="warning" /> Ja
        </Box>
      ) : 'Nein',
    },
    {
      label: 'Prüfintervall',
      value: equipment.pruef_intervall_monate
        ? `${equipment.pruef_intervall_monate} Monate`
        : '---',
    },
    { label: 'Letzte Prüfung', value: fmtDate(equipment.letzte_pruefung_am) },
    {
      label: 'Nächste Prüfung',
      value: equipment.naechste_pruefung_am ? (
        <Box>
          <Typography variant="body1">{fmtDate(equipment.naechste_pruefung_am)}</Typography>
          {pruefTage !== null && pruefTage < 0 && (
            <Chip
              size="small"
              color="error"
              icon={<Warning fontSize="small" />}
              label={`${Math.abs(pruefTage)} Tage überfällig`}
              sx={{ mt: 0.5 }}
            />
          )}
          {pruefTage !== null && pruefTage >= 0 && pruefTage <= 30 && (
            <Chip
              size="small"
              color="warning"
              label={`in ${pruefTage} Tagen`}
              sx={{ mt: 0.5 }}
            />
          )}
          {pruefTage !== null && pruefTage > 30 && (
            <Chip
              size="small"
              color="success"
              label={`in ${pruefTage} Tagen`}
              sx={{ mt: 0.5 }}
            />
          )}
        </Box>
      ) : (
        <Chip size="small" color="default" label="Nicht festgelegt" />
      ),
    },
    { label: 'Bemerkung', value: equipment.bemerkung ?? '---' },
  ];

  return (
    <Box>
      {isBeschaedigt && (
        <Alert severity="error" icon={<ErrorIcon />} sx={{ mb: 2 }}>
          <strong>Beschädigt</strong> --- dieses Gerät ist nicht einsatzbereit.
          {equipment.status_bemerkung && ` Bemerkung: ${equipment.status_bemerkung}`}
        </Alert>
      )}

      {/* Status panel */}
      <Paper variant="outlined" sx={{ p: 2, mb: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            {STATUS_ICONS[equipment.status]}
            <Box>
              <Typography variant="subtitle1" fontWeight={600}>Aktueller Status</Typography>
              <Chip
                label={AusruestungStatusLabel[equipment.status]}
                color={STATUS_CHIP_COLOR[equipment.status]}
                size="small"
              />
              {equipment.status_bemerkung && (
                <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                  {equipment.status_bemerkung}
                </Typography>
              )}
            </Box>
          </Box>
          {canChangeStatus && (
            <Button variant="outlined" size="small" onClick={openDialog}>
              Status ändern
            </Button>
          )}
        </Box>
      </Paper>

      {/* Equipment data grid */}
      <Grid container spacing={2}>
        {dataFields.map(({ label, value }) => (
          <Grid item xs={12} sm={6} md={4} key={label}>
            <Typography variant="caption" color="text.secondary" textTransform="uppercase">
              {label}
            </Typography>
            {typeof value === 'string' || typeof value === 'number' ? (
              <Typography variant="body1">{value}</Typography>
            ) : (
              <Box>{value}</Box>
            )}
          </Grid>
        ))}
      </Grid>

      {/* Status change dialog */}
      <Dialog open={statusDialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
        <DialogTitle>Gerätestatus ändern</DialogTitle>
        <DialogContent>
          {saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
          <FormControl fullWidth sx={{ mb: 2, mt: 1 }}>
            <InputLabel id="status-select-label">Neuer Status</InputLabel>
            <Select
              labelId="status-select-label"
              label="Neuer Status"
              value={newStatus}
              onChange={(e) => setNewStatus(e.target.value as AusruestungStatus)}
            >
              {Object.values(AusruestungStatus).map((s) => (
                <MenuItem key={s} value={s}>{AusruestungStatusLabel[s]}</MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            label="Bemerkung (optional)"
            fullWidth
            multiline
            rows={3}
            value={bemerkung}
            onChange={(e) => setBemerkung(e.target.value)}
            placeholder="z.B. Gerät zur Reparatur eingeschickt, voraussichtlich ab 01.03. wieder einsatzbereit"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={closeDialog}>Abbrechen</Button>
          <Button
            variant="contained"
            onClick={handleSaveStatus}
            disabled={saving}
            startIcon={saving ? <CircularProgress size={16} /> : undefined}
          >
            Speichern
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

// -- Wartung Tab --------------------------------------------------------------

interface WartungTabProps {
  equipmentId: string;
  wartungslog: AusruestungWartungslog[];
  onAdded: () => void;
  canWrite: boolean;
}

const WartungTab: React.FC<WartungTabProps> = ({ equipmentId, wartungslog, onAdded, canWrite }) => {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [saving, setSaving]         = useState(false);
  const [saveError, setSaveError]   = useState<string | null>(null);

  const emptyForm: CreateAusruestungWartungslogPayload = {
    datum: '',
    art: 'Prüfung' as AusruestungWartungslogArt,
    beschreibung: '',
    ergebnis: undefined,
    kosten: undefined,
    pruefende_stelle: undefined,
  };

  const [form, setForm] = useState<CreateAusruestungWartungslogPayload>(emptyForm);

  const handleSubmit = async () => {
    if (!form.datum || !form.art || !form.beschreibung.trim()) {
      setSaveError('Datum, Art und Beschreibung sind erforderlich.');
      return;
    }
    try {
      setSaving(true);
      setSaveError(null);
      await equipmentApi.addWartungslog(equipmentId, {
        ...form,
        pruefende_stelle: form.pruefende_stelle || undefined,
        ergebnis: form.ergebnis || undefined,
      });
      setDialogOpen(false);
      setForm(emptyForm);
      onAdded();
    } catch {
      setSaveError('Wartungseintrag konnte nicht gespeichert werden.');
    } finally {
      setSaving(false);
    }
  };

  // Sort wartungslog by datum DESC
  const sorted = [...wartungslog].sort(
    (a, b) => new Date(b.datum).getTime() - new Date(a.datum).getTime()
  );

  return (
    <Box>
      {sorted.length === 0 ? (
        <Typography color="text.secondary">Keine Wartungseinträge vorhanden.</Typography>
      ) : (
        <Stack divider={<Divider />} spacing={0}>
          {sorted.map((entry) => {
            const artIcon = WARTUNG_ART_ICONS[entry.art ?? ''] ?? WARTUNG_ART_ICONS.default;
            const ergebnisColor = entry.ergebnis ? ERGEBNIS_CHIP_COLOR[entry.ergebnis] : undefined;
            const ergebnisLabel = entry.ergebnis ? ERGEBNIS_LABEL[entry.ergebnis] : undefined;
            return (
              <Box key={entry.id} sx={{ py: 2, display: 'flex', gap: 2, alignItems: 'flex-start' }}>
                <Box sx={{ mt: 0.25 }}>{artIcon}</Box>
                <Box sx={{ flexGrow: 1 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25, flexWrap: 'wrap' }}>
                    <Typography variant="subtitle2">{fmtDate(entry.datum)}</Typography>
                    {entry.art && (
                      <Chip
                        label={entry.art}
                        size="small"
                        color={WARTUNG_ART_CHIP_COLOR[entry.art] ?? 'default'}
                        variant="outlined"
                      />
                    )}
                    {ergebnisLabel && ergebnisColor && (
                      <Chip
                        label={ergebnisLabel}
                        size="small"
                        color={ergebnisColor}
                      />
                    )}
                  </Box>
                  <Typography variant="body2">{entry.beschreibung}</Typography>
                  <Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
                    {[
                      entry.kosten != null && `${entry.kosten.toFixed(2)} EUR`,
                      entry.pruefende_stelle && entry.pruefende_stelle,
                    ].filter(Boolean).join(' · ')}
                  </Typography>
                </Box>
              </Box>
            );
          })}
        </Stack>
      )}

      {canWrite && (
        <Fab
          color="primary"
          size="small"
          aria-label="Wartung eintragen"
          sx={{ position: 'fixed', bottom: 32, right: 32 }}
          onClick={() => { setForm(emptyForm); setSaveError(null); setDialogOpen(true); }}
        >
          <Add />
        </Fab>
      )}

      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle>Wartung / Prüfung eintragen</DialogTitle>
        <DialogContent>
          {saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
          <Grid container spacing={2} sx={{ mt: 0.5 }}>
            <Grid item xs={12} sm={6}>
              <TextField
                label="Datum *"
                type="date"
                fullWidth
                value={form.datum}
                onChange={(e) => setForm((f) => ({ ...f, datum: e.target.value }))}
                InputLabelProps={{ shrink: true }}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <FormControl fullWidth>
                <InputLabel>Art *</InputLabel>
                <Select
                  label="Art *"
                  value={form.art ?? ''}
                  onChange={(e) =>
                    setForm((f) => ({
                      ...f,
                      art: (e.target.value || undefined) as AusruestungWartungslogArt,
                    }))
                  }
                >
                  <MenuItem value="">--- Bitte wählen ---</MenuItem>
                  {(['Prüfung', 'Reparatur', 'Sonstiges'] as AusruestungWartungslogArt[]).map((a) => (
                    <MenuItem key={a} value={a}>{a}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={12}>
              <TextField
                label="Beschreibung *"
                fullWidth
                multiline
                rows={3}
                value={form.beschreibung}
                onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <FormControl fullWidth>
                <InputLabel>Ergebnis</InputLabel>
                <Select
                  label="Ergebnis"
                  value={form.ergebnis ?? ''}
                  onChange={(e) =>
                    setForm((f) => ({
                      ...f,
                      ergebnis: e.target.value || undefined,
                    }))
                  }
                >
                  <MenuItem value="">--- Kein Ergebnis ---</MenuItem>
                  <MenuItem value="bestanden">Bestanden</MenuItem>
                  <MenuItem value="bestanden_mit_maengeln">Bestanden (mit Mängeln)</MenuItem>
                  <MenuItem value="nicht_bestanden">Nicht bestanden</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                label="Kosten (EUR)"
                type="number"
                fullWidth
                value={form.kosten ?? ''}
                onChange={(e) =>
                  setForm((f) => ({
                    ...f,
                    kosten: e.target.value ? Number(e.target.value) : undefined,
                  }))
                }
                inputProps={{ min: 0, step: 0.01 }}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                label="Prüfende Stelle"
                fullWidth
                value={form.pruefende_stelle ?? ''}
                onChange={(e) => setForm((f) => ({ ...f, pruefende_stelle: e.target.value }))}
                placeholder="Name der prüfenden Stelle oder Person"
              />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
          <Button
            variant="contained"
            onClick={handleSubmit}
            disabled={saving}
            startIcon={saving ? <CircularProgress size={16} /> : undefined}
          >
            Speichern
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

// -- Main Page ----------------------------------------------------------------

function AusruestungDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { isAdmin, canChangeStatus } = usePermissions();
  const notification = useNotification();

  const [equipment, setEquipment]     = useState<AusruestungDetail | null>(null);
  const [loading, setLoading]         = useState(true);
  const [error, setError]             = useState<string | null>(null);
  const [activeTab, setActiveTab]     = useState(0);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteLoading, setDeleteLoading]       = useState(false);

  const fetchEquipment = useCallback(async () => {
    if (!id) return;
    try {
      setLoading(true);
      setError(null);
      const data = await equipmentApi.getById(id);
      setEquipment(data);
    } catch {
      setError('Gerät konnte nicht geladen werden.');
    } finally {
      setLoading(false);
    }
  }, [id]);

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

  const handleDelete = async () => {
    if (!id) return;
    try {
      setDeleteLoading(true);
      await equipmentApi.delete(id);
      notification.showSuccess('Gerät wurde erfolgreich gelöscht.');
      navigate('/ausruestung');
    } catch {
      notification.showError('Gerät konnte nicht gelöscht werden.');
      setDeleteDialogOpen(false);
      setDeleteLoading(false);
    }
  };

  if (loading) {
    return (
      <DashboardLayout>
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
          <CircularProgress />
        </Box>
      </DashboardLayout>
    );
  }

  if (error || !equipment) {
    return (
      <DashboardLayout>
        <Container maxWidth="lg">
          <Alert severity="error">{error ?? 'Gerät nicht gefunden.'}</Alert>
          <Button startIcon={<ArrowBack />} onClick={() => navigate('/ausruestung')} sx={{ mt: 2 }}>
            Zurück zur Übersicht
          </Button>
        </Container>
      </DashboardLayout>
    );
  }

  const hasOverdue =
    equipment.pruefung_tage_bis_faelligkeit !== null &&
    equipment.pruefung_tage_bis_faelligkeit < 0;

  const subtitle = [
    equipment.kategorie_name,
    equipment.seriennummer ? `SN: ${equipment.seriennummer}` : null,
  ].filter(Boolean).join(' · ');

  return (
    <DashboardLayout>
      <Container maxWidth="lg">
        <Button
          startIcon={<ArrowBack />}
          onClick={() => navigate('/ausruestung')}
          sx={{ mb: 2 }}
          size="small"
        >
          Ausrüstungsübersicht
        </Button>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
          <Build sx={{ fontSize: 36, color: 'text.secondary' }} />
          <Box>
            <Typography variant="h4" component="h1">
              {equipment.bezeichnung}
            </Typography>
            {subtitle && (
              <Typography variant="subtitle1" color="text.secondary">
                {subtitle}
              </Typography>
            )}
          </Box>
          <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
            <Chip
              icon={STATUS_ICONS[equipment.status]}
              label={AusruestungStatusLabel[equipment.status]}
              color={STATUS_CHIP_COLOR[equipment.status]}
            />
            {canChangeStatus && (
              <Tooltip title="Gerät bearbeiten">
                <IconButton
                  size="small"
                  onClick={() => navigate(`/ausruestung/${equipment.id}/bearbeiten`)}
                  aria-label="Gerät bearbeiten"
                >
                  <Edit />
                </IconButton>
              </Tooltip>
            )}
            {isAdmin && (
              <Tooltip title="Gerät löschen">
                <IconButton
                  size="small"
                  color="error"
                  onClick={() => setDeleteDialogOpen(true)}
                  aria-label="Gerät löschen"
                >
                  <DeleteOutline />
                </IconButton>
              </Tooltip>
            )}
          </Box>
        </Box>

        <Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 2 }}>
          <Tabs
            value={activeTab}
            onChange={(_, v) => setActiveTab(v)}
            aria-label="Ausrüstung Detailansicht"
          >
            <Tab label="Übersicht" />
            <Tab
              label={
                hasOverdue
                  ? <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                      Wartung <Warning color="error" fontSize="small" />
                    </Box>
                  : 'Wartung'
              }
            />
          </Tabs>
        </Box>

        <TabPanel value={activeTab} index={0}>
          <UebersichtTab
            equipment={equipment}
            onStatusUpdated={fetchEquipment}
            canChangeStatus={canChangeStatus}
          />
        </TabPanel>

        <TabPanel value={activeTab} index={1}>
          <WartungTab
            equipmentId={equipment.id}
            wartungslog={equipment.wartungslog ?? []}
            onAdded={fetchEquipment}
            canWrite={canChangeStatus}
          />
        </TabPanel>

        {/* Delete confirmation dialog */}
        <Dialog open={deleteDialogOpen} onClose={() => !deleteLoading && setDeleteDialogOpen(false)}>
          <DialogTitle>Gerät löschen</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Möchten Sie &apos;{equipment.bezeichnung}&apos; wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button
              onClick={() => setDeleteDialogOpen(false)}
              disabled={deleteLoading}
              autoFocus
            >
              Abbrechen
            </Button>
            <Button
              color="error"
              variant="contained"
              onClick={handleDelete}
              disabled={deleteLoading}
              startIcon={deleteLoading ? <CircularProgress size={16} /> : undefined}
            >
              Löschen
            </Button>
          </DialogActions>
        </Dialog>
      </Container>
    </DashboardLayout>
  );
}

export default AusruestungDetailPage;