import React, { useEffect, useState } from 'react';
import { useParams } from 'wouter';
import { useUser } from '../../context/UserContext';
import GroupMembers from './GroupMembers';
import GroupPosts from './GroupPosts';
import CreatePostForm from './CreatePostForm';
import './GroupDetail.css';

const GroupDetail = () => {
  const { groupId } = useParams();
  console.log('GroupDetail groupId:', groupId);
  
  const { user } = useUser();
  const userId = user?.userId;

  const [members, setMembers] = useState([]);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showCommentForm, setShowCommentForm] = useState(null);
  const [refetchKey, setRefetchKey] = useState(0);
  const [showCreatePost, setShowCreatePost] = useState(false);
  const [isMember, setIsMember] = useState(false);

  useEffect(() => {
    if (!groupId) {
      setError('小组ID缺失');
      setLoading(false);
      return;
    }
    
    const fetchGroupData = async () => {
      try {
        const res1 = await fetch(`/echo/groups/${groupId}/members`);
        const membersData = await res1.json();

        const res2 = await fetch(`/echo/groups/${groupId}/getAllPosts`);
        const postsData = await res2.json();

        if (res1.ok) {
          setMembers(membersData.members || []);
          setIsMember(userId && membersData.members.some(m => m.user_id === userId));
        }
        
        if (res2.ok) {
          const postsWithLikes = postsData.posts?.map(post => ({
            ...post,
            userLiked: false,
            likes: post.likes || 0
          })) || [];
          setPosts(postsWithLikes);
        }
      } catch (err) {
        setError('加载失败，请稍后重试');
      } finally {
        setLoading(false);
      }
    };

    fetchGroupData();
  }, [groupId, refetchKey, userId]);

  const toggleLike = async (postId) => {
    const postIndex = posts.findIndex(p => p.group_post_id === postId);
    if (postIndex === -1) return;
    
    const currentPost = posts[postIndex];
    const isLiked = currentPost.userLiked;
    
    try {
      const response = await fetch(
        `/echo/groups/${postId}/${isLiked ? 'unlike' : 'like'}`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );
      
      const data = await response.json();
      if (response.ok && data.status === 'success') {
        const updatedPosts = [...posts];
        updatedPosts[postIndex] = {
          ...currentPost,
          userLiked: !isLiked,
          likes: isLiked ? currentPost.likes - 1 : currentPost.likes + 1
        };
        setPosts(updatedPosts);
        
        setTimeout(() => {
          setRefetchKey(prev => prev + 1);
        }, 200);
      } else {
        console.error(isLiked ? '取消点赞失败' : '点赞失败:', data.message);
      }
    } catch (error) {
      console.error(isLiked ? '取消点赞请求出错' : '点赞请求出错:', error);
    }
  };

  const handleSubmitComment = async (postId, content) => {
    if (!userId) {
      alert('请先登录');
      return;
    }
    
    try {
      const response = await fetch(`/echo/groups/${postId}/comment`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          userId,
          content
        })
      });
      
      const data = await response.json();
      if (response.ok && data.status === 'success') {
        setPosts(prevPosts => prevPosts.map(post => 
          post.group_post_id === postId ? 
          {...post, comments: [...(post.comments || []), {
            id: Date.now(),
            userId,
            username: user.username,
            content,
            time: new Date().toISOString()
          }]} : 
          post
        ));
        setShowCommentForm(null);
        setRefetchKey(prev => prev + 1);
      } else {
        console.error('评论失败:', data.message);
      }
    } catch (error) {
      console.error('评论请求出错:', error);
    }
  };

  const handlePostCreated = () => {
    setShowCreatePost(false);
    setRefetchKey(prev => prev + 1);
  };

  if (loading) return <div className="group-detail"><p>加载中...</p></div>;
  if (error) return <div className="group-detail"><p>{error}</p></div>;

  return (
    <div className="group-detail">
      <h1 className="group-title">兴趣小组详情</h1>
      
      <GroupMembers members={members} />
      
      <GroupPosts 
        posts={posts}
        members={members}
        userId={userId}
        toggleLike={toggleLike}
        handleSubmitComment={handleSubmitComment}
        showCommentForm={showCommentForm}
        setShowCommentForm={setShowCommentForm}
        isMember={isMember}
        onShowCreatePost={() => setShowCreatePost(true)}
        loginHint={!userId ? "请登录后发布帖子" : "加入小组后即可发布帖子"}
      />
    

      {showCreatePost && (
        <div className="modal-overlay">
            <div className="modal-content">
            <button className="modal-close" onClick={() => setShowCreatePost(false)}>×</button>
            <CreatePostForm 
                groupId={groupId}
                onClose={() => setShowCreatePost(false)}
                onPostCreated={handlePostCreated}
            />
            </div>
        </div>
        )}


    </div>
  );
};

export default GroupDetail;