// src/views/Company/components/DynamicTracking/index.js
// 动态跟踪 - 独立一级 Tab 组件（包含新闻动态等二级 Tab）
// 优化：子组件懒加载，骨架屏即时反馈

import React, { useState, useEffect, useMemo, useCallback, memo, lazy } from 'react';
import { Card, CardBody } from '@chakra-ui/react';
import { Newspaper, Megaphone, Calendar, BarChart2 } from 'lucide-react';

import SubTabContainer from '@components/SubTabContainer';
import {
  NewsPanelSkeleton,
  AnnouncementsSkeleton,
  DisclosureScheduleSkeleton,
  ForecastPanelSkeleton,
} from './components/DynamicTrackingSkeleton';

// 懒加载子组件
const NewsPanel = lazy(() => import('./components/NewsPanel'));
const ForecastPanel = lazy(() => import('./components/ForecastPanel'));
const AnnouncementsPanel = lazy(() =>
  import('../CompanyOverview/BasicInfoTab/components/AnnouncementsPanel')
);
const DisclosureSchedulePanel = lazy(() =>
  import('../CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel')
);

// 二级 Tab 配置（带骨架屏 fallback）
const TRACKING_TABS = [
  {
    key: 'news',
    name: '新闻动态',
    icon: Newspaper,
    component: NewsPanel,
    fallback: <NewsPanelSkeleton />,
  },
  {
    key: 'announcements',
    name: '公司公告',
    icon: Megaphone,
    component: AnnouncementsPanel,
    fallback: <AnnouncementsSkeleton />,
  },
  {
    key: 'disclosure',
    name: '财报披露日程',
    icon: Calendar,
    component: DisclosureSchedulePanel,
    fallback: <DisclosureScheduleSkeleton />,
  },
  {
    key: 'forecast',
    name: '业绩预告',
    icon: BarChart2,
    component: ForecastPanel,
    fallback: <ForecastPanelSkeleton />,
  },
];

/**
 * 动态跟踪组件
 *
 * 功能：
 * - 使用 SubTabContainer 实现二级导航（同步渲染，无 loading）
 * - 子组件懒加载，减少初始包体积
 * - 每个 Tab 有专属骨架屏，提供即时视觉反馈
 *
 * @param {Object} props
 * @param {string} props.stockCode - 股票代码
 */
const DynamicTracking = memo(({ stockCode: propStockCode }) => {
  const [stockCode, setStockCode] = useState(propStockCode || '000001');
  const [activeTab, setActiveTab] = useState(0);

  // 监听 props 中的 stockCode 变化
  useEffect(() => {
    if (propStockCode && propStockCode !== stockCode) {
      setStockCode(propStockCode);
    }
  }, [propStockCode, stockCode]);

  // 传递给子组件的 props
  const componentProps = useMemo(
    () => ({
      stockCode,
    }),
    [stockCode]
  );

  // Tab 切换回调
  const handleTabChange = useCallback((index) => {
    setActiveTab(index);
  }, []);

  return (
    <Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
      <CardBody p={0}>
        <SubTabContainer
          tabs={TRACKING_TABS}
          componentProps={componentProps}
          themePreset="blackGold"
          index={activeTab}
          onTabChange={handleTabChange}
          isLazy
          size="sm"
        />
      </CardBody>
    </Card>
  );
});

DynamicTracking.displayName = 'DynamicTracking';

export default DynamicTracking;