/**
 * 利润表 Tab
 */

import React from 'react';
import {
  Card,
  CardBody,
  CardHeader,
  VStack,
  HStack,
  Heading,
  Badge,
  Text,
} from '@chakra-ui/react';
import { IncomeStatementTable } from '../components';
import type { IncomeStatementData } from '../types';

export interface IncomeStatementTabProps {
  incomeStatement: IncomeStatementData[];
  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 IncomeStatementTab: React.FC<IncomeStatementTabProps> = ({
  incomeStatement,
  showMetricChart,
  calculateYoYChange,
  getCellBackground,
  positiveColor,
  negativeColor,
  bgColor,
  hoverBg,
}) => {
  const tableProps = {
    showMetricChart,
    calculateYoYChange,
    getCellBackground,
    positiveColor,
    negativeColor,
    bgColor,
    hoverBg,
  };

  return (
    <Card>
      <CardHeader>
        <VStack align="stretch" spacing={2}>
          <HStack justify="space-between">
            <Heading size="md">利润表</Heading>
            <HStack spacing={2}>
              <Badge colorScheme="blue">
                显示最近{Math.min(incomeStatement.length, 8)}期
              </Badge>
              <Text fontSize="sm" color="gray.500">
                红涨绿跌 | 同比变化
              </Text>
            </HStack>
          </HStack>
          <Text fontSize="xs" color="gray.500">
            提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比
          </Text>
        </VStack>
      </CardHeader>
      <CardBody>
        <IncomeStatementTable data={incomeStatement} {...tableProps} />
      </CardBody>
    </Card>
  );
};

export default IncomeStatementTab;