/**
 * Toast Notification Component
 *
 * Displays toast-style notifications in the ProRank SEO admin interface.
 * Supports success, error, warning, and info notification types.
 *
 * @since 0.1.0
 */

import React, { useEffect, useState, useCallback } from 'react';
import { Icon } from '@wordpress/components';
import { check, warning, info, closeSmall } from '@wordpress/icons';
import { motion, AnimatePresence } from 'framer-motion';

const toastConfig = {
  success: {
    icon: check,
    bgClass: 'pr:bg-green-50 pr:border-green-200',
    textClass: 'pr:text-green-800',
    focusRingClass: 'pr:focus:ring-green-500',
  },
  error: {
    icon: closeSmall,
    bgClass: 'pr:bg-red-50 pr:border-red-200',
    textClass: 'pr:text-red-800',
    focusRingClass: 'pr:focus:ring-red-500',
  },
  warning: {
    icon: warning,
    bgClass: 'pr:bg-yellow-50 pr:border-yellow-200',
    textClass: 'pr:text-yellow-800',
    focusRingClass: 'pr:focus:ring-yellow-500',
  },
  info: {
    icon: info,
    bgClass: 'pr:bg-blue-50 pr:border-blue-200',
    textClass: 'pr:text-blue-800',
    focusRingClass: 'pr:focus:ring-blue-500',
  },
};

const positionClasses = {
  'pr:top-right': 'pr:top-4 pr:right-4',
  'pr:top-left': 'pr:top-4 pr:left-4',
  'pr:bottom-right': 'pr:bottom-4 pr:right-4',
  'pr:bottom-left': 'pr:bottom-4 pr:left-4',
  'pr:top-center': 'pr:top-4 pr:left-1/2 pr:transform pr:-translate-x-1/2',
  'pr:bottom-center': 'pr:bottom-4 pr:left-1/2 pr:transform pr:-translate-x-1/2',
};

const ToastNotification = ({
  id,
  message,
  type = 'info',
  duration = 5000,
  dismissible = true,
  onDismiss,
  position = 'bottom-right',
  actions = [],
}) => {
  const [isVisible, setIsVisible] = useState(true);

  const handleDismiss = useCallback(() => {
    setIsVisible(false);
    if (typeof onDismiss === 'function') {
      setTimeout(() => onDismiss(id), 300); // Wait for animation
    }
  }, [id, onDismiss]);

  useEffect(() => {
    if (duration > 0) {
      const timer = setTimeout(handleDismiss, duration);
      return () => clearTimeout(timer);
    }
  }, [duration, handleDismiss]);

  const { icon, bgClass, textClass, focusRingClass } = toastConfig[type] || toastConfig.info;
  const currentPositionClass = positionClasses[position] || positionClasses['bottom-right'];

  return (
    <AnimatePresence>
      {isVisible === true && (
        <motion.div
          initial={{ opacity: 0, y: 50, scale: 0.3 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
          className={`pr:fixed pr:z-50 pr:p-4 pr:rounded-lg pr:shadow-lg pr:border ${bgClass} ${currentPositionClass} pr:max-w-md`}
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div className="pr:flex pr:items-start">
            <div className="pr:shrink-0">
              <Icon icon={icon} size={20} className={textClass} />
            </div>
            <div className="pr:ml-3 pr:flex-1">
              <p className={`pr:text-sm pr:font-medium ${textClass}`}>{message || ''}</p>
              {actions.length > 0 && (
                <div className="pr:mt-3 pr:flex pr:space-x-2">
                  )
                  {actions.map((action, index) => (
                    <button
                      key={index}
                      onClick={action.onClick}
                      className={`pr:text-sm pr:font-medium pr:rounded-md pr:px-2 pr:py-1 ${
                        action.variant === 'primary'
                          ? `${textClass} pr:bg-white pr:hover:bg-gray-50`
                          : 'pr:text-gray-700 pr:hover:text-gray-500'
                      }`}
                    >
                      {action.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
            {dismissible === true && (
              <div className="pr:ml-4 pr:shrink-0 pr:flex">
                <button
                  className={`pr:inline-flex pr:rounded-md pr:hover:bg-white/20 pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 ${focusRingClass}`}
                  onClick={handleDismiss}
                  aria-label="Dismiss notification"
                >
                  <Icon icon={closeSmall} size={20} className={textClass} />
                </button>
              </div>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default ToastNotification;