vf_react/src/views/Dashboard/components/InvestmentPlanningCenter.tsx

/**
 * InvestmentPlanningCenter - 投资规划中心主组件 (TypeScript 重构版)
 *
 * 性能优化：
 * - 使用 React.lazy() 懒加载子面板，减少初始加载时间
 * - 使用 TypeScript 提供类型安全
 *
 * 组件架构：
 * - InvestmentPlanningCenter (主组件)
 * - CalendarPanel (日历面板，懒加载)
 * - EventPanel (通用事件面板，用于计划和复盘)
 * - PlanningContext (数据共享层)
 */

import React, { useState, useEffect, useCallback, Suspense, lazy } from 'react';
import {
  Box,
  Card,
  CardHeader,
  CardBody,
  Heading,
  HStack,
  Flex,
  Icon,
  useColorModeValue,
  useToast,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Spinner,
  Center,
  Button,
  ButtonGroup,
} from '@chakra-ui/react';
import {
  FiCalendar,
  FiTarget,
  FiFileText,
  FiList,
  FiPlus,
} from 'react-icons/fi';

import { PlanningDataProvider } from './PlanningContext';
import type { InvestmentEvent, PlanningContextValue } from '@/types';
import { logger } from '@/utils/logger';
import { getApiBase } from '@/utils/apiConfig';
import './InvestmentCalendar.css';

// 懒加载子面板组件（实现代码分割）
const CalendarPanel = lazy(() =>
  import('./CalendarPanel').then(module => ({ default: module.CalendarPanel }))
);
const EventPanel = lazy(() =>
  import('./EventPanel').then(module => ({ default: module.EventPanel }))
);

/**
 * 面板加载占位符
 */
const PanelLoadingFallback: React.FC = () => (
  <Center py={12}>
    <Spinner size="xl" color="purple.500" thickness="4px" />
  </Center>
);

/**
 * InvestmentPlanningCenter 主组件
 */
const InvestmentPlanningCenter: React.FC = () => {
  const toast = useToast();

  // 颜色主题
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const textColor = useColorModeValue('gray.700', 'white');
  const secondaryText = useColorModeValue('gray.600', 'gray.400');
  const cardBg = useColorModeValue('gray.50', 'gray.700');

  // 全局数据状态
  const [allEvents, setAllEvents] = useState<InvestmentEvent[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [viewMode, setViewMode] = useState<'calendar' | 'list'>('list');
  const [listTab, setListTab] = useState<number>(0); // 0: 我的计划, 1: 我的复盘
  const [openPlanModalTrigger, setOpenPlanModalTrigger] = useState<number>(0);
  const [openReviewModalTrigger, setOpenReviewModalTrigger] = useState<number>(0);

  /**
   * 加载所有事件数据（日历事件 + 计划 + 复盘）
   */
  const loadAllData = useCallback(async (): Promise<void> => {
    try {
      setLoading(true);
      const base = getApiBase();

      const response = await fetch(base + '/api/account/calendar/events', {
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          setAllEvents(data.data || []);
          logger.debug('InvestmentPlanningCenter', '数据加载成功', {
            count: data.data?.length || 0
          });
        }
      }
    } catch (error) {
      logger.error('InvestmentPlanningCenter', 'loadAllData', error);
    } finally {
      setLoading(false);
    }
  }, []);

  // 组件挂载时加载数据
  useEffect(() => {
    loadAllData();
  }, [loadAllData]);

  // 提供给子组件的 Context 值
  const contextValue: PlanningContextValue = {
    allEvents,
    setAllEvents,
    loadAllData,
    loading,
    setLoading,
    openPlanModalTrigger,
    openReviewModalTrigger,
    toast,
    bgColor,
    borderColor,
    textColor,
    secondaryText,
    cardBg,
    setViewMode,
    setListTab,
  };

  // 计算各类型事件数量
  const planCount = allEvents.filter(e => e.type === 'plan').length;
  const reviewCount = allEvents.filter(e => e.type === 'review').length;

  return (
    <PlanningDataProvider value={contextValue}>
      <Card bg={bgColor} shadow="md">
        <CardHeader pb={4}>
          <Flex justify="space-between" align="center">
            <HStack>
              <Icon as={FiTarget} color="purple.500" boxSize={5} />
              <Heading size="md">投资规划中心</Heading>
            </HStack>
            {/* 视图切换按钮组 */}
            <ButtonGroup size="sm" isAttached variant="outline">
              <Button
                leftIcon={<Icon as={FiList} />}
                colorScheme={viewMode === 'list' ? 'purple' : 'gray'}
                variant={viewMode === 'list' ? 'solid' : 'outline'}
                onClick={() => setViewMode('list')}
              >
                列表视图
              </Button>
              <Button
                leftIcon={<Icon as={FiCalendar} />}
                colorScheme={viewMode === 'calendar' ? 'purple' : 'gray'}
                variant={viewMode === 'calendar' ? 'solid' : 'outline'}
                onClick={() => setViewMode('calendar')}
              >
                日历视图
              </Button>
            </ButtonGroup>
          </Flex>
        </CardHeader>
        <CardBody pt={0}>
          {viewMode === 'calendar' ? (
            /* 日历视图 */
            <Suspense fallback={<PanelLoadingFallback />}>
              <CalendarPanel />
            </Suspense>
          ) : (
            /* 列表视图：我的计划 / 我的复盘 切换 */
            <Tabs
              index={listTab}
              onChange={setListTab}
              variant="enclosed"
              colorScheme="purple"
            >
              <Flex justify="space-between" align="center" mb={4}>
                <TabList mb={0} borderBottom="none">
                  <Tab>
                    <Icon as={FiTarget} mr={2} />
                    我的计划 ({planCount})
                  </Tab>
                  <Tab>
                    <Icon as={FiFileText} mr={2} />
                    我的复盘 ({reviewCount})
                  </Tab>
                </TabList>
                <Button
                  size="sm"
                  colorScheme="purple"
                  leftIcon={<Icon as={FiPlus} />}
                  onClick={() => {
                    if (listTab === 0) {
                      setOpenPlanModalTrigger(prev => prev + 1);
                    } else {
                      setOpenReviewModalTrigger(prev => prev + 1);
                    }
                  }}
                >
                  {listTab === 0 ? '新建计划' : '新建复盘'}
                </Button>
              </Flex>

              <TabPanels>
                {/* 计划列表面板 */}
                <TabPanel px={0}>
                  <Suspense fallback={<PanelLoadingFallback />}>
                    <EventPanel
                      type="plan"
                      colorScheme="purple"
                      label="计划"
                      openModalTrigger={openPlanModalTrigger}
                    />
                  </Suspense>
                </TabPanel>

                {/* 复盘列表面板 */}
                <TabPanel px={0}>
                  <Suspense fallback={<PanelLoadingFallback />}>
                    <EventPanel
                      type="review"
                      colorScheme="green"
                      label="复盘"
                      openModalTrigger={openReviewModalTrigger}
                    />
                  </Suspense>
                </TabPanel>
              </TabPanels>
            </Tabs>
          )}
        </CardBody>
      </Card>
    </PlanningDataProvider>
  );
};

export default InvestmentPlanningCenter;