/**
 * GlobalSidebar - 全局右侧工具栏
 *
 * 可收起/展开的侧边栏，包含关注股票和事件动态
 * 收起时点击图标显示悬浮弹窗
 */

import React from 'react';
import {
  Box,
  VStack,
  Icon,
  IconButton,
  Badge,
  Spinner,
  Center,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  PopoverHeader,
  PopoverCloseButton,
  Text,
  HStack,
  Portal,
} from '@chakra-ui/react';
import { ChevronLeft, ChevronRight, BarChart2, Star, TrendingUp } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useGlobalSidebar } from '@/contexts/GlobalSidebarContext';
import { useAuth } from '@/contexts/AuthContext';
import { getEventDetailUrl } from '@/utils/idEncoder';
import { Z_INDEX, LAYOUT_SIZE } from '@/layouts/config/layoutConfig';
import WatchSidebar from '@views/Profile/components/WatchSidebar';
import { WatchlistPanel, FollowingEventsPanel } from '@views/Profile/components/WatchSidebar/components';
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';

/**
 * 收起状态下的图标菜单（带悬浮弹窗）
 */
const CollapsedMenu = ({
  watchlist,
  realtimeQuotes,
  followingEvents,
  eventComments,
  onToggle,
  onStockClick,
  onEventClick,
  onCommentClick,
  onAddStock,
  onAddEvent,
  onUnwatch,
  onUnfollow,
}) => {
  return (
    <VStack spacing={4} py={4} align="center">
      {/* 展开按钮 */}
      <HStack spacing={1} w="100%" justify="center" cursor="pointer" onClick={onToggle} _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }} py={1} borderRadius="md">
        <Icon as={ChevronLeft} boxSize={4} color="rgba(255, 255, 255, 0.8)" />
        <Text fontSize="xs" color="rgba(255, 255, 255, 0.8)" fontWeight="medium">
          展开
        </Text>
      </HStack>

      {/* 关注股票 - 悬浮弹窗 */}
      <Popover placement="left-start" trigger="click" isLazy>
        <PopoverTrigger>
          <VStack
            spacing={1}
            align="center"
            cursor="pointer"
            p={2}
            borderRadius="md"
            _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
            position="relative"
          >
            <Box position="relative">
              <Icon as={BarChart2} boxSize={5} color="rgba(59, 130, 246, 0.9)" />
              {watchlist.length > 0 && (
                <Badge
                  position="absolute"
                  top="-4px"
                  right="-8px"
                  colorScheme="red"
                  fontSize="9px"
                  minW="16px"
                  h="16px"
                  borderRadius="full"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                >
                  {watchlist.length > 99 ? '99+' : watchlist.length}
                </Badge>
              )}
            </Box>
            <Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
              关注股票
            </Text>
          </VStack>
        </PopoverTrigger>
        <Portal>
          <PopoverContent
            w="300px"
            bg="rgba(26, 32, 44, 0.95)"
            borderColor="rgba(255, 255, 255, 0.1)"
            boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
            _focus={{ outline: 'none' }}
          >
            <PopoverHeader
              borderBottomColor="rgba(255, 255, 255, 0.1)"
              py={2}
              px={3}
            >
              <HStack spacing={2}>
                <Icon as={BarChart2} boxSize={4} color="rgba(59, 130, 246, 0.9)" />
                <Text fontSize="sm" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
                  关注股票 ({watchlist.length})
                </Text>
              </HStack>
            </PopoverHeader>
            <PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
            <PopoverBody p={2}>
              <WatchlistPanel
                watchlist={watchlist}
                realtimeQuotes={realtimeQuotes}
                onStockClick={onStockClick}
                onAddStock={onAddStock}
                onUnwatch={onUnwatch}
                hideTitle={true}
              />
            </PopoverBody>
          </PopoverContent>
        </Portal>
      </Popover>

      {/* 事件动态 - 悬浮弹窗 */}
      <Popover placement="left-start" trigger="click" isLazy>
        <PopoverTrigger>
          <VStack
            spacing={1}
            align="center"
            cursor="pointer"
            p={2}
            borderRadius="md"
            _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
            position="relative"
          >
            <Box position="relative">
              <Icon as={Star} boxSize={5} color="rgba(234, 179, 8, 0.9)" />
              {followingEvents.length > 0 && (
                <Badge
                  position="absolute"
                  top="-4px"
                  right="-8px"
                  colorScheme="yellow"
                  fontSize="9px"
                  minW="16px"
                  h="16px"
                  borderRadius="full"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                >
                  {followingEvents.length > 99 ? '99+' : followingEvents.length}
                </Badge>
              )}
            </Box>
            <Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
              关注事件
            </Text>
          </VStack>
        </PopoverTrigger>
        <Portal>
          <PopoverContent
            w="300px"
            bg="rgba(26, 32, 44, 0.95)"
            borderColor="rgba(255, 255, 255, 0.1)"
            boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
            _focus={{ outline: 'none' }}
          >
            <PopoverHeader
              borderBottomColor="rgba(255, 255, 255, 0.1)"
              py={2}
              px={3}
            >
              <HStack spacing={2}>
                <Icon as={Star} boxSize={4} color="rgba(234, 179, 8, 0.9)" />
                <Text fontSize="sm" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
                  事件动态
                </Text>
              </HStack>
            </PopoverHeader>
            <PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
            <PopoverBody p={2}>
              <FollowingEventsPanel
                events={followingEvents}
                eventComments={eventComments}
                onEventClick={onEventClick}
                onCommentClick={onCommentClick}
                onAddEvent={onAddEvent}
                onUnfollow={onUnfollow}
                hideTitle={true}
              />
            </PopoverBody>
          </PopoverContent>
        </Portal>
      </Popover>

      {/* 热门板块 - 悬浮弹窗 */}
      <Popover placement="left-start" trigger="click" isLazy>
        <PopoverTrigger>
          <VStack
            spacing={1}
            align="center"
            cursor="pointer"
            p={2}
            borderRadius="md"
            _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
            position="relative"
          >
            <Icon as={TrendingUp} boxSize={5} color="rgba(34, 197, 94, 0.9)" />
            <Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
              热门板块
            </Text>
          </VStack>
        </PopoverTrigger>
        <Portal>
          <PopoverContent
            w="280px"
            bg="rgba(26, 32, 44, 0.95)"
            borderColor="rgba(255, 255, 255, 0.1)"
            boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
            _focus={{ outline: 'none' }}
          >
            <PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
            <PopoverBody p={2}>
              <HotSectorsRanking title="热门板块" />
            </PopoverBody>
          </PopoverContent>
        </Portal>
      </Popover>
    </VStack>
  );
};

/**
 * GlobalSidebar 主组件
 */
const GlobalSidebar = () => {
  const { user } = useAuth();
  const navigate = useNavigate();

  const {
    isOpen,
    toggle,
    watchlist,
    realtimeQuotes,
    followingEvents,
    eventComments,
    loading,
    unwatchStock,
    unfollowEvent,
  } = useGlobalSidebar();

  // 未登录时不显示
  if (!user) {
    return null;
  }

  return (
    <Box
      w={isOpen ? '300px' : '72px'}
      h="100%"
      pt={LAYOUT_SIZE.navbarHeight}
      flexShrink={0}
      transition="width 0.2s ease-in-out"
      display={{ base: 'none', md: 'block' }}
      bg="rgba(26, 32, 44, 0.98)"
      borderLeft="1px solid rgba(255, 255, 255, 0.08)"
      position="relative"
      zIndex={Z_INDEX.SIDEBAR}
    >
      {/* 加载状态 */}
      {loading && (
        <Center position="absolute" top={4} left={0} right={0} zIndex={1}>
          <Spinner size="sm" color="rgba(212, 175, 55, 0.6)" />
        </Center>
      )}

      {isOpen ? (
        /* 展开状态 */
        <Box h="100%" display="flex" flexDirection="column">
          {/* 标题栏 - 收起按钮 + 标题 */}
          <HStack
            px={3}
            py={3}
            bg="rgba(26, 32, 44, 1)"
            borderBottom="1px solid rgba(255, 255, 255, 0.1)"
            flexShrink={0}
          >
            <IconButton
              icon={<Icon as={ChevronRight} />}
              size="xs"
              variant="ghost"
              color="rgba(255, 255, 255, 0.5)"
              _hover={{ color: 'rgba(212, 175, 55, 0.9)', bg: 'rgba(255, 255, 255, 0.05)' }}
              onClick={toggle}
              aria-label="收起工具栏"
            />
            <Text fontSize="sm" fontWeight="medium" color="rgba(255, 255, 255, 0.7)">
              工具栏
            </Text>
          </HStack>

          {/* WatchSidebar 内容 */}
          <Box flex="1" overflowY="auto" pt={2} px={2}>
            <WatchSidebar
              watchlist={watchlist}
              realtimeQuotes={realtimeQuotes}
              followingEvents={followingEvents}
              eventComments={eventComments}
              onStockClick={(stock) => navigate(`/company/${stock.stock_code}`)}
              onEventClick={(event) => navigate(getEventDetailUrl(event.id))}
              onCommentClick={(comment) => navigate(getEventDetailUrl(comment.event_id))}
              onAddStock={() => navigate('/stocks')}
              onAddEvent={() => navigate('/community')}
              onUnwatch={unwatchStock}
              onUnfollow={unfollowEvent}
            />
          </Box>
        </Box>
      ) : (
        /* 收起状态 - 点击图标显示悬浮弹窗 */
        <CollapsedMenu
          watchlist={watchlist}
          realtimeQuotes={realtimeQuotes}
          followingEvents={followingEvents}
          eventComments={eventComments}
          onToggle={toggle}
          onStockClick={(stock) => navigate(`/company/${stock.stock_code}`)}
          onEventClick={(event) => navigate(getEventDetailUrl(event.id))}
          onCommentClick={(comment) => navigate(getEventDetailUrl(comment.event_id))}
          onAddStock={() => navigate('/stocks')}
          onAddEvent={() => navigate('/community')}
          onUnwatch={unwatchStock}
          onUnfollow={unfollowEvent}
        />
      )}
    </Box>
  );
};

export default GlobalSidebar;