/**
 * 轻量级顶部通知组件
 * 
 * 在页面顶部显示简单的提示信息，带有图标，自动换行，有最大宽度和高度限制
 * 支持自动关闭、点击关闭
 * 能根据文字长度自动调整宽度，超出最大宽度则自动换行
 */

import { useState, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import toastStyles from '~/styles/components/toast.css?url';

// 通知类型
export type ToastType = 'success' | 'error' | 'warning' | 'info';

// 组件属性
interface ToastProps {
  // 是否显示通知
  isOpen: boolean;
  // 关闭通知的回调
  onClose: () => void;
  // 通知内容
  message: string;
  // 通知类型
  type?: ToastType;
  // 是否自动关闭
  autoClose?: boolean;
  // 自动关闭的延迟时间（毫秒）
  autoCloseDelay?: number;
  // 自定义图标
  customIcon?: React.ReactNode;
  // 自定义CSS类名
  className?: string;
}

// 默认自动关闭延迟
const DEFAULT_AUTO_CLOSE_DELAY = 3000;

// 导出样式
export function links() {
  return [{ rel: 'stylesheet', href: toastStyles }];
}

export function Toast({
  isOpen,
  onClose,
  message,
  type = 'info',
  autoClose = true,
  autoCloseDelay = DEFAULT_AUTO_CLOSE_DELAY,
  customIcon,
  className = ''
}: ToastProps) {
  const [isClosing, setIsClosing] = useState(false);
  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
  const [messageLines, setMessageLines] = useState<number>(1);

  // 在客户端渲染时获取 portal 容器
  useEffect(() => {
    if (typeof document !== 'undefined') {
      let element = document.getElementById('toast-portal');
      if (!element) {
        element = document.createElement('div');
        element.id = 'toast-portal';
        element.className = 'toast-container';
        document.body.appendChild(element);
      }
      setPortalElement(element);
    }
  }, []);

  // 计算消息行数（用于可能的额外样式调整）
  useEffect(() => {
    if (message) {
      // 简单估算行数: 假设每行平均40个字符，+1确保有足够空间
      const estimatedLines = Math.ceil(message.length / 40) + 1;
      setMessageLines(Math.max(1, Math.min(estimatedLines, 10))); // 最小1行，最大10行
    }
  }, [message]);

  // 处理关闭动画
  const handleClose = useCallback(() => {
    setIsClosing(true);
    setTimeout(() => {
      setIsClosing(false);
      onClose();
    }, 300); // 动画持续时间
  }, [onClose]);

  // 自动关闭
  useEffect(() => {
    if (isOpen && autoClose) {
      // 根据消息长度调整显示时间，长消息显示更长时间
      const adjustedDelay = Math.min(
        autoCloseDelay + (message.length > 100 ? 2000 : 0), 
        10000 // 最长不超过10秒
      );
      
      const timer = setTimeout(() => {
        handleClose();
      }, adjustedDelay);
      return () => clearTimeout(timer);
    }
  }, [isOpen, autoClose, autoCloseDelay, handleClose, message]);

  // 渲染图标
  const renderIcon = () => {
    if (customIcon) {
      return customIcon;
    }

    switch (type) {
      case 'success':
        return <i className="ri-check-line toast-icon success"></i>;
      case 'error':
        return <i className="ri-close-circle-line toast-icon error"></i>;
      case 'warning':
        return <i className="ri-alert-line toast-icon warning"></i>;
      case 'info':
      default:
        return <i className="ri-information-line toast-icon info"></i>;
    }
  };

  // 键盘事件处理
  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      handleClose();
    }
  }, [handleClose]);

  // 如果通知未打开，不渲染
  if (!isOpen || !portalElement) {
    return null;
  }

  // 使用 Portal 渲染通知
  return createPortal(
    <div 
      className={`toast toast-${type} ${isClosing ? 'closing' : ''} ${className} ${messageLines > 3 ? 'toast-multiline' : ''}`}
      role="alert"
      aria-live="assertive"
      onKeyDown={handleKeyDown}
      tabIndex={0}
    >
      <div className="toast-content">
        <div className="toast-icon-wrapper">
          {renderIcon()}
        </div>
        <div className="toast-message">
          {message}
        </div>
      </div>
      <button 
        className="toast-close" 
        onClick={handleClose}
        aria-label="关闭"
      >
        <i className="ri-close-line"></i>
      </button>
    </div>,
    portalElement
  );
}

// 创建全局通知服务
type ShowToastOptions = Omit<ToastProps, 'isOpen' | 'onClose'>;

class ToastService {
  private static instance: ToastService;
  private showToast: ((options: ShowToastOptions) => void) | null = null;

  private constructor() {}

  static getInstance(): ToastService {
    if (!ToastService.instance) {
      ToastService.instance = new ToastService();
    }
    return ToastService.instance;
  }

  registerShowToast(showFn: (options: ShowToastOptions) => void): void {
    this.showToast = showFn;
  }

  success(message: string, options?: Partial<ShowToastOptions>): void {
    this.show({ ...options, message, type: 'success' });
  }

  error(message: string, options?: Partial<ShowToastOptions>): void {
    this.show({ ...options, message, type: 'error' });
  }

  warning(message: string, options?: Partial<ShowToastOptions>): void {
    this.show({ ...options, message, type: 'warning' });
  }

  info(message: string, options?: Partial<ShowToastOptions>): void {
    this.show({ ...options, message, type: 'info' });
  }

  show(options: ShowToastOptions): void {
    if (this.showToast) {
      this.showToast(options);
    } else {
      console.error('ToastService: showToast is not registered');
    }
  }
}

export const toastService = ToastService.getInstance();

/**
 * 全局通知容器
 * 用于在应用根组件中挂载通知服务
 */
export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toastQueue, setToastQueue] = useState<(ShowToastOptions & { id: string })[]>([]);
  const maxToasts = 5; // 增加最大显示的通知数量

  useEffect(() => {
    toastService.registerShowToast((options) => {
      const id = Math.random().toString(36).substring(2, 9);
      
      setToastQueue(prev => {
        // 如果已经有太多通知，移除最早的
        if (prev.length >= maxToasts) {
          return [...prev.slice(1), { ...options, id }];
        }
        return [...prev, { ...options, id }];
      });
    });
  }, []);

  const handleCloseToast = (id: string) => {
    setToastQueue(prev => prev.filter(toast => toast.id !== id));
  };

  return (
    <>
      {children}
      {toastQueue.map((toast) => (
        <Toast
          key={toast.id}
          isOpen={true}
          onClose={() => handleCloseToast(toast.id)}
          message={toast.message}
          type={toast.type}
          autoClose={toast.autoClose !== undefined ? toast.autoClose : true}
          autoCloseDelay={toast.autoCloseDelay}
          customIcon={toast.customIcon}
          className={toast.className}
        />
      ))}
    </>
  );
}