import { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Leader } from './types';
import { leaders } from './mock';
import Header from './header';
import Filter from './filter';
import LeaderCard from './LeaderCard';
import { Spin, Empty } from 'antd';
import { api } from 'packages/client/dist';


export default function WriteLetterPage() {
    
    const [selectedLeader, setSelectedLeader] = useState<Leader | null>(null);
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedDivision, setSelectedDivision] = useState<string>('all');

    const filteredLeaders = useMemo(() => {
        return leaders.filter(leader => {
            const matchesSearch = leader.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                leader.rank.toLowerCase().includes(searchQuery.toLowerCase());
            const matchesDivision = selectedDivision === 'all' || leader.division === selectedDivision;
            return matchesSearch && matchesDivision;
        });
    }, [searchQuery, selectedDivision]);

    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">
                <Filter />

                <AnimatePresence>
                    {filteredLeaders.length > 0 ? (
                        <motion.div
                            className="grid grid-cols-1 gap-6"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                        >
                            {filteredLeaders.map((leader) => (
                                <LeaderCard
                                    key={leader.id}
                                    leader={leader}
                                    isSelected={selectedLeader?.id === leader.id}
                                    onSelect={() => setSelectedLeader(leader)}
                                />
                            ))}
                        </motion.div>
                    ) : (
                        <motion.div
                            className="text-center py-12"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                        >
                            <Empty></Empty>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    );
}