/**
 * 价值论坛主页面
 * 类似小红书/X的帖子广场
 */

import React, { useState, useEffect } from 'react';
import {
  Box,
  Container,
  Heading,
  Text,
  Button,
  HStack,
  VStack,
  SimpleGrid,
  Input,
  InputGroup,
  InputLeftElement,
  Select,
  Spinner,
  Center,
  useDisclosure,
  Flex,
  Badge,
} from '@chakra-ui/react';
import { Search, PenSquare, TrendingUp, Clock, Heart } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { forumColors } from '@theme/forumTheme';
import { getPosts, searchPosts } from '@services/elasticsearchService';
import PostCard from './components/PostCard';
import CreatePostModal from './components/CreatePostModal';

const MotionBox = motion(Box);

const ValueForum = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [sortBy, setSortBy] = useState('created_at');
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  const { isOpen, onOpen, onClose } = useDisclosure();

  // 获取帖子列表
  const fetchPosts = async (currentPage = 1, reset = false) => {
    try {
      setLoading(true);

      let result;
      if (searchKeyword.trim()) {
        result = await searchPosts(searchKeyword, {
          page: currentPage,
          size: 20,
        });
      } else {
        result = await getPosts({
          page: currentPage,
          size: 20,
          sort: sortBy,
          order: 'desc',
        });
      }

      if (reset) {
        setPosts(result.posts);
      } else {
        setPosts((prev) => [...prev, ...result.posts]);
      }

      setTotal(result.total);
      setHasMore(result.posts.length === 20);
    } catch (error) {
      console.error('获取帖子列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 初始化加载
  useEffect(() => {
    fetchPosts(1, true);
  }, [sortBy]);

  // 搜索处理
  const handleSearch = () => {
    setPage(1);
    fetchPosts(1, true);
  };

  // 加载更多
  const loadMore = () => {
    const nextPage = page + 1;
    setPage(nextPage);
    fetchPosts(nextPage, false);
  };

  // 发帖成功回调
  const handlePostCreated = () => {
    setPage(1);
    fetchPosts(1, true);
  };

  // 排序选项
  const sortOptions = [
    { value: 'created_at', label: '最新发布', icon: Clock },
    { value: 'likes_count', label: '最多点赞', icon: Heart },
    { value: 'views_count', label: '最多浏览', icon: TrendingUp },
  ];

  return (
    <Box
      minH="100vh"
      bg={forumColors.background.main}
      pt="80px"
      pb="20"
    >
      <Container maxW="container.xl">
        {/* 顶部横幅 */}
        <MotionBox
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          mb="10"
        >
          <VStack spacing="4" align="stretch">
            {/* 标题区域 */}
            <Flex justify="space-between" align="center">
              <VStack align="start" spacing="2">
                <Heading
                  as="h1"
                  fontSize="4xl"
                  fontWeight="bold"
                  bgGradient={forumColors.text.goldGradient}
                  bgClip="text"
                >
                  价值论坛
                </Heading>
                <Text color={forumColors.text.secondary} fontSize="md">
                  分享投资见解，追踪市场热点，共同发现价值
                </Text>
              </VStack>

              {/* 发帖按钮 */}
              <Button
                leftIcon={<PenSquare size={18} />}
                bg={forumColors.gradients.goldPrimary}
                color={forumColors.background.main}
                size="lg"
                fontWeight="bold"
                onClick={onOpen}
                _hover={{
                  transform: 'translateY(-2px)',
                  boxShadow: forumColors.shadows.goldHover,
                }}
                _active={{ transform: 'translateY(0)' }}
              >
                发布帖子
              </Button>
            </Flex>

            {/* 搜索和筛选栏 */}
            <Flex gap="4" align="center" flexWrap="wrap">
              {/* 搜索框 */}
              <InputGroup maxW="400px" flex="1">
                <InputLeftElement pointerEvents="none">
                  <Search size={18} color={forumColors.text.tertiary} />
                </InputLeftElement>
                <Input
                  placeholder="搜索帖子标题、内容、标签..."
                  value={searchKeyword}
                  onChange={(e) => setSearchKeyword(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                  bg={forumColors.background.card}
                  border="1px solid"
                  borderColor={forumColors.border.default}
                  color={forumColors.text.primary}
                  _placeholder={{ color: forumColors.text.tertiary }}
                  _hover={{ borderColor: forumColors.border.light }}
                  _focus={{
                    borderColor: forumColors.border.gold,
                    boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
                  }}
                />
              </InputGroup>

              {/* 排序选项 */}
              <HStack spacing="2">
                {sortOptions.map((option) => {
                  const Icon = option.icon;
                  const isActive = sortBy === option.value;

                  return (
                    <Button
                      key={option.value}
                      leftIcon={<Icon size={16} />}
                      size="md"
                      variant={isActive ? 'solid' : 'outline'}
                      bg={isActive ? forumColors.gradients.goldPrimary : 'transparent'}
                      color={isActive ? forumColors.background.main : forumColors.text.secondary}
                      borderColor={forumColors.border.default}
                      onClick={() => setSortBy(option.value)}
                      _hover={{
                        bg: isActive
                          ? forumColors.gradients.goldPrimary
                          : forumColors.background.hover,
                        borderColor: forumColors.border.gold,
                      }}
                    >
                      {option.label}
                    </Button>
                  );
                })}
              </HStack>
            </Flex>

            {/* 统计信息 */}
            <HStack spacing="6" color={forumColors.text.tertiary} fontSize="sm">
              <Text>
                共 <Text as="span" color={forumColors.primary[500]} fontWeight="bold">{total}</Text> 篇帖子
              </Text>
            </HStack>
          </VStack>
        </MotionBox>

        {/* 帖子网格 */}
        {loading && page === 1 ? (
          <Center py="20">
            <VStack spacing="4">
              <Spinner
                size="xl"
                thickness="4px"
                speed="0.8s"
                color={forumColors.primary[500]}
              />
              <Text color={forumColors.text.secondary}>加载中...</Text>
            </VStack>
          </Center>
        ) : posts.length === 0 ? (
          <Center py="20">
            <VStack spacing="4">
              <Text color={forumColors.text.secondary} fontSize="lg">
                {searchKeyword ? '未找到相关帖子' : '暂无帖子，快来发布第一篇吧！'}
              </Text>
              {!searchKeyword && (
                <Button
                  leftIcon={<PenSquare size={18} />}
                  bg={forumColors.gradients.goldPrimary}
                  color={forumColors.background.main}
                  onClick={onOpen}
                  _hover={{ opacity: 0.9 }}
                >
                  发布帖子
                </Button>
              )}
            </VStack>
          </Center>
        ) : (
          <>
            <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="6">
              <AnimatePresence>
                {posts.map((post, index) => (
                  <MotionBox
                    key={post.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.3, delay: index * 0.05 }}
                  >
                    <PostCard post={post} />
                  </MotionBox>
                ))}
              </AnimatePresence>
            </SimpleGrid>

            {/* 加载更多按钮 */}
            {hasMore && (
              <Center mt="10">
                <Button
                  onClick={loadMore}
                  isLoading={loading}
                  loadingText="加载中..."
                  bg={forumColors.background.card}
                  color={forumColors.text.primary}
                  border="1px solid"
                  borderColor={forumColors.border.default}
                  _hover={{
                    borderColor: forumColors.border.gold,
                    bg: forumColors.background.hover,
                  }}
                >
                  加载更多
                </Button>
              </Center>
            )}
          </>
        )}
      </Container>

      {/* 发帖模态框 */}
      <CreatePostModal
        isOpen={isOpen}
        onClose={onClose}
        onPostCreated={handlePostCreated}
      />
    </Box>
  );
};

export default ValueForum;