fromis_9/frontend/src/pages/pc/admin/AdminMemberEdit.jsx

import { useState, useEffect } from 'react';
import { useNavigate, useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
    Save, Upload, X,
    Home, ChevronRight, User, Instagram, Calendar, Tag
} from 'lucide-react';
import Toast from '../../../components/Toast';
import CustomDatePicker from '../../../components/admin/CustomDatePicker';
import AdminLayout from '../../../components/admin/AdminLayout';
import useToast from '../../../hooks/useToast';

// 임시 더미 데이터 (API 구현 전까지 사용)
const DUMMY_MEMBERS = {
    '이새롬': { id: 1, name: '이새롬', name_en: 'SAEROM', birth_date: '1997-01-07', instagram: 'https://www.instagram.com/saeromssee', is_former: true, image_url: null, nicknames: ['새롬', '큰새롬'] },
    '송하영': { id: 2, name: '송하영', name_en: 'HAYOUNG', birth_date: '1997-09-29', instagram: 'https://www.instagram.com/shy9_29/', is_former: false, image_url: null, nicknames: ['하영', '햄', '햐미'] },
    '장규리': { id: 3, name: '장규리', name_en: 'GYURI', birth_date: '1997-12-27', instagram: 'https://www.instagram.com/gyurious_j', is_former: true, image_url: null, nicknames: ['규리', '뀨리'] },
    '박지원': { id: 4, name: '박지원', name_en: 'JIWON', birth_date: '1998-03-20', instagram: 'https://www.instagram.com/xjiwonparkx/', is_former: false, image_url: null, nicknames: ['지원', '쭈니', '지워니'] },
    '노지선': { id: 5, name: '노지선', name_en: 'JISUN', birth_date: '1998-11-23', instagram: 'https://www.instagram.com/rosieline_', is_former: true, image_url: null, nicknames: ['지선'] },
    '이서연': { id: 6, name: '이서연', name_en: 'SEOYEON', birth_date: '2000-01-22', instagram: 'https://www.instagram.com/im_theyeon', is_former: true, image_url: null, nicknames: ['서연', '써연'] },
    '이채영': { id: 7, name: '이채영', name_en: 'CHAEYOUNG', birth_date: '2000-05-14', instagram: 'https://www.instagram.com/chaengrang_/', is_former: false, image_url: null, nicknames: ['채영', '채령'] },
    '이나경': { id: 8, name: '이나경', name_en: 'NAKYUNG', birth_date: '2000-06-01', instagram: 'https://www.instagram.com/blossomlng_0/', is_former: false, image_url: null, nicknames: ['나경', '낭이', '나낭'] },
    '백지헌': { id: 9, name: '백지헌', name_en: 'JIHEON', birth_date: '2003-04-17', instagram: 'https://www.instagram.com/jiheonnibaek/', is_former: false, image_url: null, nicknames: ['지헌', '지허니'] },
};

function AdminMemberEdit() {
    const navigate = useNavigate();
    const { name } = useParams();
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const { toast, setToast } = useToast();
    const [imagePreview, setImagePreview] = useState(null);
    const [imageFile, setImageFile] = useState(null);
    const [nicknameInput, setNicknameInput] = useState('');

    const [formData, setFormData] = useState({
        name: '',
        name_en: '',
        birth_date: '',
        instagram: '',
        is_former: false,
        nicknames: []
    });

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

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

        setUser(JSON.parse(userData));

        // TODO: API 구현 후 fetchMember()로 교체
        const memberData = DUMMY_MEMBERS[decodeURIComponent(name)];
        if (memberData) {
            setFormData({
                name: memberData.name || '',
                name_en: memberData.name_en || '',
                birth_date: memberData.birth_date || '',
                instagram: memberData.instagram || '',
                is_former: !!memberData.is_former,
                nicknames: memberData.nicknames || []
            });
            setImagePreview(memberData.image_url);
        }
        setLoading(false);
    }, [navigate, name]);

    const handleImageChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            setImageFile(file);
            const reader = new FileReader();
            reader.onloadend = () => setImagePreview(reader.result);
            reader.readAsDataURL(file);
        }
    };

    // 별명 추가
    const handleAddNickname = () => {
        const trimmed = nicknameInput.trim();
        if (trimmed && !formData.nicknames.includes(trimmed)) {
            setFormData({
                ...formData,
                nicknames: [...formData.nicknames, trimmed]
            });
            setNicknameInput('');
        }
    };

    // 별명 삭제
    const handleRemoveNickname = (nickname) => {
        setFormData({
            ...formData,
            nicknames: formData.nicknames.filter(n => n !== nickname)
        });
    };

    // Enter 키로 별명 추가
    const handleNicknameKeyDown = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleAddNickname();
        }
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true);

        // TODO: API 구현 후 실제 저장 로직 추가
        console.log('저장할 데이터:', formData, imageFile);

        setTimeout(() => {
            setToast({ message: '멤버 정보가 수정되었습니다. (API 미구현)', type: 'success' });
            setSaving(false);
        }, 500);
    };

    return (
        <AdminLayout user={user}>
            {/* Toast */}
            <Toast toast={toast} onClose={() => setToast(null)} />

            {/* 메인 콘텐츠 */}
            <div className="max-w-4xl 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} />
                    <Link to="/admin/members" className="hover:text-primary transition-colors">
                        멤버 관리
                    </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>
                ) : (
                    <motion.form
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        onSubmit={handleSubmit}
                        className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"
                    >
                        <div className="grid grid-cols-3 gap-8">
                            {/* 이미지 업로드 영역 */}
                            <div className="col-span-1">
                                <label className="block text-sm font-medium text-gray-700 mb-3">
                                    프로필 사진
                                </label>
                                <div
                                    className="aspect-[3/4] rounded-2xl border-2 border-dashed border-gray-200 overflow-hidden relative group cursor-pointer hover:border-primary transition-colors"
                                    onClick={() => document.getElementById('imageInput').click()}
                                >
                                    {imagePreview ? (
                                        <>
                                            <img
                                                src={imagePreview}
                                                alt="프로필 미리보기"
                                                className="w-full h-full object-cover"
                                            />
                                            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                                <div className="text-white text-center">
                                                    <Upload size={32} className="mx-auto mb-2" />
                                                    <span className="text-sm">변경</span>
                                                </div>
                                            </div>
                                        </>
                                    ) : (
                                        <div className="w-full h-full flex flex-col items-center justify-center text-gray-400">
                                            <User size={48} className="mb-2" />
                                            <span className="text-sm">클릭하여 업로드</span>
                                        </div>
                                    )}
                                </div>
                                <input
                                    id="imageInput"
                                    type="file"
                                    accept="image/*"
                                    onChange={handleImageChange}
                                    className="hidden"
                                />
                            </div>

                            {/* 입력 폼 영역 */}
                            <div className="col-span-2 space-y-6">
                                {/* 이름 */}
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-2">
                                            <User size={16} className="inline mr-1" />
                                            이름 *
                                        </label>
                                        <input
                                            type="text"
                                            value={formData.name}
                                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                            required
                                            className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                            placeholder="멤버 이름"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-2">
                                            영문 이름
                                        </label>
                                        <input
                                            type="text"
                                            value={formData.name_en}
                                            onChange={(e) => setFormData({ ...formData, name_en: e.target.value })}
                                            className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                            placeholder="ENGLISH NAME"
                                        />
                                    </div>
                                </div>

                                {/* 생년월일 */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        <Calendar size={16} className="inline mr-1" />
                                        생년월일
                                    </label>
                                    <CustomDatePicker
                                        value={formData.birth_date}
                                        onChange={(date) => setFormData({ ...formData, birth_date: date })}
                                    />
                                </div>

                                {/* 인스타그램 */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        <Instagram size={16} className="inline mr-1" />
                                        인스타그램
                                    </label>
                                    <input
                                        type="text"
                                        value={formData.instagram}
                                        onChange={(e) => setFormData({ ...formData, instagram: e.target.value })}
                                        className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                        placeholder="https://www.instagram.com/username"
                                    />
                                </div>

                                {/* 별명 */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        <Tag size={16} className="inline mr-1" />
                                        별명
                                    </label>
                                    <div className="space-y-3">
                                        {/* 별명 입력 */}
                                        <input
                                            type="text"
                                            value={nicknameInput}
                                            onChange={(e) => setNicknameInput(e.target.value)}
                                            onKeyDown={handleNicknameKeyDown}
                                            className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                            placeholder="별명을 입력하고 Enter"
                                        />

                                        {/* 별명 태그 목록 */}
                                        {formData.nicknames.length > 0 && (
                                            <div className="flex flex-wrap gap-2">
                                                {formData.nicknames.map((nickname, index) => (
                                                    <span
                                                        key={index}
                                                        className="inline-flex items-center gap-1 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm"
                                                    >
                                                        {nickname}
                                                        <button
                                                            type="button"
                                                            onClick={() => handleRemoveNickname(nickname)}
                                                            className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
                                                        >
                                                            <X size={14} />
                                                        </button>
                                                    </span>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                    <p className="mt-2 text-xs text-gray-400">
                                        별명은 일정 검색 시 사용됩니다
                                    </p>
                                </div>

                                {/* 활동 상태 */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-2">
                                        활동 상태
                                    </label>
                                    <div className="flex items-center gap-3">
                                        <button
                                            type="button"
                                            onClick={() => setFormData({ ...formData, is_former: false })}
                                            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                                                !formData.is_former
                                                    ? 'bg-primary text-white'
                                                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
                                            }`}
                                        >
                                            활동 중
                                        </button>
                                        <button
                                            type="button"
                                            onClick={() => setFormData({ ...formData, is_former: true })}
                                            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                                                formData.is_former
                                                    ? 'bg-gray-600 text-white'
                                                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
                                            }`}
                                        >
                                            탈퇴
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* 버튼 영역 */}
                        <div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
                            <button
                                type="button"
                                onClick={() => navigate('/admin/members')}
                                className="px-6 py-3 text-gray-600 hover:bg-gray-100 rounded-xl transition-colors"
                            >
                                취소
                            </button>
                            <button
                                type="submit"
                                disabled={saving}
                                className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors disabled:opacity-50"
                            >
                                {saving ? (
                                    <>
                                        <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                        저장 중...
                                    </>
                                ) : (
                                    <>
                                        <Save size={18} />
                                        저장
                                    </>
                                )}
                            </button>
                        </div>
                    </motion.form>
                )}
            </div>
        </AdminLayout>
    );
}

export default AdminMemberEdit;