/**
 * 预测市场玩法说明模态框
 * 帮助用户理解游戏规则和操作流程
 */

import React, { useState } from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalCloseButton,
  Button,
  VStack,
  HStack,
  Text,
  Box,
  Icon,
  Badge,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Divider,
  List,
  ListItem,
  ListIcon,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Image,
  SimpleGrid,
  Flex,
  useColorModeValue,
} from '@chakra-ui/react';
import {
  Zap,
  TrendingUp,
  TrendingDown,
  Crown,
  DollarSign,
  Users,
  Clock,
  Trophy,
  CheckCircle2,
  AlertCircle,
  ArrowRight,
  Target,
  Wallet,
  RefreshCw,
  Gift,
  MessageCircle,
  Lock,
  Lightbulb,
  Calendar,
} from 'lucide-react';
import { motion } from 'framer-motion';
import { forumColors } from '@theme/forumTheme';

const MotionBox = motion(Box);

const PredictionGuideModal = ({ isOpen, onClose }) => {
  const [activeTab, setActiveTab] = useState(0);

  // 特性列表
  const features = [
    {
      icon: Zap,
      title: '预测市场',
      desc: '对未来事件进行预测，购买看涨/看跌席位',
      color: 'yellow.400',
    },
    {
      icon: DollarSign,
      title: '虚拟积分',
      desc: '使用论坛积分参与，初始10,000积分',
      color: 'green.400',
    },
    {
      icon: Crown,
      title: '领主系统',
      desc: '持有最多份额者成为领主，拥有特权',
      color: 'orange.400',
    },
    {
      icon: Trophy,
      title: '赢取奖池',
      desc: '预测正确者分享奖池，最高收益无上限',
      color: 'purple.400',
    },
  ];

  // 操作步骤
  const steps = [
    {
      step: 1,
      title: '发起预测话题',
      desc: '创建一个可预测的话题，设置截止时间',
      icon: Zap,
      details: [
        '点击"发起预测"按钮',
        '填写话题标题和描述',
        '选择分类和截止时间',
        '支付100积分创建费用（进入奖池）',
      ],
    },
    {
      step: 2,
      title: '购买席位表达观点',
      desc: '选择看涨或看跌方向，购买席位',
      icon: TrendingUp,
      details: [
        '浏览预测话题，选择感兴趣的',
        '点击"购买席位"',
        '选择方向：看涨(Yes) 或 看跌(No)',
        '调整购买份额（1-10份）',
        '支付积分（含2%交易税）',
      ],
    },
    {
      step: 3,
      title: '成为领主获得特权',
      desc: '持有最多份额自动成为领主',
      icon: Crown,
      details: [
        '持有某方向最多份额即成为领主',
        '领主评论自动置顶（计划中）',
        '专属👑领主徽章显示',
        '领主身份随交易实时变更',
      ],
    },
    {
      step: 4,
      title: '等待结果揭晓',
      desc: '话题到期后，作者提交结果',
      icon: Clock,
      details: [
        '话题到达截止时间，停止交易',
        '作者提交结果和证据',
        '系统自动计算奖池分配',
        '获胜方按份额比例分享奖池',
      ],
    },
  ];

  // 常见问题
  const faqs = [
    {
      q: '💰 初始积分是多少？会破产吗？',
      a: '每个用户初始获得10,000积分。系统有破产保护机制，最低保留100积分，不会完全归零。每日签到可获得100积分奖励。',
    },
    {
      q: '📊 价格是如何变动的？',
      a: '价格根据供需关系动态调整。购买某方向会导致该方向价格上涨，对方价格下跌。采用简化版AMM（自动做市商）算法。',
    },
    {
      q: '👑 领主有什么特权？',
      a: '领主是持有某方向最多份额的用户。特权包括：评论自动置顶（计划中）、专属徽章显示、更高的话语权。领主身份随交易实时变更。',
    },
    {
      q: '🎯 如何计算收益？',
      a: '获胜方按持有份额比例分享奖池。例如：奖池1000积分，你持有获胜方30%份额，则获得300积分 + 返还本金。',
    },
    {
      q: '💸 交易税去哪了？',
      a: '每笔交易收取2%交易税，全部进入话题奖池。这确保了即使无人参与对立面，奖池也有资金可分配。',
    },
    {
      q: '🔄 可以卖出席位吗？',
      a: '可以！在话题截止前，随时可以卖出席位。卖出价格同样根据市场供需动态计算，可能高于或低于买入价。',
    },
    {
      q: '⚖️ 如何确保公平？',
      a: '作者不能参与自己发起的话题。结果需要提交证据。未来将引入社区投票仲裁机制处理争议。',
    },
    {
      q: '📈 单次最多能买多少？',
      a: '单次购买上限1000积分，避免大户操纵市场。每个方向最多5个席位持有者，确保市场活跃度。',
    },
  ];

  // 示例场景
  const exampleScenario = {
    title: '📖 完整示例：贵州茅台预测',
    steps: [
      {
        title: '1. 创建话题',
        content: '小明创建话题："贵州茅台下周会涨吗？"，支付100积分。奖池：100积分。',
      },
      {
        title: '2. 用户参与',
        content: [
          '小红购买3份"看涨"，花费1,530积分（含税）',
          '小李购买2份"看跌"，花费1,020积分（含税）',
          '交易税进入奖池：51积分',
          '当前奖池：151积分',
        ],
      },
      {
        title: '3. 价格变动',
        content: '看涨份额增加 → 看涨价格上涨至680积分/份，看跌价格下跌至320积分/份',
      },
      {
        title: '4. 领主诞生',
        content: '小红持有看涨方最多份额，成为看涨方👑领主',
      },
      {
        title: '5. 结果揭晓',
        content: [
          '一周后，茅台上涨5%，小明提交结果："看涨"获胜',
          '小红获得：本金1500积分 + 奖池151积分 = 1651积分',
          '小红净收益：1651 - 1530 = +121积分 (收益率7.9%)',
          '小李损失本金1000积分',
        ],
      },
    ],
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered scrollBehavior="inside">
      <ModalOverlay backdropFilter="blur(4px)" bg="blackAlpha.800" />
      <ModalContent
        bg={forumColors.background.card}
        borderRadius="2xl"
        border="2px solid"
        borderColor={forumColors.border.gold}
        maxH="90vh"
      >
        <ModalHeader
          bg={forumColors.gradients.goldPrimary}
          borderTopRadius="2xl"
          py="6"
        >
          <HStack spacing="3">
            <Icon as={Zap} boxSize="28px" color={forumColors.background.main} />
            <VStack align="start" spacing="0">
              <Text fontSize="2xl" fontWeight="bold" color={forumColors.background.main}>
                预测市场玩法说明
              </Text>
              <Text fontSize="sm" color={forumColors.background.main} opacity={0.9}>
                5分钟快速上手，开启预测之旅
              </Text>
            </VStack>
          </HStack>
        </ModalHeader>
        <ModalCloseButton color={forumColors.background.main} top="6" right="6" />

        <ModalBody py="6">
          <Tabs
            index={activeTab}
            onChange={setActiveTab}
            variant="soft-rounded"
            colorScheme="yellow"
          >
            <TabList mb="6" flexWrap="wrap">
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={Target} boxSize="16px" mr="2" />
                核心玩法
              </Tab>
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={CheckCircle2} boxSize="16px" mr="2" />
                操作步骤
              </Tab>
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={AlertCircle} boxSize="16px" mr="2" />
                常见问题
              </Tab>
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={Trophy} boxSize="16px" mr="2" />
                示例演示
              </Tab>
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={MessageCircle} boxSize="16px" mr="2" />
                观点IPO
              </Tab>
              <Tab
                _selected={{
                  bg: forumColors.gradients.goldPrimary,
                  color: forumColors.background.main,
                }}
              >
                <Icon as={Lock} boxSize="16px" mr="2" />
                时间胶囊
              </Tab>
            </TabList>

            <TabPanels>
              {/* 核心玩法 */}
              <TabPanel p="0">
                <VStack spacing="6" align="stretch">
                  {/* 核心特性 */}
                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing="4">
                    {features.map((feature, index) => (
                      <MotionBox
                        key={index}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: index * 0.1 }}
                        bg={forumColors.background.hover}
                        p="5"
                        borderRadius="xl"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                        _hover={{
                          borderColor: forumColors.border.gold,
                          transform: 'translateY(-4px)',
                          boxShadow: forumColors.shadows.gold,
                        }}
                      >
                        <HStack spacing="4" align="start">
                          <Box
                            bg={forumColors.gradients.goldSubtle}
                            p="3"
                            borderRadius="lg"
                          >
                            <Icon as={feature.icon} boxSize="24px" color={feature.color} />
                          </Box>
                          <VStack align="start" spacing="1" flex="1">
                            <Text fontWeight="700" fontSize="lg" color={forumColors.text.primary}>
                              {feature.title}
                            </Text>
                            <Text fontSize="sm" color={forumColors.text.secondary}>
                              {feature.desc}
                            </Text>
                          </VStack>
                        </HStack>
                      </MotionBox>
                    ))}
                  </SimpleGrid>

                  <Divider borderColor={forumColors.border.default} />

                  {/* 游戏规则 */}
                  <Box>
                    <Text fontSize="xl" fontWeight="700" color={forumColors.text.primary} mb="4">
                      📜 游戏规则
                    </Text>
                    <VStack spacing="3" align="stretch">
                      <Box
                        bg={forumColors.gradients.goldSubtle}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.gold}
                      >
                        <HStack spacing="2" mb="2">
                          <Icon as={Wallet} boxSize="18px" color={forumColors.primary[500]} />
                          <Text fontWeight="600" color={forumColors.text.primary}>
                            积分系统
                          </Text>
                        </HStack>
                        <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            初始积分：10,000积分（免费领取）
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            最低保留：100积分（破产保护）
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            单次上限：1,000积分（防止操纵）
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            每日签到：+100积分（每天领取）
                          </ListItem>
                        </List>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <HStack spacing="2" mb="2">
                          <Icon as={TrendingUp} boxSize="18px" color="green.400" />
                          <Text fontWeight="600" color={forumColors.text.primary}>
                            双向市场
                          </Text>
                        </HStack>
                        <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            看涨 (Yes)：预测会上涨/发生
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            看跌 (No)：预测会下跌/不发生
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            价格动态变化，根据供需关系调整
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            可以随时买入和卖出（截止前）
                          </ListItem>
                        </List>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <HStack spacing="2" mb="2">
                          <Icon as={Crown} boxSize="18px" color="yellow.400" />
                          <Text fontWeight="600" color={forumColors.text.primary}>
                            领主系统
                          </Text>
                        </HStack>
                        <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            持有最多份额者自动成为领主
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            领主评论自动置顶（计划中）
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            专属👑徽章和金色边框
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            领主身份随交易实时变更
                          </ListItem>
                        </List>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <HStack spacing="2" mb="2">
                          <Icon as={Trophy} boxSize="18px" color="purple.400" />
                          <Text fontWeight="600" color={forumColors.text.primary}>
                            奖池分配
                          </Text>
                        </HStack>
                        <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            交易税：每笔交易2%进入奖池
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            获胜方按份额比例分享奖池
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            返还本金 + 奖池分成
                          </ListItem>
                          <ListItem>
                            <ListIcon as={CheckCircle2} color="green.400" />
                            失败方损失本金
                          </ListItem>
                        </List>
                      </Box>
                    </VStack>
                  </Box>
                </VStack>
              </TabPanel>

              {/* 操作步骤 */}
              <TabPanel p="0">
                <VStack spacing="6" align="stretch">
                  {steps.map((step, index) => (
                    <MotionBox
                      key={index}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.1 }}
                      bg={forumColors.background.hover}
                      p="6"
                      borderRadius="xl"
                      border="2px solid"
                      borderColor={forumColors.border.default}
                      position="relative"
                      overflow="hidden"
                      _hover={{
                        borderColor: forumColors.border.gold,
                        boxShadow: forumColors.shadows.gold,
                      }}
                    >
                      {/* 步骤编号 */}
                      <Box
                        position="absolute"
                        top="-10px"
                        right="-10px"
                        fontSize="120px"
                        fontWeight="900"
                        color={forumColors.border.default}
                        opacity={0.1}
                        lineHeight="1"
                      >
                        {step.step}
                      </Box>

                      <HStack spacing="4" align="start" mb="4" position="relative" zIndex={1}>
                        <Box
                          bg={forumColors.gradients.goldPrimary}
                          p="3"
                          borderRadius="lg"
                        >
                          <Icon as={step.icon} boxSize="24px" color={forumColors.background.main} />
                        </Box>

                        <VStack align="start" spacing="1" flex="1">
                          <HStack>
                            <Badge
                              bg={forumColors.primary[500]}
                              color={forumColors.background.main}
                              px="3"
                              py="1"
                              borderRadius="full"
                              fontSize="xs"
                            >
                              步骤 {step.step}
                            </Badge>
                          </HStack>
                          <Text fontSize="xl" fontWeight="700" color={forumColors.text.primary}>
                            {step.title}
                          </Text>
                          <Text fontSize="sm" color={forumColors.text.secondary}>
                            {step.desc}
                          </Text>
                        </VStack>
                      </HStack>

                      <Divider borderColor={forumColors.border.default} mb="4" />

                      <List spacing="2" pl="4">
                        {step.details.map((detail, i) => (
                          <ListItem
                            key={i}
                            fontSize="sm"
                            color={forumColors.text.secondary}
                          >
                            <HStack spacing="2">
                              <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                              <Text>{detail}</Text>
                            </HStack>
                          </ListItem>
                        ))}
                      </List>
                    </MotionBox>
                  ))}
                </VStack>
              </TabPanel>

              {/* 常见问题 */}
              <TabPanel p="0">
                <Accordion allowMultiple>
                  {faqs.map((faq, index) => (
                    <AccordionItem
                      key={index}
                      border="1px solid"
                      borderColor={forumColors.border.default}
                      borderRadius="lg"
                      mb="3"
                      bg={forumColors.background.hover}
                    >
                      <AccordionButton
                        py="4"
                        _hover={{ bg: forumColors.background.card }}
                        borderRadius="lg"
                      >
                        <Box flex="1" textAlign="left">
                          <Text fontWeight="600" color={forumColors.text.primary}>
                            {faq.q}
                          </Text>
                        </Box>
                        <AccordionIcon color={forumColors.primary[500]} />
                      </AccordionButton>
                      <AccordionPanel pb="4">
                        <Text fontSize="sm" color={forumColors.text.secondary} lineHeight="1.8">
                          {faq.a}
                        </Text>
                      </AccordionPanel>
                    </AccordionItem>
                  ))}
                </Accordion>
              </TabPanel>

              {/* 示例演示 */}
              <TabPanel p="0">
                <VStack spacing="6" align="stretch">
                  <Box
                    bg={forumColors.gradients.goldSubtle}
                    p="6"
                    borderRadius="xl"
                    border="2px solid"
                    borderColor={forumColors.border.gold}
                  >
                    <Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary} mb="2">
                      {exampleScenario.title}
                    </Text>
                    <Text fontSize="sm" color={forumColors.text.secondary}>
                      通过完整案例理解预测市场的运作流程
                    </Text>
                  </Box>

                  {exampleScenario.steps.map((item, index) => (
                    <Box
                      key={index}
                      bg={forumColors.background.hover}
                      p="5"
                      borderRadius="lg"
                      border="1px solid"
                      borderColor={forumColors.border.default}
                    >
                      <Text fontWeight="700" color={forumColors.primary[500]} mb="3">
                        {item.title}
                      </Text>
                      {Array.isArray(item.content) ? (
                        <VStack spacing="2" align="stretch">
                          {item.content.map((line, i) => (
                            <HStack key={i} spacing="2">
                              <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                              <Text fontSize="sm" color={forumColors.text.secondary}>
                                {line}
                              </Text>
                            </HStack>
                          ))}
                        </VStack>
                      ) : (
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          {item.content}
                        </Text>
                      )}
                    </Box>
                  ))}

                  {/* 关键提示 */}
                  <Box
                    bg="green.50"
                    border="2px solid"
                    borderColor="green.400"
                    p="5"
                    borderRadius="lg"
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Gift} boxSize="24px" color="green.600" />
                      <Text fontWeight="700" color="green.700" fontSize="lg">
                        💡 关键提示
                      </Text>
                    </HStack>
                    <VStack spacing="2" align="stretch">
                      <Text fontSize="sm" color="green.700">
                        ✅ 早期参与价格低，后期参与价格高
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 可以通过"低买高卖"赚取差价（Flipper玩法）
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 即使预测失败，也可能通过卖出获利
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 成为领主可获得社区影响力
                      </Text>
                    </VStack>
                  </Box>
                </VStack>
              </TabPanel>

              {/* 观点IPO */}
              <TabPanel p="0">
                <VStack spacing="6" align="stretch">
                  <Box
                    bg={forumColors.gradients.goldSubtle}
                    p="6"
                    borderRadius="xl"
                    border="2px solid"
                    borderColor={forumColors.border.gold}
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={MessageCircle} boxSize="32px" color={forumColors.primary[500]} />
                      <VStack align="start" spacing="0">
                        <Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary}>
                          观点IPO - 评论即资产
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          让有价值的观点直接变现，让小白通过投资"懂王"获利
                        </Text>
                      </VStack>
                    </HStack>
                  </Box>

                  {/* 核心玩法 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={Lightbulb} boxSize="20px" color="yellow.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        💡 核心机制
                      </Text>
                    </HStack>
                    <VStack spacing="3" align="stretch">
                      <Box
                        bg={forumColors.gradients.goldSubtle}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.gold}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          1. 发表分析 → 他人投资
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          在预测话题下发表长篇分析（如"为什么贵州茅台会涨"），其他用户如果认同你的观点，可以对你的评论进行投资（注资）。
                        </Text>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          2. 预测正确 → 股东分红
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          如果你的预测正确（由管理员验证），该评论获得的所有投资将按比例分给"股东"（投资者）。投资者获得1.5倍收益，评论作者获得20%奖励。
                        </Text>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          3. 首发权拍卖 → 流量变现
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          在重大事件（如美联储议息）前，可以竞拍"前三楼"评论位置。前排位置流量最大，大V可以通过竞价获得曝光，吸引追随者投资。
                        </Text>
                      </Box>
                    </VStack>
                  </Box>

                  {/* 投资定价 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={DollarSign} boxSize="20px" color="green.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        💰 投资定价规则
                      </Text>
                    </HStack>
                    <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        基础价格：100积分/份
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        动态涨价：每获得投资，价格按已有投资额的10%上涨
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        早期投资者成本低，后期投资者成本高
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        不能投资自己的评论
                      </ListItem>
                    </List>
                  </Box>

                  {/* 收益分配 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={Trophy} boxSize="20px" color="purple.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        🎯 收益分配机制
                      </Text>
                    </HStack>
                    <VStack spacing="3" align="stretch">
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>预测正确：</Text>
                          投资者获得总投资额的1.5倍收益，按份额比例分配
                        </Text>
                      </HStack>
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>作者奖励：</Text>
                          评论作者获得总投资额的20%作为奖励
                        </Text>
                      </HStack>
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>预测错误：</Text>
                          投资者损失全部投资，作者无奖励
                        </Text>
                      </HStack>
                    </VStack>
                  </Box>

                  {/* 首发权拍卖 */}
                  <Box
                    bg="orange.50"
                    border="2px solid"
                    borderColor="orange.400"
                    p="5"
                    borderRadius="lg"
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Crown} boxSize="24px" color="orange.600" />
                      <Text fontWeight="700" color="orange.700" fontSize="lg">
                        👑 首发权拍卖
                      </Text>
                    </HStack>
                    <VStack spacing="2" align="stretch">
                      <Text fontSize="sm" color="orange.700">
                        <Text as="span" fontWeight="600">玩法：</Text>
                        重大事件发布前，竞拍评论区前三名位置
                      </Text>
                      <Text fontSize="sm" color="orange.700">
                        <Text as="span" fontWeight="600">价值：</Text>
                        前排评论获得最大曝光，吸引更多投资者
                      </Text>
                      <Text fontSize="sm" color="orange.700">
                        <Text as="span" fontWeight="600">规则：</Text>
                        最低出价500积分，出价最高者获得位置
                      </Text>
                      <Text fontSize="sm" color="orange.700">
                        <Text as="span" fontWeight="600">结算：</Text>
                        竞拍截止后，获胜者积分扣除，其他人退款
                      </Text>
                    </VStack>
                  </Box>

                  {/* 示例 */}
                  <Box
                    bg="blue.50"
                    border="2px solid"
                    borderColor="blue.400"
                    p="5"
                    borderRadius="lg"
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Gift} boxSize="24px" color="blue.600" />
                      <Text fontWeight="700" color="blue.700" fontSize="lg">
                        📖 完整示例
                      </Text>
                    </HStack>
                    <VStack spacing="2" align="stretch">
                      <Text fontSize="sm" color="blue.700">
                        1. 大V"股神小王"在话题"贵州茅台会涨吗？"下发表3000字深度分析
                      </Text>
                      <Text fontSize="sm" color="blue.700">
                        2. 小明看好这个分析，投资500积分（5份）
                      </Text>
                      <Text fontSize="sm" color="blue.700">
                        3. 小红也跟投300积分（3份），此时价格已上涨到150积分/份
                      </Text>
                      <Text fontSize="sm" color="blue.700">
                        4. 最终茅台真的上涨，管理员验证"预测正确"
                      </Text>
                      <Text fontSize="sm" color="blue.700" fontWeight="600">
                        5. 收益分配：
                      </Text>
                      <Text fontSize="sm" color="blue.700" ml="4">
                        • 小明获得：(5/8) × 1200积分 = 750积分，净收益+250积分
                      </Text>
                      <Text fontSize="sm" color="blue.700" ml="4">
                        • 小红获得：(3/8) × 1200积分 = 450积分，净收益+150积分
                      </Text>
                      <Text fontSize="sm" color="blue.700" ml="4">
                        • 股神小王获得：800积分 × 20% = 160积分作者奖励
                      </Text>
                    </VStack>
                  </Box>
                </VStack>
              </TabPanel>

              {/* 时间胶囊 */}
              <TabPanel p="0">
                <VStack spacing="6" align="stretch">
                  <Box
                    bg={forumColors.gradients.goldSubtle}
                    p="6"
                    borderRadius="xl"
                    border="2px solid"
                    borderColor={forumColors.border.gold}
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Lock} boxSize="32px" color={forumColors.primary[500]} />
                      <VStack align="start" spacing="0">
                        <Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary}>
                          时间胶囊 - 长线预测的博弈
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          针对长期事件（如"人类何时登陆火星"），竞拍时间段，赌事件发生的年份
                        </Text>
                      </VStack>
                    </HStack>
                  </Box>

                  {/* 核心机制 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={Lightbulb} boxSize="20px" color="yellow.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        💡 核心机制
                      </Text>
                    </HStack>
                    <VStack spacing="3" align="stretch">
                      <Box
                        bg={forumColors.gradients.goldSubtle}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.gold}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          1. 创建话题 + 加密预测
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          发起一个长期预测话题（如"人类何时登陆火星：2025-2050年"），并提交加密的预测内容。需支付100积分创建费用，内容在解密前完全保密。
                        </Text>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          2. 时间段切分 + 竞拍
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          系统自动将时间范围切分为多个年份时间段（如2025年、2026年...2050年）。用户可以竞拍任意时间段，最高出价者成为该时间段的持有者。
                        </Text>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          3. 价格动态变化
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          随着时间推移，如果事件没有发生：临近过期的时间段价格会暴跌（如2025年快到了还没发生），而未来的时间段价格会通过竞拍飙升（概率提升）。
                        </Text>
                      </Box>

                      <Box
                        bg={forumColors.background.hover}
                        p="4"
                        borderRadius="lg"
                        border="1px solid"
                        borderColor={forumColors.border.default}
                      >
                        <Text fontWeight="600" color={forumColors.text.primary} mb="2">
                          4. 事件发生 + 结算
                        </Text>
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          当事件真的发生时（如2035年人类登陆火星），管理员解密并结算。持有"2035年"时间段的用户获得全部奖池，其他时间段持有者失去投资。
                        </Text>
                      </Box>
                    </VStack>
                  </Box>

                  {/* 加密机制 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={Lock} boxSize="20px" color="purple.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        🔐 加密机制
                      </Text>
                    </HStack>
                    <VStack spacing="3" align="stretch">
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>前端AES加密：</Text>
                          提交时在浏览器端加密预测内容
                        </Text>
                      </HStack>
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>后端存储密钥：</Text>
                          加密密钥存储在数据库中，解密前不公开
                        </Text>
                      </HStack>
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>防止马后炮：</Text>
                          证明"我早就说过"，无法事后修改预测
                        </Text>
                      </HStack>
                      <HStack spacing="2">
                        <Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
                        <Text fontSize="sm" color={forumColors.text.secondary}>
                          <Text as="span" fontWeight="600" color={forumColors.text.primary}>管理员解密：</Text>
                          事件发生后，管理员或作者解密查看内容
                        </Text>
                      </HStack>
                    </VStack>
                  </Box>

                  {/* 竞拍规则 */}
                  <Box
                    bg={forumColors.background.hover}
                    p="5"
                    borderRadius="lg"
                    border="1px solid"
                    borderColor={forumColors.border.default}
                  >
                    <HStack spacing="2" mb="4">
                      <Icon as={TrendingUp} boxSize="20px" color="green.400" />
                      <Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
                        💰 竞拍规则
                      </Text>
                    </HStack>
                    <List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        初始价格：每个时间段初始价格100积分
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        最低加价：每次出价至少比当前价格高50积分
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        自动退款：被超越的出价者自动退还积分
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        奖池累积：每次竞拍的价格增量进入话题奖池
                      </ListItem>
                      <ListItem>
                        <ListIcon as={CheckCircle2} color="green.400" />
                        创建费用：100积分进入奖池
                      </ListItem>
                    </List>
                  </Box>

                  {/* 示例 */}
                  <Box
                    bg="purple.50"
                    border="2px solid"
                    borderColor="purple.400"
                    p="5"
                    borderRadius="lg"
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Calendar} boxSize="24px" color="purple.600" />
                      <Text fontWeight="700" color="purple.700" fontSize="lg">
                        📖 完整示例：人类登陆火星
                      </Text>
                    </HStack>
                    <VStack spacing="2" align="stretch">
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">2025年1月：</Text>
                        小明创建话题"人类何时登陆火星：2025-2050年"，支付100积分，提交加密预测
                      </Text>
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">初始状态：</Text>
                        系统创建26个时间段（2025-2050年），每个初始价格100积分
                      </Text>
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">2025年2月：</Text>
                        小红出价150积分竞拍"2030年"时间段，成为持有者
                      </Text>
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">2025年3月：</Text>
                        小李出价200积分超越小红，成为"2030年"新持有者（小红退还150积分）
                      </Text>
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">2026年：</Text>
                        "2025年"时间段过期无人竞拍（事件未发生），价值归零
                      </Text>
                      <Text fontSize="sm" color="purple.700">
                        <Text as="span" fontWeight="600">2030年：</Text>
                        SpaceX宣布人类成功登陆火星！
                      </Text>
                      <Text fontSize="sm" color="purple.700" fontWeight="600">
                        <Text as="span" fontWeight="600">结算：</Text>
                      </Text>
                      <Text fontSize="sm" color="purple.700" ml="4">
                        • 小李（持有"2030年"）获得全部奖池（假设1500积分）
                      </Text>
                      <Text fontSize="sm" color="purple.700" ml="4">
                        • 其他时间段持有者损失投资
                      </Text>
                      <Text fontSize="sm" color="purple.700" ml="4">
                        • 话题解密，小明的预测内容公开
                      </Text>
                    </VStack>
                  </Box>

                  {/* 策略提示 */}
                  <Box
                    bg="green.50"
                    border="2px solid"
                    borderColor="green.400"
                    p="5"
                    borderRadius="lg"
                  >
                    <HStack spacing="3" mb="3">
                      <Icon as={Target} boxSize="24px" color="green.600" />
                      <Text fontWeight="700" color="green.700" fontSize="lg">
                        🎯 策略提示
                      </Text>
                    </HStack>
                    <VStack spacing="2" align="stretch">
                      <Text fontSize="sm" color="green.700">
                        ✅ 早期竞拍成本低，但等待时间长
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 可以根据科技进展动态调整持有时间段
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 适合极其长线的宏大叙事预测
                      </Text>
                      <Text fontSize="sm" color="green.700">
                        ✅ 加密机制保证预测的真实性和不可篡改性
                      </Text>
                    </VStack>
                  </Box>
                </VStack>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </ModalBody>

        <ModalFooter
          borderTop="1px solid"
          borderColor={forumColors.border.default}
          py="4"
        >
          <HStack spacing="3" w="full" justify="space-between">
            <Text fontSize="xs" color={forumColors.text.tertiary}>
              💡 提示：每日签到可获得100积分
            </Text>
            <Button
              bg={forumColors.gradients.goldPrimary}
              color={forumColors.background.main}
              fontWeight="bold"
              onClick={onClose}
              _hover={{ opacity: 0.9 }}
            >
              开始预测
            </Button>
          </HStack>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default PredictionGuideModal;