import { Tab, Tabs } from '@heroui/tabs';
import { useRequest } from 'ahooks';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';

import HistoryLogs from '@/components/log_com/history';
import RealTimeLogs from '@/components/log_com/realtime';

import WebUIManager from '@/controllers/webui_manager';

export default function LogsPage () {
  const {
    data: logList,
    loading: logListLoading,
    error: logListError,
    refresh: refreshLogList,
  } = useRequest(WebUIManager.getLogList);
  const [selectedLog, setSelectedLog] = useState<string | null>(null);
  const [logContent, setLogContent] = useState<string | null>(null);
  const [logLoading, setLogLoading] = useState<boolean>(false);
  const onLogSelect = (name: string) => {
    setSelectedLog(name);
  };
  const onLoadLog = async () => {
    if (!selectedLog) {
      return;
    }
    setLogLoading(true);
    try {
      const result = await WebUIManager.getLogContent(selectedLog);
      setLogContent(result);
    } catch (error) {
      const msg = (error as Error).message;
      toast.error(`加载日志失败: ${msg}`);
    } finally {
      setLogLoading(false);
    }
  };
  useEffect(() => {
    if (logList && logList.length > 0) {
      setSelectedLog(logList[0]);
    }
  }, [logList]);
  useEffect(() => {
    if (selectedLog) {
      onLoadLog();
    }
  }, [selectedLog]);
  return (
    <div className='h-[calc(100vh_-_8rem)] flex flex-col gap-4 items-center pt-4 px-2'>
      <Tabs
        aria-label='Logs'
        classNames={{
          panel: 'w-full flex-1 h-full py-0 flex flex-col gap-4',
          base: 'flex-shrink-0 !h-fit',
          tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
          cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
        }}
      >
        <Tab title='实时日志'>
          <RealTimeLogs />
        </Tab>
        <Tab title='历史日志'>
          <HistoryLogs
            list={logList || []}
            onSelect={onLogSelect}
            selectedLog={selectedLog || undefined}
            refreshList={refreshLogList}
            refreshLog={onLoadLog}
            listLoading={logListLoading}
            logLoading={logLoading}
            listError={logListError}
            logContent={logContent || undefined}
          />
        </Tab>
      </Tabs>
    </div>
  );
}
