import React, { useState, useEffect, useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { QRCodeSVG } from 'qrcode.react';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
// Declare global helper
declare global {
  interface Window {
    openQrPopup: () => void;
  }
}

// Queue to buffer calls before mount
const qrQueue: boolean[] = (window as any)._qrPopupQueue || [];
if (typeof window.openQrPopup !== 'function') {
  window.openQrPopup = () => {
    qrQueue.push(true);
  };
  (window as any)._qrPopupQueue = qrQueue;
}

const QrPopup: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const popupRef = useRef<HTMLDivElement>(null);

  const open = useCallback(() => {
    setVisible(true);
  }, []);

  const close = useCallback(() => {
    setVisible(false);
  }, []);

  // Bind global and flush queue
  useEffect(() => {
    window.openQrPopup = open;
    if (qrQueue.length) {
      qrQueue.splice(0).forEach(() => open());
    }
  }, [open]);

  // Close on Escape
  useEffect(() => {
    const onKey = (e: KeyboardEvent) =>
      e.key === 'Escape' && visible && close();
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [visible, close]);

  // Click outside to close
  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
        close();
      }
    };
    if (visible) {
      window.addEventListener('mousedown', onClick);
    }
    return () => window.removeEventListener('mousedown', onClick);
  }, [visible, close]);

  if (!visible) return null;

  // URLs for QR codes
  const settingsUrl = window.location.hostname;
  const iosUrl = 'https://apps.apple.com/de/app/tasko-mobil/id1539672589';
  const androidUrl =
    'https://play.google.com/store/apps/details?id=com.donauengineering.taskoapp2&hl=de';

  const items = [
    {
      url: settingsUrl,
      label: 'Einstellungen in App migrieren',
    },
    {
      url: iosUrl,
      label: 'iOS App herunterladen',
      badge:
        'https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg',
      badgeAlt: 'Download on the App Store',
      badgeHref: iosUrl,
    },
    {
      url: androidUrl,
      label: 'Android App herunterladen',
      badge:
        'https://play.google.com/intl/de_de/badges/images/generic/de_badge_web_generic.png',
      badgeAlt: 'Jetzt bei Google Play',
      badgeHref: androidUrl,
    },
  ];

  const handlePrev = () => {
    console.log('Prev', activeIndex, items.length);
    setActiveIndex((prev) => (prev === 0 ? items.length - 1 : prev - 1));
  };

  const handleNext = () => {
    console.log('Next', activeIndex, items.length);
    setActiveIndex((prev) => (prev === items.length - 1 ? 0 : prev + 1));
  };

  return ReactDOM.createPortal(
    <Overlay>
      <Popup ref={popupRef}>
        <Header>
          <Title>App verbinden</Title>
          <Controls>
            <Button title='Schließen' onClick={close}>
              ×
            </Button>
          </Controls>
        </Header>
        <Content>
          <ArrowButton onClick={handlePrev} title='Vorherige'>
            <ArrowBackIosIcon />
          </ArrowButton>
          <SliderTrack>
            <SliderWrapper offset={activeIndex * -100}>
              {items.map((item, index) => (
                <SliderItem key={index}>
                  <QRCodeSVG value={item.url} size={160} />
                  <Label
                    onClick={() => setActiveIndex(index)}
                    isActive={index === activeIndex}
                  >
                    {item.label}
                  </Label>
                  {item.badge && (
                    <Badge href={item.badgeHref} target='_blank'>
                      <img src={item.badge} alt={item.badgeAlt} />
                    </Badge>
                  )}
                </SliderItem>
              ))}
            </SliderWrapper>
          </SliderTrack>
          <ArrowButton onClick={handleNext} title='Nächste'>
            <ArrowForwardIosIcon />
          </ArrowButton>
        </Content>
        <Indicators>
          {items.map((_, index) => (
            <Dot
              key={index}
              isActive={index === activeIndex}
              onClick={() => setActiveIndex(index)}
            />
          ))}
        </Indicators>
      </Popup>
    </Overlay>,
    document.getElementById('popup-root') as HTMLElement,
  );
};

// Styled Components
const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999999;
`;
const Popup = styled.div`
  width: 500px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
`;
const Title = styled.h2`
  margin: 0;
  font-size: 1.25rem;
`;
const Controls = styled.div`
  margin-left: auto;
`;
const Button = styled.button`
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
`;
const Content = styled.div`
  display: flex;
  align-items: center;
  padding: 24px;
`;
const SliderTrack = styled.div`
  flex: 1;
  overflow: hidden;
`;
const SliderWrapper = styled.div<{ offset: number }>`
  display: flex;
  transform: translateX(${(props) => props.offset}%);
  transition: transform 0.3s ease-in-out;
  width: 100%;
`;
const SliderItem = styled.div`
  flex: 0 0 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const Label = styled.p<{ isActive?: boolean }>`
  margin: 8px 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-weight: ${(props) => (props.isActive ? 'bold' : 'normal')};
  color: ${(props) => (props.isActive ? '#0066cc' : '#333')};

  &:hover {
    background-color: #f0f0f0;
  }
`;
const Badge = styled.a`
  display: inline-block;
  margin-top: 8px;
  img {
    height: 36px;
  }
`;
const Indicators = styled.div`
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 16px 0;
`;
const Dot = styled.button<{ isActive: boolean }>`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: ${(props) => (props.isActive ? '#0066cc' : '#ccc')};
  transition: background-color 0.2s ease;

  &:hover {
    background-color: ${(props) => (props.isActive ? '#0066cc' : '#999')};
  }
`;
const ArrowButton = styled.button`
  background: transparent;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #0066cc;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  flex-shrink: 0;

  &:hover {
    color: #0052a3;
    transform: scale(1.2);
  }

  &:active {
    transform: scale(0.95);
  }
`;

// Mount QrPopup
// const mountNode = document.getElementById('popup-root');
// if (mountNode && !mountNode.hasChildNodes()) {
//   ReactDOM.render(<QrPopup />, mountNode);
// }

export default QrPopup;