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 { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import axios from 'axios';
import { QRCodeSVG } from 'qrcode.react';

interface UserDevicePairingModalProps {
  open: boolean;
  onClose: () => void;
  userId: number;
  userName: string;
}

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

const UserDevicePairingModal: React.FC<UserDevicePairingModalProps> = ({
  open,
  onClose,
  userId,
  userName,
}) => {
  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 && userId) {
      generateTicket();
    }

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

  // 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/users/${userId}/generate-pairing-ticket`);

      console.log('=== 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('User ID:', response.data.ticket.userId);
      console.log('Expires In (seconds):', response.data.expiresIn);
      console.log('Pairing URL:', `${response.data.ticket.baseUrl}/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 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('=== 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>
        <Typography variant="h6" fontWeight="bold">
          <Trans>Gerät koppeln für {userName}</Trans>
        </Typography>
      </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 Ihrer mobilen App, um Ihr Gerät zu koppeln.
                Der Code ist 5 Minuten gültig.
              </Trans>
            </Alert>

            {/* QR Code */}
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              sx={{
                py: 3,
                backgroundColor: '#fff',
                borderRadius: 2,
                border: '1px solid #e0e0e0',
              }}
            >
              <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>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 UserDevicePairingModal;