<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTC 용법 라벨 관리 - 청춘약국</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
        }
        
        /* 헤더 */
        .header {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 20px 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-title {
            font-size: 22px;
            font-weight: 700;
        }
        .header-nav a {
            color: white;
            text-decoration: none;
            margin-left: 16px;
            opacity: 0.9;
        }
        .header-nav a:hover { opacity: 1; }
        
        /* 컨테이너 */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px;
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 24px;
        }
        
        /* 패널 */
        .panel {
            background: white;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            overflow: hidden;
        }
        .panel-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e2e8f0;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .panel-body {
            padding: 20px;
        }
        
        /* 검색 */
        .search-box {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        .search-input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 15px;
            transition: border-color 0.2s;
        }
        .search-input:focus {
            outline: none;
            border-color: #f59e0b;
        }
        .search-btn {
            padding: 12px 20px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.1s;
        }
        .search-btn:hover { transform: scale(1.02); }
        
        /* 검색 결과 */
        .search-results {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .search-result-item {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            transition: background 0.1s;
        }
        .search-result-item:hover { background: #fef3c7; }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
        }
        .search-result-barcode {
            font-size: 12px;
            color: #64748b;
            font-family: monospace;
        }
        
        /* 폼 */
        .form-group {
            margin-bottom: 16px;
        }
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
            margin-bottom: 6px;
        }
        .form-input, .form-textarea {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 15px;
            font-family: inherit;
            transition: border-color 0.2s;
        }
        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: #f59e0b;
        }
        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }
        .form-input[readonly] {
            background: #f8fafc;
            color: #64748b;
        }
        
        /* 버튼 */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .btn {
            flex: 1;
            padding: 14px 20px;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-primary {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
        }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
        .btn-secondary {
            background: #e2e8f0;
            color: #475569;
        }
        .btn-secondary:hover { background: #cbd5e1; }
        .btn-print {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: white;
        }
        .btn-print:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
        .btn-delete {
            background: #fee2e2;
            color: #dc2626;
        }
        .btn-delete:hover { background: #fecaca; }
        
        /* 미리보기 */
        .preview-container {
            text-align: center;
            padding: 20px;
            background: #f8fafc;
            border-radius: 12px;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .preview-image {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .preview-placeholder {
            color: #94a3b8;
            font-size: 14px;
        }
        
        /* 목록 테이블 */
        .label-list {
            max-height: 400px;
            overflow-y: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th {
            background: #f8fafc;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
            position: sticky;
            top: 0;
        }
        td {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }
        tr:hover { background: #fef3c7; cursor: pointer; }
        .td-name {
            font-weight: 600;
            color: #1e293b;
        }
        .td-effect {
            color: #d97706;
            font-weight: 500;
        }
        .td-count {
            font-family: monospace;
            color: #64748b;
        }
        
        /* 토스트 */
        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            padding: 14px 28px;
            border-radius: 12px;
            font-weight: 600;
            z-index: 9999;
            animation: toastIn 0.3s ease;
        }
        .toast.success { background: #10b981; color: white; }
        .toast.error { background: #ef4444; color: white; }
        @keyframes toastIn {
            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        
        /* 반응형 */
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="header-title">💊 OTC 용법 라벨 관리</div>
            <nav class="header-nav">
                <a href="/admin">📊 대시보드</a>
                <a href="/admin/pos-live">📋 실시간 POS</a>
                <a href="/admin/members">👥 회원</a>
            </nav>
        </div>
    </header>
    
    <div class="container">
        <!-- 왼쪽: 편집 패널 -->
        <div class="panel">
            <div class="panel-header">✏️ 라벨 편집</div>
            <div class="panel-body">
                <!-- 약품 검색 -->
                <div class="search-box">
                    <input type="text" class="search-input" id="searchInput" placeholder="바코드 또는 약품명 검색...">
                    <button class="search-btn" onclick="searchDrug()">검색</button>
                </div>
                
                <!-- 검색 결과 -->
                <div class="search-results" id="searchResults" style="display:none;"></div>
                
                <!-- 편집 폼 -->
                <form id="labelForm">
                    <div class="form-group">
                        <label class="form-label">바코드</label>
                        <input type="text" class="form-input" id="barcode" readonly placeholder="약품을 검색하세요">
                    </div>
                    <div class="form-group">
                        <label class="form-label">약품명 (표시용)</label>
                        <input type="text" class="form-input" id="displayName" placeholder="오버라이드 이름 (비우면 원본 사용)">
                    </div>
                    <div class="form-group">
                        <label class="form-label">효능 ⭐</label>
                        <input type="text" class="form-input" id="effect" placeholder="예: 치통, 두통">
                    </div>
                    <div class="form-group">
                        <label class="form-label">용법</label>
                        <textarea class="form-textarea" id="dosageInstruction" placeholder="예: 1일 3회, 1회 1정, 식후 30분"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">부가 설명</label>
                        <input type="text" class="form-input" id="usageTip" placeholder="예: [통증 시에만 복용]">
                    </div>
                    
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary" onclick="previewLabel()">👁️ 미리보기</button>
                        <button type="button" class="btn btn-primary" onclick="saveLabel()">💾 저장</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-print" onclick="printLabel()">🖨️ 인쇄</button>
                        <button type="button" class="btn btn-delete" onclick="deleteLabel()">🗑️ 삭제</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 오른쪽: 미리보기 + 목록 -->
        <div style="display: flex; flex-direction: column; gap: 24px;">
            <!-- 미리보기 -->
            <div class="panel">
                <div class="panel-header">👁️ 라벨 미리보기</div>
                <div class="panel-body">
                    <div class="preview-container" id="previewContainer">
                        <div class="preview-placeholder">미리보기를 클릭하면 라벨이 표시됩니다</div>
                    </div>
                </div>
            </div>
            
            <!-- 저장된 목록 -->
            <div class="panel">
                <div class="panel-header">📋 저장된 라벨 프리셋</div>
                <div class="panel-body">
                    <div class="label-list" id="labelList">
                        <table>
                            <thead>
                                <tr>
                                    <th>약품명</th>
                                    <th>효능</th>
                                    <th>인쇄</th>
                                </tr>
                            </thead>
                            <tbody id="labelListBody">
                                <tr><td colspan="3" style="text-align:center; color:#94a3b8;">로딩 중...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentBarcode = '';
        let currentDrugName = '';
        
        // 초기화
        document.addEventListener('DOMContentLoaded', () => {
            loadLabelList();
            
            // Enter 키로 검색
            document.getElementById('searchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') searchDrug();
            });
            
            // 입력 시 자동 미리보기 (디바운스)
            let debounceTimer;
            ['effect', 'dosageInstruction', 'usageTip', 'displayName'].forEach(id => {
                document.getElementById(id).addEventListener('input', () => {
                    clearTimeout(debounceTimer);
                    debounceTimer = setTimeout(previewLabel, 500);
                });
            });
            
            // URL 파라미터로 바코드/이름 전달 시 자동 로드
            const params = new URLSearchParams(window.location.search);
            const urlBarcode = params.get('barcode');
            const urlName = params.get('name');
            if (urlBarcode) {
                currentBarcode = urlBarcode;
                currentDrugName = urlName || urlBarcode;
                document.getElementById('barcode').value = urlBarcode;
                document.getElementById('searchInput').value = urlName || urlBarcode;
                
                // 기존 프리셋 확인
                fetch(`/api/admin/otc-labels/${urlBarcode}`)
                    .then(res => res.json())
                    .then(data => {
                        if (data.exists) {
                            document.getElementById('displayName').value = data.label.display_name || '';
                            document.getElementById('effect').value = data.label.effect || '';
                            document.getElementById('dosageInstruction').value = data.label.dosage_instruction || '';
                            document.getElementById('usageTip').value = data.label.usage_tip || '';
                        }
                        previewLabel();
                    });
            }
        });
        
        // 약품 검색 (MSSQL)
        async function searchDrug() {
            const query = document.getElementById('searchInput').value.trim();
            if (!query) return;
            
            try {
                const res = await fetch(`/api/admin/otc-labels/search-mssql?q=${encodeURIComponent(query)}`);
                const data = await res.json();
                
                const resultsDiv = document.getElementById('searchResults');
                
                if (data.success && data.drugs.length > 0) {
                    resultsDiv.innerHTML = data.drugs.map(drug => `
                        <div class="search-result-item" onclick="selectDrug('${drug.barcode}', '${escapeHtml(drug.goods_name)}', '${drug.drug_code}')">
                            <div class="search-result-name">${drug.goods_name}</div>
                            <div class="search-result-barcode">${drug.barcode}</div>
                        </div>
                    `).join('');
                    resultsDiv.style.display = 'block';
                } else {
                    resultsDiv.innerHTML = '<div class="search-result-item" style="color:#94a3b8;">검색 결과 없음</div>';
                    resultsDiv.style.display = 'block';
                }
            } catch (err) {
                showToast('검색 오류: ' + err.message, 'error');
            }
        }
        
        // 약품 선택
        async function selectDrug(barcode, goodsName, drugCode) {
            document.getElementById('searchResults').style.display = 'none';
            document.getElementById('searchInput').value = goodsName;
            
            currentBarcode = barcode;
            currentDrugName = goodsName;
            
            document.getElementById('barcode').value = barcode;
            
            // 기존 프리셋 확인
            try {
                const res = await fetch(`/api/admin/otc-labels/${barcode}`);
                const data = await res.json();
                
                if (data.exists) {
                    // 기존 데이터 로드
                    document.getElementById('displayName').value = data.label.display_name || '';
                    document.getElementById('effect').value = data.label.effect || '';
                    document.getElementById('dosageInstruction').value = data.label.dosage_instruction || '';
                    document.getElementById('usageTip').value = data.label.usage_tip || '';
                    showToast('기존 프리셋 로드됨', 'success');
                } else {
                    // 새 프리셋 (MSSQL 이름 사용)
                    document.getElementById('displayName').value = '';
                    document.getElementById('effect').value = '';
                    document.getElementById('dosageInstruction').value = '';
                    document.getElementById('usageTip').value = '';
                }
                
                previewLabel();
            } catch (err) {
                console.error(err);
            }
        }
        
        // 미리보기
        async function previewLabel() {
            const drugName = document.getElementById('displayName').value || currentDrugName || '약품명';
            const effect = document.getElementById('effect').value;
            const dosageInstruction = document.getElementById('dosageInstruction').value;
            const usageTip = document.getElementById('usageTip').value;
            
            try {
                const res = await fetch('/api/admin/otc-labels/preview', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ drug_name: drugName, effect, dosage_instruction: dosageInstruction, usage_tip: usageTip })
                });
                const data = await res.json();
                
                if (data.success) {
                    document.getElementById('previewContainer').innerHTML = 
                        `<img src="${data.preview_url}" class="preview-image" alt="라벨 미리보기">`;
                }
            } catch (err) {
                console.error('미리보기 오류:', err);
            }
        }
        
        // 저장
        async function saveLabel() {
            if (!currentBarcode) {
                showToast('먼저 약품을 검색하세요', 'error');
                return;
            }
            
            // display_name이 비어있으면 원본 약품명 사용
            const displayName = document.getElementById('displayName').value || currentDrugName;
            
            const payload = {
                barcode: currentBarcode,
                display_name: displayName,
                effect: document.getElementById('effect').value,
                dosage_instruction: document.getElementById('dosageInstruction').value,
                usage_tip: document.getElementById('usageTip').value
            };
            
            console.log('저장 payload:', payload);
            
            try {
                const res = await fetch('/api/admin/otc-labels', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                
                console.log('저장 응답 status:', res.status);
                const data = await res.json();
                console.log('저장 응답 data:', data);
                
                if (data.success) {
                    showToast('저장 완료!', 'success');
                    loadLabelList();
                } else {
                    showToast(data.error || '알 수 없는 오류', 'error');
                }
            } catch (err) {
                console.error('저장 오류:', err);
                showToast('저장 오류: ' + err.message, 'error');
            }
        }
        
        // 인쇄
        async function printLabel() {
            const drugName = document.getElementById('displayName').value || currentDrugName || '약품명';
            const effect = document.getElementById('effect').value;
            const dosageInstruction = document.getElementById('dosageInstruction').value;
            const usageTip = document.getElementById('usageTip').value;
            
            if (!effect && !dosageInstruction) {
                showToast('효능 또는 용법을 입력하세요', 'error');
                return;
            }
            
            try {
                const res = await fetch('/api/admin/otc-labels/print', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        barcode: currentBarcode,
                        drug_name: drugName,
                        effect,
                        dosage_instruction: dosageInstruction,
                        usage_tip: usageTip
                    })
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('🖨️ 인쇄 완료!', 'success');
                    loadLabelList();
                } else {
                    showToast(data.error, 'error');
                }
            } catch (err) {
                showToast('인쇄 오류: ' + err.message, 'error');
            }
        }
        
        // 삭제
        async function deleteLabel() {
            if (!currentBarcode) {
                showToast('삭제할 프리셋이 없습니다', 'error');
                return;
            }
            
            if (!confirm(`"${currentDrugName}" 프리셋을 삭제하시겠습니까?`)) {
                return;
            }
            
            try {
                const res = await fetch(`/api/admin/otc-labels/${currentBarcode}`, {
                    method: 'DELETE'
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('삭제 완료!', 'success');
                    // 폼 초기화
                    currentBarcode = '';
                    currentDrugName = '';
                    document.getElementById('barcode').value = '';
                    document.getElementById('displayName').value = '';
                    document.getElementById('effect').value = '';
                    document.getElementById('dosageInstruction').value = '';
                    document.getElementById('usageTip').value = '';
                    document.getElementById('previewContainer').innerHTML = '<div class="preview-placeholder">미리보기를 클릭하면 라벨이 표시됩니다</div>';
                    loadLabelList();
                } else {
                    showToast(data.error || '삭제 실패', 'error');
                }
            } catch (err) {
                showToast('삭제 오류: ' + err.message, 'error');
            }
        }
        
        // 목록 로드
        async function loadLabelList() {
            try {
                const res = await fetch('/api/admin/otc-labels');
                const data = await res.json();
                
                if (data.success) {
                    const tbody = document.getElementById('labelListBody');
                    
                    if (data.labels.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; color:#94a3b8;">저장된 프리셋이 없습니다</td></tr>';
                        return;
                    }
                    
                    tbody.innerHTML = data.labels.map(label => `
                        <tr onclick="loadLabel('${label.barcode}')">
                            <td class="td-name">${label.display_name || label.barcode}</td>
                            <td class="td-effect">${label.effect || '-'}</td>
                            <td class="td-count">${label.print_count || 0}회</td>
                        </tr>
                    `).join('');
                }
            } catch (err) {
                console.error('목록 로드 오류:', err);
            }
        }
        
        // 목록에서 로드
        async function loadLabel(barcode) {
            try {
                const res = await fetch(`/api/admin/otc-labels/${barcode}`);
                const data = await res.json();
                
                if (data.exists) {
                    currentBarcode = barcode;
                    currentDrugName = data.label.display_name || barcode;
                    
                    document.getElementById('barcode').value = barcode;
                    document.getElementById('displayName').value = data.label.display_name || '';
                    document.getElementById('effect').value = data.label.effect || '';
                    document.getElementById('dosageInstruction').value = data.label.dosage_instruction || '';
                    document.getElementById('usageTip').value = data.label.usage_tip || '';
                    
                    previewLabel();
                    showToast('프리셋 로드됨', 'success');
                }
            } catch (err) {
                showToast('로드 오류: ' + err.message, 'error');
            }
        }
        
        // 유틸
        function escapeHtml(str) {
            return str.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
        }
        
        function showToast(message, type = 'success') {
            const existing = document.querySelector('.toast');
            if (existing) existing.remove();
            
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => toast.remove(), 3000);
        }
    </script>
</body>
</html>
