/**
 * ETL 任务管理页面 — 合并 TaskConfig / QueueTab / ScheduleTab / ETLStatus 为 Tab 视图。
 *
 * - 5 个 Tab：config（发起）、queue（队列）、schedule（调度）、history（历史）、status（状态）
 * - Tab 切换通过 useSearchParams 同步 URL 查询参数 ?tab=config|queue|schedule|history|status
 * - destroyInactiveTabPane={false} 保持 Tab 状态不丢失
 *
 * CHANGE 2026-07-14 | Task 9.1：从占位页面替换为完整 Tab 视图实现
 * CHANGE 2026-03-25 | 将 TaskManager 内部子 Tab（队列/调度）提升到顶层，去掉历史 Tab
 */

import React, { useMemo } from 'react';
import { Tabs, Typography } from 'antd';
import { useSearchParams } from 'react-router-dom';
import {
  SettingOutlined,
  UnorderedListOutlined,
  ClockCircleOutlined,
  HistoryOutlined,
  DashboardOutlined,
} from '@ant-design/icons';
import TaskConfig from './TaskConfig';
import { QueueTab, HistoryTab } from './TaskManager';
import ScheduleTab from '../components/ScheduleTab';
import ETLStatus from './ETLStatus';

const { Title } = Typography;

const VALID_TABS = ['config', 'queue', 'schedule', 'history', 'status'] as const;
type TabKey = (typeof VALID_TABS)[number];
const DEFAULT_TAB: TabKey = 'config';

function isValidTab(value: string | null): value is TabKey {
  return value != null && (VALID_TABS as readonly string[]).includes(value);
}

const ETLTasks: React.FC = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const activeTab: TabKey = useMemo(() => {
    const raw = searchParams.get('tab');
    return isValidTab(raw) ? raw : DEFAULT_TAB;
  }, [searchParams]);

  const handleTabChange = (key: string) => {
    setSearchParams({ tab: key }, { replace: true });
  };

  const items = useMemo(
    () => [
      {
        key: 'config' as TabKey,
        label: (
          <span>
            <SettingOutlined style={{ marginRight: 6 }} />
            发起
          </span>
        ),
        children: <TaskConfig />,
      },
      {
        key: 'queue' as TabKey,
        label: (
          <span>
            <UnorderedListOutlined style={{ marginRight: 6 }} />
            队列
          </span>
        ),
        children: <QueueTab />,
      },
      {
        key: 'schedule' as TabKey,
        label: (
          <span>
            <ClockCircleOutlined style={{ marginRight: 6 }} />
            调度
          </span>
        ),
        children: <ScheduleTab />,
      },
      {
        key: 'history' as TabKey,
        label: (
          <span>
            <HistoryOutlined style={{ marginRight: 6 }} />
            历史
          </span>
        ),
        children: <HistoryTab />,
      },
      {
        key: 'status' as TabKey,
        label: (
          <span>
            <DashboardOutlined style={{ marginRight: 6 }} />
            状态
          </span>
        ),
        children: <ETLStatus />,
      },
    ],
    [],
  );

  return (
    <div>
      <Title level={4} style={{ marginBottom: 16 }}>
        <UnorderedListOutlined style={{ marginRight: 8 }} />
        ETL 任务管理
      </Title>
      <Tabs
        activeKey={activeTab}
        onChange={handleTabChange}
        items={items}
        destroyInactiveTabPane={false}
      />
    </div>
  );
};

export default ETLTasks;
