/**
 * 토스트 알림 컴포넌트
 * 간단한 메시지를 일정 시간 후 자동으로 사라지게 표시
 */
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import './Toast.scss';

// 토스트 메시지 표시 함수 (외부에서 호출용)
let showToastFn = null;

export function showToast(message, duration = 3000) {
  if (showToastFn) {
    showToastFn(message, duration);
  }
}

/**
 * 토스트 컨테이너 컴포넌트
 * App 최상위에 한 번만 마운트
 */
export function ToastContainer() {
  const [toasts, setToasts] = useState([]);

  useEffect(() => {
    showToastFn = (message, duration) => {
      const id = Date.now();
      setToasts((prev) => [...prev, { id, message, duration }]);
    };

    return () => {
      showToastFn = null;
    };
  }, []);

  const removeToast = (id) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  };

  return createPortal(
    <div className="toast-container">
      {toasts.map((toast) => (
        <ToastItem
          key={toast.id}
          message={toast.message}
          duration={toast.duration}
          onClose={() => removeToast(toast.id)}
        />
      ))}
    </div>,
    document.body
  );
}

/**
 * 개별 토스트 아이템
 */
function ToastItem({ message, duration, onClose }) {
  const [isVisible, setIsVisible] = useState(false);
  const [isExiting, setIsExiting] = useState(false);

  useEffect(() => {
    // 마운트 후 바로 표시
    requestAnimationFrame(() => {
      setIsVisible(true);
    });

    // duration 후 사라지기 시작
    const hideTimer = setTimeout(() => {
      setIsExiting(true);
    }, duration);

    // 애니메이션 후 제거
    const removeTimer = setTimeout(() => {
      onClose();
    }, duration + 300);

    return () => {
      clearTimeout(hideTimer);
      clearTimeout(removeTimer);
    };
  }, [duration, onClose]);

  return (
    <div className={`toast-item ${isVisible ? 'visible' : ''} ${isExiting ? 'exiting' : ''}`}>
      {message}
    </div>
  );
}

export default ToastContainer;
