/**
 * 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';

// CSS keyframe animations replace framer-motion (kept ~60KB out of the
// always-loaded bundle — toasts are the only globally-mounted consumer).
const TOAST_ANIMATION_CSS = `
@keyframes prorank-toast-in {
  from { opacity: 0; transform: translateY(50px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes prorank-toast-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85); }
}
.prorank-toast-enter { animation: prorank-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.prorank-toast-exit  { animation: prorank-toast-out 0.2s ease-in both; }
`;

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 [isExiting, setIsExiting] = useState(false);

  const handleDismiss = useCallback(() => {
    setIsExiting(true);
    setTimeout(() => {
      setIsVisible(false);
      if (typeof onDismiss === 'function') {
        onDismiss(id);
      }
    }, 200); // Wait for exit 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 (
    <>
      <style>{TOAST_ANIMATION_CSS}</style>
      {isVisible === true && (
        <div
          className={`${isExiting ? 'prorank-toast-exit' : 'prorank-toast-enter'} 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>
        </div>
      )}
    </>
  );
};

export default ToastNotification;