import React, { useState, useRef, useEffect } from 'react';
import { ResizeBox, Tabs } from '@arco-design/web-react';
import styles from './style/logBar.module.less';
import { updateLogBarStatus } from '@/store/ideContainer';
import { useSelector, useDispatch } from 'react-redux';
import { getNodeData } from '@/api/appIns';
import RunTimeData from './components/runTimeData';

const TabPane = Tabs.TabPane;

interface LogMessage {
  id: number;
  type: string;
  message: string;
  timestamp: string;
}

// 添加运行数据接口
interface RuntimeData {
  [appId: string]: any;
}

interface LogBarProps {
  a?: string;
}

const data = [
  {
    key: '1',
    title: '运行日志',
    content: '运行时日志...'
  },
  {
    key: '2',
    title: '校验日志',
    content: '校验日志...'
  },
  {
    key: '3',
    title: '运行数据',
    content: '运行数据日志...'
  },
  {
    key: '4',
    title: '组件日志',
    content: '组件日志...'
  }
];

const LogBar: React.FC<LogBarProps> = () => {
  const [tabs] = useState(data);
  const [activeTab, setActiveTab] = useState('1');
  const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
  const [validationLogs, setValidationLogs] = useState<LogMessage[]>([]);
  const [runtimeLogs, setruntimeLogs] = useState<LogMessage[]>([]); // 添加运行时日志状态
  const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态
  const [runtimeData, setRuntimeData] = useState<RuntimeData>({});  // 添加运行数据状态
  const [loading, setLoading] = useState(false);
  const { logBarStatus, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);

  const dispatch = useDispatch();

  // 辅助函数：获取当前应用/子流程的唯一标识符
  const getCurrentAppKey = () => {
    if (!currentAppData) return null;
    // 如果是子流程（key包含'sub'），使用key作为标识符
    if (currentAppData.key && currentAppData.key.includes('sub')) {
      return currentAppData.key;
    }
    // 否则使用id
    return currentAppData.id;
  };

  // 处理 Tab 点击事件
  const handleTabClick = (key: string) => {
    // 如果点击当前激活的 tab，则切换收起状态
    if (key === activeTab) {
      dispatch(updateLogBarStatus(!logBarStatus));
    }
    else {
      // 如果点击的是其他 tab，则切换到该 tab 并展开
      setActiveTab(key);
      dispatch(updateLogBarStatus(true));
    }
  };

  // 当 collapsed 状态改变时，直接更新元素的样式
  useEffect(() => {
    if (resizeBoxRef.current) {
      resizeBoxRef.current.style.height = logBarStatus ? logContainerHeight : '0px';
    }
  }, [logBarStatus, logContainerHeight]);

  // 处理 ResizeBox 手动调整大小事件
  const handleResize = (e: MouseEvent, size: {
    width: number;
    height: number;
  }) => {
    // 当高度接近收起状态的高度时，同步更新 logBarStatus 状态
    if (size.height <= 40) {
      dispatch(updateLogBarStatus(false));
    }
    else {
      dispatch(updateLogBarStatus(true));
      // 更新日志容器高度状态
      setLogContainerHeight(`${size.height}px`);
    }
  };

  // 监听日志消息事件
  useEffect(() => {
    const handleLogMessage = (event: CustomEvent) => {
      const { type, message, timestamp } = event.detail;

      // 如果是校验类型的消息且当前校验日志tab可见，则添加到校验日志中
      if (type === 'validation') {
        const newLog: LogMessage = {
          id: Date.now(),
          type,
          message,
          timestamp
        };

        setValidationLogs(prev => [...prev, newLog]);

        // 自动切换到校验日志tab并展开logBar
        // setActiveTab('2');
        dispatch(updateLogBarStatus(true));
      }
      // 如果是运行时日志
      else if (type === 'runtime') {
        const newLog: LogMessage = {
          id: Date.now(),
          type,
          message,
          timestamp
        };

        setruntimeLogs(prev => [...prev, newLog]);

        // 自动切换到运行日志tab并展开logBar
        dispatch(updateLogBarStatus(true));

        // 同时将日志添加到当前应用的运行日志中
        const appKey = getCurrentAppKey();
        if (appKey) {
          dispatch({
            type: 'ideContainer/addRuntimeLog',
            payload: {
              log: newLog,
              appId: appKey  // 使用 appKey 而不是 id
            }
          });
        }
      }
    };

    // 添加事件监听器
    document.addEventListener('logMessage', handleLogMessage as EventListener);

    // 清理事件监听器
    return () => {
      document.removeEventListener('logMessage', handleLogMessage as EventListener);
    };
  }, [dispatch, currentAppData]);

  // 实现轮询获取运行数据
  useEffect(() => {
    let intervalId: NodeJS.Timeout | null = null;
    const currentAppKey = getCurrentAppKey();

    // 只有在当前tab是运行数据且有当前应用时才开始轮询
    if (activeTab === '3' && currentAppKey && logBarStatus && appRuntimeData[currentAppKey]?.runId) {
      const fetchRuntimeData = async () => {
        try {
          setLoading(true);
          const response = await getNodeData(appRuntimeData[currentAppKey].runId);
          setRuntimeData(prev => ({
            ...prev,
            [currentAppKey]: response.data
          }));
        } catch (error) {
          console.error('获取运行数据失败:', error);
        } finally {
          setLoading(false);
        }
      };

      // 立即获取一次数据
      fetchRuntimeData();

      // 设置轮询，每5秒获取一次数据
      intervalId = setInterval(fetchRuntimeData, 3000);
    }

    // 清理函数，组件卸载或条件不满足时清除定时器
    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, [activeTab, currentAppData, logBarStatus]);

  // 渲染校验日志内容
  const renderValidationLogs = () => {
    return (
      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
        {validationLogs.length === 0 ? (
          <p>暂无校验日志</p>
        ) : (
          validationLogs.map(log => (
            <div key={log.id} style={{ marginBottom: '8px', padding: '4px', borderBottom: '1px solid #eee' }}>
              <div style={{ fontSize: '12px', color: '#999' }}>
                {new Date(log.timestamp).toLocaleString()}
              </div>
              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                {log.message}
              </div>
            </div>
          ))
        )}
      </div>
    );
  };

  // 渲染运行时日志内容
  const renderRuntimeLogs = () => {
    // 获取当前应用的运行日志
    const currentAppKey = getCurrentAppKey();
    const currentAppLogs = currentAppKey && appRuntimeData[currentAppKey]
      ? appRuntimeData[currentAppKey].logs || []
      : [];

    return (
      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
        {currentAppLogs.length === 0 ? (
          <p>暂无运行时日志</p>
        ) : (
          currentAppLogs.map((log: LogMessage) => (
            <div key={log.id} style={{ marginBottom: '8px', padding: '4px', borderBottom: '1px solid #eee' }}>
              <div style={{ fontSize: '12px', color: '#999' }}>
                {new Date(log.timestamp).toLocaleString()}
              </div>
              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                {log.message}
              </div>
            </div>
          ))
        )}
      </div>
    );
  };

  // 渲染运行数据内容
  const renderRuntimeData = () => {
    const currentAppKey = getCurrentAppKey();
    const currentAppDataContent = currentAppKey ? runtimeData[currentAppKey] : null;

    return (
      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
        {!currentAppDataContent ? (
          <p>暂无运行数据</p>
        ) : (
          <RunTimeData logData={currentAppDataContent} />
        )}
      </div>
    );
  };

  return (
    <>
      <ResizeBox
        ref={resizeBoxRef}
        className={styles.logBar}
        directions={['top']}
        style={{
          height: logBarStatus ? logContainerHeight : '0px'
        }}
        onMoving={handleResize}
      >
        <Tabs
          type="card-gutter"
          activeTab={activeTab}
          onClickTab={handleTabClick}
          justify={true}
        >
          {tabs.map((x) => (
            <TabPane destroyOnHide key={x.key} title={x.title}>
              {x.key === '1' ? renderRuntimeLogs() :
                x.key === '2' ? renderValidationLogs() :
                  x.key === '3' ? renderRuntimeData() :  // 添加运行数据渲染
                    x.content}
            </TabPane>
          ))}
        </Tabs>
      </ResizeBox>
    </>
  );
};

export default LogBar;