import { useState, useEffect, useRef } from 'react';
import { useNavigate, Link, useParams } from 'react-router-dom';
import { motion, AnimatePresence, Reorder } from 'framer-motion';
import { 
    Upload, Trash2, Image, X, Check, Plus,
    Home, ChevronRight, LogOut, ArrowLeft, Grid, List,
    ZoomIn, AlertTriangle, GripVertical, Users, User, Users2,
    Tag, FolderOpen, Save
} from 'lucide-react';
import Toast from '../../../components/Toast';

// 멤버 목록
const MEMBERS = ['이서연', '송하영', '장규리', '박지원', '이나경', '이채영', '백지헌'];

function AdminAlbumPhotos() {
    const { albumId } = useParams();
    const navigate = useNavigate();
    const fileInputRef = useRef(null);

    const [album, setAlbum] = useState(null);
    const [photos, setPhotos] = useState([]);
    const [loading, setLoading] = useState(true);
    const [user, setUser] = useState(null);
    const [toast, setToast] = useState(null);
    const [selectedPhotos, setSelectedPhotos] = useState([]);
    const [uploading, setUploading] = useState(false);
    const [uploadProgress, setUploadProgress] = useState(0);
    const [deleteDialog, setDeleteDialog] = useState({ show: false, photos: [] });
    const [deleting, setDeleting] = useState(false);
    const [previewPhoto, setPreviewPhoto] = useState(null);
    const [dragOver, setDragOver] = useState(false);

    // 업로드 대기 중인 파일들
    const [pendingFiles, setPendingFiles] = useState([]);
    const [photoType, setPhotoType] = useState('concept'); // 'concept' | 'teaser'
    const [conceptName, setConceptName] = useState('');
    const [saving, setSaving] = useState(false);
    const [pendingDeleteId, setPendingDeleteId] = useState(null); // 삭제 대기 파일 ID

    // Toast 자동 숨김
    useEffect(() => {
        if (toast) {
            const timer = setTimeout(() => setToast(null), 3000);
            return () => clearTimeout(timer);
        }
    }, [toast]);

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

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

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

    const fetchAlbumData = async () => {
        try {
            // 앨범 정보 로드
            const albumRes = await fetch(`/api/albums/${albumId}`);
            if (!albumRes.ok) throw new Error('앨범을 찾을 수 없습니다');
            const albumData = await albumRes.json();
            setAlbum(albumData);

            // TODO: 기존 사진 목록 로드 (API 구현 후)
            setPhotos([]);
            setLoading(false);
        } catch (error) {
            console.error('앨범 로드 오류:', error);
            setToast({ message: error.message, type: 'error' });
            setLoading(false);
        }
    };

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

    // 파일 선택
    const handleFileSelect = (e) => {
        const files = Array.from(e.target.files);
        addFilesToPending(files);
        e.target.value = ''; // 같은 파일 재선택 가능하도록
    };

    // 드래그 앤 드롭 (깜빡임 방지를 위해 카운터 사용)
    const dragCounterRef = useRef(0);

    const handleDragEnter = (e) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounterRef.current++;
        if (e.dataTransfer.types.includes('Files')) {
            setDragOver(true);
        }
    };

    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
    };

    const handleDragLeave = (e) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounterRef.current--;
        if (dragCounterRef.current === 0) {
            setDragOver(false);
        }
    };

    const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounterRef.current = 0;
        setDragOver(false);
        const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
        if (files.length > 0) {
            addFilesToPending(files);
        }
    };

    // 대기 목록에 파일 추가 (중복 방지)
    const addFilesToPending = (files) => {
        // 기존 파일명 목록으로 중복 체크 (파일명 + 크기로 비교)
        const existingKeys = new Set(
            pendingFiles.map(f => `${f.filename}_${f.file.size}`)
        );
        
        const uniqueFiles = files.filter(file => {
            const key = `${file.name}_${file.size}`;
            if (existingKeys.has(key)) {
                return false; // 중복
            }
            existingKeys.add(key);
            return true;
        });

        if (uniqueFiles.length < files.length) {
            const duplicateCount = files.length - uniqueFiles.length;
            setToast({ 
                message: `${duplicateCount}개의 중복 파일이 제외되었습니다.`, 
                type: 'warning' 
            });
        }

        if (uniqueFiles.length === 0) return;

        const newFiles = uniqueFiles.map((file, index) => ({
            id: Date.now() + index,
            file,
            preview: URL.createObjectURL(file),
            filename: file.name,
            groupType: 'group', // 'group' | 'solo' | 'unit'
            members: [], // 태깅된 멤버들 (단체일 경우 빈 배열)
            conceptName: '', // 개별 컨셉명
        }));
        setPendingFiles(prev => [...prev, ...newFiles]);
    };

    // 대기 파일 순서 변경 (Reorder)
    const handleReorder = (newOrder) => {
        setPendingFiles(newOrder);
    };

    // 직접 순서 변경 (입력으로)
    const moveToPosition = (fileId, newPosition) => {
        const pos = parseInt(newPosition, 10);
        if (isNaN(pos) || pos < 1) return;
        
        setPendingFiles(prev => {
            const targetIndex = Math.min(pos - 1, prev.length - 1);
            const currentIndex = prev.findIndex(f => f.id === fileId);
            if (currentIndex === -1 || currentIndex === targetIndex) return prev;
            
            const newFiles = [...prev];
            const [removed] = newFiles.splice(currentIndex, 1);
            newFiles.splice(targetIndex, 0, removed);
            return newFiles;
        });
    };

    // 대기 파일 삭제 (확인 후)
    const confirmDeletePendingFile = () => {
        if (!pendingDeleteId) return;
        setPendingFiles(prev => {
            const file = prev.find(f => f.id === pendingDeleteId);
            if (file) URL.revokeObjectURL(file.preview);
            return prev.filter(f => f.id !== pendingDeleteId);
        });
        setPendingDeleteId(null);
    };

    // 대기 파일 메타 정보 수정
    const updatePendingFile = (id, field, value) => {
        setPendingFiles(prev => prev.map(f => 
            f.id === id ? { ...f, [field]: value } : f
        ));
    };

    // 멤버 토글 (솔로일 경우 한 명만, 유닛일 경우 다중 선택)
    const toggleMember = (fileId, member) => {
        setPendingFiles(prev => prev.map(f => {
            if (f.id !== fileId) return f;
            
            // 솔로일 경우 한 명만 선택 가능
            if (f.groupType === 'solo') {
                return { ...f, members: f.members.includes(member) ? [] : [member] };
            }
            
            // 유닛일 경우 다중 선택
            const members = f.members.includes(member)
                ? f.members.filter(m => m !== member)
                : [...f.members, member];
            return { ...f, members };
        }));
    };

    // 타입 변경 시 멤버 초기화
    const changeGroupType = (fileId, newType) => {
        setPendingFiles(prev => prev.map(f => {
            if (f.id !== fileId) return f;
            // 단체 선택 시 멤버 비움 (단체는 멤버 태깅 안 함)
            if (newType === 'group') {
                return { ...f, groupType: newType, members: [] };
            }
            // 솔로/유닛 변경 시 멤버 유지 (솔로인 경우 첫 번째만)
            if (newType === 'solo' && f.members.length > 1) {
                return { ...f, groupType: newType, members: [f.members[0]] };
            }
            return { ...f, groupType: newType };
        }));
    };

    // 업로드 처리 (임시)
    const handleUpload = async () => {
        if (pendingFiles.length === 0) {
            setToast({ message: '업로드할 사진을 선택해주세요.', type: 'warning' });
            return;
        }

        // 컨셉명 검증 (각 파일별로)
        const missingConcept = pendingFiles.some(f => !f.conceptName.trim());
        if (missingConcept) {
            setToast({ message: '모든 사진의 컨셉/티저 이름을 입력해주세요.', type: 'warning' });
            return;
        }
        
        // 솔로/유닛인데 멤버 선택 안 한 경우
        const missingMembers = pendingFiles.some(f => 
            (f.groupType === 'solo' || f.groupType === 'unit') && f.members.length === 0
        );
        if (missingMembers) {
            setToast({ message: '솔로/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
            return;
        }

        setSaving(true);
        setUploadProgress(0);

        try {
            // 임시 진행률 시뮬레이션
            for (let i = 0; i <= 100; i += 10) {
                await new Promise(r => setTimeout(r, 100));
                setUploadProgress(i);
            }

            // TODO: 실제 업로드 API 호출
            // const formData = new FormData();
            // pendingFiles.forEach((pf, idx) => {
            //     formData.append('photos', pf.file);
            //     formData.append(`meta_${idx}`, JSON.stringify({
            //         order: idx + 1,
            //         groupType: pf.groupType,
            //         members: pf.members,
            //     }));
            // });
            // formData.append('photoType', photoType);
            // formData.append('conceptName', conceptName);

            setToast({ message: `${pendingFiles.length}개의 사진이 업로드되었습니다.`, type: 'success' });
            
            // 미리보기 URL 해제
            pendingFiles.forEach(f => URL.revokeObjectURL(f.preview));
            setPendingFiles([]);
            setConceptName('');
        } catch (error) {
            console.error('업로드 오류:', error);
            setToast({ message: '업로드 중 오류가 발생했습니다.', type: 'error' });
        } finally {
            setSaving(false);
            setUploadProgress(0);
        }
    };

    // 삭제 처리 (기존 사진)
    const handleDelete = async () => {
        setDeleting(true);

        // TODO: 실제 삭제 API 호출
        await new Promise(r => setTimeout(r, 1000));

        setPhotos(prev => prev.filter(p => !deleteDialog.photos.includes(p.id)));
        setSelectedPhotos([]);
        setToast({ message: `${deleteDialog.photos.length}개의 사진이 삭제되었습니다.`, type: 'success' });
        setDeleteDialog({ show: false, photos: [] });
        setDeleting(false);
    };

    if (loading) {
        return (
            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
            </div>
        );
    }

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

            {/* 삭제 확인 다이얼로그 */}
            <AnimatePresence>
                {deleteDialog.show && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                        onClick={() => !deleting && setDeleteDialog({ show: false, photos: [] })}
                    >
                        <motion.div
                            initial={{ scale: 0.9, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            exit={{ scale: 0.9, opacity: 0 }}
                            className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <div className="flex items-center gap-3 mb-4">
                                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                                    <AlertTriangle className="text-red-500" size={20} />
                                </div>
                                <h3 className="text-lg font-bold text-gray-900">사진 삭제</h3>
                            </div>
                            
                            <p className="text-gray-600 mb-6">
                                <span className="font-medium text-gray-900">{deleteDialog.photos.length}개</span>의 사진을 삭제하시겠습니까?
                                <br />
                                <span className="text-sm text-red-500">이 작업은 되돌릴 수 없습니다.</span>
                            </p>
                            
                            <div className="flex justify-end gap-3">
                                <button
                                    onClick={() => setDeleteDialog({ show: false, photos: [] })}
                                    disabled={deleting}
                                    className="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
                                >
                                    취소
                                </button>
                                <button
                                    onClick={handleDelete}
                                    disabled={deleting}
                                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2"
                                >
                                    {deleting ? (
                                        <>
                                            <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                            삭제 중...
                                        </>
                                    ) : (
                                        <>
                                            <Trash2 size={16} />
                                            삭제
                                        </>
                                    )}
                                </button>
                            </div>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>

            {/* 이미지 미리보기 */}
            <AnimatePresence>
                {previewPhoto && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
                        onClick={() => setPreviewPhoto(null)}
                    >
                        <button
                            onClick={() => setPreviewPhoto(null)}
                            className="absolute top-4 right-4 p-2 text-white/70 hover:text-white transition-colors"
                        >
                            <X size={24} />
                        </button>
                        <motion.img
                            initial={{ scale: 0.9 }}
                            animate={{ scale: 1 }}
                            exit={{ scale: 0.9 }}
                            src={previewPhoto.preview || previewPhoto.url}
                            alt={previewPhoto.filename}
                            className="max-w-[90vw] max-h-[90vh] object-contain"
                            onClick={(e) => e.stopPropagation()}
                        />
                    </motion.div>
                )}
            </AnimatePresence>

            {/* 헤더 */}
            <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="/" 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">
                {/* 브레드크럼 */}
                <motion.div 
                    className="flex items-center gap-2 text-sm text-gray-400 mb-8"
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.1 }}
                >
                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
                        <Home size={16} />
                    </Link>
                    <ChevronRight size={14} />
                    <Link to="/admin/albums" className="hover:text-primary transition-colors">앨범 관리</Link>
                    <ChevronRight size={14} />
                    <span className="text-gray-700">{album?.title} - 사진 관리</span>
                </motion.div>

                {/* 타이틀 */}
                <motion.div 
                    className="flex items-center gap-4 mb-8"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.15 }}
                >
                    <img 
                        src={album?.cover_url} 
                        alt={album?.title}
                        className="w-14 h-14 rounded-xl object-cover"
                    />
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900">{album?.title}</h1>
                        <p className="text-gray-500">사진 업로드 및 관리</p>
                    </div>
                </motion.div>

                {/* 업로드 설정 */}
                <motion.div 
                    className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                >
                    <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <FolderOpen size={20} />
                        업로드 설정
                    </h2>
                    
                    {/* 타입 선택 */}
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">사진 타입 *</label>
                        <div className="flex gap-2 max-w-xs">
                            <button
                                onClick={() => setPhotoType('concept')}
                                className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${
                                    photoType === 'concept'
                                        ? 'bg-primary text-white'
                                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                                }`}
                            >
                                컨셉 포토
                            </button>
                            <button
                                onClick={() => setPhotoType('teaser')}
                                className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${
                                    photoType === 'teaser'
                                        ? 'bg-primary text-white'
                                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                                }`}
                            >
                                티저 이미지
                            </button>
                        </div>
                        <p className="text-xs text-gray-400 mt-2">
                            컨셉/티저 이름은 각 사진별로 입력합니다.
                        </p>
                    </div>
                </motion.div>

                {/* 업로드 진행률 */}
                {saving && (
                    <motion.div
                        initial={{ opacity: 0, y: -10 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="mb-6 bg-white rounded-xl p-4 border border-gray-100 shadow-sm"
                    >
                        <div className="flex items-center justify-between mb-2">
                            <span className="text-sm text-gray-600">업로드 중...</span>
                            <span className="text-sm font-medium text-primary">{uploadProgress}%</span>
                        </div>
                        <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                            <motion.div
                                initial={{ width: 0 }}
                                animate={{ width: `${uploadProgress}%` }}
                                className="h-full bg-primary rounded-full"
                            />
                        </div>
                    </motion.div>
                )}

                {/* 드래그 앤 드롭 영역 + 파일 목록 */}
                <motion.div
                    onDragEnter={handleDragEnter}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onDrop={handleDrop}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.25 }}
                    className={`relative rounded-2xl border-2 border-dashed transition-colors bg-white ${
                        dragOver 
                            ? 'border-primary bg-primary/5' 
                            : 'border-gray-200'
                    }`}
                >
                    {/* 드래그 오버레이 */}
                    {dragOver && (
                        <div className="absolute inset-0 flex items-center justify-center bg-primary/10 rounded-2xl z-10">
                            <div className="text-center">
                                <Upload size={48} className="mx-auto text-primary mb-2" />
                                <p className="text-primary font-medium">여기에 사진을 놓으세요</p>
                            </div>
                        </div>
                    )}

                    {pendingFiles.length === 0 ? (
                        /* 빈 상태 */
                        <div className="py-20 text-center">
                            <Image size={48} className="mx-auto text-gray-300 mb-4" />
                            <p className="text-gray-500 mb-2">사진을 드래그하여 업로드하세요</p>
                            <p className="text-gray-400 text-sm mb-4">JPG, PNG, WebP 지원</p>
                            <button
                                onClick={() => fileInputRef.current?.click()}
                                className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
                            >
                                <Plus size={18} />
                                파일 선택
                            </button>
                        </div>
                    ) : (
                        /* 파일 목록 (드래그 정렬 가능) */
                        <div className="p-6">
                            <div className="flex items-center justify-between mb-4">
                                <p className="text-sm text-gray-500">
                                    드래그하여 순서를 변경할 수 있습니다. 순서대로 <code className="bg-gray-100 px-1 rounded">01.webp</code>, <code className="bg-gray-100 px-1 rounded">02.webp</code>... 로 저장됩니다.
                                </p>
                                <button
                                    onClick={() => fileInputRef.current?.click()}
                                    className="text-sm text-primary hover:text-primary-dark transition-colors"
                                >
                                    + 더 추가
                                </button>
                            </div>

                            <Reorder.Group 
                                axis="y" 
                                values={pendingFiles} 
                                onReorder={handleReorder}
                                className="space-y-3"
                            >
                                {pendingFiles.map((file, index) => (
                                    <Reorder.Item
                                        key={file.id}
                                        value={file}
                                        className="bg-gray-50 rounded-xl p-4 cursor-grab active:cursor-grabbing"
                                    >
                                        <div className="flex gap-4 items-center">
                                            {/* 드래그 핸들 + 순서 번호 (직접 입력 가능) */}
                                            <div className="flex items-center gap-2">
                                                <GripVertical size={18} className="text-gray-300" />
                                                <input
                                                    type="text"
                                                    inputMode="numeric"
                                                    defaultValue={String(index + 1).padStart(2, '0')}
                                                    key={`order-${file.id}-${index}`}
                                                    onBlur={(e) => {
                                                        const val = e.target.value.trim();
                                                        if (val && !isNaN(val)) {
                                                            moveToPosition(file.id, val);
                                                        }
                                                        e.target.value = String(pendingFiles.findIndex(f => f.id === file.id) + 1).padStart(2, '0');
                                                    }}
                                                    onKeyDown={(e) => {
                                                        if (e.key === 'Enter') {
                                                            e.target.blur();
                                                        }
                                                    }}
                                                    className="w-10 h-8 bg-primary/10 text-primary rounded-lg text-center text-sm font-bold border-0 focus:outline-none focus:ring-2 focus:ring-primary [appearance:textfield]"
                                                    title="순서를 직접 입력할 수 있습니다"
                                                />
                                            </div>

                                            {/* 썸네일 (정사각형) */}
                                            <img
                                                src={file.preview}
                                                alt={file.filename}
                                                draggable="false"
                                                className="w-36 h-36 rounded-xl object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
                                                onClick={() => setPreviewPhoto(file)}
                                            />

                                            {/* 메타 정보 */}
                                            <div className="flex-1 space-y-3">
                                                {/* 파일명 */}
                                                <p className="text-base font-medium text-gray-900 truncate">{file.filename}</p>

                                                {/* 단체/솔로/유닛 선택 */}
                                                <div className="flex items-center gap-2">
                                                    <span className="text-sm text-gray-500 w-16">타입:</span>
                                                    <div className="flex gap-1.5">
                                                        {[
                                                            { value: 'group', icon: Users, label: '단체' },
                                                            { value: 'solo', icon: User, label: '솔로' },
                                                            { value: 'unit', icon: Users2, label: '유닛' },
                                                        ].map(({ value, icon: Icon, label }) => (
                                                            <button
                                                                key={value}
                                                                onClick={() => changeGroupType(file.id, value)}
                                                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
                                                                    file.groupType === value
                                                                        ? 'bg-primary text-white'
                                                                        : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                                                                }`}
                                                            >
                                                                <Icon size={14} />
                                                                {label}
                                                            </button>
                                                        ))}
                                                    </div>
                                                </div>

                                                {/* 멤버 태깅 (단체는 비활성화) */}
                                                <div className="flex items-center gap-2 flex-wrap min-h-8">
                                                    <span className="text-sm text-gray-500 w-16">멤버:</span>
                                                    {file.groupType === 'group' ? (
                                                        <span className="text-sm text-gray-400">단체 사진은 멤버 태깅이 필요 없습니다</span>
                                                    ) : (
                                                        MEMBERS.map(member => (
                                                            <button
                                                                key={member}
                                                                onClick={() => toggleMember(file.id, member)}
                                                                className={`px-3 py-1 rounded-full text-sm transition-colors ${
                                                                    file.members.includes(member)
                                                                        ? 'bg-primary text-white'
                                                                        : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                                                                }`}
                                                            >
                                                                {member}
                                                            </button>
                                                        ))
                                                    )}
                                                    {file.groupType === 'solo' && (
                                                        <span className="text-xs text-gray-400 ml-2">(한 명만 선택)</span>
                                                    )}
                                                </div>

                                                {/* 컨셉/티저 이름 (개별 입력) */}
                                                <div className="flex items-center gap-2">
                                                    <span className="text-sm text-gray-500 w-16">컨셉명:</span>
                                                    <input
                                                        type="text"
                                                        value={file.conceptName}
                                                        onChange={(e) => updatePendingFile(file.id, 'conceptName', e.target.value)}
                                                        className="flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary"
                                                        placeholder="컨셉명을 입력하세요"
                                                    />
                                                </div>
                                            </div>

                                            {/* 삭제 버튼 */}
                                            <button
                                                onClick={() => setPendingDeleteId(file.id)}
                                                className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors self-start"
                                            >
                                                <Trash2 size={18} />
                                            </button>
                                        </div>
                                    </Reorder.Item>
                                ))}
                            </Reorder.Group>
                        </div>
                    )}
                </motion.div>

                {/* 하단 액션 버튼 */}
                {pendingFiles.length > 0 && (
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="mt-6 flex justify-end gap-4"
                    >
                        <button
                            onClick={() => {
                                pendingFiles.forEach(f => URL.revokeObjectURL(f.preview));
                                setPendingFiles([]);
                            }}
                            className="px-6 py-2.5 text-gray-600 hover:text-gray-900 transition-colors"
                        >
                            취소
                        </button>
                        <button
                            onClick={handleUpload}
                            disabled={saving}
                            className="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors disabled:opacity-50"
                        >
                            {saving ? (
                                <>
                                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                    업로드 중...
                                </>
                            ) : (
                                <>
                                    <Save size={18} />
                                    {pendingFiles.length}개 사진 업로드
                                </>
                            )}
                        </button>
                    </motion.div>
                )}

                {/* 삭제 확인 다이얼로그 */}
                <AnimatePresence>
                    {pendingDeleteId && (
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
                            onClick={() => setPendingDeleteId(null)}
                        >
                            <motion.div
                                initial={{ scale: 0.9, opacity: 0 }}
                                animate={{ scale: 1, opacity: 1 }}
                                exit={{ scale: 0.9, opacity: 0 }}
                                onClick={(e) => e.stopPropagation()}
                                className="bg-white rounded-2xl p-6 max-w-sm w-full mx-4 shadow-xl"
                            >
                                <div className="text-center">
                                    <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <Trash2 className="text-red-500" size={24} />
                                    </div>
                                    <h3 className="text-lg font-bold text-gray-900 mb-2">사진을 삭제할까요?</h3>
                                    <p className="text-gray-500 text-sm mb-6">
                                        이 사진을 목록에서 제거합니다.
                                    </p>
                                    <div className="flex gap-3">
                                        <button
                                            onClick={() => setPendingDeleteId(null)}
                                            className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
                                        >
                                            취소
                                        </button>
                                        <button
                                            onClick={confirmDeletePendingFile}
                                            className="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                                        >
                                            삭제
                                        </button>
                                    </div>
                                </div>
                            </motion.div>
                        </motion.div>
                    )}
                </AnimatePresence>

                <input
                    ref={fileInputRef}
                    type="file"
                    multiple
                    accept="image/*"
                    onChange={handleFileSelect}
                    className="hidden"
                />
            </main>
        </div>
    );
}

export default AdminAlbumPhotos;