import React, { useState } from 'react';
import { useParams, useNavigate,useLocation } from 'react-router-dom';
import './RequestDetail.css';

const RequestDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  
  // 模拟数据
  const [post, setPost] = useState({
    id: 1,
    title: '求《药屋少女的呢喃》第二季全集',
    content: '求1080P带中文字幕版本，最好是内嵌字幕不是外挂的。\n\n希望有热心大佬能分享，可以给积分奖励！',
    author: '动漫爱好者',
    authorAvatar: 'https://via.placeholder.com/40',
    date: '2023-10-15',
    likeCount: 24,
    isLiked: false,
    isFavorited: false
  });

  const [comments, setComments] = useState([
    {
      id: 1,
      type: 'text',
      author: '资源达人',
      authorAvatar: 'https://via.placeholder.com/40',
      content: '我有第1-5集，需要的话可以私聊',
      date: '2023-10-15 14:30',
      likeCount: 5
    },
    {
      id: 2,
      type: 'torrent',
      title: '药屋少女的呢喃第二季第8集',
      size: '1.2GB',
      author: '种子分享者',
      authorAvatar: 'https://via.placeholder.com/40',
      date: '2023-10-16 09:15',
      likeCount: 8
    }
  ]);

  const [newComment, setNewComment] = useState('');

  const handleLikePost = () => {
    setPost(prev => ({
      ...prev,
      likeCount: prev.isLiked ? prev.likeCount - 1 : prev.likeCount + 1,
      isLiked: !prev.isLiked
    }));
  };

  const handleFavoritePost = () => {
    setPost(prev => ({
      ...prev,
      isFavorited: !prev.isFavorited
    }));
  };

  const handleCommentSubmit = (e) => {
    e.preventDefault();
    if (!newComment.trim()) return;
    
    const newCommentObj = {
      id: comments.length + 1,
      type: 'text',
      author: '当前用户',
      authorAvatar: 'https://via.placeholder.com/40',
      content: newComment,
      date: new Date().toLocaleString(),
      likeCount: 0
    };
    
    setComments([...comments, newCommentObj]);
    setNewComment('');
  };

  const handleDownloadTorrent = (commentId) => {
    console.log('下载种子', commentId);
    // 实际下载逻辑
  };

  const handleBack = () => {
    const fromTab = location.state?.fromTab; // 从跳转时传递的 state 中获取
    if (fromTab) {
      navigate(`/dashboard/${fromTab}`); // 明确返回对应标签页
    } else {
      navigate(-1); // 保底策略
    }
  }

  return (
    <div className="request-detail-container">
      <button className="back-button" onClick={handleBack}>
        &larr; 返回求种区
      </button>
      
      <div className="request-post">
        <div className="post-header">
          <img src={post.authorAvatar} alt={post.author} className="post-avatar" />
          <div className="post-meta">
            <div className="post-author">{post.author}</div>
            <div className="post-date">{post.date}</div>
          </div>
        </div>
        
        <h1 className="post-title">{post.title}</h1>
        
        <div className="post-content">
          {post.content.split('\n').map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>
        
        <div className="post-actions">
          <button 
            className={`like-button ${post.isLiked ? 'liked' : ''}`}
            onClick={handleLikePost}
          >
            👍 点赞 ({post.likeCount})
          </button>
          <button 
            className={`favorite-button ${post.isFavorited ? 'favorited' : ''}`}
            onClick={handleFavoritePost}
          >
            {post.isFavorited ? '★ 已收藏' : '☆ 收藏'}
          </button>
        </div>
      </div>
      
      <div className="comments-section">
        <h2>回应 ({comments.length})</h2>
        
        <form onSubmit={handleCommentSubmit} className="comment-form">
          <textarea
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            placeholder="写下你的回应..."
            rows="3"
            required
          />
          <div className="form-actions">
            <button type="submit" className="submit-comment">发表文字回应</button>
            <button 
              type="button" 
              className="submit-torrent"
              onClick={() => console.log('打开种子上传对话框')}
            >
              上传种子回应
            </button>
          </div>
        </form>
        
        <div className="comment-list">
          {comments.map(comment => (
            <div key={comment.id} className={`comment-item ${comment.type}`}>
              <img 
                src={comment.authorAvatar} 
                alt={comment.author} 
                className="comment-avatar"
              />
              
              <div className="comment-content">
                <div className="comment-header">
                  <span className="comment-author">{comment.author}</span>
                  <span className="comment-date">{comment.date}</span>
                </div>
                
                {comment.type === 'text' ? (
                  <p className="comment-text">{comment.content}</p>
                ) : (
                  <div className="torrent-comment">
                    <span className="torrent-title">{comment.title}</span>
                    <span className="torrent-size">{comment.size}</span>
                    <button 
                      className="download-torrent"
                      onClick={() => handleDownloadTorrent(comment.id)}
                    >
                      立即下载
                    </button>
                  </div>
                )}
                
                <button className="comment-like">
                  👍 ({comment.likeCount})
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default RequestDetail;