<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PAAI 어드민 - 청춘약국</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
            background: #f3f4f6;
            min-height: 100vh;
        }
        
        /* 헤더 */
        .header {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }
        .header h1 {
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .header .nav-links {
            display: flex;
            gap: 15px;
        }
        .header .nav-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
        }
        .header .nav-links a:hover,
        .header .nav-links a.active {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }
        
        /* 메인 컨테이너 */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 통계 카드 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .stat-card .icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        .stat-card .icon.blue { background: #dbeafe; }
        .stat-card .icon.green { background: #d1fae5; }
        .stat-card .icon.yellow { background: #fef3c7; }
        .stat-card .icon.red { background: #fee2e2; }
        .stat-card .icon.purple { background: #ede9fe; }
        .stat-card .info { flex: 1; }
        .stat-card .value { font-size: 1.8rem; font-weight: 700; color: #1f2937; }
        .stat-card .label { font-size: 0.85rem; color: #6b7280; }
        
        /* 섹션 */
        .section {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .section-header {
            background: #f9fafb;
            padding: 15px 20px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-header h2 {
            font-size: 1.1rem;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .section-body {
            padding: 20px;
        }
        
        /* 필터 */
        .filters {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .filter-group label {
            font-size: 0.85rem;
            color: #6b7280;
        }
        .filter-group input,
        .filter-group select {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 0.9rem;
        }
        .filter-group input:focus,
        .filter-group select:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-primary {
            background: #10b981;
            color: #fff;
        }
        .btn-primary:hover { background: #059669; }
        .btn-secondary {
            background: #e5e7eb;
            color: #374151;
        }
        .btn-secondary:hover { background: #d1d5db; }
        
        /* 로그 테이블 */
        .log-table {
            width: 100%;
            border-collapse: collapse;
        }
        .log-table th {
            background: #f9fafb;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
            font-size: 0.85rem;
        }
        .log-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e5e7eb;
            font-size: 0.9rem;
            color: #4b5563;
        }
        .log-table tr:hover { background: #f9fafb; }
        .log-table .badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .badge-success { background: #d1fae5; color: #065f46; }
        .badge-error { background: #fee2e2; color: #991b1b; }
        .badge-pending { background: #fef3c7; color: #92400e; }
        .badge-severe { background: #fee2e2; color: #dc2626; }
        .badge-useful { background: #d1fae5; color: #065f46; }
        .badge-not-useful { background: #fee2e2; color: #991b1b; }
        .badge-no-feedback { background: #e5e7eb; color: #6b7280; }
        
        .log-table .actions button {
            padding: 6px 12px;
            background: #ede9fe;
            color: #7c3aed;
            border: none;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .log-table .actions button:hover {
            background: #ddd6fe;
        }
        
        /* 모달 */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 20px;
            overflow-y: auto;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 900px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }
        .modal-header {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: #fff;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 16px 16px 0 0;
        }
        .modal-header h3 { font-size: 1.2rem; }
        .modal-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .modal-close:hover { background: rgba(255,255,255,0.3); }
        .modal-body {
            padding: 25px;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        /* 상세 로그 섹션 */
        .detail-section {
            margin-bottom: 20px;
        }
        .detail-section-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .detail-section-title:hover { color: #10b981; }
        .detail-section-content {
            background: #f9fafb;
            border-radius: 8px;
            padding: 15px;
            font-size: 0.85rem;
            line-height: 1.6;
        }
        .detail-section-content.collapsed {
            display: none;
        }
        .detail-section-content pre {
            background: #1f2937;
            color: #e5e7eb;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.8rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .detail-grid {
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 8px 15px;
        }
        .detail-grid dt {
            color: #6b7280;
            font-weight: 500;
        }
        .detail-grid dd {
            color: #1f2937;
        }
        
        /* 차트 영역 */
        .chart-container {
            height: 200px;
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 20px 0;
        }
        .chart-bar {
            flex: 1;
            background: linear-gradient(to top, #10b981, #34d399);
            border-radius: 4px 4px 0 0;
            min-height: 10px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s;
        }
        .chart-bar:hover {
            transform: scaleY(1.05);
            transform-origin: bottom;
        }
        .chart-bar .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: #fff;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .chart-bar:hover .tooltip { opacity: 1; }
        .chart-labels {
            display: flex;
            gap: 8px;
        }
        .chart-labels span {
            flex: 1;
            text-align: center;
            font-size: 0.7rem;
            color: #9ca3af;
        }
        
        /* 로딩 */
        .loading {
            text-align: center;
            padding: 40px;
            color: #9ca3af;
        }
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #e5e7eb;
            border-top-color: #10b981;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        /* 빈 상태 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        .empty-state .icon { font-size: 3rem; margin-bottom: 15px; }
        
        /* 반응형 */
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .filters {
                flex-direction: column;
            }
            .log-table {
                font-size: 0.8rem;
            }
            .log-table th, .log-table td {
                padding: 8px 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 헤더 -->
    <header class="header">
        <h1>🤖 PAAI 어드민</h1>
        <nav class="nav-links">
            <a href="/pmr" class="active">← 조제관리</a>
            <a href="#" onclick="refreshData()">🔄 새로고침</a>
        </nav>
    </header>
    
    <!-- 메인 -->
    <div class="container">
        <!-- 통계 카드 -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="icon blue">📊</div>
                <div class="info">
                    <div class="value" id="statTotal">-</div>
                    <div class="label">총 분석</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="icon green">📅</div>
                <div class="info">
                    <div class="value" id="statToday">-</div>
                    <div class="label">오늘</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="icon purple">👍</div>
                <div class="info">
                    <div class="value" id="statUseful">-</div>
                    <div class="label">유용 평가율</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="icon yellow">⚠️</div>
                <div class="info">
                    <div class="value" id="statSevere">-</div>
                    <div class="label">KIMS 경고 (오늘)</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="icon blue">⏱️</div>
                <div class="info">
                    <div class="value" id="statAvgTime">-</div>
                    <div class="label">평균 응답시간</div>
                </div>
            </div>
        </div>
        
        <!-- 일별 통계 차트 -->
        <div class="section">
            <div class="section-header">
                <h2>📈 일별 분석 추이 (최근 14일)</h2>
            </div>
            <div class="section-body">
                <div class="chart-container" id="dailyChart"></div>
                <div class="chart-labels" id="chartLabels"></div>
            </div>
        </div>
        
        <!-- 분석 이력 -->
        <div class="section">
            <div class="section-header">
                <h2>📋 분석 이력</h2>
            </div>
            <div class="section-body">
                <!-- 필터 -->
                <div class="filters">
                    <div class="filter-group">
                        <label>날짜:</label>
                        <input type="date" id="filterDate">
                    </div>
                    <div class="filter-group">
                        <label>환자명:</label>
                        <input type="text" id="filterPatient" placeholder="검색...">
                    </div>
                    <div class="filter-group">
                        <label>상태:</label>
                        <select id="filterStatus">
                            <option value="">전체</option>
                            <option value="success">성공</option>
                            <option value="error">에러</option>
                            <option value="pending">대기중</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>KIMS 경고:</label>
                        <select id="filterSevere">
                            <option value="">전체</option>
                            <option value="true">있음</option>
                            <option value="false">없음</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" onclick="loadLogs()">검색</button>
                    <button class="btn btn-secondary" onclick="clearFilters()">초기화</button>
                </div>
                
                <!-- 테이블 -->
                <div id="logsContainer">
                    <div class="loading">
                        <div class="spinner"></div>
                        <div>로딩 중...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 상세 모달 -->
    <div class="modal" id="detailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">📋 분석 상세</h3>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <div class="modal-body" id="modalBody">
                <div class="loading">
                    <div class="spinner"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 초기화
        document.addEventListener('DOMContentLoaded', () => {
            loadStats();
            loadDailyStats();
            loadLogs();
        });
        
        // 통계 로드
        async function loadStats() {
            try {
                const res = await fetch('/pmr/api/admin/stats');
                const data = await res.json();
                
                if (data.success) {
                    const s = data.stats;
                    document.getElementById('statTotal').textContent = s.total.toLocaleString();
                    document.getElementById('statToday').textContent = s.today;
                    document.getElementById('statSevere').textContent = s.severe_count;
                    document.getElementById('statAvgTime').textContent = (s.avg_response_time / 1000).toFixed(1) + '초';
                    
                    if (s.feedback && s.feedback.total > 0) {
                        document.getElementById('statUseful').textContent = s.feedback.rate + '%';
                    } else {
                        document.getElementById('statUseful').textContent = '-';
                    }
                }
            } catch (err) {
                console.error('Stats error:', err);
            }
        }
        
        // 일별 통계 로드
        async function loadDailyStats() {
            try {
                const res = await fetch('/pmr/api/admin/feedback-stats');
                const data = await res.json();
                
                if (data.success && data.stats.length > 0) {
                    renderChart(data.stats.slice(0, 14).reverse());
                }
            } catch (err) {
                console.error('Daily stats error:', err);
            }
        }
        
        // 차트 렌더링
        function renderChart(stats) {
            const container = document.getElementById('dailyChart');
            const labels = document.getElementById('chartLabels');
            
            const maxTotal = Math.max(...stats.map(s => s.total), 1);
            
            container.innerHTML = stats.map(s => {
                const height = Math.max((s.total / maxTotal) * 100, 5);
                const usefulPct = s.total > 0 ? Math.round((s.useful / s.total) * 100) : 0;
                return `
                    <div class="chart-bar" style="height: ${height}%">
                        <div class="tooltip">
                            ${s.date.slice(5)}<br>
                            분석: ${s.total}건<br>
                            유용: ${usefulPct}%<br>
                            경고: ${s.severe}건
                        </div>
                    </div>
                `;
            }).join('');
            
            labels.innerHTML = stats.map(s => `<span>${s.date.slice(5)}</span>`).join('');
        }
        
        // 로그 로드
        async function loadLogs() {
            const container = document.getElementById('logsContainer');
            container.innerHTML = '<div class="loading"><div class="spinner"></div><div>로딩 중...</div></div>';
            
            try {
                const params = new URLSearchParams();
                
                const date = document.getElementById('filterDate').value;
                const patient = document.getElementById('filterPatient').value;
                const status = document.getElementById('filterStatus').value;
                const severe = document.getElementById('filterSevere').value;
                
                if (date) params.append('date', date);
                if (patient) params.append('patient_name', patient);
                if (status) params.append('status', status);
                if (severe) params.append('has_severe', severe);
                params.append('limit', '100');
                
                const res = await fetch('/pmr/api/admin/logs?' + params.toString());
                const data = await res.json();
                
                if (data.success) {
                    renderLogs(data.logs);
                } else {
                    container.innerHTML = '<div class="empty-state"><div class="icon">⚠️</div><div>로드 실패</div></div>';
                }
            } catch (err) {
                console.error('Logs error:', err);
                container.innerHTML = '<div class="empty-state"><div class="icon">⚠️</div><div>오류 발생</div></div>';
            }
        }
        
        // 로그 테이블 렌더링
        function renderLogs(logs) {
            const container = document.getElementById('logsContainer');
            
            if (logs.length === 0) {
                container.innerHTML = '<div class="empty-state"><div class="icon">📭</div><div>분석 이력이 없습니다</div></div>';
                return;
            }
            
            container.innerHTML = `
                <table class="log-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>일시</th>
                            <th>환자</th>
                            <th>약품수</th>
                            <th>KIMS</th>
                            <th>상태</th>
                            <th>피드백</th>
                            <th>응답시간</th>
                            <th>상세</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${logs.map(log => {
                            // DB는 UTC로 저장 → 'Z' 붙여서 UTC로 해석 → KST로 표시
                            const date = new Date(log.created_at + 'Z');
                            const dateStr = date.toLocaleString('ko-KR', {
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                            
                            const statusBadge = {
                                'success': '<span class="badge badge-success">성공</span>',
                                'error': '<span class="badge badge-error">에러</span>',
                                'pending': '<span class="badge badge-pending">대기</span>',
                                'kims_done': '<span class="badge badge-pending">AI 대기</span>'
                            }[log.status] || log.status;
                            
                            let feedbackBadge = '<span class="badge badge-no-feedback">-</span>';
                            if (log.feedback_useful === 1) {
                                feedbackBadge = '<span class="badge badge-useful">👍</span>';
                            } else if (log.feedback_useful === 0) {
                                feedbackBadge = '<span class="badge badge-not-useful">👎</span>';
                            }
                            
                            const kimsInfo = log.kims_has_severe 
                                ? `<span class="badge badge-severe">⚠️ ${log.kims_interaction_count}건</span>`
                                : (log.kims_interaction_count > 0 ? `${log.kims_interaction_count}건` : '-');
                            
                            const responseTime = log.ai_response_time_ms 
                                ? (log.ai_response_time_ms / 1000).toFixed(1) + '초'
                                : '-';
                            
                            return `
                                <tr>
                                    <td>${log.id}</td>
                                    <td>${dateStr}</td>
                                    <td>${log.patient_name || '-'}</td>
                                    <td>${log.current_med_count || 0}</td>
                                    <td>${kimsInfo}</td>
                                    <td>${statusBadge}</td>
                                    <td>${feedbackBadge}</td>
                                    <td>${responseTime}</td>
                                    <td class="actions">
                                        <button onclick="showDetail(${log.id})">상세</button>
                                    </td>
                                </tr>
                            `;
                        }).join('')}
                    </tbody>
                </table>
            `;
        }
        
        // 필터 초기화
        function clearFilters() {
            document.getElementById('filterDate').value = '';
            document.getElementById('filterPatient').value = '';
            document.getElementById('filterStatus').value = '';
            document.getElementById('filterSevere').value = '';
            loadLogs();
        }
        
        // 상세 보기
        async function showDetail(logId) {
            const modal = document.getElementById('detailModal');
            const body = document.getElementById('modalBody');
            const title = document.getElementById('modalTitle');
            
            modal.classList.add('show');
            body.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
            
            try {
                const res = await fetch(`/pmr/api/admin/log/${logId}`);
                const data = await res.json();
                
                if (data.success) {
                    renderDetail(data.log);
                } else {
                    body.innerHTML = '<div class="empty-state">로드 실패</div>';
                }
            } catch (err) {
                console.error('Detail error:', err);
                body.innerHTML = '<div class="empty-state">오류 발생</div>';
            }
        }
        
        // 상세 렌더링
        function renderDetail(log) {
            const body = document.getElementById('modalBody');
            const title = document.getElementById('modalTitle');
            
            title.textContent = `📋 분석 상세 - ${log.patient_name || '환자'}님 (#${log.id})`;
            
            // 약품 목록 포맷
            let medsHtml = '-';
            if (log.current_medications && log.current_medications.length > 0) {
                medsHtml = log.current_medications.map(m => 
                    `${m.name || m.code} (${m.dosage || '-'} × ${m.frequency || '-'}회 × ${m.days || '-'}일)`
                ).join('<br>');
            }
            
            // 피드백 상태
            let feedbackHtml = '<span class="badge badge-no-feedback">없음</span>';
            if (log.feedback_useful === 1) {
                feedbackHtml = '<span class="badge badge-useful">👍 유용해요</span>';
            } else if (log.feedback_useful === 0) {
                feedbackHtml = '<span class="badge badge-not-useful">👎 아니요</span>';
            }
            
            body.innerHTML = `
                <!-- 기본 정보 -->
                <div class="detail-section">
                    <div class="detail-section-title" onclick="toggleSection(this)">
                        ▼ 환자/처방 정보
                    </div>
                    <div class="detail-section-content">
                        <dl class="detail-grid">
                            <dt>처방번호</dt><dd>${log.pre_serial || '-'}</dd>
                            <dt>환자코드</dt><dd>${log.patient_code || '-'}</dd>
                            <dt>환자명</dt><dd>${log.patient_name || '-'}</dd>
                            <dt>질병 1</dt><dd>[${log.disease_code_1 || '-'}] ${log.disease_name_1 || '-'}</dd>
                            <dt>질병 2</dt><dd>[${log.disease_code_2 || '-'}] ${log.disease_name_2 || '-'}</dd>
                            <dt>약품</dt><dd>${medsHtml}</dd>
                            <dt>분석일시</dt><dd>${new Date(log.created_at + 'Z').toLocaleString('ko-KR')}</dd>
                            <dt>상태</dt><dd>${log.status}</dd>
                            <dt>피드백</dt><dd>${feedbackHtml}</dd>
                        </dl>
                    </div>
                </div>
                
                <!-- KIMS 결과 -->
                <div class="detail-section">
                    <div class="detail-section-title" onclick="toggleSection(this)">
                        ▼ KIMS 상호작용 (${log.kims_response_time_ms || 0}ms)
                    </div>
                    <div class="detail-section-content">
                        <p><strong>조회 약품:</strong> ${(log.kims_drug_codes || []).join(', ') || '-'}</p>
                        <p><strong>상호작용:</strong> ${log.kims_interaction_count || 0}건 ${log.kims_has_severe ? '⚠️ 중증 포함' : ''}</p>
                        ${log.kims_interactions && log.kims_interactions.length > 0 ? `
                            <pre>${JSON.stringify(log.kims_interactions, null, 2)}</pre>
                        ` : ''}
                    </div>
                </div>
                
                <!-- AI 프롬프트 -->
                <div class="detail-section">
                    <div class="detail-section-title" onclick="toggleSection(this)">
                        ▶ AI 프롬프트 (클릭하여 펼치기)
                    </div>
                    <div class="detail-section-content collapsed">
                        <pre>${escapeHtml(log.ai_prompt || '없음')}</pre>
                    </div>
                </div>
                
                <!-- AI 응답 -->
                <div class="detail-section">
                    <div class="detail-section-title" onclick="toggleSection(this)">
                        ▼ AI 응답 (${log.ai_response_time_ms || 0}ms, ${log.ai_model || '-'})
                    </div>
                    <div class="detail-section-content">
                        <pre>${JSON.stringify(log.ai_response, null, 2) || '없음'}</pre>
                    </div>
                </div>
                
                ${log.error_message ? `
                    <div class="detail-section">
                        <div class="detail-section-title" style="color: #dc2626;">
                            ⚠️ 에러 메시지
                        </div>
                        <div class="detail-section-content" style="background: #fee2e2;">
                            ${escapeHtml(log.error_message)}
                        </div>
                    </div>
                ` : ''}
            `;
        }
        
        // 섹션 토글
        function toggleSection(titleEl) {
            const content = titleEl.nextElementSibling;
            const isCollapsed = content.classList.contains('collapsed');
            
            content.classList.toggle('collapsed');
            titleEl.textContent = titleEl.textContent.replace(/^[▼▶]/, isCollapsed ? '▼' : '▶');
        }
        
        // 모달 닫기
        function closeModal() {
            document.getElementById('detailModal').classList.remove('show');
        }
        
        // 데이터 새로고침
        function refreshData() {
            loadStats();
            loadDailyStats();
            loadLogs();
        }
        
        // HTML 이스케이프
        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        // 모달 외부 클릭 시 닫기
        document.getElementById('detailModal').addEventListener('click', (e) => {
            if (e.target === e.currentTarget) closeModal();
        });
        
        // ESC 키로 모달 닫기
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeModal();
        });
    </script>
</body>
</html>
