/**
 * 财务全景组件
 * 重构后的主组件，使用模块化结构
 */

import React, { useState, ReactNode } from 'react';
import {
  Box,
  Container,
  VStack,
  HStack,
  Card,
  CardBody,
  CardHeader,
  Heading,
  Text,
  Badge,
  Select,
  IconButton,
  Alert,
  AlertIcon,
  Skeleton,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  TableContainer,
  Divider,
  Tooltip,
} from '@chakra-ui/react';
import { RepeatIcon } from '@chakra-ui/icons';
import ReactECharts from 'echarts-for-react';
import { formatUtils } from '@services/financialService';

// 内部模块导入
import { useFinancialData } from './hooks';
import { COLORS } from './constants';
import { calculateYoYChange, getCellBackground, getMetricChartOption } from './utils';
import {
  StockInfoHeader,
  BalanceSheetTable,
  IncomeStatementTable,
  CashflowTable,
  FinancialMetricsTable,
  MainBusinessAnalysis,
  IndustryRankingView,
  StockComparison,
  ComparisonAnalysis,
} from './components';
import type { FinancialPanoramaProps } from './types';

/**
 * 财务全景主组件
 */
const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propStockCode }) => {
  // 使用数据加载 Hook
  const {
    stockInfo,
    balanceSheet,
    incomeStatement,
    cashflow,
    financialMetrics,
    mainBusiness,
    forecast,
    industryRank,
    comparison,
    loading,
    error,
    refetch,
    currentStockCode,
    selectedPeriods,
    setSelectedPeriods,
  } = useFinancialData({ stockCode: propStockCode });

  // UI 状态
  const [activeTab, setActiveTab] = useState(0);
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [modalContent, setModalContent] = useState<ReactNode>(null);

  // 颜色配置
  const { bgColor, hoverBg, positiveColor, negativeColor, borderColor } = COLORS;

  // 点击指标行显示图表
  const showMetricChart = (
    metricName: string,
    metricKey: string,
    data: Array<{ period: string; [key: string]: unknown }>,
    dataPath: string
  ) => {
    const chartData = data
      .map((item) => {
        const value = dataPath.split('.').reduce((obj: unknown, key: string) => {
          if (obj && typeof obj === 'object') {
            return (obj as Record<string, unknown>)[key];
          }
          return undefined;
        }, item) as number | undefined;
        return {
          period: formatUtils.getReportType(item.period),
          date: item.period,
          value: value ?? 0,
        };
      })
      .reverse();

    const option = getMetricChartOption(metricName, chartData);

    setModalContent(
      <Box>
        <ReactECharts option={option} style={{ height: '400px', width: '100%' }} />
        <Divider my={4} />
        <TableContainer>
          <Table size="sm">
            <Thead>
              <Tr>
                <Th>报告期</Th>
                <Th isNumeric>数值</Th>
                <Th isNumeric>同比</Th>
                <Th isNumeric>环比</Th>
              </Tr>
            </Thead>
            <Tbody>
              {chartData.map((item, idx) => {
                // 计算环比
                const qoq =
                  idx > 0
                    ? ((item.value - chartData[idx - 1].value) /
                        Math.abs(chartData[idx - 1].value)) *
                      100
                    : null;

                // 计算同比
                const currentDate = new Date(item.date);
                const lastYearItem = chartData.find((d) => {
                  const date = new Date(d.date);
                  return (
                    date.getFullYear() === currentDate.getFullYear() - 1 &&
                    date.getMonth() === currentDate.getMonth()
                  );
                });
                const yoy = lastYearItem
                  ? ((item.value - lastYearItem.value) / Math.abs(lastYearItem.value)) * 100
                  : null;

                return (
                  <Tr key={idx}>
                    <Td>{item.period}</Td>
                    <Td isNumeric>{formatUtils.formatLargeNumber(item.value)}</Td>
                    <Td
                      isNumeric
                      color={
                        yoy !== null && yoy > 0
                          ? positiveColor
                          : yoy !== null && yoy < 0
                            ? negativeColor
                            : 'gray.500'
                      }
                    >
                      {yoy !== null ? `${yoy.toFixed(2)}%` : '-'}
                    </Td>
                    <Td
                      isNumeric
                      color={
                        qoq !== null && qoq > 0
                          ? positiveColor
                          : qoq !== null && qoq < 0
                            ? negativeColor
                            : 'gray.500'
                      }
                    >
                      {qoq !== null ? `${qoq.toFixed(2)}%` : '-'}
                    </Td>
                  </Tr>
                );
              })}
            </Tbody>
          </Table>
        </TableContainer>
      </Box>
    );
    onOpen();
  };

  // 通用表格属性
  const tableProps = {
    showMetricChart,
    calculateYoYChange,
    getCellBackground,
    positiveColor,
    negativeColor,
    bgColor,
    hoverBg,
  };

  return (
    <Container maxW="container.xl" py={5}>
      <VStack spacing={6} align="stretch">
        {/* 时间选择器 */}
        <Card>
          <CardBody>
            <HStack justify="space-between">
              <HStack>
                <Text fontSize="sm" color="gray.600">
                  显示期数：
                </Text>
                <Select
                  value={selectedPeriods}
                  onChange={(e) => setSelectedPeriods(Number(e.target.value))}
                  w="150px"
                  size="sm"
                >
                  <option value={4}>最近4期</option>
                  <option value={8}>最近8期</option>
                  <option value={12}>最近12期</option>
                  <option value={16}>最近16期</option>
                </Select>
              </HStack>
              <IconButton
                icon={<RepeatIcon />}
                onClick={refetch}
                isLoading={loading}
                variant="outline"
                size="sm"
                aria-label="刷新数据"
              />
            </HStack>
          </CardBody>
        </Card>

        {/* 股票信息头部 */}
        {loading ? (
          <Skeleton height="150px" />
        ) : (
          <StockInfoHeader
            stockInfo={stockInfo}
            positiveColor={positiveColor}
            negativeColor={negativeColor}
          />
        )}

        {/* 主要内容区域 */}
        {!loading && stockInfo && (
          <Tabs
            index={activeTab}
            onChange={setActiveTab}
            variant="enclosed"
            colorScheme="blue"
          >
            <TabList>
              <Tab>财务概览</Tab>
              <Tab>资产负债表</Tab>
              <Tab>利润表</Tab>
              <Tab>现金流量表</Tab>
              <Tab>财务指标</Tab>
              <Tab>主营业务</Tab>
              <Tab>行业排名</Tab>
              <Tab>业绩预告</Tab>
              <Tab>股票对比</Tab>
            </TabList>

            <TabPanels>
              {/* 财务概览 */}
              <TabPanel>
                <VStack spacing={4} align="stretch">
                  <ComparisonAnalysis comparison={comparison} />
                  <FinancialMetricsTable data={financialMetrics} {...tableProps} />
                </VStack>
              </TabPanel>

              {/* 资产负债表 */}
              <TabPanel>
                <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>
              </TabPanel>

              {/* 利润表 */}
              <TabPanel>
                <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>
              </TabPanel>

              {/* 现金流量表 */}
              <TabPanel>
                <Card>
                  <CardHeader>
                    <VStack align="stretch" spacing={2}>
                      <HStack justify="space-between">
                        <Heading size="md">现金流量表</Heading>
                        <HStack spacing={2}>
                          <Badge colorScheme="blue">
                            显示最近{Math.min(cashflow.length, 8)}期
                          </Badge>
                          <Text fontSize="sm" color="gray.500">
                            红涨绿跌 | 同比变化
                          </Text>
                        </HStack>
                      </HStack>
                      <Text fontSize="xs" color="gray.500">
                        提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
                      </Text>
                    </VStack>
                  </CardHeader>
                  <CardBody>
                    <CashflowTable data={cashflow} {...tableProps} />
                  </CardBody>
                </Card>
              </TabPanel>

              {/* 财务指标 */}
              <TabPanel>
                <FinancialMetricsTable data={financialMetrics} {...tableProps} />
              </TabPanel>

              {/* 主营业务 */}
              <TabPanel>
                <MainBusinessAnalysis mainBusiness={mainBusiness} />
              </TabPanel>

              {/* 行业排名 */}
              <TabPanel>
                <IndustryRankingView
                  industryRank={industryRank}
                  bgColor={bgColor}
                  borderColor={borderColor}
                />
              </TabPanel>

              {/* 业绩预告 */}
              <TabPanel>
                {forecast && (
                  <VStack spacing={4} align="stretch">
                    {forecast.forecasts?.map((item, idx) => (
                      <Card key={idx}>
                        <CardBody>
                          <HStack justify="space-between" mb={2}>
                            <Badge colorScheme="blue">{item.forecast_type}</Badge>
                            <Text fontSize="sm" color="gray.500">
                              报告期: {item.report_date}
                            </Text>
                          </HStack>
                          <Text mb={2}>{item.content}</Text>
                          {item.reason && (
                            <Text fontSize="sm" color="gray.600">
                              {item.reason}
                            </Text>
                          )}
                          {item.change_range?.lower && (
                            <HStack mt={2}>
                              <Text fontSize="sm">预计变动范围:</Text>
                              <Badge colorScheme="green">
                                {item.change_range.lower}% ~ {item.change_range.upper}%
                              </Badge>
                            </HStack>
                          )}
                        </CardBody>
                      </Card>
                    ))}
                  </VStack>
                )}
              </TabPanel>

              {/* 股票对比 */}
              <TabPanel>
                <StockComparison
                  currentStock={currentStockCode}
                  stockInfo={stockInfo}
                  positiveColor={positiveColor}
                  negativeColor={negativeColor}
                />
              </TabPanel>
            </TabPanels>
          </Tabs>
        )}

        {/* 错误提示 */}
        {error && (
          <Alert status="error">
            <AlertIcon />
            {error}
          </Alert>
        )}

        {/* 弹出模态框 */}
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent maxW="900px">
            <ModalHeader>指标详情</ModalHeader>
            <ModalCloseButton />
            <ModalBody pb={6}>{modalContent}</ModalBody>
          </ModalContent>
        </Modal>
      </VStack>
    </Container>
  );
};

export default FinancialPanorama;