import { useState, useMemo, useCallback, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Header from './header';
import { SendCard } from './SendCard';
import { Spin, Empty, Input, Alert, message, Pagination } from 'antd';
import { api } from '@nice/client';
import DepartmentSelect from '@web/src/components/models/department/department-select';
import debounce from 'lodash/debounce';
import { SearchOutlined } from '@ant-design/icons';

export default function WriteLetterPage() {
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedDept, setSelectedDept] = useState<string>();
    const [currentPage, setCurrentPage] = useState(1);
    const pageSize = 10;

    const { data, isLoading, error } = api.staff.findManyWithPagination.useQuery({
        page: currentPage,
        pageSize,
        where: {
            deptId: selectedDept,
            OR: [{
                showname: {
                    contains: searchQuery
                }
            }, {
                username: {
                    contains: searchQuery
                }
            }]
        }
    });
    useEffect(() => {
        console.log(selectedDept)
        console.log(data)
        console.log(searchQuery)
    }, [selectedDept, data, searchQuery])
    // Reset to first page when search query or department changes
    useCallback(() => {
        setCurrentPage(1);
    }, [searchQuery, selectedDept]);

    return (
        <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
            <Header />
            <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">
                        <div className="w-full md:w-96">
                            <Input
                                prefix={<SearchOutlined className="text-gray-400" />}
                                placeholder="搜索领导姓名或职级..."
                                onChange={debounce((e) => setSearchQuery(e.target.value), 300)}
                                className="w-full"
                                size="large"
                            />
                        </div>
                        <DepartmentSelect
                            size="large"
                            value={selectedDept}
                            onChange={setSelectedDept as any}
                            className="w-full md:w-64"
                        />
                    </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) => (
                                <SendCard
                                    key={item.id}
                                    staff={item as any}
                                />
                            ))}
                        </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)}
                            showSizeChanger={false}
                            showTotal={(total) => `共 ${total} 条记录`}
                        />
                    </div>
                )}
            </div>
        </div>
    );
}