import React, { useState, useEffect } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import LinearProgress from '@mui/material/LinearProgress';
import RefreshIcon from '@mui/icons-material/Refresh';
import DevicesIcon from '@mui/icons-material/Devices';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import axios from 'axios';
import { QRCodeSVG } from 'qrcode.react';

interface DepartmentDevicePairingModalProps {
  open: boolean;
  onClose: () => void;
  departmentId: number;
  departmentName: string;
}

interface TicketData {
  baseUrl: string;
  ticketHash: string;
  expiresAt: string;
  departmentId: number;
}

const DepartmentDevicePairingModal: React.FC<DepartmentDevicePairingModalProps> = ({
  open,
  onClose,
  departmentId,
  departmentName,
}) => {
  const { i18n } = useLingui();
  const [ticketData, setTicketData] = useState<TicketData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [timeRemaining, setTimeRemaining] = useState(300); // 5 minutes in seconds
  const [expiresAt, setExpiresAt] = useState<Date | null>(null);

  useEffect(() => {
    if (open && departmentId) {
      generateTicket();
    }

    return () => {
      setTicketData(null);
      setError(null);
      setTimeRemaining(300);
      setExpiresAt(null);
    };
  }, [open, departmentId]);

  // Countdown timer
  useEffect(() => {
    if (!expiresAt) return;

    const interval = setInterval(() => {
      const now = new Date();
      const remaining = Math.max(0, Math.floor((expiresAt.getTime() - now.getTime()) / 1000));
      setTimeRemaining(remaining);

      if (remaining === 0) {
        clearInterval(interval);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [expiresAt]);

  const generateTicket = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await axios.post(`/zeiterfassung/departments/${departmentId}/generate-pairing-ticket`);

      console.log('=== DEPARTMENT DEVICE PAIRING TICKET GENERATED ===');
      console.log('Full Response:', response.data);
      console.log('Ticket Data:', response.data.ticket);
      console.log('Base URL:', response.data.ticket.baseUrl);
      console.log('Ticket Hash:', response.data.ticket.ticketHash);
      console.log('Expires At:', response.data.ticket.expiresAt);
      console.log('Department ID:', response.data.ticket.departmentId);
      console.log('Department Name:', response.data.department?.name);
      console.log('Expires In (seconds):', response.data.expiresIn);
      console.log('Pairing URL:', `${response.data.ticket.baseUrl}/department-device/pair/claim`);
      console.log('==================================================');

      setTicketData(response.data.ticket);
      setExpiresAt(new Date(response.data.ticket.expiresAt));
      setTimeRemaining(response.data.expiresIn);
    } catch (error) {
      console.error('Error generating department pairing ticket:', error);
      setError(i18n._(t`Fehler beim Generieren des QR-Codes`));
    } finally {
      setLoading(false);
    }
  };

  const handleRegenerate = () => {
    generateTicket();
  };

  const formatTime = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const getQRCodeData = (): string => {
    if (!ticketData) return '';

    const qrData = JSON.stringify(ticketData);
    console.log('=== DEPARTMENT DEVICE QR CODE DATA ===');
    console.log('Raw JSON String:', qrData);
    console.log('Parsed Object:', ticketData);
    console.log('=======================================');

    return qrData;
  };

  const progressPercentage = (timeRemaining / 300) * 100;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        <Box display="flex" alignItems="center" gap={1}>
          <DevicesIcon color="primary" />
          <Typography variant="h6" fontWeight="bold">
            <Trans>Abteilungsgerät koppeln - {departmentName}</Trans>
          </Typography>
        </Box>
      </DialogTitle>
      <DialogContent>
        {loading && (
          <Box display="flex" justifyContent="center" py={4}>
            <CircularProgress />
          </Box>
        )}

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

        {!loading && !error && ticketData && (
          <Box>
            {/* Info Text */}
            <Alert severity="info" sx={{ mb: 3 }}>
              <Trans>
                Scannen Sie diesen QR-Code mit dem Abteilungsgerät (Tablet/Kiosk), um es zu koppeln.
                Der Code ist 5 Minuten gültig. Nach dem Scannen kann das Gerät für alle Benutzer
                dieser Abteilung verwendet werden.
              </Trans>
            </Alert>

            {/* Device Type Badge */}
            <Box sx={{ mb: 2, p: 2, backgroundColor: '#e3f2fd', borderRadius: 1 }}>
              <Typography variant="body2" fontWeight="bold" color="primary">
                <Trans>Gerätetyp:</Trans> <Trans>Gemeinsames Abteilungsgerät</Trans>
              </Typography>
              <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 0.5 }}>
                <Trans>
                  Mehrere Geräte pro Abteilung erlaubt • Benutzer wählen sich aus Liste aus •
                  NFC-Badge zur Bestätigung erforderlich
                </Trans>
              </Typography>
            </Box>

            {/* QR Code */}
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              sx={{
                py: 3,
                backgroundColor: '#fff',
                borderRadius: 2,
                border: '2px solid #1976d2',
              }}
            >
              <QRCodeSVG
                value={getQRCodeData()}
                size={256}
                level="H"
                includeMargin={true}
              />
            </Box>

            {/* Timer */}
            <Box sx={{ mt: 3 }}>
              <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
                <Typography variant="body2" color="text.secondary">
                  <Trans>Verbleibende Zeit:</Trans>
                </Typography>
                <Typography
                  variant="h6"
                  fontWeight="bold"
                  color={timeRemaining < 60 ? 'error' : 'primary'}
                >
                  {formatTime(timeRemaining)}
                </Typography>
              </Box>
              <LinearProgress
                variant="determinate"
                value={progressPercentage}
                color={timeRemaining < 60 ? 'error' : 'primary'}
                sx={{ height: 8, borderRadius: 1 }}
              />
            </Box>

            {/* Ticket Info */}
            <Box sx={{ mt: 3, p: 2, backgroundColor: '#f5f5f5', borderRadius: 1 }}>
              <Typography variant="caption" color="text.secondary" display="block">
                <Trans>Abteilung:</Trans> {departmentName} (ID: {departmentId})
              </Typography>
              <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 0.5 }}>
                <Trans>Base URL:</Trans> {ticketData.baseUrl}
              </Typography>
              <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 0.5 }}>
                <Trans>Ticket Hash:</Trans> {ticketData.ticketHash.substring(0, 16)}...
              </Typography>
            </Box>

            {/* Expired Warning */}
            {timeRemaining === 0 && (
              <Alert severity="warning" sx={{ mt: 2 }}>
                <Trans>Der QR-Code ist abgelaufen. Bitte generieren Sie einen neuen Code.</Trans>
              </Alert>
            )}
          </Box>
        )}
      </DialogContent>
      <DialogActions>
        <Button
          onClick={handleRegenerate}
          startIcon={<RefreshIcon />}
          variant="outlined"
          color="primary"
          disabled={loading}
        >
          <Trans>Neuen QR-Code generieren</Trans>
        </Button>
        <Button onClick={onClose}>
          <Trans>Schließen</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default DepartmentDevicePairingModal;