import { useState, useCallback, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useSearchParams } from "react-router-dom";

import { SendCard } from "./SendCard";
import { Spin, Empty, Input, Alert, Pagination } from "antd";
import { api, useTerm } from "@nice/client";
import DepartmentSelect from "@web/src/components/models/department/department-select";
import debounce from "lodash/debounce";
import { SearchOutlined } from "@ant-design/icons";
import WriteHeader from "./WriteHeader";

export default function WriteLetterPage() {
	const [searchParams] = useSearchParams();
	const termId = searchParams.get("termId");
	const [searchQuery, setSearchQuery] = useState("");
	const [selectedDept, setSelectedDept] = useState<string>();
	const [currentPage, setCurrentPage] = useState(1);
	const pageSize = 10;
	const { getTerm } = useTerm();

	const { data, isLoading, error } =
		api.staff.findManyWithPagination.useQuery({
			page: currentPage,
			pageSize,
			where: {
				deptId: selectedDept,
				OR: [
					{
						showname: {
							contains: searchQuery,
						},
					},
					{
						username: {
							contains: searchQuery,
						},
					},
				],
			},
			orderBy: {
				order: "desc",
			},
			// orderBy:{

			// }
		});

	const resetPage = useCallback(() => {
		setCurrentPage(1);
	}, []);

	// Reset page when search or department changes
	useEffect(() => {
		resetPage();
	}, [searchQuery, selectedDept, resetPage]);

	return (
		<div className="min-h-screen shadow-elegant border-2 border-white  rounded-xl bg-slate-200">
			<WriteHeader term={getTerm(termId)} />
			<div className="container mx-auto px-4 py-8">
				<div className="mb-8 space-y-4">
					{/* Search and Filter Section */}
					<div className="flex flex-col md:flex-row gap-4 items-center">
						<DepartmentSelect
							variant="filled"
							size="large"
							value={selectedDept}
							onChange={setSelectedDept as any}
							className="w-1/2"
						/>
						<Input
							variant="filled"
							className={"w-1/2"}
							prefix={
								<SearchOutlined className="text-gray-400" />
							}
							placeholder="搜索领导姓名或职级..."
							onChange={debounce(
								(e) => setSearchQuery(e.target.value),
								300
							)}
							size="large"
						/>
					</div>

					{error && (
						<Alert
							message="加载失败"
							description="获取数据时出现错误，请刷新页面重试。"
							type="error"
							showIcon
						/>
					)}
				</div>

				<AnimatePresence>
					{isLoading ? (
						<div className="flex justify-center items-center py-12">
							<Spin size="large" tip="加载中..." />
						</div>
					) : data?.items.length > 0 ? (
						<motion.div
							className="grid grid-cols-1 gap-6"
							initial={{ opacity: 0 }}
							animate={{ opacity: 1 }}
							exit={{ opacity: 0 }}>
							{data?.items.map((item: any) => (
								<SendCard
									key={item.id}
									staff={item}
									termId={termId || undefined}
								/>
							))}
						</motion.div>
					) : (
						<motion.div
							className="text-center py-12"
							initial={{ opacity: 0 }}
							animate={{ opacity: 1 }}
							exit={{ opacity: 0 }}>
							<Empty
								description="没有找到匹配的收信人"
								className="py-12"
							/>
						</motion.div>
					)}
				</AnimatePresence>

				{/* Pagination */}
				{data?.items.length > 0 && (
					<div className="flex justify-center mt-8">
						<Pagination
							current={currentPage}
							total={data?.totalPages || 0}
							pageSize={pageSize}
							onChange={(page) => {
								setCurrentPage(page);
								window.scrollTo(0, 0);
							}}
							showSizeChanger={false}
							showTotal={(total) => `共 ${total} 条记录`}
						/>
					</div>
				)}
			</div>
		</div>
	);
}