import { useState } from 'react';
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from '@mui/material';
import { Add as AddIcon, Delete, Edit } from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { ausruestungTypenApi, AusruestungTyp } from '../../services/ausruestungTypen';
import { usePermissionContext } from '../../contexts/PermissionContext';
import { useNotification } from '../../contexts/NotificationContext';
import { ConfirmDialog, FormDialog } from '../templates';

export default function ModuleSettingsAusruestung() {
  const { isFeatureEnabled } = usePermissionContext();
  const { showSuccess, showError } = useNotification();
  const queryClient = useQueryClient();

  const { data: typen = [], isLoading, isError } = useQuery({
    queryKey: ['ausruestungTypen'],
    queryFn: ausruestungTypenApi.getAll,
  });

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingTyp, setEditingTyp] = useState<AusruestungTyp | null>(null);
  const [formName, setFormName] = useState('');
  const [formBeschreibung, setFormBeschreibung] = useState('');
  const [formIcon, setFormIcon] = useState('');

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deletingTyp, setDeletingTyp] = useState<AusruestungTyp | null>(null);

  const createMutation = useMutation({
    mutationFn: (data: { name: string; beschreibung?: string; icon?: string }) =>
      ausruestungTypenApi.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
      showSuccess('Typ erstellt');
      closeDialog();
    },
    onError: () => showError('Typ konnte nicht erstellt werden'),
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<{ name: string; beschreibung: string; icon: string }> }) =>
      ausruestungTypenApi.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
      showSuccess('Typ aktualisiert');
      closeDialog();
    },
    onError: () => showError('Typ konnte nicht aktualisiert werden'),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => ausruestungTypenApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
      showSuccess('Typ gelöscht');
      setDeleteDialogOpen(false);
      setDeletingTyp(null);
    },
    onError: () => showError('Typ konnte nicht gelöscht werden. Möglicherweise ist er noch Geräten zugeordnet.'),
  });

  const openAddDialog = () => {
    setEditingTyp(null);
    setFormName('');
    setFormBeschreibung('');
    setFormIcon('');
    setDialogOpen(true);
  };

  const openEditDialog = (typ: AusruestungTyp) => {
    setEditingTyp(typ);
    setFormName(typ.name);
    setFormBeschreibung(typ.beschreibung ?? '');
    setFormIcon(typ.icon ?? '');
    setDialogOpen(true);
  };

  const closeDialog = () => {
    setDialogOpen(false);
    setEditingTyp(null);
  };

  const handleSave = () => {
    if (!formName.trim()) return;
    const data = {
      name: formName.trim(),
      beschreibung: formBeschreibung.trim() || undefined,
      icon: formIcon.trim() || undefined,
    };
    if (editingTyp) {
      updateMutation.mutate({ id: editingTyp.id, data });
    } else {
      createMutation.mutate(data);
    }
  };

  const openDeleteDialog = (typ: AusruestungTyp) => {
    setDeletingTyp(typ);
    setDeleteDialogOpen(true);
  };

  const isSaving = createMutation.isPending || updateMutation.isPending;

  if (!isFeatureEnabled('ausruestung')) {
    return <Alert severity="warning">Im Wartungsmodus</Alert>;
  }

  return (
    <Box>
      <Typography variant="h6" gutterBottom>Ausrüstungstypen</Typography>

      {isLoading && (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
          <CircularProgress />
        </Box>
      )}

      {isError && (
        <Alert severity="error" sx={{ mb: 2 }}>
          Typen konnten nicht geladen werden.
        </Alert>
      )}

      {!isLoading && !isError && (
        <Paper variant="outlined">
          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Beschreibung</TableCell>
                  <TableCell>Icon</TableCell>
                  <TableCell align="right">Aktionen</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {typen.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={4} align="center">
                      <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
                        Noch keine Typen vorhanden.
                      </Typography>
                    </TableCell>
                  </TableRow>
                )}
                {typen.map((typ) => (
                  <TableRow key={typ.id}>
                    <TableCell>{typ.name}</TableCell>
                    <TableCell>{typ.beschreibung || '---'}</TableCell>
                    <TableCell>{typ.icon || '---'}</TableCell>
                    <TableCell align="right">
                      <Tooltip title="Bearbeiten">
                        <IconButton size="small" onClick={() => openEditDialog(typ)}>
                          <Edit fontSize="small" />
                        </IconButton>
                      </Tooltip>
                      <Tooltip title="Löschen">
                        <IconButton size="small" color="error" onClick={() => openDeleteDialog(typ)}>
                          <Delete fontSize="small" />
                        </IconButton>
                      </Tooltip>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          <Box sx={{ p: 1.5, display: 'flex', justifyContent: 'flex-end' }}>
            <Button variant="contained" size="small" startIcon={<AddIcon />} onClick={openAddDialog}>
              Neuer Typ
            </Button>
          </Box>
        </Paper>
      )}

      {/* Add/Edit dialog */}
      <FormDialog
        open={dialogOpen}
        onClose={closeDialog}
        onSubmit={handleSave}
        title={editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
        isSubmitting={isSaving}
      >
          <TextField
            label="Name *"
            fullWidth
            value={formName}
            onChange={(e) => setFormName(e.target.value)}
            inputProps={{ maxLength: 100 }}
          />
          <TextField
            label="Beschreibung"
            fullWidth
            multiline
            rows={2}
            value={formBeschreibung}
            onChange={(e) => setFormBeschreibung(e.target.value)}
          />
          <TextField
            label="Icon (MUI Icon-Name)"
            fullWidth
            value={formIcon}
            onChange={(e) => setFormIcon(e.target.value)}
            placeholder="z.B. Build, LocalFireDepartment"
          />
      </FormDialog>

      {/* Delete confirmation dialog */}
      <ConfirmDialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        onConfirm={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
        title="Typ löschen"
        message={<>Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen? Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.</>}
        confirmLabel="Löschen"
        confirmColor="error"
        isLoading={deleteMutation.isPending}
      />
    </Box>
  );
}
