import { useState, useMemo } from 'react';
import { mockCourses } from './mockData';
import FilterSection from './components/FilterSection';
import CourseList from './components/CourseList';

export default function CoursesPage() {
    const [currentPage, setCurrentPage] = useState(1);
    const [selectedCategory, setSelectedCategory] = useState('');
    const [selectedLevel, setSelectedLevel] = useState('');
    const pageSize = 12;

    const filteredCourses = useMemo(() => {
        return mockCourses.filter(course => {
            const matchCategory = !selectedCategory || course.category === selectedCategory;
            const matchLevel = !selectedLevel || course.level === selectedLevel;
            return matchCategory && matchLevel;
        });
    }, [selectedCategory, selectedLevel]);

    const paginatedCourses = useMemo(() => {
        const startIndex = (currentPage - 1) * pageSize;
        return filteredCourses.slice(startIndex, startIndex + pageSize);
    }, [filteredCourses, currentPage]);

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    return (
        <div className="min-h-screen bg-gray-50">
            <div className="container mx-auto px-4 py-8">
                <div className="flex  gap-4">
                    {/* 左侧筛选区域 */}
                    <div className="lg:w-1/5">
                        <div className="sticky top-24">
                            <FilterSection
                                selectedCategory={selectedCategory}
                                selectedLevel={selectedLevel}
                                onCategoryChange={category => {
                                    setSelectedCategory(category);
                                    setCurrentPage(1);
                                }}
                                onLevelChange={level => {
                                    setSelectedLevel(level);
                                    setCurrentPage(1);
                                }}
                            />
                        </div>
                    </div>

                    {/* 右侧课程列表区域 */}
                    <div className="lg:w-4/5">
                        <div className="bg-white p-6 rounded-lg shadow-sm">
                            <div className="flex justify-between items-center mb-6">
                                <span className="text-gray-600">
                                    共找到 {filteredCourses.length} 门课程
                                </span>
                            </div>
                            <CourseList
                                courses={paginatedCourses}
                                total={filteredCourses.length}
                                pageSize={pageSize}
                                currentPage={currentPage}
                                onPageChange={handlePageChange}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}