import { useState, useEffect } from 'react';
import {
  Box, Card, CardContent, Typography, Switch, FormControlLabel,
  TextField, Button, Alert, CircularProgress, Chip,
} from '@mui/material';
import BuildIcon from '@mui/icons-material/Build';
import GermanDateField from '../shared/GermanDateField';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { settingsApi } from '../../services/settings';
import { permissionsApi } from '../../services/permissions';
import { useNotification } from '../../contexts/NotificationContext';
import type { PermissionMatrix, FeatureGroup } from '../../types/permissions.types';

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

  const { data: setting, isLoading } = useQuery({
    queryKey: ['admin', 'settings', 'service_mode'],
    queryFn: () => settingsApi.get('service_mode'),
  });

  const { data: matrix, isLoading: matrixLoading } = useQuery<PermissionMatrix>({
    queryKey: ['admin-permission-matrix'],
    queryFn: permissionsApi.getMatrix,
  });

  const currentValue = setting?.value ?? { active: false, message: '' };
  const [active, setActive] = useState<boolean>(currentValue.active ?? false);
  const [message, setMessage] = useState<string>(currentValue.message ?? '');
  const [endsAt, setEndsAt] = useState<string>('');

  // Sync state when data loads
  useEffect(() => {
    if (setting?.value) {
      setActive(setting.value.active ?? false);
      setMessage(setting.value.message ?? '');
      setEndsAt(setting.value.ends_at ?? '');
    }
  }, [setting]);

  const mutation = useMutation({
    mutationFn: (value: { active: boolean; message: string; ends_at?: string | null }) =>
      settingsApi.update('service_mode', value),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['service-mode'] });
      queryClient.invalidateQueries({ queryKey: ['admin', 'settings', 'service_mode'] });
      showSuccess(active ? 'Wartungsmodus aktiviert' : 'Wartungsmodus deaktiviert');
    },
    onError: () => showError('Einstellung konnte nicht gespeichert werden'),
  });

  const handleSave = () => {
    mutation.mutate({ active, message, ends_at: endsAt || null });
  };

  const maintenanceMutation = useMutation({
    mutationFn: ({ featureGroup, active }: { featureGroup: string; active: boolean }) =>
      permissionsApi.setMaintenanceFlag(featureGroup, active),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-permission-matrix'] });
      queryClient.invalidateQueries({ queryKey: ['my-permissions'] });
      showSuccess('Feature-Wartungsmodus aktualisiert');
    },
    onError: () => showError('Fehler beim Aktualisieren des Feature-Wartungsmodus'),
  });

  if (isLoading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
  }

  return (
    <Box sx={{ maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 3 }}>
      <Card>
        <CardContent>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
            <BuildIcon color={active ? 'error' : 'action'} />
            <Typography variant="h6">Globaler Wartungsmodus</Typography>
          </Box>

          {active && (
            <Alert severity="warning" sx={{ mb: 2 }}>
              Wartungsmodus ist aktiv. Normale Benutzer sehen die Wartungsseite.
            </Alert>
          )}

          {active && endsAt && (
            <Alert severity="info" sx={{ mb: 2 }}>
              Wartungsmodus endet automatisch am {new Date(endsAt).toLocaleString('de-DE')}.
            </Alert>
          )}

          <FormControlLabel
            control={
              <Switch
                checked={active}
                onChange={(e) => setActive(e.target.checked)}
                color="error"
              />
            }
            label={active ? 'Wartungsmodus aktiviert' : 'Wartungsmodus deaktiviert'}
            sx={{ mb: 3, display: 'block' }}
          />

          <TextField
            fullWidth
            multiline
            rows={3}
            label="Nachricht für Benutzer"
            placeholder="Das Dashboard befindet sich aktuell im Wartungsmodus..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            sx={{ mb: 3 }}
            helperText="Diese Nachricht sehen Benutzer auf der Wartungsseite."
          />

          <GermanDateField
            mode="datetime"
            fullWidth
            label="Automatisch deaktivieren am"
            value={endsAt}
            onChange={(v) => setEndsAt(v)}
            helperText="Optional: Wartungsmodus wird automatisch zu diesem Zeitpunkt deaktiviert."
            sx={{ mb: 3 }}
          />

          <Button
            variant="contained"
            color={active ? 'error' : 'primary'}
            onClick={handleSave}
            disabled={mutation.isPending}
            startIcon={mutation.isPending ? <CircularProgress size={16} /> : <BuildIcon />}
          >
            {mutation.isPending ? 'Wird gespeichert...' : 'Speichern'}
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>Feature Wartungsmodus</Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            Einzelne Funktionen in den Wartungsmodus versetzen. Betroffene Bereiche werden für alle Benutzer ausser Administratoren ausgeblendet.
          </Typography>
          {matrixLoading ? (
            <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
              <CircularProgress size={24} />
            </Box>
          ) : matrix ? (
            matrix.featureGroups.map((fg: FeatureGroup) => (
              <Box key={fg.id} sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.5 }}>
                <FormControlLabel
                  control={
                    <Switch
                      checked={matrix.maintenance[fg.id] ?? false}
                      onChange={() => maintenanceMutation.mutate({
                        featureGroup: fg.id,
                        active: !(matrix.maintenance[fg.id] ?? false),
                      })}
                      disabled={maintenanceMutation.isPending}
                    />
                  }
                  label={fg.label}
                />
                {matrix.maintenance[fg.id] && <Chip label="Wartungsmodus" color="warning" size="small" />}
              </Box>
            ))
          ) : null}
        </CardContent>
      </Card>
    </Box>
  );
}