// src/views/Company/components/CompanyOverview/NewsEventsTab.js
// 新闻动态 Tab - 相关新闻事件列表 + 分页

import React from "react";
import {
  Box,
  VStack,
  HStack,
  Text,
  Badge,
  Icon,
  Card,
  CardBody,
  Button,
  Input,
  InputGroup,
  InputLeftElement,
  Tag,
  Center,
  Spinner,
} from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";
import {
  FaNewspaper,
  FaBullhorn,
  FaGavel,
  FaFlask,
  FaDollarSign,
  FaShieldAlt,
  FaFileAlt,
  FaIndustry,
  FaEye,
  FaFire,
  FaChartLine,
  FaChevronLeft,
  FaChevronRight,
} from "react-icons/fa";

// 黑金主题配色
const THEME_PRESETS = {
  blackGold: {
    bg: "#0A0E17",
    cardBg: "#1A1F2E",
    cardHoverBg: "#212633",
    cardBorder: "rgba(212, 175, 55, 0.2)",
    cardHoverBorder: "#D4AF37",
    textPrimary: "#E8E9ED",
    textSecondary: "#A0A4B8",
    textMuted: "#6B7280",
    gold: "#D4AF37",
    goldLight: "#FFD54F",
    inputBg: "#151922",
    inputBorder: "#2D3748",
    buttonBg: "#D4AF37",
    buttonText: "#0A0E17",
    buttonHoverBg: "#FFD54F",
    badgeS: { bg: "rgba(255, 195, 0, 0.2)", color: "#FFD54F" },
    badgeA: { bg: "rgba(249, 115, 22, 0.2)", color: "#FB923C" },
    badgeB: { bg: "rgba(59, 130, 246, 0.2)", color: "#60A5FA" },
    badgeC: { bg: "rgba(107, 114, 128, 0.2)", color: "#9CA3AF" },
    tagBg: "rgba(212, 175, 55, 0.15)",
    tagColor: "#D4AF37",
    spinnerColor: "#D4AF37",
  },
  default: {
    bg: "white",
    cardBg: "white",
    cardHoverBg: "gray.50",
    cardBorder: "gray.200",
    cardHoverBorder: "blue.300",
    textPrimary: "gray.800",
    textSecondary: "gray.600",
    textMuted: "gray.500",
    gold: "blue.500",
    goldLight: "blue.400",
    inputBg: "white",
    inputBorder: "gray.200",
    buttonBg: "blue.500",
    buttonText: "white",
    buttonHoverBg: "blue.600",
    badgeS: { bg: "red.100", color: "red.600" },
    badgeA: { bg: "orange.100", color: "orange.600" },
    badgeB: { bg: "yellow.100", color: "yellow.600" },
    badgeC: { bg: "green.100", color: "green.600" },
    tagBg: "cyan.50",
    tagColor: "cyan.600",
    spinnerColor: "blue.500",
  },
};

/**
 * 新闻动态 Tab 组件
 *
 * Props:
 * - newsEvents: 新闻事件列表数组
 * - newsLoading: 加载状态
 * - newsPagination: 分页信息 { page, per_page, total, pages, has_next, has_prev }
 * - searchQuery: 搜索关键词
 * - onSearchChange: 搜索输入回调 (value) => void
 * - onSearch: 搜索提交回调 () => void
 * - onPageChange: 分页回调 (page) => void
 * - cardBg: 卡片背景色
 * - themePreset: 主题预设 'blackGold' | 'default'
 */
const NewsEventsTab = ({
  newsEvents = [],
  newsLoading = false,
  newsPagination = {
    page: 1,
    per_page: 10,
    total: 0,
    pages: 0,
    has_next: false,
    has_prev: false,
  },
  searchQuery = "",
  onSearchChange,
  onSearch,
  onPageChange,
  cardBg,
  themePreset = "default",
}) => {
  // 获取主题配色
  const theme = THEME_PRESETS[themePreset] || THEME_PRESETS.default;
  const isBlackGold = themePreset === "blackGold";
  // 事件类型图标映射
  const getEventTypeIcon = (eventType) => {
    const iconMap = {
      企业公告: FaBullhorn,
      政策: FaGavel,
      技术突破: FaFlask,
      企业融资: FaDollarSign,
      政策监管: FaShieldAlt,
      政策动态: FaFileAlt,
      行业事件: FaIndustry,
    };
    return iconMap[eventType] || FaNewspaper;
  };

  // 重要性颜色映射 - 根据主题返回不同配色
  const getImportanceBadgeStyle = (importance) => {
    if (isBlackGold) {
      const styles = {
        S: theme.badgeS,
        A: theme.badgeA,
        B: theme.badgeB,
        C: theme.badgeC,
      };
      return styles[importance] || { bg: "rgba(107, 114, 128, 0.2)", color: "#9CA3AF" };
    }
    // 默认主题使用 colorScheme
    const colorMap = {
      S: "red",
      A: "orange",
      B: "yellow",
      C: "green",
    };
    return { colorScheme: colorMap[importance] || "gray" };
  };

  // 处理搜索输入
  const handleInputChange = (e) => {
    onSearchChange?.(e.target.value);
  };

  // 处理搜索提交
  const handleSearchSubmit = () => {
    onSearch?.();
  };

  // 处理键盘事件
  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleSearchSubmit();
    }
  };

  // 处理分页
  const handlePageChange = (page) => {
    onPageChange?.(page);
    // 滚动到列表顶部
    document
      .getElementById("news-list-top")
      ?.scrollIntoView({ behavior: "smooth" });
  };

  // 渲染分页按钮
  const renderPaginationButtons = () => {
    const { page: currentPage, pages: totalPages } = newsPagination;
    const pageButtons = [];

    // 显示当前页及前后各2页
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, currentPage + 2);

    // 如果开始页大于1，显示省略号
    if (startPage > 1) {
      pageButtons.push(
        <Text key="start-ellipsis" fontSize="sm" color={theme.textMuted}>
          ...
        </Text>
      );
    }

    for (let i = startPage; i <= endPage; i++) {
      const isActive = i === currentPage;
      pageButtons.push(
        <Button
          key={i}
          size="sm"
          bg={isActive ? theme.buttonBg : (isBlackGold ? theme.inputBg : undefined)}
          color={isActive ? theme.buttonText : theme.textSecondary}
          borderColor={isActive ? theme.gold : theme.cardBorder}
          borderWidth="1px"
          _hover={{
            bg: isActive ? theme.buttonHoverBg : theme.cardHoverBg,
            borderColor: theme.gold
          }}
          onClick={() => handlePageChange(i)}
          isDisabled={newsLoading}
        >
          {i}
        </Button>
      );
    }

    // 如果结束页小于总页数，显示省略号
    if (endPage < totalPages) {
      pageButtons.push(
        <Text key="end-ellipsis" fontSize="sm" color={theme.textMuted}>
          ...
        </Text>
      );
    }

    return pageButtons;
  };

  return (
    <VStack spacing={4} align="stretch">
      <Card bg={cardBg || theme.cardBg} shadow="md" borderColor={theme.cardBorder} borderWidth={isBlackGold ? "1px" : "0"}>
        <CardBody>
          <VStack spacing={4} align="stretch">
            {/* 搜索框和统计信息 */}
            <HStack justify="space-between" flexWrap="wrap">
              <HStack flex={1} minW="300px">
                <InputGroup>
                  <InputLeftElement pointerEvents="none">
                    <SearchIcon color={theme.textMuted} />
                  </InputLeftElement>
                  <Input
                    placeholder="搜索相关新闻..."
                    value={searchQuery}
                    onChange={handleInputChange}
                    onKeyPress={handleKeyPress}
                    bg={theme.inputBg}
                    borderColor={theme.inputBorder}
                    color={theme.textPrimary}
                    _placeholder={{ color: theme.textMuted }}
                    _hover={{ borderColor: theme.gold }}
                    _focus={{ borderColor: theme.gold, boxShadow: `0 0 0 1px ${theme.gold}` }}
                  />
                </InputGroup>
                <Button
                  bg={theme.buttonBg}
                  color={theme.buttonText}
                  _hover={{ bg: theme.buttonHoverBg }}
                  onClick={handleSearchSubmit}
                  isLoading={newsLoading}
                  minW="80px"
                >
                  搜索
                </Button>
              </HStack>

              {newsPagination.total > 0 && (
                <HStack spacing={2}>
                  <Icon as={FaNewspaper} color={theme.gold} />
                  <Text fontSize="sm" color={theme.textSecondary}>
                    共找到{" "}
                    <Text as="span" fontWeight="bold" color={theme.gold}>
                      {newsPagination.total}
                    </Text>{" "}
                    条新闻
                  </Text>
                </HStack>
              )}
            </HStack>

            <div id="news-list-top" />

            {/* 新闻列表 */}
            {newsLoading ? (
              <Center h="400px">
                <VStack spacing={3}>
                  <Spinner size="xl" color={theme.spinnerColor} thickness="4px" />
                  <Text color={theme.textSecondary}>正在加载新闻...</Text>
                </VStack>
              </Center>
            ) : newsEvents.length > 0 ? (
              <>
                <VStack spacing={3} align="stretch">
                  {newsEvents.map((event, idx) => {
                    const importanceBadgeStyle = getImportanceBadgeStyle(
                      event.importance
                    );
                    const eventTypeIcon = getEventTypeIcon(event.event_type);

                    return (
                      <Card
                        key={event.id || idx}
                        variant="outline"
                        bg={theme.cardBg}
                        borderColor={theme.cardBorder}
                        _hover={{
                          bg: theme.cardHoverBg,
                          shadow: "md",
                          borderColor: theme.cardHoverBorder,
                        }}
                        transition="all 0.2s"
                      >
                        <CardBody p={4}>
                          <VStack align="stretch" spacing={3}>
                            {/* 标题栏 */}
                            <HStack justify="space-between" align="start">
                              <VStack align="start" spacing={2} flex={1}>
                                <HStack>
                                  <Icon
                                    as={eventTypeIcon}
                                    color={theme.gold}
                                    boxSize={5}
                                  />
                                  <Text
                                    fontWeight="bold"
                                    fontSize="lg"
                                    lineHeight="1.3"
                                    color={theme.textPrimary}
                                  >
                                    {event.title}
                                  </Text>
                                </HStack>

                                {/* 标签栏 */}
                                <HStack spacing={2} flexWrap="wrap">
                                  {event.importance && (
                                    <Badge
                                      {...(isBlackGold ? {} : { colorScheme: importanceBadgeStyle.colorScheme, variant: "solid" })}
                                      bg={isBlackGold ? importanceBadgeStyle.bg : undefined}
                                      color={isBlackGold ? importanceBadgeStyle.color : undefined}
                                      px={2}
                                    >
                                      {event.importance}级
                                    </Badge>
                                  )}
                                  {event.event_type && (
                                    <Badge
                                      {...(isBlackGold ? {} : { colorScheme: "blue", variant: "outline" })}
                                      bg={isBlackGold ? "rgba(59, 130, 246, 0.2)" : undefined}
                                      color={isBlackGold ? "#60A5FA" : undefined}
                                      borderColor={isBlackGold ? "rgba(59, 130, 246, 0.3)" : undefined}
                                    >
                                      {event.event_type}
                                    </Badge>
                                  )}
                                  {event.invest_score && (
                                    <Badge
                                      {...(isBlackGold ? {} : { colorScheme: "purple", variant: "subtle" })}
                                      bg={isBlackGold ? "rgba(139, 92, 246, 0.2)" : undefined}
                                      color={isBlackGold ? "#A78BFA" : undefined}
                                    >
                                      投资分: {event.invest_score}
                                    </Badge>
                                  )}
                                  {event.keywords && event.keywords.length > 0 && (
                                    <>
                                      {event.keywords
                                        .slice(0, 4)
                                        .map((keyword, kidx) => (
                                          <Tag
                                            key={kidx}
                                            size="sm"
                                            {...(isBlackGold ? {} : { colorScheme: "cyan", variant: "subtle" })}
                                            bg={isBlackGold ? theme.tagBg : undefined}
                                            color={isBlackGold ? theme.tagColor : undefined}
                                          >
                                            {typeof keyword === "string"
                                              ? keyword
                                              : keyword?.concept ||
                                                keyword?.name ||
                                                "未知"}
                                          </Tag>
                                        ))}
                                    </>
                                  )}
                                </HStack>
                              </VStack>

                              {/* 右侧信息栏 */}
                              <VStack align="end" spacing={1} minW="100px">
                                <Text fontSize="xs" color={theme.textMuted}>
                                  {event.created_at
                                    ? new Date(
                                        event.created_at
                                      ).toLocaleDateString("zh-CN", {
                                        year: "numeric",
                                        month: "2-digit",
                                        day: "2-digit",
                                      })
                                    : ""}
                                </Text>
                                <HStack spacing={3}>
                                  {event.view_count !== undefined && (
                                    <HStack spacing={1}>
                                      <Icon
                                        as={FaEye}
                                        boxSize={3}
                                        color={theme.textMuted}
                                      />
                                      <Text fontSize="xs" color={theme.textMuted}>
                                        {event.view_count}
                                      </Text>
                                    </HStack>
                                  )}
                                  {event.hot_score !== undefined && (
                                    <HStack spacing={1}>
                                      <Icon
                                        as={FaFire}
                                        boxSize={3}
                                        color={theme.goldLight}
                                      />
                                      <Text fontSize="xs" color={theme.textMuted}>
                                        {event.hot_score.toFixed(1)}
                                      </Text>
                                    </HStack>
                                  )}
                                </HStack>
                                {event.creator && (
                                  <Text fontSize="xs" color={theme.textMuted}>
                                    @{event.creator.username}
                                  </Text>
                                )}
                              </VStack>
                            </HStack>

                            {/* 描述 */}
                            {event.description && (
                              <Text
                                fontSize="sm"
                                color={theme.textSecondary}
                                lineHeight="1.6"
                              >
                                {event.description}
                              </Text>
                            )}

                            {/* 收益率数据 */}
                            {(event.related_avg_chg !== null ||
                              event.related_max_chg !== null ||
                              event.related_week_chg !== null) && (
                              <Box
                                pt={2}
                                borderTop="1px"
                                borderColor={theme.cardBorder}
                              >
                                <HStack spacing={6} flexWrap="wrap">
                                  <HStack spacing={1}>
                                    <Icon
                                      as={FaChartLine}
                                      boxSize={3}
                                      color={theme.textMuted}
                                    />
                                    <Text
                                      fontSize="xs"
                                      color={theme.textMuted}
                                      fontWeight="medium"
                                    >
                                      相关涨跌:
                                    </Text>
                                  </HStack>
                                  {event.related_avg_chg !== null &&
                                    event.related_avg_chg !== undefined && (
                                      <HStack spacing={1}>
                                        <Text fontSize="xs" color={theme.textMuted}>
                                          平均
                                        </Text>
                                        <Text
                                          fontSize="sm"
                                          fontWeight="bold"
                                          color={
                                            event.related_avg_chg > 0
                                              ? "#EF4444"
                                              : "#10B981"
                                          }
                                        >
                                          {event.related_avg_chg > 0 ? "+" : ""}
                                          {event.related_avg_chg.toFixed(2)}%
                                        </Text>
                                      </HStack>
                                    )}
                                  {event.related_max_chg !== null &&
                                    event.related_max_chg !== undefined && (
                                      <HStack spacing={1}>
                                        <Text fontSize="xs" color={theme.textMuted}>
                                          最大
                                        </Text>
                                        <Text
                                          fontSize="sm"
                                          fontWeight="bold"
                                          color={
                                            event.related_max_chg > 0
                                              ? "#EF4444"
                                              : "#10B981"
                                          }
                                        >
                                          {event.related_max_chg > 0 ? "+" : ""}
                                          {event.related_max_chg.toFixed(2)}%
                                        </Text>
                                      </HStack>
                                    )}
                                  {event.related_week_chg !== null &&
                                    event.related_week_chg !== undefined && (
                                      <HStack spacing={1}>
                                        <Text fontSize="xs" color={theme.textMuted}>
                                          周
                                        </Text>
                                        <Text
                                          fontSize="sm"
                                          fontWeight="bold"
                                          color={
                                            event.related_week_chg > 0
                                              ? "#EF4444"
                                              : "#10B981"
                                          }
                                        >
                                          {event.related_week_chg > 0
                                            ? "+"
                                            : ""}
                                          {event.related_week_chg.toFixed(2)}%
                                        </Text>
                                      </HStack>
                                    )}
                                </HStack>
                              </Box>
                            )}
                          </VStack>
                        </CardBody>
                      </Card>
                    );
                  })}
                </VStack>

                {/* 分页控件 */}
                {newsPagination.pages > 1 && (
                  <Box pt={4}>
                    <HStack
                      justify="space-between"
                      align="center"
                      flexWrap="wrap"
                    >
                      {/* 分页信息 */}
                      <Text fontSize="sm" color={theme.textSecondary}>
                        第 {newsPagination.page} / {newsPagination.pages} 页
                      </Text>

                      {/* 分页按钮 */}
                      <HStack spacing={2}>
                        <Button
                          size="sm"
                          bg={isBlackGold ? theme.inputBg : undefined}
                          color={theme.textSecondary}
                          borderColor={theme.cardBorder}
                          borderWidth="1px"
                          _hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
                          onClick={() => handlePageChange(1)}
                          isDisabled={!newsPagination.has_prev || newsLoading}
                          leftIcon={<Icon as={FaChevronLeft} />}
                        >
                          首页
                        </Button>
                        <Button
                          size="sm"
                          bg={isBlackGold ? theme.inputBg : undefined}
                          color={theme.textSecondary}
                          borderColor={theme.cardBorder}
                          borderWidth="1px"
                          _hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
                          onClick={() =>
                            handlePageChange(newsPagination.page - 1)
                          }
                          isDisabled={!newsPagination.has_prev || newsLoading}
                        >
                          上一页
                        </Button>

                        {/* 页码按钮 */}
                        {renderPaginationButtons()}

                        <Button
                          size="sm"
                          bg={isBlackGold ? theme.inputBg : undefined}
                          color={theme.textSecondary}
                          borderColor={theme.cardBorder}
                          borderWidth="1px"
                          _hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
                          onClick={() =>
                            handlePageChange(newsPagination.page + 1)
                          }
                          isDisabled={!newsPagination.has_next || newsLoading}
                        >
                          下一页
                        </Button>
                        <Button
                          size="sm"
                          bg={isBlackGold ? theme.inputBg : undefined}
                          color={theme.textSecondary}
                          borderColor={theme.cardBorder}
                          borderWidth="1px"
                          _hover={{ bg: theme.cardHoverBg, borderColor: theme.gold }}
                          onClick={() => handlePageChange(newsPagination.pages)}
                          isDisabled={!newsPagination.has_next || newsLoading}
                          rightIcon={<Icon as={FaChevronRight} />}
                        >
                          末页
                        </Button>
                      </HStack>
                    </HStack>
                  </Box>
                )}
              </>
            ) : (
              <Center h="400px">
                <VStack spacing={3}>
                  <Icon as={FaNewspaper} boxSize={16} color={isBlackGold ? theme.gold : "gray.300"} opacity={0.5} />
                  <Text color={theme.textSecondary} fontSize="lg" fontWeight="medium">
                    暂无相关新闻
                  </Text>
                  <Text fontSize="sm" color={theme.textMuted}>
                    {searchQuery ? "尝试修改搜索关键词" : "该公司暂无新闻动态"}
                  </Text>
                </VStack>
              </Center>
            )}
          </VStack>
        </CardBody>
      </Card>
    </VStack>
  );
};

export default NewsEventsTab;