import React from 'react';
import CommentForm from './CommentForm';
import { GoodTwo, Comment } from '@icon-park/react';
import './GroupDetail.css';
import AuthButton from '../../components/AuthButton';

const GroupPosts = ({ 
  posts, 
  members, 
  userId, 
  toggleLike, 
  handleSubmitComment, 
  showCommentForm, 
  setShowCommentForm,
  isMember,
  onShowCreatePost,
  loginHint
}) => {
  return (
    <section className="group-section">
      <h2>讨论帖子</h2>
      
      <div className="post-list-header">
        {userId && isMember && (
          <AuthButton
          roles={[ "chocolate", "ice-cream"]}
            className="create-post-btn" 
            onClick={onShowCreatePost}
          >
            + 发布帖子
          </AuthButton>
        )}
        {(!userId || !isMember) && <p className="login-hint">{loginHint}</p>}
      </div>
      
      <div className="post-list">
        {posts.length > 0 ? (
          posts.map(post => (
            <div key={post.group_post_id} className="post-card">
              <div className="post-header">
                <h3 className="post-title">{post.title}</h3>
                <div className="post-meta">
                  <span className="post-author">
                    <img 
                      src={members.find(m => m.user_id === post.user_id)?.avatar_url || 'https://picsum.photos/50/50'} 
                      alt={post.username} 
                      className="author-avatar"
                    />
                    {post.username}
                  </span>
                  <span className="post-time">{new Date(post.time).toLocaleString()}</span>
                </div>
              </div>
              
              <div className="post-content">
                <p>{post.content}</p>
              </div>
              
              <div className="post-actions">
                <span className="like-button" onClick={() => userId ? toggleLike(post.group_post_id) : alert('请先登录')}>
                  <GoodTwo 
                    theme="outline" 
                    size="30" 
                    fill={post.userLiked ? '#ff4d4f' : '#8c8c8c'} 
                    style={{ verticalAlign: 'middle', marginRight: '4px' }}
                  />
                  <span className="like-count">{post.likes || 0}</span>
                </span>
                
                <button className="icon-btn" onClick={() => setShowCommentForm(post.group_post_id)}>
                  <Comment theme="outline" size="30" fill="#8c8c8c"/>
                  <span>评论</span>
                </button>
              </div>
              
              {/* 评论表单 */}
              {showCommentForm === post.group_post_id && (
                <CommentForm
                  onSubmit={(content) => handleSubmitComment(post.group_post_id, content)}
                  onCancel={() => setShowCommentForm(null)}
                />
              )}
              
              {/* 显示评论 */}
              {post.comments && post.comments.length > 0 && (
                <div className="comments-section">
                  <h4 className="comments-title">评论 ({post.comments.length})</h4>
                  {post.comments.map(comment => (
                    <div key={comment.id || comment.comment_id} className="comment-item">
                      <div className="comment-header">
                        <img 
                          src={members.find(m => m.user_id === comment.userId)?.avatar_url || 'https://picsum.photos/40/40'} 
                          alt={comment.username || '用户'} 
                          className="comment-avatar"
                        />
                        <span className="comment-author">{comment.username || '用户'}</span>
                        <span className="comment-time">{new Date(comment.time).toLocaleString()}</span>
                      </div>
                      <div className="comment-content">{comment.content}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))
        ) : (
          <p className="empty-message">暂无帖子</p>
        )}
      </div>
    </section>
  );
};

export default GroupPosts;