import React, { useState, useEffect } from "react";
import { useNavigate } from 'react-router-dom';
import { getGvgTeamList, GvgTeam, GvgTeamQueryParams } from '../api/gvg';

const Lineup: React.FC = () => {
    const [selectedDifficulty, setSelectedDifficulty] = useState<string>("All");
    const [selectedTags, setSelectedTags] = useState<string[]>([]);
    const [searchTerm, setSearchTerm] = useState<string>("");
    const [lineups, setLineups] = useState<GvgTeam[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);
    const [pageNum, setPageNum] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [total, setTotal] = useState<number>(0);
    const navigate = useNavigate();

    // Fetch data from API
    useEffect(() => {
        const fetchLineups = async () => {
            setLoading(true);
            try {
                const params: GvgTeamQueryParams = {
                    pageNum,
                    pageSize,
                    // Add other filters as needed
                };
                
                const response = await getGvgTeamList(params);
                setLineups(response.list);
                setTotal(response.total);
                setError(null);
            } catch (err) {
                console.error('Failed to fetch lineups:', err);
                setError('获取阵容数据失败，请稍后再试');
                // Use mock data as fallback
                setLineups(mockLineups);
            } finally {
                setLoading(false);
            }
        };

        fetchLineups();
    }, [pageNum, pageSize]);

    // Mock data for fallback
    const mockLineups: GvgTeam[] = [
        {
            id: 1,
            defenseHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
            attackHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
            equipmentInfo: "攻击套 + 暴击套",
            artifacts: "攻击力 + 暴击率",
            battleStrategy: "以高爆发伤害为主的阵容，适合快速结束战斗",
            prerequisites: "需要高星级角色和优质装备",
            importantNotes: "注意控制技能释放时机",
            createTime: "2023-01-01",
            updateTime: "2023-01-01"
        },
        {
            id: 2,
            defenseHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
            attackHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
            equipmentInfo: "生命套 + 防御套",
            artifacts: "生命值 + 防御力",
            battleStrategy: "以持续输出和防御为主的阵容，适合持久战",
            prerequisites: "需要高生命值和防御力的角色",
            importantNotes: "注意保持治疗技能的持续释放",
            createTime: "2023-01-02",
            updateTime: "2023-01-02"
        }
    ];

    const difficulties = ["简单", "中等", "困难"];
    const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];

    const filteredLineups = lineups.filter(lineup => {
        const matchesSearch = 
            lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
            lineup.defenseHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
            lineup.attackHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase()));
        
        // Since we don't have difficulty in the API data, we'll use a simple filter
        const matchesDifficulty = selectedDifficulty === "All" || 
            (selectedDifficulty === "简单" && lineup.id % 3 === 1) ||
            (selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
            (selectedDifficulty === "困难" && lineup.id % 3 === 0);
        
        // Since we don't have tags in the API data, we'll use a simple filter
        const matchesTags = selectedTags.length === 0 || 
            selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
        
        return matchesSearch && matchesDifficulty && matchesTags;
    });

    const handleLineupClick = (id: number) => {
        navigate(`/lineup/${id}`);
    };

    const handlePageChange = (newPage: number) => {
        setPageNum(newPage);
    };

    const handlePageSizeChange = (newSize: number) => {
        setPageSize(newSize);
        setPageNum(1); // Reset to first page when changing page size
    };

    return (
        <div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
            {/* 背景装饰 */}
            <div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
                <h1 className="text-4xl font-bold text-center mb-8">
                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
                        对战阵容推荐
                    </span>
                </h1>

                {/* 搜索和筛选组件 */}
                <div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm">
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                        <input
                            type="text"
                            placeholder="搜索阵容"
                            className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                    </div>

                    {/* 难度筛选 */}
                    <div className="mb-4">
                        <div className="flex flex-wrap gap-1">
                            <button
                                className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
                                    selectedDifficulty === "All"
                                        ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
                                        : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
                                }`}
                                onClick={() => setSelectedDifficulty("All")}
                            >
                                全部难度
                            </button>
                            {difficulties.map((difficulty) => (
                                <button
                                    key={difficulty}
                                    className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
                                        selectedDifficulty === difficulty
                                            ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
                                            : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
                                    }`}
                                    onClick={() => setSelectedDifficulty(difficulty)}
                                >
                                    {difficulty}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* 标签筛选 */}
                    <div className="mb-4">
                        <div className="flex flex-wrap gap-1">
                            {availableTags.map((tag) => (
                                <button
                                    key={tag}
                                    className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
                                        selectedTags.includes(tag)
                                            ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
                                            : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
                                    }`}
                                    onClick={() => {
                                        setSelectedTags(prev =>
                                            prev.includes(tag)
                                                ? prev.filter(t => t !== tag)
                                                : [...prev, tag]
                                        );
                                    }}
                                >
                                    {tag}
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                {/* 加载状态 */}
                {loading && (
                    <div className="flex justify-center items-center py-12">
                        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div>
                    </div>
                )}

                {/* 错误提示 */}
                {error && (
                    <div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded mb-6">
                        {error}
                    </div>
                )}

                {/* 阵容列表 - 列表格式 */}
                {!loading && (
                    <div className="space-y-4">
                        {filteredLineups.map((lineup) => (
                            <div
                                key={lineup.id}
                                className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
                                onClick={() => handleLineupClick(lineup.id)}
                            >
                                <div className="p-6">
                                    <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                                        <div>
                                            <h3 className="text-xl font-bold text-[#E6B17E] mb-2">阵容 #{lineup.id}</h3>
                                            <p className="text-[#9B8579]">{lineup.battleStrategy}</p>
                                        </div>
                                        <div className="mt-4 md:mt-0 flex items-center">
                                            <span className="text-[#C17F59] text-sm mr-2">创建时间:</span>
                                            <span className="text-[#E6B17E]">{lineup.createTime}</span>
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                                        {/* 防守阵容 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">防守阵容</h4>
                                            <div className="flex flex-wrap gap-2">
                                                {lineup.defenseHeroes.map((hero: string, index: number) => (
                                                    <span 
                                                        key={index}
                                                        className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
                                                    >
                                                        {hero}
                                                    </span>
                                                ))}
                                            </div>
                                        </div>
                                        
                                        {/* 进攻阵容 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">进攻阵容</h4>
                                            <div className="flex flex-wrap gap-2">
                                                {lineup.attackHeroes.map((hero: string, index: number) => (
                                                    <span 
                                                        key={index}
                                                        className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
                                                    >
                                                        {hero}
                                                    </span>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                                        {/* 装备信息 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">装备信息</h4>
                                            <p className="text-[#9B8579]">{lineup.equipmentInfo}</p>
                                        </div>
                                        
                                        {/* 神器信息 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">神器信息</h4>
                                            <p className="text-[#9B8579]">{lineup.artifacts}</p>
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        {/* 前置条件 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">前置条件</h4>
                                            <p className="text-[#9B8579]">{lineup.prerequisites}</p>
                                        </div>
                                        
                                        {/* 重要提示 */}
                                        <div>
                                            <h4 className="text-lg font-semibold text-[#E6B17E] mb-2">重要提示</h4>
                                            <p className="text-[#9B8579]">{lineup.importantNotes}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}

                {/* 分页控件 */}
                {!loading && total > 0 && (
                    <div className="flex justify-center items-center mt-8">
                        <div className="flex space-x-2">
                            <button
                                className={`px-3 py-1 rounded-md ${
                                    pageNum === 1
                                        ? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
                                        : "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
                                }`}
                                onClick={() => pageNum > 1 && handlePageChange(pageNum - 1)}
                                disabled={pageNum === 1}
                            >
                                上一页
                            </button>
                            
                            {Array.from({ length: Math.ceil(total / pageSize) }, (_, i) => i + 1)
                                .filter(page => 
                                    page === 1 || 
                                    page === Math.ceil(total / pageSize) || 
                                    (page >= pageNum - 1 && page <= pageNum + 1)
                                )
                                .map((page, index, array) => {
                                    // Add ellipsis if there's a gap
                                    if (index > 0 && page - array[index - 1] > 1) {
                                        return (
                                            <React.Fragment key={`ellipsis-${page}`}>
                                                <span className="px-2 py-1 text-[#9B8579]">...</span>
                                                <button
                                                    className={`px-3 py-1 rounded-md ${
                                                        pageNum === page
                                                            ? "bg-[#C17F59] text-[#1A1412]"
                                                            : "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
                                                    }`}
                                                    onClick={() => handlePageChange(page)}
                                                >
                                                    {page}
                                                </button>
                                            </React.Fragment>
                                        );
                                    }
                                    
                                    return (
                                        <button
                                            key={page}
                                            className={`px-3 py-1 rounded-md ${
                                                pageNum === page
                                                    ? "bg-[#C17F59] text-[#1A1412]"
                                                    : "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
                                            }`}
                                            onClick={() => handlePageChange(page)}
                                        >
                                            {page}
                                        </button>
                                    );
                                })}
                            
                            <button
                                className={`px-3 py-1 rounded-md ${
                                    pageNum === Math.ceil(total / pageSize)
                                        ? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
                                        : "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
                                }`}
                                onClick={() => pageNum < Math.ceil(total / pageSize) && handlePageChange(pageNum + 1)}
                                disabled={pageNum === Math.ceil(total / pageSize)}
                            >
                                下一页
                            </button>
                        </div>
                        
                        <div className="ml-4 flex items-center">
                            <span className="text-[#9B8579] mr-2">每页显示:</span>
                            <select
                                className="bg-[#1A1412] border border-[#C17F59]/30 text-[#E6B17E] px-2 py-1 rounded-md"
                                value={pageSize}
                                onChange={(e) => handlePageSizeChange(Number(e.target.value))}
                            >
                                <option value={5}>5</option>
                                <option value={10}>10</option>
                                <option value={20}>20</option>
                                <option value={50}>50</option>
                            </select>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default Lineup;