import React, { useState, useEffect } from 'react';
import { history, useSearchParams } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { Tabs, Button, Spin, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { getOutdoorFairInfo } from '@/services/jobportal/outdoorFair';
import type { OutdoorFairItem } from '@/services/jobportal/outdoorFair';
import FairInfoTab from './components/FairInfoTab';
import BoothTab from './components/BoothTab';
import ParticipatingCompaniesTab from './components/ParticipatingCompaniesTab';
import ParticipatingJobsTab from './components/ParticipatingJobsTab';
import AttendeeTab from './components/AttendeeTab';
import DeviceTab from './components/DeviceTab';

const OutdoorFairDetail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const fairId = Number(searchParams.get('id'));
  const [fairInfo, setFairInfo] = useState<OutdoorFairItem | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('fair-info');

  const fetchFairInfo = async () => {
    setLoading(true);
    try {
      const res = await getOutdoorFairInfo(fairId);
      if (res.code === 200 && res.data) {
        setFairInfo(res.data);
      } else {
        message.error(res.msg || '未找到该招聘会信息');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (fairId) {
      fetchFairInfo();
    }
  }, [fairId]);

  const tabItems = [
    { key: 'fair-info', label: '招聘会管理' },
    { key: 'participating-companies', label: '参会企业' },
    { key: 'participating-jobs', label: '参会岗位' },
    { key: 'attendee', label: '参会人员管理' },
    { key: 'device', label: '设备管理' },
    { key: 'booth', label: '展位图' },
  ];

  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  return (
    <PageContainer
      header={{
        title: fairInfo ? `招聘会详情 — ${fairInfo.title}` : '加载中...',
        onBack: () => history.back(),
        extra: [
          <Button key="back" icon={<ArrowLeftOutlined />} onClick={() => history.back()}>
            返回列表
          </Button>,
        ],
      }}
    >
      <Spin spinning={loading}>
        {fairInfo && (
          <Tabs
            activeKey={activeTab}
            onChange={handleTabChange}
            items={tabItems.map((tab) => ({
              key: tab.key,
              label: tab.label,
              children: (() => {
                switch (tab.key) {
                  case 'fair-info':
                    return (
                      <FairInfoTab
                        fairId={fairId}
                        fairInfo={fairInfo}
                        onFairUpdate={fetchFairInfo}
                      />
                    );
                  case 'booth':
                    return <BoothTab fairId={fairId} fairInfo={fairInfo} />;
                  case 'participating-companies':
                    return <ParticipatingCompaniesTab fairId={fairId} />;
                  case 'participating-jobs':
                    return <ParticipatingJobsTab fairId={fairId} />;
                  case 'attendee':
                    return <AttendeeTab fairId={fairId} />;
                  case 'device':
                    return <DeviceTab fairId={fairId} />;
                  default:
                    return null;
                }
              })(),
            }))}
          />
        )}
      </Spin>
    </PageContainer>
  );
};

export default OutdoorFairDetail;