const { useState, useEffect } = React;

function Project() {
    // 상태 관리
    const [projects, setProjects] = useState([]);
    const [filteredProjects, setFilteredProjects] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [currentUser, setCurrentUser] = useState('사용자');
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage] = useState(10);

    // 모달 상태
    const [showProjectModal, setShowProjectModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [currentProjectIdx, setCurrentProjectIdx] = useState(null);

    // 필터 상태
    const [filters, setFilters] = useState({
        status: '진행',
        search: '',
        manager: 'my'
    });

    // UI 상태
    const [showFilters, setShowFilters] = useState(false);
    const [showColumnDropdown, setShowColumnDropdown] = useState(false);
    const [visibleColumns, setVisibleColumns] = useState({
        serial: false,
        plant: false,
        line: false,
        package: false,
        staff: false,
        process: false,
        expire: false,
        delivery: false,
        design: false,
        electric: false,
        program: false,
        budgetDue: false,
        budget: false,
        jasmin: false
    });

    // 프로젝트 폼 상태
    const [projectForm, setProjectForm] = useState({
        idx: 0,
        name: '',
        process: '',
        sdate: '',
        edate: '',
        ddate: '',
        odate: '',
        userManager: '',
        status: '진행',
        memo: ''
    });

    // 통계 상태
    const [statusCounts, setStatusCounts] = useState({
        진행: 0,
        완료: 0,
        대기: 0,
        중단: 0
    });

    // 컴포넌트 마운트시 초기화
    useEffect(() => {
        getCurrentUser();
        loadProjects();
    }, []);

    // 필터 변경시 프로젝트 목록 새로 로드
    useEffect(() => {
        loadProjects();
    }, [filters.status, filters.manager]);

    // 검색어 변경시 필터링
    useEffect(() => {
        filterData();
    }, [filters.search, projects]);

    // 현재 사용자 정보 가져오기
    const getCurrentUser = async () => {
        try {
            const response = await fetch('/Common/GetCurrentUser');
            const data = await response.json();
            
            if (data.Success && data.Data) {
                const userName = data.Data.userName || data.Data.name || '사용자';
                setCurrentUser(userName);
            }
        } catch (error) {
            console.error('Error getting current user:', error);
        }
    };

    // 프로젝트 목록 로드
    const loadProjects = async () => {
        setIsLoading(true);
        try {
            const response = await fetch(`/Project/GetProjects?status=${filters.status}&userFilter=${filters.manager}`);
            const data = await response.json();
            
            if (data.Success) {
                const projectData = data.Data || [];
                setProjects(projectData);
                setFilteredProjects(projectData);
                updateStatusCounts(projectData);
                
                if (data.CurrentUser) {
                    setCurrentUser(data.CurrentUser);
                }
            } else {
                console.error('Error:', data.Message);
                showNotification('데이터를 불러오는데 실패했습니다.', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('데이터를 불러오는데 실패했습니다.', 'error');
        } finally {
            setIsLoading(false);
        }
    };

    // 상태별 카운트 업데이트
    const updateStatusCounts = (projectData) => {
        const counts = { 진행: 0, 완료: 0, 대기: 0, 중단: 0 };
        
        projectData.forEach(project => {
            const status = project.상태 || '진행';
            counts[status] = (counts[status] || 0) + 1;
        });
        
        setStatusCounts(counts);
    };

    // 데이터 필터링
    const filterData = () => {
        if (!filters.search.trim()) {
            setFilteredProjects(projects);
            setCurrentPage(1);
            return;
        }

        const searchTerm = filters.search.toLowerCase();
        const filtered = projects.filter(project => {
            return (project.프로젝트명 && project.프로젝트명.toLowerCase().includes(searchTerm)) ||
                   (project.프로젝트공정 && project.프로젝트공정.toLowerCase().includes(searchTerm)) ||
                   (project.자산번호 && project.자산번호.toLowerCase().includes(searchTerm)) ||
                   (project.장비모델 && project.장비모델.toLowerCase().includes(searchTerm)) ||
                   (project.시리얼번호 && project.시리얼번호.toLowerCase().includes(searchTerm)) ||
                   (project.프로젝트관리자 && project.프로젝트관리자.toLowerCase().includes(searchTerm)) ||
                   (project.설계담당 && project.설계담당.toLowerCase().includes(searchTerm)) ||
                   (project.전장담당 && project.전장담당.toLowerCase().includes(searchTerm)) ||
                   (project.프로그램담당 && project.프로그램담당.toLowerCase().includes(searchTerm));
        });
        
        setFilteredProjects(filtered);
        setCurrentPage(1);
    };

    // 프로젝트 추가 모달 표시
    const showAddProjectModal = () => {
        setCurrentProjectIdx(null);
        setProjectForm({
            idx: 0,
            name: '',
            process: '',
            sdate: '',
            edate: '',
            ddate: '',
            odate: '',
            userManager: '',
            status: '진행',
            memo: ''
        });
        setShowProjectModal(true);
    };

    // 프로젝트 편집
    const editProject = async (idx) => {
        setCurrentProjectIdx(idx);
        setIsLoading(true);

        try {
            const response = await fetch(`/Project/GetProject?id=${idx}`);
            const data = await response.json();
            
            if (data.Success && data.Data) {
                const project = data.Data;
                setProjectForm({
                    idx: project.idx,
                    name: project.프로젝트명 || '',
                    process: project.프로젝트공정 || '',
                    sdate: project.시작일 || '',
                    edate: project.완료일 || '',
                    ddate: project.만료일 || '',
                    odate: project.출고일 || '',
                    userManager: project.프로젝트관리자 || '',
                    status: project.상태 || '진행',
                    memo: project.memo || ''
                });
                setShowProjectModal(true);
            } else {
                showNotification('프로젝트 정보를 불러오는데 실패했습니다: ' + data.Message, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('프로젝트 정보를 불러오는데 실패했습니다.', 'error');
        } finally {
            setIsLoading(false);
        }
    };

    // 프로젝트 저장 (추가/수정)
    const saveProject = async (e) => {
        e.preventDefault();
        setIsLoading(true);

        const projectData = {
            ...projectForm,
            idx: currentProjectIdx ? parseInt(projectForm.idx) : 0,
            sdate: projectForm.sdate || null,
            edate: projectForm.edate || null,
            ddate: projectForm.ddate || null,
            odate: projectForm.odate || null
        };

        const url = currentProjectIdx ? '/Project/UpdateProject' : '/Project/CreateProject';
        const method = currentProjectIdx ? 'PUT' : 'POST';

        try {
            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(projectData)
            });
            
            const data = await response.json();
            
            if (data.Success) {
                showNotification(data.Message || (currentProjectIdx ? '프로젝트가 수정되었습니다.' : '프로젝트가 추가되었습니다.'), 'success');
                setShowProjectModal(false);
                loadProjects();
            } else {
                showNotification('오류: ' + data.Message, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('저장 중 오류가 발생했습니다.', 'error');
        } finally {
            setIsLoading(false);
        }
    };

    // 프로젝트 삭제
    const deleteProject = async () => {
        if (!currentProjectIdx) return;

        setIsLoading(true);
        try {
            const response = await fetch(`/Project/DeleteProject?id=${currentProjectIdx}`, {
                method: 'DELETE'
            });
            
            const data = await response.json();
            
            if (data.Success) {
                showNotification(data.Message || '프로젝트가 삭제되었습니다.', 'success');
                setShowDeleteModal(false);
                setShowProjectModal(false);
                loadProjects();
            } else {
                showNotification('오류: ' + data.Message, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('삭제 중 오류가 발생했습니다.', 'error');
        } finally {
            setIsLoading(false);
        }
    };

    // 필터 초기화
    const clearFilters = () => {
        setFilters({
            status: '진행',
            search: '',
            manager: 'my'
        });
    };

    // 엑셀 다운로드
    const exportToExcel = () => {
        if (filteredProjects.length === 0) {
            showNotification('내보낼 데이터가 없습니다.', 'warning');
            return;
        }
        
        const headers = ['상태', '자산번호', '장비모델', '시리얼번호', '우선순위', '요청국가', '요청공장', '요청라인', '요청부서패키지', '요청자', '프로젝트공정', '시작일', '완료일', '만료일', '출고일', '프로젝트명', '프로젝트관리자', '설계담당', '전장담당', '프로그램담당', '예산만기일', '예산', '웹관리번호'];
        const csvContent = [
            headers.join(','),
            ...filteredProjects.map(project => [
                project.상태 || '',
                project.자산번호 || '',
                project.장비모델 || '',
                project.시리얼번호 || '',
                project.우선순위 || '',
                project.요청국가 || '',
                project.요청공장 || '',
                project.요청라인 || '',
                project.요청부서패키지 || '',
                project.요청자 || '',
                project.프로젝트공정 || '',
                project.시작일 || '',
                project.완료일 || '',
                project.만료일 || '',
                project.출고일 || '',
                project.프로젝트명 || '',
                project.프로젝트관리자 || '',
                project.설계담당 || '',
                project.전장담당 || '',
                project.프로그램담당 || '',
                project.예산만기일 || '',
                project.예산 || '',
                project.웹관리번호 || ''
            ].join(','))
        ].join('\n');
        
        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', `프로젝트목록_${new Date().toISOString().split('T')[0]}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    // 유틸리티 함수들
    const getStatusClass = (status) => {
        switch(status) {
            case '진행': return 'bg-blue-500/20 text-blue-300';
            case '완료': return 'bg-green-500/20 text-green-300';
            case '대기': return 'bg-yellow-500/20 text-yellow-300';
            case '중단': return 'bg-red-500/20 text-red-300';
            default: return 'bg-gray-500/20 text-gray-300';
        }
    };

    const formatDateToMonthDay = (dateString) => {
        if (!dateString) return '';
        
        try {
            const date = new Date(dateString);
            if (isNaN(date.getTime())) return dateString;
            
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${month}-${day}`;
        } catch (error) {
            return dateString;
        }
    };

    // 알림 표시 함수
    const showNotification = (message, type = 'info') => {
        const colors = {
            info: 'bg-blue-500/90 backdrop-blur-sm',
            success: 'bg-green-500/90 backdrop-blur-sm',
            warning: 'bg-yellow-500/90 backdrop-blur-sm',
            error: 'bg-red-500/90 backdrop-blur-sm'
        };
        
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-4 py-3 rounded-lg z-50 transition-all duration-300 transform translate-x-0 opacity-100 shadow-lg border border-white/20`;
        notification.innerHTML = `
            <div class="flex items-center">
                <span class="ml-2">${message}</span>
            </div>
        `;
        
        notification.style.transform = 'translateX(100%)';
        notification.style.opacity = '0';
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.transform = 'translateX(0)';
            notification.style.opacity = '1';
        }, 10);
        
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    };

    // 페이지네이션 계산
    const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const paginatedProjects = filteredProjects.slice(startIndex, endIndex);

    const changePage = (page) => {
        if (page >= 1 && page <= totalPages) {
            setCurrentPage(page);
        }
    };

    return (
        <div className="container mx-auto px-4 py-8">
            {/* 프로젝트 목록 */}
            <div className="glass-effect rounded-lg overflow-hidden animate-slide-up">
                <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
                    <h2 className="text-xl font-semibold text-white flex items-center">
                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                        프로젝트 목록
                    </h2>
                    <div className="flex space-x-3">
                        <button onClick={showAddProjectModal} className="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm" title="프로젝트 추가">
                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            프로젝트 추가
                        </button>
                        <button onClick={() => setShowFilters(!showFilters)} className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm" title="필터 표시/숨김">
                            <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 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707L13 14v6a1 1 0 01-.707.293l-4-1A1 1 0 018 19v-5L0.293 7.293A1 1 0 010 6.586V4z"></path>
                            </svg>
                            필터
                            <svg className={`w-4 h-4 ml-2 transition-transform ${showFilters ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                </div>

                {/* 상태별 카드 */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 border-b border-white/10">
                    <div className="bg-white/10 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-blue-300 mb-1">{statusCounts.진행}</div>
                        <div className="text-sm text-white/60">진행</div>
                    </div>
                    <div className="bg-white/10 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-green-300 mb-1">{statusCounts.완료}</div>
                        <div className="text-sm text-white/60">완료</div>
                    </div>
                    <div className="bg-white/10 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-yellow-300 mb-1">{statusCounts.대기}</div>
                        <div className="text-sm text-white/60">대기</div>
                    </div>
                    <div className="bg-white/10 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-red-300 mb-1">{statusCounts.중단}</div>
                        <div className="text-sm text-white/60">중단</div>
                    </div>
                </div>

                {/* 필터 영역 */}
                {showFilters && (
                    <div className="p-4 border-b border-white/10 animate-slide-up">
                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
                            {/* 좌측: 필터 컨트롤 */}
                            <div className="lg:col-span-2 space-y-3">
                                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                    <div>
                                        <label className="block text-xs font-medium text-white/80 mb-1">상태</label>
                                        <select 
                                            value={filters.status}
                                            onChange={(e) => setFilters({...filters, status: e.target.value})}
                                            className="w-full bg-white/20 border border-white/30 rounded-md px-2 py-1 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent text-xs"
                                        >
                                            <option value="진행">진행</option>
                                            <option value="완료">완료</option>
                                            <option value="대기">대기</option>
                                            <option value="중단">중단</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label className="block text-xs font-medium text-white/80 mb-1">검색</label>
                                        <input 
                                            type="text"
                                            value={filters.search}
                                            onChange={(e) => setFilters({...filters, search: e.target.value})}
                                            placeholder="프로젝트명 검색..." 
                                            className="w-full bg-white/20 border border-white/30 rounded-md px-2 py-1 text-white placeholder-white/60 focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent text-xs"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-xs font-medium text-white/80 mb-1">담당자</label>
                                        <select 
                                            value={filters.manager}
                                            onChange={(e) => setFilters({...filters, manager: e.target.value})}
                                            className="w-full bg-white/20 border border-white/30 rounded-md px-2 py-1 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent text-xs"
                                        >
                                            <option value="my">내 프로젝트</option>
                                            <option value="all">전체 프로젝트</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            {/* 우측: 액션 버튼들 */}
                            <div className="flex flex-wrap gap-2 justify-end">
                                <div className="relative">
                                    <button onClick={() => setShowColumnDropdown(!showColumnDropdown)} className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors text-sm" title="컬럼 표시/숨김">
                                        <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="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2H9z"></path>
                                        </svg>
                                        컬럼 설정
                                    </button>
                                    {showColumnDropdown && (
                                        <div className="absolute top-full right-0 bg-gray-800/95 backdrop-blur-sm border border-white/20 rounded-lg p-3 min-w-48 z-50 mt-1">
                                            <div className="text-sm font-medium text-white/80 mb-2">표시할 컬럼 선택</div>
                                            <div className="space-y-1 text-sm max-h-40 overflow-y-auto">
                                                {Object.entries({
                                                    serial: '시리얼번호',
                                                    plant: '요청공장',
                                                    line: '요청라인',
                                                    package: '요청부서패키지',
                                                    staff: '요청자',
                                                    process: '프로젝트공정',
                                                    expire: '만료일',
                                                    delivery: '출고일',
                                                    design: '설계담당',
                                                    electric: '전장담당',
                                                    program: '프로그램담당',
                                                    budgetDue: '예산만기일',
                                                    budget: '예산',
                                                    jasmin: '웹관리번호'
                                                }).map(([key, label]) => (
                                                    <label key={key} className="flex items-center text-white cursor-pointer hover:text-blue-300">
                                                        <input 
                                                            type="checkbox" 
                                                            checked={visibleColumns[key]}
                                                            onChange={(e) => setVisibleColumns({...visibleColumns, [key]: e.target.checked})}
                                                            className="mr-2"
                                                        />
                                                        {label}
                                                    </label>
                                                ))}
                                            </div>
                                        </div>
                                    )}
                                </div>
                                <button onClick={exportToExcel} className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors text-sm" title="엑셀 다운로드">
                                    <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    엑셀 다운로드
                                </button>
                                <button onClick={clearFilters} className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg flex items-center transition-colors text-sm" title="필터 초기화">
                                    <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                    </svg>
                                    필터 초기화
                                </button>
                            </div>
                        </div>
                    </div>
                )}

                {/* 데이터 테이블 */}
                <div className="px-4 py-3 bg-white/5">
                    <div className="text-sm text-white/70 font-medium">프로젝트 현황</div>
                </div>
                <div className="overflow-x-auto custom-scrollbar">
                    <table className="w-full divide-y divide-white/20">
                        <thead className="bg-white/10">
                            <tr>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">상태</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 min-w-32">프로젝트명</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">자산번호</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-28">장비모델</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">우선순위</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">요청국가</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-28">프로젝트관리자</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">시작일</th>
                                <th className="px-4 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">완료일</th>
                                {visibleColumns.serial && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">시리얼번호</th>}
                                {visibleColumns.plant && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">요청공장</th>}
                                {visibleColumns.line && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">요청라인</th>}
                                {visibleColumns.package && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-28">요청부서패키지</th>}
                                {visibleColumns.staff && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">요청자</th>}
                                {visibleColumns.process && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">프로젝트공정</th>}
                                {visibleColumns.expire && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">만료일</th>}
                                {visibleColumns.delivery && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">출고일</th>}
                                {visibleColumns.design && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">설계담당</th>}
                                {visibleColumns.electric && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">전장담당</th>}
                                {visibleColumns.program && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">프로그램담당</th>}
                                {visibleColumns.budgetDue && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-24">예산만기일</th>}
                                {visibleColumns.budget && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider border-r border-white/20 w-20">예산</th>}
                                {visibleColumns.jasmin && <th className="px-3 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider w-24">웹관리번호</th>}
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-white/10">
                            {isLoading ? (
                                <tr>
                                    <td colSpan="23" className="px-6 py-4 text-center">
                                        <div className="inline-flex items-center">
                                            <div className="loading inline-block w-5 h-5 border-3 border-white/30 border-t-white rounded-full animate-spin mr-3"></div>
                                            <span className="text-white/80">데이터를 불러오는 중...</span>
                                        </div>
                                    </td>
                                </tr>
                            ) : paginatedProjects.length === 0 ? (
                                <tr>
                                    <td colSpan="23" className="px-6 py-4 text-center text-white/60">데이터가 없습니다.</td>
                                </tr>
                            ) : (
                                paginatedProjects.map(project => (
                                    <tr key={project.idx} onClick={() => editProject(project.idx)} className="hover:bg-white/10 cursor-pointer transition-colors">
                                        <td className="px-4 py-4 text-sm border-r border-white/20">
                                            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusClass(project.상태)}`}>
                                                {project.상태 || '진행'}
                                            </span>
                                        </td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20 font-medium">{project.프로젝트명 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{project.자산번호 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{project.장비모델 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{project.우선순위 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{project.요청국가 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{project.프로젝트관리자 || ''}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{formatDateToMonthDay(project.시작일)}</td>
                                        <td className="px-4 py-4 text-sm border-r border-white/20">{formatDateToMonthDay(project.완료일)}</td>
                                        {visibleColumns.serial && <td className="px-3 py-4 text-sm border-r border-white/20">{project.시리얼번호 || ''}</td>}
                                        {visibleColumns.plant && <td className="px-3 py-4 text-sm border-r border-white/20">{project.요청공장 || ''}</td>}
                                        {visibleColumns.line && <td className="px-3 py-4 text-sm border-r border-white/20">{project.요청라인 || ''}</td>}
                                        {visibleColumns.package && <td className="px-3 py-4 text-sm border-r border-white/20">{project.요청부서패키지 || ''}</td>}
                                        {visibleColumns.staff && <td className="px-3 py-4 text-sm border-r border-white/20">{project.요청자 || ''}</td>}
                                        {visibleColumns.process && <td className="px-3 py-4 text-sm border-r border-white/20">{project.프로젝트공정 || ''}</td>}
                                        {visibleColumns.expire && <td className="px-3 py-4 text-sm border-r border-white/20">{formatDateToMonthDay(project.만료일)}</td>}
                                        {visibleColumns.delivery && <td className="px-3 py-4 text-sm border-r border-white/20">{formatDateToMonthDay(project.출고일)}</td>}
                                        {visibleColumns.design && <td className="px-3 py-4 text-sm border-r border-white/20">{project.설계담당 || ''}</td>}
                                        {visibleColumns.electric && <td className="px-3 py-4 text-sm border-r border-white/20">{project.전장담당 || ''}</td>}
                                        {visibleColumns.program && <td className="px-3 py-4 text-sm border-r border-white/20">{project.프로그램담당 || ''}</td>}
                                        {visibleColumns.budgetDue && <td className="px-3 py-4 text-sm border-r border-white/20">{formatDateToMonthDay(project.예산만기일)}</td>}
                                        {visibleColumns.budget && <td className="px-3 py-4 text-sm border-r border-white/20">{project.예산 || ''}</td>}
                                        {visibleColumns.jasmin && (
                                            <td className="px-3 py-4 text-sm">
                                                {project.웹관리번호 ? (
                                                    <a href={`https://scwa.amkor.co.kr/jasmine/view/${project.웹관리번호}`} target="_blank" rel="noopener noreferrer" className="text-blue-300 hover:text-blue-200 underline">
                                                        {project.웹관리번호}
                                                    </a>
                                                ) : ''}
                                            </td>
                                        )}
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>

                {/* 페이징 */}
                <div className="px-4 py-4 border-t border-white/10">
                    <div className="flex items-center justify-between">
                        <div className="text-sm text-white/60">
                            총 {filteredProjects.length}개 중 {startIndex + 1}-{Math.min(endIndex, filteredProjects.length)}개 표시
                        </div>
                        <div className="flex items-center space-x-2">
                            <button onClick={() => changePage(currentPage - 1)} disabled={currentPage <= 1} className="px-3 py-1 bg-white/20 hover:bg-white/30 text-white rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path>
                                </svg>
                            </button>
                            <div className="flex space-x-1">
                                {Array.from({length: Math.min(5, totalPages)}, (_, i) => {
                                    const pageNum = Math.max(1, currentPage - 2) + i;
                                    if (pageNum > totalPages) return null;
                                    return (
                                        <button
                                            key={pageNum}
                                            onClick={() => changePage(pageNum)}
                                            className={`px-3 py-1 rounded-md text-sm transition-colors ${
                                                pageNum === currentPage 
                                                    ? 'bg-primary-500 text-white' 
                                                    : 'bg-white/20 hover:bg-white/30 text-white'
                                            }`}
                                        >
                                            {pageNum}
                                        </button>
                                    );
                                })}
                            </div>
                            <button onClick={() => changePage(currentPage + 1)} disabled={currentPage >= totalPages} className="px-3 py-1 bg-white/20 hover:bg-white/30 text-white rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {/* 프로젝트 추가/편집 모달 */}
            {showProjectModal && (
                <div className="fixed inset-0 bg-black bg-opacity-50 z-50">
                    <div className="flex items-center justify-center min-h-screen p-4">
                        <div className="glass-effect rounded-lg w-full max-w-2xl animate-slide-up">
                            <div className="p-6">
                                <div className="flex justify-between items-center mb-6">
                                    <h3 className="text-xl font-semibold">{currentProjectIdx ? '프로젝트 편집' : '프로젝트 추가'}</h3>
                                    <button onClick={() => setShowProjectModal(false)} className="text-white/60 hover:text-white">
                                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                </div>
                                
                                <form onSubmit={saveProject}>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">프로젝트명 *</label>
                                            <input 
                                                type="text" 
                                                value={projectForm.name}
                                                onChange={(e) => setProjectForm({...projectForm, name: e.target.value})}
                                                required 
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white placeholder-white/60 focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">부서</label>
                                            <input 
                                                type="text" 
                                                value={projectForm.process}
                                                onChange={(e) => setProjectForm({...projectForm, process: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white placeholder-white/60 focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">시작일</label>
                                            <input 
                                                type="date" 
                                                value={projectForm.sdate}
                                                onChange={(e) => setProjectForm({...projectForm, sdate: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">종료일</label>
                                            <input 
                                                type="date" 
                                                value={projectForm.edate}
                                                onChange={(e) => setProjectForm({...projectForm, edate: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">개발완료일</label>
                                            <input 
                                                type="date" 
                                                value={projectForm.ddate}
                                                onChange={(e) => setProjectForm({...projectForm, ddate: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">운영개시일</label>
                                            <input 
                                                type="date" 
                                                value={projectForm.odate}
                                                onChange={(e) => setProjectForm({...projectForm, odate: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">담당자</label>
                                            <input 
                                                type="text" 
                                                value={projectForm.userManager}
                                                onChange={(e) => setProjectForm({...projectForm, userManager: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white placeholder-white/60 focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-white/80 mb-2">상태</label>
                                            <select 
                                                value={projectForm.status}
                                                onChange={(e) => setProjectForm({...projectForm, status: e.target.value})}
                                                className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                            >
                                                <option value="진행">진행</option>
                                                <option value="완료">완료</option>
                                                <option value="대기">대기</option>
                                                <option value="중단">중단</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div className="mb-4">
                                        <label className="block text-sm font-medium text-white/80 mb-2">메모</label>
                                        <textarea 
                                            value={projectForm.memo}
                                            onChange={(e) => setProjectForm({...projectForm, memo: e.target.value})}
                                            rows="3" 
                                            className="w-full bg-white/20 border border-white/30 rounded-md px-3 py-2 text-white placeholder-white/60 focus:outline-none focus:ring-1 focus:ring-white/50 focus:border-transparent"
                                        ></textarea>
                                    </div>
                                    
                                    <div className="flex justify-between items-center">
                                        {currentProjectIdx && (
                                            <button type="button" onClick={() => setShowDeleteModal(true)} className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md transition-colors">
                                                삭제
                                            </button>
                                        )}
                                        <div className="flex space-x-2 ml-auto">
                                            <button type="button" onClick={() => setShowProjectModal(false)} className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-md transition-colors">
                                                취소
                                            </button>
                                            <button type="submit" className="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md transition-colors">
                                                저장
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* 삭제 확인 모달 */}
            {showDeleteModal && (
                <div className="fixed inset-0 bg-black bg-opacity-50 z-50">
                    <div className="flex items-center justify-center min-h-screen p-4">
                        <div className="glass-effect rounded-lg w-full max-w-md animate-slide-up">
                            <div className="p-6">
                                <div className="flex items-center mb-4">
                                    <svg className="w-8 h-8 text-red-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                    </svg>
                                    <h3 className="text-lg font-semibold">삭제 확인</h3>
                                </div>
                                <p className="text-white/80 mb-6">선택한 프로젝트를 삭제하시겠습니까?<br><span className="text-sm text-gray-500">이 작업은 되돌릴 수 없습니다.</span></p>
                                <div className="flex justify-end space-x-2">
                                    <button onClick={() => setShowDeleteModal(false)} className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-md transition-colors">
                                        취소
                                    </button>
                                    <button onClick={deleteProject} className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md transition-colors">
                                        삭제
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* 로딩 인디케이터 */}
            {isLoading && (
                <div className="fixed top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 text-white text-sm z-40">
                    <div className="flex items-center">
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                        처리 중...
                    </div>
                </div>
            )}

            {/* 외부 클릭시 드롭다운 닫기 */}
            {showColumnDropdown && (
                <div 
                    className="fixed inset-0 z-10"
                    onClick={() => setShowColumnDropdown(false)}
                ></div>
            )}
        </div>
    );
}