import { useState, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { 
    Edit2, LogOut,
    Home, ChevronRight, Users, User
} from 'lucide-react';
import Toast from '../../../components/Toast';
import useToast from '../../../hooks/useToast';

function AdminMembers() {
    const navigate = useNavigate();
    const [members, setMembers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [user, setUser] = useState(null);
    const { toast, setToast } = useToast();

    useEffect(() => {
        // 로그인 확인
        const token = localStorage.getItem('adminToken');
        const userData = localStorage.getItem('adminUser');

        if (!token || !userData) {
            navigate('/admin');
            return;
        }

        setUser(JSON.parse(userData));
        fetchMembers();
    }, [navigate]);

    const fetchMembers = () => {
        fetch('/api/members')
            .then(res => res.json())
            .then(data => {
                setMembers(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('멤버 로드 오류:', error);
                setLoading(false);
            });
    };

    const handleLogout = () => {
        localStorage.removeItem('adminToken');
        localStorage.removeItem('adminUser');
        navigate('/admin');
    };

    // 활동/탈퇴 멤버 분리 (is_former: 0=활동, 1=탈퇴)
    const activeMembers = members.filter(m => !m.is_former);
    const formerMembers = members.filter(m => m.is_former);

    // 멤버 카드 컴포넌트
    const MemberCard = ({ member, index, isFormer = false }) => (
        <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ 
                type: 'tween',
                ease: 'easeOut',
                duration: 0.35,
                delay: index * 0.06
            }}
            className={`relative rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group cursor-pointer ${isFormer ? 'opacity-60' : ''}`}
            onClick={() => navigate(`/admin/members/${encodeURIComponent(member.name)}/edit`)}
        >
            {/* 프로필 이미지 */}
            <div className={`aspect-[3/4] bg-gray-100 relative overflow-hidden ${isFormer ? 'grayscale' : ''}`}>
                {member.image_url ? (
                    <img 
                        src={member.image_url} 
                        alt={member.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                ) : (
                    <div className="w-full h-full flex items-center justify-center bg-gradient-to-b from-gray-100 to-gray-200">
                        <User size={48} className="text-gray-300" />
                    </div>
                )}
                
                {/* 이름 오버레이 - 하단 그라데이션 */}
                <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-4">
                    <h3 className="text-lg font-bold text-white drop-shadow-lg">{member.name}</h3>
                </div>
                
                {/* 수정 버튼 오버레이 */}
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                    <div className="px-4 py-2 bg-white/90 backdrop-blur-sm text-gray-900 rounded-lg font-medium flex items-center gap-2 shadow-lg">
                        <Edit2 size={16} />
                        수정
                    </div>
                </div>
            </div>
        </motion.div>
    );

    return (
        <div className="min-h-screen bg-gray-50">
            {/* Toast */}
            <Toast toast={toast} onClose={() => setToast(null)} />

            {/* 헤더 */}
            <header className="bg-white shadow-sm border-b border-gray-100">
                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
                            fromis_9
                        </Link>
                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
                            Admin
                        </span>
                    </div>
                    <div className="flex items-center gap-4">
                        <span className="text-gray-500 text-sm">
                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
                        </span>
                        <button
                            onClick={handleLogout}
                            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                        >
                            <LogOut size={18} />
                            <span>로그아웃</span>
                        </button>
                    </div>
                </div>
            </header>

            {/* 메인 콘텐츠 */}
            <main className="max-w-7xl mx-auto px-6 py-8">
                {/* 브레드크럼 */}
                <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
                        <Home size={16} />
                    </Link>
                    <ChevronRight size={14} />
                    <span className="text-gray-700">멤버 관리</span>
                </div>

                {/* 타이틀 */}
                <div className="mb-8">
                    <h1 className="text-3xl font-bold text-gray-900 mb-2">멤버 관리</h1>
                    <p className="text-gray-500">멤버 정보 및 프로필을 관리합니다</p>
                </div>

                {/* 멤버 목록 */}
                {loading ? (
                    <div className="flex justify-center items-center py-20">
                        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
                    </div>
                ) : (
                    <div className="space-y-12">
                        {/* 활동 멤버 */}
                        <div>
                            <div className="flex items-center gap-2 mb-6">
                                <Users size={20} className="text-primary" />
                                <h2 className="text-xl font-bold text-gray-900">현재 멤버</h2>
                                <span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
                                    {activeMembers.length}
                                </span>
                            </div>
                            
                            {/* 5열 그리드 */}
                            <div className="grid grid-cols-5 gap-5">
                                {activeMembers.map((member, index) => (
                                    <MemberCard key={member.id} member={member} index={index} />
                                ))}
                            </div>
                        </div>

                        {/* 탈퇴 멤버 */}
                        {formerMembers.length > 0 && (
                            <div>
                                <div className="flex items-center gap-2 mb-6">
                                    <User size={20} className="text-gray-400" />
                                    <h2 className="text-xl font-bold text-gray-500">이전 멤버</h2>
                                    <span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-sm font-medium rounded-full">
                                        {formerMembers.length}
                                    </span>
                                </div>
                                
                                {/* 5열 그리드 (탈퇴 멤버용 - 4명이면 4개만 표시) */}
                                <div className="grid grid-cols-5 gap-5">
                                    {formerMembers.map((member, index) => (
                                        <MemberCard key={member.id} member={member} index={index} isFormer />
                                    ))}
                                </div>
                            </div>
                        )}

                        {members.length === 0 && (
                            <div className="text-center py-12 text-gray-500">
                                등록된 멤버가 없습니다.
                            </div>
                        )}
                    </div>
                )}
            </main>
        </div>
    );
}

export default AdminMembers;