import React, { useEffect, useState, useRef } from 'react';
import styles from './MessageOverlay.module.css';

export type MessageMode = 'warning' | 'error' | 'success' | 'info';

interface MessageOverlayProps {
  header: string;
  message: string;
  isVisible: boolean;
  mode?: MessageMode;
  onClose?: () => void;
  autoClose?: boolean;
  autoCloseDelay?: number;
}

const MessageOverlay: React.FC<MessageOverlayProps> = ({
  header,
  message,
  isVisible,
  mode = 'info',
  onClose,
  autoClose = true,
  autoCloseDelay = 5000
}) => {
  const [isClosing, setIsClosing] = useState(false);
  const autoCloseTimeoutRef = useRef<number | null>(null);
  const unmountTimeoutRef = useRef<number | null>(null);

  // Handle auto-close
  useEffect(() => {
    if (autoCloseTimeoutRef.current) {
      clearTimeout(autoCloseTimeoutRef.current);
    }

    if (isVisible && autoClose && onClose) {
      autoCloseTimeoutRef.current = window.setTimeout(() => {
        setIsClosing(true);
        // After animation completes, call onClose
        unmountTimeoutRef.current = window.setTimeout(() => {
          onClose();
        }, 700); // Match slideOut animation duration
      }, autoCloseDelay);
    }

    return () => {
      if (autoCloseTimeoutRef.current) {
        clearTimeout(autoCloseTimeoutRef.current);
      }
    };
  }, [isVisible, autoClose, autoCloseDelay, onClose]);

  // Handle manual close
  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      if (onClose) {
        onClose();
      }
    }, 700);
  };

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (autoCloseTimeoutRef.current) {
        clearTimeout(autoCloseTimeoutRef.current);
      }
      if (unmountTimeoutRef.current) {
        clearTimeout(unmountTimeoutRef.current);
      }
    };
  }, []);

  if (!isVisible) {
    return null;
  }

  const getModeClass = () => {
    switch (mode) {
      case 'warning':
        return styles.warningMode;
      case 'error':
        return styles.errorMode;
      case 'success':
        return styles.successMode;
      case 'info':
      default:
        return styles.infoMode;
    }
  };

  const getAriaLabel = () => {
    switch (mode) {
      case 'warning':
        return 'Close warning';
      case 'error':
        return 'Close error';
      case 'success':
        return 'Close success message';
      case 'info':
      default:
        return 'Close message';
    }
  };

  return (
    <div className={`${styles.messageOverlay} ${isClosing ? styles.closing : ''}`}>
      <div className={styles.messageContainer}>
        <div className={`${styles.messageContent} ${getModeClass()}`}>
          <div className={styles.messageHeader}>
            {header}
          </div>
          <div className={styles.messageText}>
            {message}
          </div>
          {onClose && (
            <button 
              className={styles.closeButton}
              onClick={handleClose}
              aria-label={getAriaLabel()}
            >
              ×
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default MessageOverlay;
