import React from 'react';
import { Box, Button, Fab, useMediaQuery, useTheme } from '@mui/material';
import { QrCodeScanner as QrCodeScannerIcon } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

export const QRScannerButton: React.FC = () => {
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const handleScan = () => {
    navigate('/qr-scanner');
  };

  if (isMobile) {
    // FAB for mobile
    return (
      <Fab
        color="primary"
        onClick={handleScan}
        sx={{
          position: 'fixed',
          bottom: 90,
          right: 20,
          width: 64,
          height: 64,
          backgroundColor: '#FFD700',
          color: '#000000',
          boxShadow: '0 6px 20px rgba(255, 215, 0, 0.4)',
          zIndex: 1000,
          '&:hover': {
            backgroundColor: '#FFC700',
            transform: 'scale(1.1)',
            boxShadow: '0 8px 25px rgba(255, 215, 0, 0.6)',
          },
          '&:active': {
            transform: 'scale(0.95)',
          },
          animation: 'float 3s ease-in-out infinite',
          '@keyframes float': {
            '0%, 100%': {
              transform: 'translateY(0px)',
            },
            '50%': {
              transform: 'translateY(-5px)',
            },
          },
        }}
      >
        <QrCodeScannerIcon sx={{ fontSize: 32 }} />
      </Fab>
    );
  }

  // Large button for desktop/tablet
  return (
    <Box
      sx={{
        position: 'fixed',
        bottom: 90,
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 1000,
      }}
    >
      <Button
        variant="contained"
        onClick={handleScan}
        startIcon={<QrCodeScannerIcon />}
        sx={{
          backgroundColor: '#FFD700',
          color: '#000000',
          fontWeight: 700,
          fontSize: 16,
          borderRadius: '50px',
          px: 4,
          py: 2,
          boxShadow: '0 6px 20px rgba(255, 215, 0, 0.4)',
          '&:hover': {
            backgroundColor: '#FFC700',
            transform: 'translateY(-2px)',
            boxShadow: '0 8px 25px rgba(255, 215, 0, 0.6)',
          },
          '&:active': {
            transform: 'translateY(0px)',
          },
          animation: 'pulse 2s ease-in-out infinite',
          '@keyframes pulse': {
            '0%, 100%': {
              boxShadow: '0 6px 20px rgba(255, 215, 0, 0.4)',
            },
            '50%': {
              boxShadow: '0 8px 30px rgba(255, 215, 0, 0.6)',
            },
          },
        }}
      >
        Сканировать QR
      </Button>
    </Box>
  );
};