/**
 * 资产负债表 Tab
 */

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

export interface BalanceSheetTabProps {
  balanceSheet: BalanceSheetData[];
  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 BalanceSheetTab: React.FC<BalanceSheetTabProps> = ({
  balanceSheet,
  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(balanceSheet.length, 8)}期
              </Badge>
              <Text fontSize="sm" color="gray.500">
                红涨绿跌 | 同比变化
              </Text>
            </HStack>
          </HStack>
          <Text fontSize="xs" color="gray.500">
            提示：表格可横向滚动查看更多数据，点击行查看历史趋势
          </Text>
        </VStack>
      </CardHeader>
      <CardBody>
        <BalanceSheetTable data={balanceSheet} {...tableProps} />
      </CardBody>
    </Card>
  );
};

export default BalanceSheetTab;