import { useEffect, useState } from "react";
import { Base } from "./table/index";
import { markService } from "../modules/mark-service";
import { SigmaGraph } from "./graph/sigma/index";
import { DocsComponent } from "./docs";
import { MarkDetailList } from "./card/MarkDetailList";

const tabs = [
  {
    key: 'table',
    title: '表格'
  },
  {
    key: 'card',
    title: '卡片'
  },
  {
    key: 'graph',
    title: '关系图'
  },
  {
    key: 'docs',
    title: '文档'
  },
  {
    key: 'world',
    title: '世界'
  }
];

export const BaseApp = () => {
  const [activeTab, setActiveTab] = useState('table');
  const [dataSource, setDataSource] = useState<any[]>([]);
  useEffect(() => {
    getMarks();
  }, []);
  const getMarks = async () => {
    const marks = await markService.getAllMarks();
    setDataSource(marks);
  }
  const renderContent = () => {
    switch (activeTab) {
      case 'table':
        return <Base dataSource={dataSource} />;
      case 'graph':
        return (
          <div className="w-full h-96">
            <SigmaGraph dataSource={dataSource} />
          </div>
        );
      case 'card':
        return <MarkDetailList data={dataSource} />;
      case 'docs':
        return <DocsComponent dataSource={dataSource} />;
      case 'world':
        return (
          <div className="flex items-center justify-center h-96 text-gray-500">
            世界模块暂未实现
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="w-full h-full">
      {/* Tab 导航栏 */}
      <div className="border-b border-gray-200">
        <nav className="flex space-x-8">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`py-2 px-4 border-b-2 font-medium text-sm transition-all duration-200 ease-in-out transform cursor-pointer ${activeTab === tab.key
                ? 'border-blue-500 text-blue-600 bg-blue-50'
                : 'border-transparent text-gray-500'
                }`}
            >
              {tab.title}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab 内容区域 */}
      <div className="flex-1 h-full">
        {renderContent()}
      </div>
    </div>
  );
}