import { useState, useMemo } from 'react';
import { motion } from 'framer-motion';
import { FunnelIcon, MagnifyingGlassIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline';
import { Leader } from './types';
import { leaders } from './mock';
import Header from './header';
import Filter from './filter';


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

    const divisions = useMemo(() => {
        return ['all', ...new Set(leaders.map(leader => leader.division))];
    }, []);

    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-100 to-slate-200">
            <Header></Header>
            {/* 搜索和筛选区域 */}
            <div className=" px-4 py-8">

                <Filter></Filter>
                {/* Modified Leader Cards Grid */}
                <div className="grid grid-cols-1 gap-6">
                    {filteredLeaders.map((leader) => (
                        <motion.div
                            key={leader.id}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            whileHover={{ scale: 1.005 }}
                            transition={{ duration: 0.2 }}
                            className={`
                bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100
                ${selectedLeader?.id === leader.id
                                    ? 'ring-2 ring-[#00308F]'
                                    : 'hover:shadow-lg hover:border-blue-100'
                                }
            `}
                        >
                            <div className="flex flex-col sm:flex-row">
                                {/* Image Container */}
                                <div className="sm:w-48 h-64 sm:h-auto flex-shrink-0">
                                    <img
                                        src={leader.imageUrl}
                                        alt={leader.name}
                                        className="w-full h-full object-cover"
                                    />
                                </div>

                                {/* Content Container */}
                                <div className="flex-1 p-6">
                                    <div className="flex flex-col h-full">
                                        <div className="mb-4">
                                            <div className="flex items-center justify-between mb-3">
                                                <h3 className="text-xl font-semibold text-gray-900">
                                                    {leader.name}
                                                </h3>
                                                <span className="px-3 py-1 text-sm font-medium bg-blue-50 text-[#00308F] rounded-full">
                                                    {leader.rank}
                                                </span>
                                            </div>
                                            <p className="text-gray-600 mb-4">{leader.division}</p>

                                            {/* Contact Information */}
                                            <div className="space-y-2 text-sm text-gray-600">
                                                <p className="flex items-center">
                                                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                                    </svg>
                                                    {leader.email}
                                                </p>
                                                <p className="flex items-center">
                                                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                                    </svg>
                                                    {leader.phone}
                                                </p>
                                                <p className="flex items-center">
                                                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                                    </svg>
                                                    {leader.office}
                                                </p>
                                            </div>
                                        </div>

                                        <button
                                            onClick={() => setSelectedLeader(leader)}
                                            className="mt-auto w-full sm:w-auto flex items-center justify-center gap-2 
                                bg-[#00308F] text-white py-3 px-6 rounded-lg
                                hover:bg-[#002070] transition-all duration-300
                                focus:outline-none focus:ring-2 focus:ring-[#00308F] focus:ring-opacity-50
                                transform hover:-translate-y-0.5"
                                        >
                                            <PaperAirplaneIcon className="w-5 h-5" />
                                            Compose Letter
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    ))}
                </div>
                {/* 无结果提示 */}
                {filteredLeaders.length === 0 && (
                    <div className="text-center py-12">
                        <p className="text-gray-600 text-lg">
                            No leaders found matching your search criteria
                        </p>
                    </div>
                )}
            </div>
        </div>
    );
}