import { useState, useMemo, useEffect } from "react";
import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList";
import { api } from "@nice/client";
import {
	courseDetailSelect,
	CourseDto,
	LectureType,
	PostType,
} from "@nice/common";
import { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval";

interface paginationData {
	items:CourseDto[],
	totalPages:number
}
export default function CoursesPage() {
	const [currentPage, setCurrentPage] = useState(1);
	const [selectedCategory, setSelectedCategory] = useState("");
	const [selectedLevel, setSelectedLevel] = useState("");
	const pageSize = 12;
 	const [isAll,setIsAll] = useState(true)
	const [searchParams, setSearchParams] = useSearchParams();
	
	const [coursesData, setCoursesData] = useState<CourseDto[]>([]);
	const [isCourseLoading, setIsCourseLoading] = useState(false);
	const [totalPagesNum, setTotalPagesNum] = useState(0);
	
	if(!searchParams.get('searchValue') && !searchParams.get('searchValue')){
		const {data,isLoading} :{ data:paginationData,isLoading:boolean} = api.post.findManyWithPagination.useQuery({
			where: {
				type: PostType.COURSE,
				terms: isAll
					? {}
					: {
							some: {
								OR: [
									selectedCategory
										? { name: selectedCategory }
										: {},
									selectedLevel
										? { name: selectedLevel }
										: {},
								],
							},
						},
			},
			pageSize,
			page:currentPage,
			select:courseDetailSelect,
		});
		console.log(data)
		useEffect(()=>{
			console.log(currentPage);
			setIsCourseLoading(isLoading)
			setCoursesData(data?.items)
			setTotalPagesNum(data?.totalPages)
		},[currentPage,data])
	}else{
		console.log('searchValue:'+searchParams.get('searchValue'))
		const searchValue = searchParams.get('searchValue')
		const {data,isLoading} :{ data:paginationData,isLoading:boolean}= api.post.findManyWithPagination.useQuery({
			where: {
				type: PostType.COURSE,
				OR: [
					{ title: { contains: searchValue, mode: "insensitive" } },
					{
						subTitle: {
							contains: searchValue,
							mode: "insensitive",
						},
					},
					{ content: { contains: searchValue, mode: "insensitive" } },
					{
						terms: {
							some: {
								name: {
									contains: searchValue,
									mode: "insensitive",
								},
							},
						},
					},
				],
			},
			select:courseDetailSelect,
			pageSize,
			page:currentPage,
		})
		useEffect(()=>{
			setIsCourseLoading(isLoading)
			setCoursesData(data?.items)
			setTotalPagesNum(data?.totalPages)
		},[currentPage])
	}
	useEffect(() => {
		if (searchParams.get("searchValue") == "") {
			setSelectedCategory("");
			setSelectedLevel("");
		}
	}, [searchParams.get("searchValue")]);
	const filteredCourses = useMemo(() => {
		return isCourseLoading ? [] : coursesData;
	}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);

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

	const handlePageChange = (page: number) => {
		setCurrentPage(page);
		window.scrollTo({ top: 0, behavior: "smooth" });
	};
	useEffect(() => {
		setCurrentPage(1);
	}, []);

	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) => {
									console.log(category);
									setSelectedCategory(category);
									setCurrentPage(1);
									setIsAll(!category)
									setSearchParams(prev => {
										prev.delete('searchValue');
										return prev;
									});
								}}
								onLevelChange={(level) => {
									setSelectedLevel(level);
									setCurrentPage(1);
									setIsAll(!level)
									setSearchParams(prev => {
										prev.delete('searchValue');
										return prev;
									});
								}}
							/>
						</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">
									共找到 {totalPagesNum * pageSize || 0} 门课程
								</span>
							</div>
							<CourseList
								courses={paginatedCourses}
								total={totalPagesNum * pageSize}
								pageSize={pageSize}
								currentPage={currentPage}
								onPageChange={handlePageChange}
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}