import { useState } from 'react';
import {
  Alert,
  Box,
  Button,
  Checkbox,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Paper,
  Skeleton,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from '@mui/material';
import { Add, Delete, Edit, Save, Close } from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { kategorieApi } from '../../services/bookings';
import { usePermissionContext } from '../../contexts/PermissionContext';
import { useNotification } from '../../contexts/NotificationContext';
import type { BuchungsKategorie } from '../../types/booking.types';

export default function ModuleSettingsFahrzeugbuchungen() {
  const { isFeatureEnabled } = usePermissionContext();
  const notification = useNotification();
  const queryClient = useQueryClient();

  const { data: kategorien = [], isLoading, isError } = useQuery({
    queryKey: ['buchungskategorien-all'],
    queryFn: kategorieApi.getAll,
  });

  const [editRowId, setEditRowId] = useState<number | null>(null);
  const [editRowData, setEditRowData] = useState<Partial<BuchungsKategorie>>({});
  const [newKatDialog, setNewKatDialog] = useState(false);
  const [newKatForm, setNewKatForm] = useState({ bezeichnung: '', farbe: '#1976d2' });

  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: ['buchungskategorien-all'] });
    queryClient.invalidateQueries({ queryKey: ['buchungskategorien'] });
  };

  const createKatMutation = useMutation({
    mutationFn: (data: Omit<BuchungsKategorie, 'id'>) => kategorieApi.create(data),
    onSuccess: () => {
      notification.showSuccess('Kategorie erstellt');
      invalidate();
      setNewKatDialog(false);
      setNewKatForm({ bezeichnung: '', farbe: '#1976d2' });
    },
    onError: () => notification.showError('Fehler beim Erstellen'),
  });

  const updateKatMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<BuchungsKategorie> }) =>
      kategorieApi.update(id, data),
    onSuccess: () => {
      notification.showSuccess('Kategorie aktualisiert');
      invalidate();
      setEditRowId(null);
    },
    onError: () => notification.showError('Fehler beim Aktualisieren'),
  });

  const deleteKatMutation = useMutation({
    mutationFn: (id: number) => kategorieApi.delete(id),
    onSuccess: () => {
      notification.showSuccess('Kategorie deaktiviert');
      invalidate();
    },
    onError: () => notification.showError('Fehler beim Löschen'),
  });

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

  if (isLoading) {
    return (
      <Box>
        <Skeleton variant="rectangular" height={40} sx={{ mb: 2 }} />
        <Skeleton variant="rectangular" height={200} />
      </Box>
    );
  }

  if (isError) {
    return <Alert severity="error">Fehler beim Laden der Buchungskategorien</Alert>;
  }

  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
        <Typography variant="h6">Buchungskategorien</Typography>
        <Button
          startIcon={<Add />}
          variant="contained"
          size="small"
          onClick={() => setNewKatDialog(true)}
        >
          Neue Kategorie
        </Button>
      </Box>

      <TableContainer component={Paper} variant="outlined">
        <Table size="small">
          <TableHead>
            <TableRow>
              <TableCell>Bezeichnung</TableCell>
              <TableCell>Farbe</TableCell>
              <TableCell>Sortierung</TableCell>
              <TableCell>Aktiv</TableCell>
              <TableCell align="right">Aktionen</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {kategorien.map((kat) => {
              const isEditing = editRowId === kat.id;
              return (
                <TableRow key={kat.id}>
                  <TableCell>
                    {isEditing ? (
                      <TextField
                        size="small"
                        value={editRowData.bezeichnung ?? kat.bezeichnung}
                        onChange={(e) =>
                          setEditRowData((d) => ({ ...d, bezeichnung: e.target.value }))
                        }
                      />
                    ) : (
                      kat.bezeichnung
                    )}
                  </TableCell>
                  <TableCell>
                    {isEditing ? (
                      <input
                        type="color"
                        value={editRowData.farbe ?? kat.farbe}
                        onChange={(e) =>
                          setEditRowData((d) => ({ ...d, farbe: e.target.value }))
                        }
                        style={{ width: 40, height: 28, border: 'none', cursor: 'pointer' }}
                      />
                    ) : (
                      <Box
                        sx={{
                          width: 24,
                          height: 24,
                          borderRadius: 1,
                          bgcolor: kat.farbe,
                          border: '1px solid',
                          borderColor: 'divider',
                        }}
                      />
                    )}
                  </TableCell>
                  <TableCell>
                    {isEditing ? (
                      <TextField
                        size="small"
                        type="number"
                        value={editRowData.sort_order ?? kat.sort_order}
                        onChange={(e) =>
                          setEditRowData((d) => ({
                            ...d,
                            sort_order: parseInt(e.target.value) || 0,
                          }))
                        }
                        sx={{ width: 80 }}
                      />
                    ) : (
                      kat.sort_order
                    )}
                  </TableCell>
                  <TableCell>
                    {isEditing ? (
                      <Checkbox
                        checked={editRowData.aktiv ?? kat.aktiv}
                        onChange={(e) =>
                          setEditRowData((d) => ({ ...d, aktiv: e.target.checked }))
                        }
                      />
                    ) : (
                      <Checkbox checked={kat.aktiv} disabled />
                    )}
                  </TableCell>
                  <TableCell align="right">
                    {isEditing ? (
                      <Stack direction="row" spacing={0.5} justifyContent="flex-end">
                        <IconButton
                          size="small"
                          color="primary"
                          onClick={() =>
                            updateKatMutation.mutate({ id: kat.id, data: editRowData })
                          }
                        >
                          <Save fontSize="small" />
                        </IconButton>
                        <IconButton
                          size="small"
                          onClick={() => {
                            setEditRowId(null);
                            setEditRowData({});
                          }}
                        >
                          <Close fontSize="small" />
                        </IconButton>
                      </Stack>
                    ) : (
                      <Stack direction="row" spacing={0.5} justifyContent="flex-end">
                        <IconButton
                          size="small"
                          onClick={() => {
                            setEditRowId(kat.id);
                            setEditRowData({
                              bezeichnung: kat.bezeichnung,
                              farbe: kat.farbe,
                              sort_order: kat.sort_order,
                              aktiv: kat.aktiv,
                            });
                          }}
                        >
                          <Edit fontSize="small" />
                        </IconButton>
                        <IconButton
                          size="small"
                          color="error"
                          onClick={() => deleteKatMutation.mutate(kat.id)}
                        >
                          <Delete fontSize="small" />
                        </IconButton>
                      </Stack>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
            {kategorien.length === 0 && (
              <TableRow>
                <TableCell colSpan={5} align="center">
                  <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
                    Keine Kategorien vorhanden
                  </Typography>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>

      {/* New category dialog */}
      <Dialog
        open={newKatDialog}
        onClose={() => setNewKatDialog(false)}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle>Neue Kategorie</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
            <TextField
              fullWidth
              size="small"
              label="Bezeichnung"
              required
              value={newKatForm.bezeichnung}
              onChange={(e) =>
                setNewKatForm((f) => ({ ...f, bezeichnung: e.target.value }))
              }
            />
            <Box>
              <Typography variant="body2" sx={{ mb: 0.5 }}>
                Farbe
              </Typography>
              <input
                type="color"
                value={newKatForm.farbe}
                onChange={(e) => setNewKatForm((f) => ({ ...f, farbe: e.target.value }))}
                style={{ width: 60, height: 36, border: 'none', cursor: 'pointer' }}
              />
            </Box>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setNewKatDialog(false)}>Abbrechen</Button>
          <Button
            variant="contained"
            onClick={() =>
              createKatMutation.mutate({
                bezeichnung: newKatForm.bezeichnung,
                farbe: newKatForm.farbe,
                aktiv: true,
                sort_order: kategorien.length,
              })
            }
            disabled={!newKatForm.bezeichnung || createKatMutation.isPending}
          >
            {createKatMutation.isPending ? <CircularProgress size={20} /> : 'Erstellen'}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}
