import { useState } from 'react';
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from '@mui/material';
import { Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { fahrzeugTypenApi } from '../../services/fahrzeugTypen';
import type { FahrzeugTyp } from '../../types/checklist.types';
import { usePermissionContext } from '../../contexts/PermissionContext';
import { useNotification } from '../../contexts/NotificationContext';
import { FormDialog } from '../templates';

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

  const { data: fahrzeugTypen = [], isLoading } = useQuery({
    queryKey: ['fahrzeug-typen'],
    queryFn: fahrzeugTypenApi.getAll,
  });

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<FahrzeugTyp | null>(null);
  const [form, setForm] = useState({ name: '', beschreibung: '', icon: '' });
  const [deleteError, setDeleteError] = useState<string | null>(null);

  const createMutation = useMutation({
    mutationFn: (data: Partial<FahrzeugTyp>) => fahrzeugTypenApi.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
      setDialogOpen(false);
      showSuccess('Fahrzeugtyp erstellt');
    },
    onError: () => showError('Fehler beim Erstellen'),
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<FahrzeugTyp> }) =>
      fahrzeugTypenApi.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
      setDialogOpen(false);
      showSuccess('Fahrzeugtyp aktualisiert');
    },
    onError: () => showError('Fehler beim Aktualisieren'),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => fahrzeugTypenApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
      setDeleteError(null);
      showSuccess('Fahrzeugtyp gelöscht');
    },
    onError: (err: any) => {
      const msg = err?.response?.data?.message || 'Fehler beim Löschen — Typ ist möglicherweise noch in Verwendung.';
      setDeleteError(msg);
    },
  });

  const openCreate = () => {
    setEditing(null);
    setForm({ name: '', beschreibung: '', icon: '' });
    setDialogOpen(true);
  };

  const openEdit = (t: FahrzeugTyp) => {
    setEditing(t);
    setForm({ name: t.name, beschreibung: t.beschreibung ?? '', icon: t.icon ?? '' });
    setDialogOpen(true);
  };

  const handleSubmit = () => {
    if (!form.name.trim()) return;
    if (editing) {
      updateMutation.mutate({ id: editing.id, data: form });
    } else {
      createMutation.mutate(form);
    }
  };

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

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

  return (
    <Box>
      <Typography variant="h6" sx={{ mb: 2 }}>
        Fahrzeugtypen
      </Typography>

      {deleteError && (
        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setDeleteError(null)}>
          {deleteError}
        </Alert>
      )}

      {isLoading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
          <CircularProgress />
        </Box>
      ) : (
        <>
          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
            <Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
              Neuer Fahrzeugtyp
            </Button>
          </Box>

          <TableContainer component={Paper}>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Beschreibung</TableCell>
                  <TableCell>Icon</TableCell>
                  <TableCell align="right">Aktionen</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {fahrzeugTypen.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={4} align="center">
                      Keine Fahrzeugtypen vorhanden
                    </TableCell>
                  </TableRow>
                ) : (
                  fahrzeugTypen.map((t) => (
                    <TableRow key={t.id} hover>
                      <TableCell>{t.name}</TableCell>
                      <TableCell>{t.beschreibung ?? '–'}</TableCell>
                      <TableCell>{t.icon ?? '–'}</TableCell>
                      <TableCell align="right">
                        <IconButton size="small" onClick={() => openEdit(t)}>
                          <EditIcon fontSize="small" />
                        </IconButton>
                        <IconButton
                          size="small"
                          color="error"
                          onClick={() => deleteMutation.mutate(t.id)}
                        >
                          <DeleteIcon fontSize="small" />
                        </IconButton>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </TableContainer>
        </>
      )}

      <FormDialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        onSubmit={handleSubmit}
        title={editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
        isSubmitting={isSaving}
      >
          <TextField
            label="Name *"
            fullWidth
            value={form.name}
            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
          />
          <TextField
            label="Beschreibung"
            fullWidth
            value={form.beschreibung}
            onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
          />
          <TextField
            label="Icon"
            fullWidth
            value={form.icon}
            onChange={(e) => setForm((f) => ({ ...f, icon: e.target.value }))}
            placeholder="z.B. fire_truck"
          />
      </FormDialog>
    </Box>
  );
}
