import { useState, useRef, useEffect, useCallback } from 'react';
import {
  Box, Button, Card, CardContent, Checkbox, Chip, CircularProgress, FormControlLabel, IconButton, Tooltip, Typography,
} from '@mui/material';
import SyncIcon from '@mui/icons-material/Sync';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import { useNotification } from '../../contexts/NotificationContext';

function FdiskSyncTab() {
  const queryClient = useQueryClient();
  const { showSuccess, showError } = useNotification();
  const logBoxRef = useRef<HTMLDivElement>(null);
  const [force, setForce] = useState(false);

  const { data, isLoading, isError } = useQuery({
    queryKey: ['admin', 'fdisk-sync', 'logs'],
    queryFn: adminApi.fdiskSyncLogs,
    refetchInterval: 5000,
  });

  // Auto-scroll log box to bottom when new lines arrive
  useEffect(() => {
    if (logBoxRef.current) {
      logBoxRef.current.scrollTop = logBoxRef.current.scrollHeight;
    }
  }, [data?.logs.length]);

  const triggerMutation = useMutation({
    mutationFn: (forceSync: boolean) => adminApi.fdiskSyncTrigger(forceSync),
    onSuccess: () => {
      showSuccess('Sync gestartet');
      queryClient.invalidateQueries({ queryKey: ['admin', 'fdisk-sync', 'logs'] });
    },
    onError: (err: unknown) => {
      const msg = (err as { response?: { status?: number } })?.response?.status === 409
        ? 'Sync läuft bereits'
        : 'Sync konnte nicht gestartet werden';
      showError(msg);
    },
  });

  const running = data?.running ?? false;

  const copyLogs = useCallback(() => {
    const text = (data?.logs ?? []).map((e) => e.line).join('\n');
    navigator.clipboard.writeText(text).then(
      () => showSuccess('Logs kopiert'),
      () => showError('Kopieren fehlgeschlagen'),
    );
  }, [data?.logs, showSuccess, showError]);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <Card>
        <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
          <Box sx={{ flex: 1 }}>
            <Typography variant="h6" gutterBottom>FDISK Mitglieder-Sync</Typography>
            <Typography variant="body2" color="text.secondary">
              Synchronisiert Mitgliederdaten und Ausbildungen aus FDISK in die Datenbank.
              Läuft automatisch täglich um Mitternacht.
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <Chip
              label={running ? 'Läuft…' : 'Bereit'}
              color={running ? 'warning' : 'success'}
              size="small"
              icon={running ? <CircularProgress size={12} color="inherit" /> : undefined}
            />
            <Button
              variant="contained"
              startIcon={<SyncIcon />}
              onClick={() => triggerMutation.mutate(force)}
              disabled={running || triggerMutation.isPending}
            >
              Jetzt synchronisieren
            </Button>
          </Box>
          <FormControlLabel
            control={<Checkbox checked={force} onChange={(e) => setForce(e.target.checked)} />}
            label="Alle Mitglieder erzwungen synchronisieren"
          />
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
            <Typography variant="subtitle2">Protokoll (letzte 500 Zeilen)</Typography>
            <Tooltip title="Logs kopieren">
              <span>
                <IconButton
                  size="small"
                  onClick={copyLogs}
                  disabled={!data?.logs?.length}
                >
                  <ContentCopyIcon fontSize="small" />
                </IconButton>
              </span>
            </Tooltip>
          </Box>
          {isLoading && (
            <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
              <CircularProgress size={28} />
            </Box>
          )}
          {isError && (
            <Typography color="error" variant="body2">
              Sync-Dienst nicht erreichbar. Läuft der fdisk-sync Container?
            </Typography>
          )}
          {!isLoading && !isError && (
            <Box
              ref={logBoxRef}
              sx={{
                fontFamily: 'monospace',
                fontSize: '0.75rem',
                bgcolor: 'grey.900',
                color: 'grey.100',
                borderRadius: 1,
                p: 1.5,
                maxHeight: 500,
                overflowY: 'auto',
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-all',
              }}
            >
              {(data?.logs ?? []).length === 0 ? (
                <Typography variant="caption" color="grey.500">Noch keine Logs vorhanden.</Typography>
              ) : (
                (data?.logs ?? []).map((entry, i) => (
                  <Box
                    key={i}
                    component="span"
                    sx={{
                      display: 'block',
                      color: entry.line.includes('ERROR') || entry.line.includes('WARN')
                        ? (entry.line.includes('ERROR') ? 'error.light' : 'warning.light')
                        : 'inherit',
                    }}
                  >
                    {entry.line}
                  </Box>
                ))
              )}
            </Box>
          )}
        </CardContent>
      </Card>
    </Box>
  );
}

export default FdiskSyncTab;
