// src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
// 动态新闻详情面板主组件（组装所有子组件）

import React, { useState, useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  Box,
  Card,
  CardBody,
  VStack,
  Text,
  Spinner,
  Center,
  Wrap,
  WrapItem,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';
import { getImportanceConfig } from '../../../../constants/importanceLevels';
import { eventService } from '../../../../services/eventService';
import { useEventStocks } from '../StockDetailPanel/hooks/useEventStocks';
import { toggleEventFollow, selectEventFollowStatus } from '../../../../store/slices/communityDataSlice';
import { useAuth } from '../../../../contexts/AuthContext';
import EventHeaderInfo from './EventHeaderInfo';
import CompactMetaBar from './CompactMetaBar';
import EventDescriptionSection from './EventDescriptionSection';
import RelatedConceptsSection from './RelatedConceptsSection';
import RelatedStocksSection from './RelatedStocksSection';
import CompactStockItem from './CompactStockItem';
import CollapsibleSection from './CollapsibleSection';
import HistoricalEvents from '../../../EventDetail/components/HistoricalEvents';
import TransmissionChainAnalysis from '../../../EventDetail/components/TransmissionChainAnalysis';
import SubscriptionBadge from '../../../../components/SubscriptionBadge';
import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal';
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
import EventCommentSection from '../../../../components/EventCommentSection';

/**
 * 动态新闻详情面板主组件
 * @param {Object} props
 * @param {Object} props.event - 事件对象（包含详情数据）
 * @param {boolean} props.showHeader - 是否显示头部信息（默认 true）
 */
const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
  const dispatch = useDispatch();
  const { user } = useAuth();
  const cardBg = PROFESSIONAL_COLORS.background.card;
  const borderColor = PROFESSIONAL_COLORS.border.default;
  const textColor = PROFESSIONAL_COLORS.text.secondary;
  const toast = useToast();

  // 获取用户会员等级（修复：字段名从 subscription_tier 改为 subscription_type）
  const userTier = user?.subscription_type || 'free';

  // 从 Redux 读取关注状态
  const eventFollowStatus = useSelector(selectEventFollowStatus);
  const isFollowing = event?.id ? (eventFollowStatus[event.id]?.isFollowing || false) : false;
  const followerCount = event?.id ? (eventFollowStatus[event.id]?.followerCount || event.follower_count || 0) : 0;

  // 🎯 浏览量机制：存储从 API 获取的完整事件详情（包含最新 view_count）
  const [fullEventDetail, setFullEventDetail] = useState(null);
  const [loadingDetail, setLoadingDetail] = useState(false);

  // 权限判断函数
  const hasAccess = useCallback((requiredTier) => {
    const tierLevel = { free: 0, pro: 1, max: 2 };
    const result = tierLevel[userTier] >= tierLevel[requiredTier];
    return result;
  }, [userTier]);

  // 升级弹窗状态
  const [upgradeModal, setUpgradeModal] = useState({
    isOpen: false,
    requiredLevel: 'pro',
    featureName: ''
  });

  // 使用 Hook 获取实时数据（禁用自动加载，改为手动触发）
  const {
    stocks,
    quotes,
    eventDetail,
    historicalEvents,
    expectationScore,
    loading,
    loadStocksData,
    loadHistoricalData,
    loadChainAnalysis
  } = useEventStocks(event?.id, event?.created_at, { autoLoad: false });

  // 🎯 加载事件详情（增加浏览量）- 与 EventDetailModal 保持一致
  const loadEventDetail = useCallback(async () => {
    if (!event?.id) return;

    setLoadingDetail(true);
    try {
      const response = await eventService.getEventDetail(event.id);
      if (response.success) {
        setFullEventDetail(response.data);
        console.log('%c📊 [浏览量] 事件详情加载成功', 'color: #10B981; font-weight: bold;', {
          eventId: event.id,
          viewCount: response.data.view_count,
          title: response.data.title
        });
      }
    } catch (error) {
      console.error('[DynamicNewsDetailPanel] loadEventDetail 失败:', error, {
        eventId: event?.id
      });
    } finally {
      setLoadingDetail(false);
    }
  }, [event?.id]);

  // 相关股票、相关概念、历史事件和传导链的权限
  const canAccessStocks = hasAccess('pro');
  const canAccessConcepts = hasAccess('pro');
  const canAccessHistorical = hasAccess('pro');
  const canAccessTransmission = hasAccess('max');

  // 子区块折叠状态管理 + 加载追踪
  // 初始值为 false，由 useEffect 根据权限动态设置
  const [isStocksOpen, setIsStocksOpen] = useState(false);
  const [hasLoadedStocks, setHasLoadedStocks] = useState(false);

  const [isConceptsOpen, setIsConceptsOpen] = useState(false);

  const [isHistoricalOpen, setIsHistoricalOpen] = useState(false);
  const [hasLoadedHistorical, setHasLoadedHistorical] = useState(false);

  const [isTransmissionOpen, setIsTransmissionOpen] = useState(false);
  const [hasLoadedTransmission, setHasLoadedTransmission] = useState(false);

  // 自选股管理（使用 localStorage）
  const [watchlistSet, setWatchlistSet] = useState(() => {
    try {
      const saved = localStorage.getItem('stock_watchlist');
      return saved ? new Set(JSON.parse(saved)) : new Set();
    } catch {
      return new Set();
    }
  });

  // 锁定点击处理 - 弹出升级弹窗
  const handleLockedClick = useCallback((featureName, requiredLevel) => {
    setUpgradeModal({
      isOpen: true,
      requiredLevel,
      featureName
    });
  }, []);

  // 关闭升级弹窗
  const handleCloseUpgradeModal = useCallback(() => {
    setUpgradeModal({
      isOpen: false,
      requiredLevel: 'pro',
      featureName: ''
    });
  }, []);

  // 相关股票 - 展开时加载（需要 PRO 权限）
  const handleStocksToggle = useCallback(() => {
    const newState = !isStocksOpen;
    setIsStocksOpen(newState);

    if (newState && !hasLoadedStocks) {
      console.log('%c📊 [相关股票] 首次展开，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
      loadStocksData();
      setHasLoadedStocks(true);
    }
  }, [isStocksOpen, hasLoadedStocks, loadStocksData, event?.id]);

  // 相关概念 - 展开/收起（无需加载）
  const handleConceptsToggle = useCallback(() => {
    setIsConceptsOpen(!isConceptsOpen);
  }, [isConceptsOpen]);

  // 历史事件对比 - 展开时加载
  const handleHistoricalToggle = useCallback(() => {
    const newState = !isHistoricalOpen;
    setIsHistoricalOpen(newState);

    if (newState && !hasLoadedHistorical) {
      console.log('%c📜 [历史事件] 首次展开，加载历史事件数据', 'color: #3B82F6; font-weight: bold;', { eventId: event?.id });
      loadHistoricalData();
      setHasLoadedHistorical(true);
    }
  }, [isHistoricalOpen, hasLoadedHistorical, loadHistoricalData, event?.id]);

  // 传导链分析 - 展开时加载
  const handleTransmissionToggle = useCallback(() => {
    const newState = !isTransmissionOpen;
    setIsTransmissionOpen(newState);

    if (newState && !hasLoadedTransmission) {
      console.log('%c🔗 [传导链] 首次展开，加载传导链数据', 'color: #8B5CF6; font-weight: bold;', { eventId: event?.id });
      loadChainAnalysis();
      setHasLoadedTransmission(true);
    }
  }, [isTransmissionOpen, hasLoadedTransmission, loadChainAnalysis, event?.id]);

  // 事件切换时重置所有子模块状态
  useEffect(() => {
    console.log('%c🔄 [事件切换] 重置所有子模块状态', 'color: #F59E0B; font-weight: bold;', { eventId: event?.id });

    // 🎯 加载事件详情（增加浏览量）
    loadEventDetail();

    // 重置所有加载状态
    setHasLoadedStocks(false);
    setHasLoadedHistorical(false);
    setHasLoadedTransmission(false);

    // 相关股票默认展开（有权限时）
    if (canAccessStocks) {
      setIsStocksOpen(true);
      // 立即加载股票数据
      console.log('%c📊 [相关股票] 事件切换，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
      loadStocksData();
      setHasLoadedStocks(true);
    } else {
      setIsStocksOpen(false);
    }

    setIsConceptsOpen(false);
    setIsHistoricalOpen(false);
    setIsTransmissionOpen(false);
  }, [event?.id, canAccessStocks, userTier, loadStocksData, loadEventDetail]);

  // 切换关注状态
  const handleToggleFollow = useCallback(async () => {
    if (!event?.id) return;
    dispatch(toggleEventFollow(event.id));
  }, [dispatch, event?.id]);

  // 切换自选股
  const handleWatchlistToggle = useCallback(async (stockCode, isInWatchlist) => {
    try {
      const newWatchlist = new Set(watchlistSet);

      if (isInWatchlist) {
        newWatchlist.delete(stockCode);
        toast({
          title: '已移除自选股',
          status: 'info',
          duration: 2000,
          isClosable: true,
        });
      } else {
        newWatchlist.add(stockCode);
        toast({
          title: '已添加至自选股',
          status: 'success',
          duration: 2000,
          isClosable: true,
        });
      }

      setWatchlistSet(newWatchlist);
      localStorage.setItem('stock_watchlist', JSON.stringify(Array.from(newWatchlist)));
    } catch (error) {
      console.error('切换自选股失败:', error);
      toast({
        title: '操作失败',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    }
  }, [watchlistSet, toast]);

  // 空状态
  if (!event) {
    return (
      <Card bg={cardBg} borderColor={borderColor} borderWidth="1px">
        <CardBody>
          <Text color={textColor} textAlign="center">
            请选择一个事件查看详情
          </Text>
        </CardBody>
      </Card>
    );
  }

  const importance = getImportanceConfig(event.importance);

  return (
    <Card bg={cardBg} borderColor={borderColor} borderWidth="1px">
      <CardBody position="relative">
        {/* 无头部模式：显示右上角精简信息栏 */}
        {!showHeader && (
          <CompactMetaBar
            event={fullEventDetail || event}
            importance={importance}
            isFollowing={isFollowing}
            followerCount={followerCount}
            onToggleFollow={handleToggleFollow}
          />
        )}

        <VStack align="stretch" spacing={3}>
          {/* 头部信息区 - 优先使用完整详情数据（包含最新浏览量） - 可配置显示/隐藏 */}
          {showHeader && (
            <EventHeaderInfo
              event={fullEventDetail || event}
              importance={importance}
              isFollowing={isFollowing}
              followerCount={followerCount}
              onToggleFollow={handleToggleFollow}
            />
          )}

          {/* 事件描述 */}
          <EventDescriptionSection description={event.description} />

          {/* 相关股票（可折叠） - 懒加载 - 需要 PRO 权限 - 支持精简/详细模式 */}
          <CollapsibleSection
            title="相关股票"
            isOpen={isStocksOpen}
            onToggle={handleStocksToggle}
            count={stocks?.length || 0}
            subscriptionBadge={(() => {
              if (!canAccessStocks) {
                return <SubscriptionBadge tier="pro" size="sm" />;
              }
              return null;
            })()}
            isLocked={!canAccessStocks}
            onLockedClick={() => handleLockedClick('相关股票', 'pro')}
            showModeToggle={canAccessStocks}
            defaultMode="detailed"
            simpleContent={
              loading.stocks || loading.quotes ? (
                <Center py={2}>
                  <Spinner size="sm" color="blue.500" />
                  <Text ml={2} color={textColor} fontSize="sm">加载股票数据中...</Text>
                </Center>
              ) : (
                <Wrap spacing={4}>
                  {stocks?.map((stock, index) => (
                    <WrapItem key={index}>
                      <CompactStockItem
                        stock={stock}
                        quote={quotes[stock.stock_code]}
                      />
                    </WrapItem>
                  ))}
                </Wrap>
              )
            }
          >
            {loading.stocks || loading.quotes ? (
              <Center py={4}>
                <Spinner size="md" color="blue.500" />
                <Text ml={2} color={textColor}>加载股票数据中...</Text>
              </Center>
            ) : (
              <RelatedStocksSection
                stocks={stocks}
                quotes={quotes}
                eventTime={event.created_at}
                watchlistSet={watchlistSet}
                onWatchlistToggle={handleWatchlistToggle}
              />
            )}
          </CollapsibleSection>

          {/* 相关概念（可折叠） - 需要 PRO 权限 */}
          <RelatedConceptsSection
            eventTitle={event.title}
            effectiveTradingDate={event.trading_date || event.created_at}
            eventTime={event.created_at}
            isOpen={isConceptsOpen}
            onToggle={handleConceptsToggle}
            subscriptionBadge={!canAccessConcepts ? <SubscriptionBadge tier="pro" size="sm" /> : null}
            isLocked={!canAccessConcepts}
            onLockedClick={() => handleLockedClick('相关概念', 'pro')}
          />

          {/* 历史事件对比（可折叠） - 懒加载 - 需要 PRO 权限 */}
          <CollapsibleSection
            title="历史事件对比"
            isOpen={isHistoricalOpen}
            onToggle={handleHistoricalToggle}
            count={historicalEvents?.length || 0}
            subscriptionBadge={!canAccessHistorical ? <SubscriptionBadge tier="pro" size="sm" /> : null}
            isLocked={!canAccessHistorical}
            onLockedClick={() => handleLockedClick('历史事件对比', 'pro')}
          >
            {loading.historicalEvents ? (
              <Center py={4}>
                <Spinner size="sm" color="blue.500" />
                <Text ml={2} color={textColor} fontSize="sm">加载历史事件...</Text>
              </Center>
            ) : (
              <HistoricalEvents
                events={historicalEvents || []}
                expectationScore={expectationScore}
              />
            )}
          </CollapsibleSection>

          {/* 传导链分析（可折叠） - 懒加载 - 需要 MAX 权限 */}
          <CollapsibleSection
            title="传导链分析"
            isOpen={isTransmissionOpen}
            onToggle={handleTransmissionToggle}
            subscriptionBadge={!canAccessTransmission ? <SubscriptionBadge tier="max" size="sm" /> : null}
            isLocked={!canAccessTransmission}
            onLockedClick={() => handleLockedClick('传导链分析', 'max')}
          >
            <TransmissionChainAnalysis
              eventId={event.id}
              eventService={eventService}
            />
          </CollapsibleSection>

          {/* 讨论区（评论区） - 所有登录用户可用 */}
          <Box>
            <EventCommentSection eventId={event.id} />
          </Box>
        </VStack>
      </CardBody>

      {/* 升级弹窗 */}
      {upgradeModal.isOpen ? (
        <SubscriptionUpgradeModal
          isOpen={upgradeModal.isOpen}
          onClose={handleCloseUpgradeModal}
          requiredLevel={upgradeModal.requiredLevel}
          featureName={upgradeModal.featureName}
          currentLevel={userTier}
        />
      ): null }
    </Card>
  );
};

export default DynamicNewsDetailPanel;