/**
 * 现金流量表 Tab
 */

import React, { memo } from 'react';
import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react';
import { CashflowTable } from '../components';
import type { CashflowData } from '../types';

export interface CashflowTabProps {
  cashflow: CashflowData[];
  loading?: boolean;
  showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
  calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
  getCellBackground: (change: number, intensity: number) => string;
  positiveColor: string;
  negativeColor: string;
  bgColor: string;
  hoverBg: string;
}

const CashflowTabInner: React.FC<CashflowTabProps> = ({
  cashflow,
  loading,
  showMetricChart,
  calculateYoYChange,
  getCellBackground,
  positiveColor,
  negativeColor,
  bgColor,
  hoverBg,
}) => {
  // 加载中状态
  if (loading && (!Array.isArray(cashflow) || cashflow.length === 0)) {
    return (
      <Center py={12}>
        <Spinner size="lg" color="#D4AF37" thickness="3px" />
      </Center>
    );
  }

  const tableProps = {
    showMetricChart,
    calculateYoYChange,
    getCellBackground,
    positiveColor,
    negativeColor,
    bgColor,
    hoverBg,
  };

  return (
    <Box>
      <VStack align="stretch" spacing={2} mb={4}>
        <HStack justify="space-between">
          <Heading size="md" color="#D4AF37">现金流量表</Heading>
          <HStack spacing={2}>
            <Badge bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
              显示最近{Math.min(cashflow.length, 8)}期
            </Badge>
            <Text fontSize="sm" color="gray.400">
              红涨绿跌 | 同比变化
            </Text>
          </HStack>
        </HStack>
        <Text fontSize="xs" color="gray.500">
          提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
        </Text>
      </VStack>
      <CashflowTable data={cashflow} {...tableProps} />
    </Box>
  );
};

const CashflowTab = memo(CashflowTabInner);
export default CashflowTab;