const { useState, useEffect } = React;

function JobReport() {
    // 상태 관리
    const [jobData, setJobData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(25);
    const [sortColumn, setSortColumn] = useState('pdate');
    const [sortDirection, setSortDirection] = useState('desc');
    const [isLoading, setIsLoading] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [editData, setEditData] = useState({});
    const [isEditMode, setIsEditMode] = useState(false);
    
    // 필터 상태
    const [filters, setFilters] = useState({
        startDate: '',
        endDate: '',
        status: '',
        type: '',
        user: '',
        project: '',
        search: ''
    });
    
    // 통계 데이터
    const [statistics, setStatistics] = useState({
        totalDays: 0,
        todayHours: 0,
        todayProgress: 0,
        totalOT: 0,
        activeProjects: 0
    });

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

    // 필터 변경 시 데이터 필터링
    useEffect(() => {
        filterData();
    }, [jobData, filters]);

    // 초기 필터 설정 (오늘부터 -2주)
    const initializeFilters = () => {
        const now = new Date();
        const today = now.toISOString().split('T')[0];
        const twoWeeksAgo = new Date(now.getTime() - (14 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];
        
        setFilters(prev => ({
            ...prev,
            startDate: twoWeeksAgo,
            endDate: today
        }));
    };

    // 업무일지 데이터 로드
    const loadJobData = async () => {
        setIsLoading(true);
        try {
            let url = '/Jobreport/GetJobData';
            const params = new URLSearchParams();
            if (filters.startDate) params.append('startDate', filters.startDate);
            if (filters.endDate) params.append('endDate', filters.endDate);
            if (filters.user) params.append('user', filters.user);
            
            if (params.toString()) {
                url += '?' + params.toString();
            }
            
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: 데이터를 불러오는데 실패했습니다.`);
            }
            
            const responseText = await response.text();
            const responseData = JSON.parse(responseText);
            
            if (Array.isArray(responseData)) {
                setJobData(responseData);
            } else if (responseData.error) {
                throw new Error(responseData.error);
            } else {
                setJobData([]);
            }
            
        } catch (error) {
            console.error('Error loading job data:', error);
            setJobData([]);
            showNotification('데이터를 불러오는데 실패했습니다: ' + error.message, 'error');
        } finally {
            setIsLoading(false);
        }
    };

    // 사용자 목록 로드
    const loadUserList = async () => {
        try {
            const response = await fetch('/Jobreport/GetUsers');
            if (response.ok) {
                const data = await response.json();
                // 사용자 데이터를 상태로 저장 (필요시)
            }
        } catch (error) {
            console.error('사용자 목록 로드 중 오류:', error);
        }
    };

    // 통계 업데이트
    useEffect(() => {
        updateStatistics();
    }, [jobData]);

    const updateStatistics = () => {
        const totalDays = new Set(jobData.map(item => item.pdate)).size;
        const totalOT = jobData.reduce((sum, item) => sum + (parseFloat(item.ot) || 0), 0);
        const activeProjects = new Set(jobData.filter(item => item.status === '진행중').map(item => item.projectName)).size;

        const now = new Date();
        const today = now.toISOString().split('T')[0];
        
        const todayData = jobData.filter(item => {
            if (!item.pdate) return false;
            const itemDate = item.pdate.toString();
            if (itemDate.length >= 10) {
                return itemDate.substring(0, 10) === today;
            }
            return false;
        });
        
        let todayHours = 0;
        if (todayData.length > 0) {
            todayHours = todayData.reduce((sum, item) => sum + (parseFloat(item.hrs) || 0), 0);
        }
        const todayProgress = (todayHours / 8) * 100;
        
        setStatistics({
            totalDays,
            todayHours,
            todayProgress,
            totalOT,
            activeProjects
        });
    };

    // 데이터 필터링
    const filterData = () => {
        let filtered = jobData.filter(item => {
            const statusMatch = !filters.status || item.status === filters.status;
            const typeMatch = !filters.type || item.type === filters.type;
            const projectMatch = !filters.project || item.projectName === filters.project;
            const searchMatch = !filters.search || 
                (item.description && item.description.toLowerCase().includes(filters.search.toLowerCase())) ||
                (item.projectName && item.projectName.toLowerCase().includes(filters.search.toLowerCase())) ||
                (item.requestpart && item.requestpart.toLowerCase().includes(filters.search.toLowerCase()));

            return statusMatch && typeMatch && projectMatch && searchMatch;
        });

        // 정렬
        filtered.sort((a, b) => {
            let aVal = a[sortColumn];
            let bVal = b[sortColumn];

            if (sortColumn === 'pdate') {
                aVal = new Date(aVal);
                bVal = new Date(bVal);
            } else if (['hrs', 'ot'].includes(sortColumn)) {
                aVal = parseFloat(aVal) || 0;
                bVal = parseFloat(bVal) || 0;
            } else {
                aVal = (aVal || '').toString().toLowerCase();
                bVal = (bVal || '').toString().toLowerCase();
            }

            if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
            if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
            return 0;
        });

        setFilteredData(filtered);
        setCurrentPage(1);
    };

    // 필터 변경 핸들러
    const handleFilterChange = (field, value) => {
        setFilters(prev => ({ ...prev, [field]: value }));
        
        // 날짜 필터 변경시 데이터 다시 로드
        if (field === 'startDate' || field === 'endDate' || field === 'user') {
            setTimeout(() => loadJobData(), 100);
        }
    };

    // 필터 초기화
    const clearFilters = () => {
        const now = new Date();
        const today = now.toISOString().split('T')[0];
        const twoWeeksAgo = new Date(now.getTime() - (14 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];
        
        setFilters({
            startDate: twoWeeksAgo,
            endDate: today,
            status: '',
            type: '',
            user: '',
            project: '',
            search: ''
        });
        
        setTimeout(() => loadJobData(), 100);
    };

    // 정렬 처리
    const handleSort = (column) => {
        if (sortColumn === column) {
            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
        } else {
            setSortColumn(column);
            setSortDirection('asc');
        }
    };

    // 추가 모달 표시
    const showAddJobModal = () => {
        const today = new Date().toISOString().split('T')[0];
        setIsEditMode(false);
        setEditData({
            idx: '',
            pdate: today,
            status: '진행 중',
            projectName: '',
            requestpart: '',
            type: '',
            hrs: '8',
            ot: '',
            otStart: '',
            otEnd: '',
            description: ''
        });
        setShowEditModal(true);
    };

    // 편집 모달 표시
    const showEditJobModal = async (item) => {
        try {
            // 상세 정보 로드
            const response = await fetch(`/Jobreport/GetJobDetail?id=${item.idx}`);
            if (response.ok) {
                const fullItem = await response.json();
                item = fullItem.error ? item : fullItem;
            }
        } catch (error) {
            console.warn('Failed to load full details, using truncated data:', error);
        }
        
        setIsEditMode(true);
        setEditData({
            idx: item.idx || '',
            pdate: item.pdate || '',
            status: item.status || '',
            projectName: item.projectName || '',
            requestpart: item.requestpart || '',
            type: item.type || '',
            hrs: item.hrs || '',
            ot: item.ot || '',
            otStart: item.otStart || '',
            otEnd: item.otEnd || '',
            description: item.description || ''
        });
        setShowEditModal(true);
    };

    // 저장 처리
    const handleSave = async (event) => {
        event.preventDefault();
        
        const formData = new URLSearchParams();
        Object.keys(editData).forEach(key => {
            if (key !== 'idx' || editData.idx) {
                formData.append(key, editData[key]);
            }
        });
        
        try {
            const url = isEditMode ? '/Jobreport/Edit' : '/Jobreport/Add';
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${isEditMode ? '수정' : '추가'}에 실패했습니다.`);
            }
            
            setShowEditModal(false);
            await loadJobData();
            showNotification(`업무일지가 성공적으로 ${isEditMode ? '수정' : '추가'}되었습니다.`, 'success');
            
        } catch (error) {
            console.error('Error saving job:', error);
            showNotification(`업무일지 ${isEditMode ? '수정' : '추가'} 중 오류가 발생했습니다: ` + error.message, 'error');
        }
    };

    // 삭제 처리
    const handleDelete = async () => {
        if (!editData.idx) {
            showNotification('삭제할 수 없는 항목입니다.', 'warning');
            return;
        }
        
        if (!window.confirm('정말로 이 업무일지를 삭제하시겠습니까?')) {
            return;
        }
        
        try {
            const response = await fetch(`/Jobreport/Delete/${editData.idx}`, {
                method: 'DELETE'
            });
            
            if (!response.ok) {
                throw new Error('삭제에 실패했습니다.');
            }
            
            const result = await response.json();
            
            if (result.success) {
                setShowEditModal(false);
                await loadJobData();
                showNotification('업무일지가 성공적으로 삭제되었습니다.', 'success');
            } else {
                throw new Error(result.message || '삭제에 실패했습니다.');
            }
            
        } catch (error) {
            console.error('Error deleting job:', error);
            showNotification('업무일지 삭제 중 오류가 발생했습니다: ' + error.message, 'error');
        }
    };

    // 엑셀 내보내기
    const exportToExcel = () => {
        if (filteredData.length === 0) {
            showNotification('내보낼 데이터가 없습니다.', 'warning');
            return;
        }

        const periodText = filters.startDate && filters.endDate ? `_${filters.startDate}_${filters.endDate}` : '';
        const headers = ['날짜', '상태', '프로젝트명', '요청부서', '타입', '업무내용', '근무시간', '초과근무'];
        const csvContent = [
            headers.join(','),
            ...filteredData.map(item => [
                formatDate(item.pdate),
                item.status || '',
                item.projectName || '',
                item.requestpart || '',
                item.type || '',
                `"${(item.description || '').replace(/"/g, '""')}"`,
                item.hrs || '',
                item.ot || ''
            ].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', `업무일지${periodText}_${new Date().toISOString().split('T')[0]}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    // 유틸리티 함수들
    const formatDate = (dateString) => {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('ko-KR');
    };

    const getStatusColor = (status) => {
        switch (status) {
            case '진행 중': return 'bg-blue-100 text-blue-800';
            case '진행 완료': return 'bg-green-100 text-green-800';
            case '대기': return 'bg-yellow-100 text-yellow-800';
            default: return 'bg-gray-100 text-gray-800';
        }
    };

    // 알림 표시 함수
    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 maxPage = Math.ceil(filteredData.length / pageSize);
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const pageData = filteredData.slice(startIndex, endIndex);

    // 프로젝트 목록 업데이트
    const uniqueProjects = [...new Set(jobData.map(item => item.projectName).filter(Boolean))];

    return (
        <div className="container mx-auto px-4 py-8">
            {/* 개발중 경고 메시지 */}
            <div className="bg-orange-500 rounded-lg p-4 mb-6 border-l-4 border-orange-700 animate-slide-up shadow-lg">
                <div className="flex items-center">
                    <svg className="w-5 h-5 text-orange-900 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>
                    <div>
                        <p className="text-white font-bold text-base">🚧 개발중인 기능입니다</p>
                        <p className="text-orange-100 text-sm font-medium">일부 기능이 정상적으로 동작하지 않을 수 있습니다.</p>
                    </div>
                </div>
            </div>
            
            {/* 통계 카드 */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8 animate-slide-up">
                <div className="glass-effect rounded-lg p-6 card-hover">
                    <div className="flex items-center">
                        <div className="p-3 bg-primary-500/20 rounded-lg">
                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div className="ml-4">
                            <p className="text-sm font-medium text-white/80">총 업무일수</p>
                            <p className="text-2xl font-bold text-white">{statistics.totalDays}</p>
                        </div>
                    </div>
                </div>
                <div className="glass-effect rounded-lg p-6 card-hover">
                    <div className="flex items-center">
                        <div className="p-3 bg-success-500/20 rounded-lg">
                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div className="ml-4">
                            <p className="text-sm font-medium text-white/80">오늘 근무시간</p>
                            <p className={`text-2xl font-bold ${statistics.todayHours < 8 ? 'text-red-300' : 'text-green-300'}`}>
                                {statistics.todayHours.toFixed(1)}h
                            </p>
                            <p className="text-sm text-white/60">(목표 8시간의 {statistics.todayProgress.toFixed(0)}%)</p>
                        </div>
                    </div>
                </div>
                <div className="glass-effect rounded-lg p-6 card-hover">
                    <div className="flex items-center">
                        <div className="p-3 bg-warning-500/20 rounded-lg">
                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <div className="ml-4">
                            <p className="text-sm font-medium text-white/80">총 초과근무</p>
                            <p className="text-2xl font-bold text-white">{statistics.totalOT.toFixed(1)}h</p>
                        </div>
                    </div>
                </div>
                <div className="glass-effect rounded-lg p-6 card-hover">
                    <div className="flex items-center">
                        <div className="p-3 bg-purple-500/20 rounded-lg">
                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                            </svg>
                        </div>
                        <div className="ml-4">
                            <p className="text-sm font-medium text-white/80">진행중 프로젝트</p>
                            <p className="text-2xl font-bold text-white">{statistics.activeProjects}</p>
                        </div>
                    </div>
                </div>
            </div>

            {/* 필터 및 검색 */}
            <div className="glass-effect rounded-lg mb-6 animate-slide-up">
                <div className="p-4">
                    <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>
                                    <div className="flex space-x-1">
                                        <input 
                                            type="date" 
                                            value={filters.startDate}
                                            onChange={(e) => handleFilterChange('startDate', e.target.value)}
                                            className="flex-1 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"
                                        />
                                        <span className="flex items-center text-white/60 text-xs">~</span>
                                        <input 
                                            type="date" 
                                            value={filters.endDate}
                                            onChange={(e) => handleFilterChange('endDate', e.target.value)}
                                            className="flex-1 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>
                                <div>
                                    <label className="block text-xs font-medium text-white/80 mb-1">상태</label>
                                    <select 
                                        value={filters.status}
                                        onChange={(e) => handleFilterChange('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>
                                    <select 
                                        value={filters.type}
                                        onChange={(e) => handleFilterChange('type', 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>
                                        <option value="테스트">테스트</option>
                                        <option value="문서작업">문서작업</option>
                                        <option value="회의">회의</option>
                                        <option value="기타">기타</option>
                                    </select>
                                </div>
                            </div>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label className="block text-xs font-medium text-white/80 mb-1">프로젝트</label>
                                    <select 
                                        value={filters.project}
                                        onChange={(e) => handleFilterChange('project', 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>
                                        {uniqueProjects.map(project => (
                                            <option key={project} value={project}>{project}</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) => handleFilterChange('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>
                        </div>
                        
                        {/* 우측: 액션 버튼들 */}
                        <div className="flex flex-col space-y-2 justify-center">
                            <button 
                                onClick={showAddJobModal}
                                className="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md flex items-center justify-center transition-colors"
                            >
                                <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={exportToExcel}
                                className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md flex items-center justify-center transition-colors"
                            >
                                <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-md flex items-center justify-center transition-colors"
                            >
                                <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>

            {/* 데이터 테이블 */}
            <div className="glass-effect rounded-lg overflow-hidden animate-slide-up custom-scrollbar">
                <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-white/20">
                        <thead className="bg-white/10">
                            <tr>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('pdate')}
                                >
                                    날짜 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('status')}
                                >
                                    상태 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('hrs')}
                                >
                                    근무시간 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('projectName')}
                                >
                                    프로젝트명 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider">업무내용</th>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('requestpart')}
                                >
                                    요청부서 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                                <th 
                                    className="px-6 py-3 text-left text-xs font-medium text-white/80 uppercase tracking-wider cursor-pointer hover:bg-white/20 transition-colors"
                                    onClick={() => handleSort('type')}
                                >
                                    타입 <svg className="w-4 h-4 inline ml-1" 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>
                                </th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-white/10">
                            {isLoading ? (
                                <tr>
                                    <td colSpan="7" className="p-8 text-center">
                                        <div className="inline-flex items-center">
                                            <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            <span className="text-white/80">데이터를 불러오는 중...</span>
                                        </div>
                                    </td>
                                </tr>
                            ) : pageData.length === 0 ? (
                                <tr>
                                    <td colSpan="7" className="p-8 text-center">
                                        <svg className="w-12 h-12 text-white/60 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                        </svg>
                                        <p className="text-white/70">업무일지 데이터가 없습니다.</p>
                                    </td>
                                </tr>
                            ) : (
                                pageData.map((item, index) => {
                                    const hrs = parseFloat(item.hrs) || 0;
                                    const ot = parseFloat(item.ot) || 0;
                                    let workTimeDisplay = '';
                                    
                                    if (hrs > 0) {
                                        workTimeDisplay = hrs.toFixed(1);
                                        if (ot > 0) {
                                            workTimeDisplay += '+' + ot.toFixed(1);
                                        }
                                    } else {
                                        workTimeDisplay = '-';
                                    }

                                    return (
                                        <tr
                                            key={item.idx || index}
                                            className="hover:bg-white/10 cursor-pointer transition-colors"
                                            onClick={() => showEditJobModal(item)}
                                        >
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-white">
                                                {formatDate(item.pdate)}
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(item.status)}`}>
                                                    {item.status || '-'}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-white">
                                                {workTimeDisplay}
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-white">
                                                <div className="flex items-center">
                                                    <span>{item.projectName || '-'}</span>
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 text-sm text-white">
                                                <div className="max-w-xs truncate" title={item.description || ''}>
                                                    {item.description || '-'}
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-white">
                                                {item.requestpart || '-'}
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-white">
                                                {item.type || '-'}
                                            </td>
                                        </tr>
                                    );
                                })
                            )}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* 페이지네이션 */}
            <div className="mt-6 flex items-center justify-between glass-effect rounded-lg p-4">
                <div className="flex items-center space-x-2">
                    <span className="text-sm text-white/80">페이지당 행 수:</span>
                    <select 
                        value={pageSize}
                        onChange={(e) => {
                            setPageSize(parseInt(e.target.value));
                            setCurrentPage(1);
                        }}
                        className="bg-white/20 border border-white/30 rounded-md px-2 py-1 text-sm text-white"
                    >
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div className="flex items-center space-x-2">
                    <button 
                        onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                        disabled={currentPage <= 1}
                        className="px-3 py-1 border border-white/30 rounded-md text-sm text-white hover:bg-white/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        이전
                    </button>
                    <span className="text-sm text-white/80">{currentPage} / {maxPage}</span>
                    <button 
                        onClick={() => setCurrentPage(Math.min(maxPage, currentPage + 1))}
                        disabled={currentPage >= maxPage}
                        className="px-3 py-1 border border-white/30 rounded-md text-sm text-white hover:bg-white/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        다음
                    </button>
                </div>
            </div>

            {/* 편집 모달 */}
            {showEditModal && (
                <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50">
                    <div className="flex items-center justify-center min-h-screen p-4">
                        <div className="glass-effect rounded-2xl w-full max-w-6xl 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                    업무일지 {isEditMode ? '편집' : '추가'}
                                </h2>
                                <button
                                    onClick={() => setShowEditModal(false)}
                                    className="text-white/70 hover:text-white transition-colors"
                                >
                                    <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={handleSave} className="p-6">
                                <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
                                    {/* 좌측: 기본 정보 */}
                                    <div className="lg:col-span-2">
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">날짜 *</label>
                                                <input 
                                                    type="date" 
                                                    value={editData.pdate || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, pdate: e.target.value}))}
                                                    required
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">상태 *</label>
                                                <select 
                                                    value={editData.status || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, status: e.target.value}))}
                                                    required
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                >
                                                    <option value="">선택하세요</option>
                                                    <option value="진행 중">진행 중</option>
                                                    <option value="완료">완료</option>
                                                    <option value="대기">대기</option>
                                                    <option value="보류">보류</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">요청부서</label>
                                                <input 
                                                    type="text" 
                                                    value={editData.requestpart || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, requestpart: e.target.value}))}
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">타입</label>
                                                <select 
                                                    value={editData.type || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, type: e.target.value}))}
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                >
                                                    <option value="">선택하세요</option>
                                                    <option value="개발">개발</option>
                                                    <option value="유지보수">유지보수</option>
                                                    <option value="분석">분석</option>
                                                    <option value="테스트">테스트</option>
                                                    <option value="문서작업">문서작업</option>
                                                    <option value="회의">회의</option>
                                                    <option value="기타">기타</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">근무시간 (시간) *</label>
                                                <input 
                                                    type="number" 
                                                    step="any"
                                                    value={editData.hrs || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, hrs: e.target.value}))}
                                                    required
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">초과근무 (시간)</label>
                                                <input 
                                                    type="number" 
                                                    step="any"
                                                    value={editData.ot || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, ot: e.target.value}))}
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">초과근무 시작시간</label>
                                                <input 
                                                    type="time" 
                                                    value={editData.otStart || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, otStart: e.target.value}))}
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-white/70 text-sm font-medium mb-2">초과근무 종료시간</label>
                                                <input 
                                                    type="time" 
                                                    value={editData.otEnd || ''}
                                                    onChange={(e) => setEditData(prev => ({...prev, otEnd: e.target.value}))}
                                                    className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {/* 우측: 프로젝트명과 업무내용 */}
                                    <div className="lg:col-span-3 space-y-4">
                                        <div>
                                            <label className="block text-white/70 text-sm font-medium mb-2">프로젝트명 *</label>
                                            <input 
                                                type="text" 
                                                value={editData.projectName || ''}
                                                onChange={(e) => setEditData(prev => ({...prev, projectName: e.target.value}))}
                                                required
                                                className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                                            />
                                        </div>
                                        <div className="flex-grow">
                                            <label className="block text-white/70 text-sm font-medium mb-2">업무내용 *</label>
                                            <textarea 
                                                value={editData.description || ''}
                                                onChange={(e) => setEditData(prev => ({...prev, description: e.target.value}))}
                                                rows="15" 
                                                required
                                                className="w-full h-full min-h-[360px] bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all resize-vertical"
                                                placeholder="상세한 업무 내용을 입력하세요..."
                                            />
                                        </div>
                                    </div>
                                </div>
                            </form>
                            
                            {/* 모달 푸터 */}
                            <div className="px-6 py-4 border-t border-white/10 flex justify-between items-center bg-black/10 rounded-b-2xl">
                                {isEditMode && (
                                    <button 
                                        type="button" 
                                        onClick={handleDelete}
                                        className="bg-danger-500 hover:bg-danger-600 text-white px-4 py-2 rounded-lg transition-colors"
                                    >
                                        삭제
                                    </button>
                                )}
                                <div className="flex space-x-3 ml-auto">
                                    <button 
                                        type="button" 
                                        onClick={() => setShowEditModal(false)}
                                        className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors"
                                    >
                                        취소
                                    </button>
                                    <button 
                                        type="submit" 
                                        onClick={handleSave}
                                        className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors"
                                    >
                                        저장
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}