import React, { ReactNode, useCallback } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import ModalPortal from './Abstractions/ModalPortal';
import { Button, ButtonTypes } from './Button';

export interface IConfirmModalProps {
  onConfirm: () => void;
  onClose: () => void;
  message?: string | ReactNode;
}

// Global style to prevent body scrolling when modal is open
const GlobalStyle = createGlobalStyle`
  body {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
`;

export const ConfirmModal: React.FC<IConfirmModalProps> = ({
  onConfirm,
  onClose,
  message = 'Are you sure?',
}) => {
  const handleConfirm = useCallback(
    (e: React.PointerEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onConfirm();
    },
    [onConfirm]
  );

  const handleClose = useCallback(
    (e: React.PointerEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onClose();
    },
    [onClose]
  );

  // Fix type issues by separating event handlers for different event types
  const stopPropagationClick = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
  }, []);

  const stopPropagationTouch = useCallback((e: React.TouchEvent) => {
    e.stopPropagation();
  }, []);

  const stopPropagationPointer = useCallback((e: React.PointerEvent) => {
    e.stopPropagation();
  }, []);

  return (
    <ModalPortal>
      <GlobalStyle />
      <Overlay onPointerDown={handleClose} />
      <ModalContainer>
        <ModalContent
          onClick={stopPropagationClick}
          onTouchStart={stopPropagationTouch}
          onTouchEnd={stopPropagationTouch}
          onTouchMove={stopPropagationTouch}
          onPointerDown={stopPropagationPointer}
        >
          <MessageContainer>
            {typeof message === 'string' ? (
              <Message>{message}</Message>
            ) : (
              message
            )}
          </MessageContainer>

          <ButtonsContainer>
            <CancelButtonWrapper>
              <Button
                buttonType={ButtonTypes.RPGUIButton}
                onPointerDown={handleClose}
              >
                No
              </Button>
            </CancelButtonWrapper>
            <Button
              buttonType={ButtonTypes.RPGUIButton}
              onPointerDown={handleConfirm}
            >
              Yes
            </Button>
          </ButtonsContainer>
        </ModalContent>
      </ModalContainer>
    </ModalPortal>
  );
};

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
  cursor: pointer;
  touch-action: none;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

const ModalContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
`;

const ModalContent = styled.div`
  background-color: #2a2a2a;
  border: 2px solid #444;
  border-radius: 8px;
  padding: 20px;
  min-width: 300px;
  max-width: 90%;
  margin: 0 auto;
  animation: scaleIn 0.2s ease-out;
  transform-origin: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
  pointer-events: auto;

  @keyframes scaleIn {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @media (max-width: 768px) {
    padding: 25px;
    width: 85%;
  }
`;

const MessageContainer = styled.div`
  margin-bottom: 20px;
  text-align: center;
`;

const Message = styled.p`
  margin: 0;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

  @media (max-width: 768px) {
    font-size: 18px;
  }
`;

const ButtonsContainer = styled.div`
  display: flex;
  justify-content: center;
  gap: 20px;

  @media (max-width: 768px) {
    gap: 30px;
    /* Increase button size for better touch targets */
    transform: scale(1.1);
    margin-top: 5px;
  }
`;

const CancelButtonWrapper = styled.div`
  filter: grayscale(0.7);
`;
