import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'wouter';
import logo from '../../assets/logo.png';
import Recommend from './Recommend/Recommend'; // 导入Recommend组件
import './SeedList.css';

const SeedList = () => {
    const [seeds, setSeeds] = useState([]);
    const [filteredSeeds, setFilteredSeeds] = useState([]);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedTag, setSelectedTag] = useState('全部');
    const [sortOption, setSortOption] = useState('最新');
    const [activeTab, setActiveTab] = useState('种子列表'); // 用于控制激活的标签

    const TAGS = ['猜你喜欢', '电影', '电视剧','动漫','音乐', '游戏','综艺', '软件', '体育','学习','纪录片','其他'];

    useEffect(() => {
        const fetchSeeds = async () => {
            try {
                const response = await axios.get('/echo/seeds');
                setSeeds(response.data);
                setFilteredSeeds(response.data);
            } catch (error) {
                console.error('获取种子列表失败:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchSeeds();
    }, []);

    useEffect(() => {
        let filtered = seeds;

        if (searchTerm) {
            filtered = filtered.filter(seed =>
                seed.name.toLowerCase().includes(searchTerm.toLowerCase())
            );
        }

        if (selectedTag !== '全部') {
            filtered = filtered.filter(seed =>
                seed.tags && seed.tags.includes(selectedTag)
            );
        }

        switch (sortOption) {
            case '最新':
                filtered.sort((a, b) => new Date(b.uploadTime) - new Date(a.uploadTime));
                break;
            case '最热':
                filtered.sort((a, b) => (b.downloadCount || 0) - (a.downloadCount || 0));
                break;
            case '文件大小':
                filtered.sort((a, b) => (b.size || 0) - (a.size || 0));
                break;
            default:
                break;
        }

        setFilteredSeeds([...filtered]);
    }, [searchTerm, selectedTag, sortOption, seeds]);

    return (
        <div className="main-page">
            <header className="header">
                <div className="logo-and-name">
                    <img src={logo} alt="网站logo" className="logo" />
                    <span className="site-name">Echo</span>
                </div>
                <div className="user-and-message">
                    <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
                    <span className="message-center">消息</span>
                </div>
            </header>

            <nav className="nav">
                <Link to="/friend-moments" className="nav-item">好友动态</Link>
                <Link to="/forum" className="nav-item">论坛</Link>
                <Link to="/interest-groups" className="nav-item">兴趣小组</Link>
                <Link to="/seed-list" className="nav-item active">种子列表</Link>
                <Link to="/publish-seed" className="nav-item">发布种子</Link>
            </nav>

            {/* 导航部分：点击不同标签时改变 activeTab */}
            <div className="controls">
                <input
                    type="text"
                    placeholder="搜索种子..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="search-input"
                />
                <select value={sortOption} onChange={(e) => setSortOption(e.target.value)} className="sort-select">
                    <option value="最新">最新</option>
                    <option value="最热">最热</option>
                    <option value="文件大小">文件大小</option>
                </select>
            </div>

            <div className="tag-filters">
                {TAGS.map((tag) => (
                    <button
                        key={tag}
                        className={`tag-button ${selectedTag === tag ? 'active-tag' : ''}`}
                        onClick={() => {
                            setSelectedTag(tag);
                            setActiveTab(tag); // 添加这一行来更新 activeTab 状态
                        }}
                    >
                        {tag}
                    </button>
                ))}
            </div>

            {/* 显示不同页面，根据activeTab */}
            <div className="seed-list-content">
                {activeTab === '猜你喜欢' ? (
                    <Recommend /> // 显示推荐页面
                ) : loading ? (
                    <p>加载中...</p>
                ) : filteredSeeds.length === 0 ? (
                    <p>未找到符合条件的种子。</p>
                ) : (
                    <div className="seed-cards">
                        {filteredSeeds.map((seed, index) => (
                            <div key={index} className="seed-card">
                                <div className="seed-card-header">
                                    <h3>{seed.name}</h3>
                                </div>
                                <div className="seed-card-body">
                                    <p><strong>大小:</strong> {seed.size || '未知'}</p>
                                    <p><strong>上传者:</strong> {seed.uploader || '匿名'}</p>
                                    <p><strong>时间:</strong> {seed.uploadTime || '未知'}</p>
                                    <p><strong>下载数:</strong> {seed.downloadCount ?? 0}</p>
                                </div>
                                <div className="seed-card-actions">
                                    <button className="btn-primary">下载</button>
                                    <Link href={`/seed/${seed.id}`} className="btn-secondary">详情</Link>
                                    <button className="btn-outline">收藏</button>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default SeedList;