/**
 * 预测话题评论区组件
 * 支持发布评论、嵌套回复、点赞、庄主标识、观点IPO投资
 */

import React, { useState, useEffect } from 'react';
import {
  Box,
  VStack,
  HStack,
  Text,
  Avatar,
  Textarea,
  Button,
  Flex,
  IconButton,
  Divider,
  useToast,
  Badge,
  Tooltip,
} from '@chakra-ui/react';
import { motion, AnimatePresence } from 'framer-motion';
import { Heart, MessageCircle, Send, TrendingUp, Crown, Pin } from 'lucide-react';
import { forumColors } from '@theme/forumTheme';
import {
  createComment,
  getComments,
  likeComment,
} from '@services/predictionMarketService.api';
import { useAuth } from '@contexts/AuthContext';

const MotionBox = motion(Box);

const CommentItem = ({ comment, topicId, topic, onReply, onInvest }) => {
  const [isLiked, setIsLiked] = useState(false);
  const [likes, setLikes] = useState(comment.likes_count || 0);
  const [showReply, setShowReply] = useState(false);

  // 处理点赞
  const handleLike = async () => {
    try {
      const response = await likeComment(comment.id);
      if (response.success) {
        setLikes(response.likes_count);
        setIsLiked(response.action === 'like');
      }
    } catch (error) {
      console.error('点赞失败:', error);
    }
  };

  // 格式化时间
  const formatTime = (dateString) => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = now - date;

    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return '刚刚';
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 7) return `${days}天前`;

    return date.toLocaleDateString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
    });
  };

  // 判断是否是庄主
  const isYesLord = comment.user?.id === topic?.yes_lord_id;
  const isNoLord = comment.user?.id === topic?.no_lord_id;
  const isLord = isYesLord || isNoLord;

  return (
    <MotionBox
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Flex gap={{ base: "2", sm: "3" }} py={{ base: "3", sm: "4" }}>
        {/* 头像 */}
        <Avatar
          size={{ base: "sm", sm: "md" }}
          name={comment.user?.nickname || comment.user?.username}
          src={comment.user?.avatar_url}
          bg={forumColors.gradients.goldPrimary}
          color={forumColors.background.main}
        />

        {/* 评论内容 */}
        <VStack align="stretch" flex="1" spacing={{ base: "1.5", sm: "2" }}>
          {/* 用户名和时间 */}
          <HStack justify="space-between" flexWrap="wrap">
            <HStack spacing="2">
              <Text fontSize={{ base: "sm", sm: "md" }} fontWeight="600" color={forumColors.text.primary}>
                {comment.user?.nickname || comment.user?.username || '匿名用户'}
              </Text>

              {/* 庄主标识 */}
              {isLord && (
                <Tooltip label={isYesLord ? 'YES方庄主' : 'NO方庄主'} placement="top">
                  <Badge
                    bg={isYesLord ? 'green.500' : 'red.500'}
                    color="white"
                    fontSize="2xs"
                    px="2"
                    py="0.5"
                    borderRadius="full"
                    display="flex"
                    alignItems="center"
                    gap="1"
                  >
                    <Crown size={10} />
                    {isYesLord ? 'YES庄' : 'NO庄'}
                  </Badge>
                </Tooltip>
              )}

              {/* 置顶标识 */}
              {comment.is_pinned && (
                <Badge
                  bg={forumColors.primary[500]}
                  color="white"
                  fontSize="2xs"
                  px="2"
                  py="0.5"
                  borderRadius="full"
                  display="flex"
                  alignItems="center"
                  gap="1"
                >
                  <Pin size={10} />
                  置顶
                </Badge>
              )}

              <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.muted}>
                {formatTime(comment.created_at)}
              </Text>
            </HStack>
          </HStack>

          {/* 评论正文 */}
          <Text fontSize={{ base: "sm", sm: "md" }} color={forumColors.text.secondary} lineHeight="1.6">
            {comment.content}
          </Text>

          {/* 观点IPO投资统计 */}
          {comment.total_investment > 0 && (
            <Box
              bg={forumColors.gradients.goldSubtle}
              border="1px solid"
              borderColor={forumColors.border.gold}
              borderRadius="md"
              px="3"
              py="2"
              mt="1"
            >
              <HStack spacing="4" fontSize="xs">
                <HStack spacing="1">
                  <TrendingUp size={12} color={forumColors.primary[500]} />
                  <Text color={forumColors.text.secondary}>
                    {comment.investor_count || 0}人投资
                  </Text>
                </HStack>
                <Text color={forumColors.text.secondary}>
                  总投资：<Text as="span" fontWeight="600" color={forumColors.primary[500]}>
                    {comment.total_investment}
                  </Text> 积分
                </Text>
                {comment.is_verified && (
                  <Badge
                    colorScheme={comment.verification_result === 'correct' ? 'green' : 'red'}
                    fontSize="2xs"
                  >
                    {comment.verification_result === 'correct' ? '✓ 预测正确' : '✗ 预测错误'}
                  </Badge>
                )}
              </HStack>
            </Box>
          )}

          {/* 操作按钮 */}
          <HStack spacing={{ base: "3", sm: "4" }} fontSize="xs" color={forumColors.text.tertiary} flexWrap="wrap">
            <HStack
              spacing="1"
              cursor="pointer"
              onClick={handleLike}
              _hover={{ color: forumColors.primary[500] }}
              color={isLiked ? forumColors.primary[500] : forumColors.text.tertiary}
            >
              <Heart size={14} fill={isLiked ? 'currentColor' : 'none'} />
              <Text>{likes > 0 ? likes : '点赞'}</Text>
            </HStack>

            <HStack
              spacing="1"
              cursor="pointer"
              onClick={() => setShowReply(!showReply)}
              _hover={{ color: forumColors.primary[500] }}
            >
              <MessageCircle size={14} />
              <Text>回复</Text>
            </HStack>

            {/* 投资观点按钮 */}
            {!comment.is_verified && onInvest && (
              <Button
                size="xs"
                variant="ghost"
                leftIcon={<TrendingUp size={14} />}
                color={forumColors.primary[500]}
                _hover={{ bg: forumColors.gradients.goldSubtle }}
                onClick={() => onInvest(comment)}
              >
                投资观点
              </Button>
            )}
          </HStack>

          {/* 回复输入框 */}
          {showReply && (
            <MotionBox
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.2 }}
              mt="2"
            >
              <ReplyInput
                topicId={topicId}
                parentId={comment.id}
                placeholder={`回复 @${comment.user?.nickname || comment.user?.username || '匿名用户'}`}
                onSubmit={() => {
                  setShowReply(false);
                  if (onReply) onReply();
                }}
              />
            </MotionBox>
          )}

          {/* 回复列表 */}
          {comment.replies && comment.replies.length > 0 && (
            <VStack
              align="stretch"
              spacing="2"
              pl={{ base: "3", sm: "4" }}
              mt="2"
              borderLeft="2px solid"
              borderColor={forumColors.border.default}
            >
              {comment.replies.map((reply) => (
                <Box key={reply.id}>
                  <HStack spacing="2" mb="1">
                    <Avatar
                      size="xs"
                      name={reply.user?.nickname || reply.user?.username}
                      src={reply.user?.avatar_url}
                    />
                    <Text fontSize="xs" fontWeight="600" color={forumColors.text.primary}>
                      {reply.user?.nickname || reply.user?.username || '匿名用户'}
                    </Text>
                    <Text fontSize="2xs" color={forumColors.text.muted}>
                      {formatTime(reply.created_at)}
                    </Text>
                  </HStack>
                  <Text fontSize="sm" color={forumColors.text.secondary} pl="6">
                    {reply.content}
                  </Text>
                </Box>
              ))}
            </VStack>
          )}
        </VStack>
      </Flex>
    </MotionBox>
  );
};

const ReplyInput = ({ topicId, parentId = null, placeholder, onSubmit }) => {
  const toast = useToast();
  const { user } = useAuth();
  const [content, setContent] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (!content.trim()) {
      toast({
        title: '请输入评论内容',
        status: 'warning',
        duration: 2000,
      });
      return;
    }

    setIsSubmitting(true);

    try {
      const response = await createComment(topicId, {
        content: content.trim(),
        parent_id: parentId,
      });

      if (response.success) {
        toast({
          title: '评论成功',
          status: 'success',
          duration: 2000,
        });

        setContent('');
        if (onSubmit) onSubmit();
      }
    } catch (error) {
      console.error('评论失败:', error);
      toast({
        title: '评论失败',
        description: error.response?.data?.error || error.message,
        status: 'error',
        duration: 3000,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Flex gap="2" align="end">
      <Textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder={placeholder || '写下你的评论...'}
        size="sm"
        bg={forumColors.background.secondary}
        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}`,
        }}
        minH={{ base: "70px", sm: "80px" }}
        resize="vertical"
        fontSize={{ base: "sm", sm: "md" }}
      />
      <IconButton
        icon={<Send size={18} />}
        onClick={handleSubmit}
        isLoading={isSubmitting}
        bg={forumColors.gradients.goldPrimary}
        color={forumColors.background.main}
        _hover={{ opacity: 0.9 }}
        size="sm"
        h={{ base: "9", sm: "10" }}
      />
    </Flex>
  );
};

const PredictionCommentSection = ({ topicId, topic, onInvest }) => {
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);

  // 加载评论
  const loadComments = async (pageNum = 1) => {
    try {
      setLoading(true);
      const response = await getComments(topicId, { page: pageNum, per_page: 20 });

      if (response.success) {
        if (pageNum === 1) {
          setComments(response.data);
        } else {
          setComments((prev) => [...prev, ...response.data]);
        }
        setTotal(response.pagination?.total || response.data.length);
        setHasMore(response.pagination?.has_next || false);
        setPage(pageNum);
      }
    } catch (error) {
      console.error('加载评论失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadComments();
  }, [topicId]);

  return (
    <Box
      bg={forumColors.background.card}
      borderRadius="xl"
      border="1px solid"
      borderColor={forumColors.border.default}
      p={{ base: "4", sm: "6" }}
    >
      {/* 标题 */}
      <Flex justify="space-between" align="center" mb={{ base: "4", sm: "6" }}>
        <HStack spacing="2">
          <MessageCircle size={20} color={forumColors.primary[500]} />
          <Text fontSize={{ base: "md", sm: "lg" }} fontWeight="bold" color={forumColors.text.primary}>
            评论
          </Text>
        </HStack>

        <Text fontSize="sm" color={forumColors.text.tertiary}>
          共 {total} 条
        </Text>
      </Flex>

      {/* 发表评论 */}
      <Box mb={{ base: "4", sm: "6" }}>
        <ReplyInput topicId={topicId} onSubmit={() => loadComments(1)} />
      </Box>

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

      {/* 评论列表 */}
      {loading && page === 1 ? (
        <Text color={forumColors.text.secondary} textAlign="center" py="8">
          加载中...
        </Text>
      ) : comments.length === 0 ? (
        <Text color={forumColors.text.secondary} textAlign="center" py="8">
          暂无评论，快来抢沙发吧！
        </Text>
      ) : (
        <>
          <VStack align="stretch" spacing="0" divider={<Divider borderColor={forumColors.border.default} />}>
            <AnimatePresence>
              {comments.map((comment) => (
                <CommentItem
                  key={comment.id}
                  comment={comment}
                  topicId={topicId}
                  topic={topic}
                  onReply={() => loadComments(1)}
                  onInvest={onInvest}
                />
              ))}
            </AnimatePresence>
          </VStack>

          {/* 加载更多 */}
          {hasMore && (
            <Flex justify="center" mt="6">
              <Button
                variant="ghost"
                onClick={() => loadComments(page + 1)}
                isLoading={loading}
                color={forumColors.text.secondary}
                _hover={{ bg: forumColors.background.hover }}
              >
                加载更多
              </Button>
            </Flex>
          )}
        </>
      )}
    </Box>
  );
};

export default PredictionCommentSection;