// errorManager.ts
/**
 * 錯(cuò)誤級(jí)別定義
 * - CRITICAL: 需要立即處理的關(guān)鍵錯(cuò)誤
 * - BATCH: 可批量處理的普通錯(cuò)誤
 * - SILENT: 靜默處理的次要錯(cuò)誤
 */
enum ErrorLevel {
  CRITICAL = 1,
  BATCH = 2,
  SILENT = 3
}

/**
 * 增強(qiáng)型錯(cuò)誤處理器
 * 支持錯(cuò)誤分級(jí)和智能合并
 */
class ErrorHandler {
  private batchQueue: string[] = [];
  private batchTimer?: number;
  private criticalErrors: string[] = [];
  
  /**
   * 處理錯(cuò)誤
   * @param error 錯(cuò)誤對(duì)象
   * @param level 錯(cuò)誤級(jí)別
   */
  handle(error: any, level = ErrorLevel.BATCH): void {
    const msg = this.extractMessage(error);
    
    switch (level) {
      case ErrorLevel.CRITICAL:
        this.handleCritical(msg);
        break;
      case ErrorLevel.BATCH:
        this.addToBatch(msg);
        break;
      // SILENT級(jí)別不處理
    }
  }
  
  private extractMessage(error: any): string {
    if (typeof error === 'string') return error;
    return error.response?.data?.message || error.message || '請(qǐng)求失敗';
  }
  
  private handleCritical(msg: string): void {
    // 關(guān)鍵錯(cuò)誤立即顯示
    Toast.error(`[重要] ${msg}`);
    this.criticalErrors.push(msg);
    
    // 超過3個(gè)關(guān)鍵錯(cuò)誤觸發(fā)全局遮罩
    if (this.criticalErrors.length >= 3) {
      this.showGlobalOverlay();
    }
  }
  
  private addToBatch(msg: string): void {
    if (!this.batchQueue.includes(msg)) {
      this.batchQueue.push(msg);
    }
    
    // 防抖處理
    clearTimeout(this.batchTimer);
    this.batchTimer = window.setTimeout(() => {
      this.flushBatch();
    }, 800);// 800ms合并窗口
  }
  
  private flushBatch(): void {
    if (this.batchQueue.length === 0) return;
    
    const displayMsg = this.batchQueue.length > 3
      ? `多個(gè)操作失敗（共${this.batchQueue.length}個(gè)）`
      : this.batchQueue.join('；');
    
    Toast.error(displayMsg);
    this.batchQueue = [];
  }
  
  private showGlobalOverlay(): void {
    window.dispatchEvent(
      new CustomEvent('globalErrors', {
        detail: {
          messages: this.criticalErrors,
          count: this.criticalErrors.length
        }
      })
    );
  }
}

export const errorHandler = new ErrorHandler();

// GlobalErrorOverlay.tsx
import React, { useState, useEffect } from 'react';
import { Button, Modal } from 'antd';

const GlobalErrorOverlay: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [errors, setErrors] = useState<string[]>([]);
  
  useEffect(() => {
    const listener = (e: CustomEvent) => {
      setErrors(e.detail.messages);
      setVisible(true);
    };
    
    window.addEventListener('globalErrors', listener as EventListener);
    return () => {
      window.removeEventListener('globalErrors', listener as EventListener);
    };
  }, []);
  
  const handleClose = () => {
    setVisible(false);
    setErrors([]);
  };
  
  return (
    <Modal
      title="系統(tǒng)遇到多個(gè)錯(cuò)誤"
      visible={visible}
      footer={[
        <Button key="close" onClick={handleClose}>
          我知道了
        </Button>,
        <Button 
          key="refresh" 
          type="primary" 
          onClick={() => window.location.reload()}
        >
          刷新頁(yè)面
        </Button>
      ]}
      onCancel={handleClose}
    >
      <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
        {errors.length > 3 ? (
          <p>共遇到 {errors.length} 個(gè)關(guān)鍵錯(cuò)誤，部分錯(cuò)誤如下：</p>
        ) : null}
        
        <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
          {errors.slice(0, 3).map((msg, i) => (
            <li key={i} style={{ color: '#ff4d4f', marginBottom: '8px' }}>
              {msg}
            </li>
          ))}
        </ul>
      </div>
    </Modal>
  );
};

export default GlobalErrorOverlay;

// errorInterceptor.ts
import axios from 'axios';
import { errorHandler } from './errorManager';

/**
 * 錯(cuò)誤分類策略
 */
function classifyError(error: any): ErrorLevel {
  // 網(wǎng)絡(luò)錯(cuò)誤
  if (!error.response) return ErrorLevel.CRITICAL;
  
  const status = error.response.status;
  
  // 認(rèn)證錯(cuò)誤
  if ([401, 403].includes(status)) {
    return ErrorLevel.CRITICAL;
  }
  
  // 服務(wù)器錯(cuò)誤
  if (status >= 500) {
    return ErrorLevel.CRITICAL;
  }
  
  // 限流錯(cuò)誤
  if (status === 429) {
    return ErrorLevel.SILENT;
  }
  
  // 其他業(yè)務(wù)錯(cuò)誤
  return ErrorLevel.BATCH;
}

// axios響應(yīng)攔截器
axios.interceptors.response.use(
  response => response,
  error => {
    const level = classifyError(error);
    errorHandler.handle(error, level);
    return Promise.reject(error);
  }
);

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalErrorOverlay from './components/GlobalErrorOverlay';

ReactDOM.render(
  <>
    <App />
    <GlobalErrorOverlay />
  </>,
  document.getElementById('root')
);