<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글벗 Light - 상시 업무용 보고서 생성기</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Noto Sans KR', sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); }
        .card-shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .btn-primary { 
            background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover { 
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 54, 93, 0.4);
        }
        .preview-frame {
            background: #f0f0f0;
            border: 1px solid #e2e8f0;
        }
        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #1a365d;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .tab-active {
            border-bottom: 3px solid #1a365d;
            color: #1a365d;
            font-weight: 600;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 헤더 -->
    <header class="gradient-bg text-white py-6 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold">글벗 Light</h1>
                    <p class="text-blue-200 text-sm mt-1">상시 업무용 보고서 자동 생성기 v1.0</p>
                </div>
                <div class="text-right text-sm text-blue-200">
                    <p>각인된 양식 기반</p>
                    <p>A4 인쇄 최적화</p>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 입력 패널 -->
            <div class="bg-white rounded-xl card-shadow p-6">
                <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                    <span class="w-8 h-8 bg-blue-900 text-white rounded flex items-center justify-center mr-3 text-sm">1</span>
                    문서 입력
                </h2>

                <!-- 입력 방식 탭 -->
                <div class="flex border-b mb-4">
                    <button id="tab-file" class="px-4 py-2 tab-active" onclick="switchTab('file')">파일 업로드</button>
                    <button id="tab-text" class="px-4 py-2 text-gray-500" onclick="switchTab('text')">직접 입력</button>
                </div>

                <form id="generateForm">
                    <!-- 파일 업로드 -->
                    <div id="input-file" class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">HTML 파일 업로드</label>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-500 transition-colors">
                            <input type="file" id="fileInput" name="file" accept=".html,.htm,.txt" class="hidden" onchange="handleFileSelect(this)">
                            <label for="fileInput" class="cursor-pointer">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="mt-2 text-sm text-gray-600">클릭하여 파일 선택</p>
                                <p class="text-xs text-gray-400">HTML, TXT 지원</p>
                            </label>
                            <p id="fileName" class="mt-2 text-sm text-blue-600 font-medium hidden"></p>
                        </div>
                    </div>

                    <!-- 직접 입력 -->
                    <div id="input-text" class="mb-4 hidden">
                        <label class="block text-sm font-medium text-gray-700 mb-2">내용 직접 입력</label>
                        <textarea name="content" id="contentInput" rows="10" 
                            class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="변환할 문서 내용을 입력하세요..."></textarea>
                    </div>

                    <!-- 옵션 설정 -->
                    <div class="border-t pt-4 mt-4">
                        <h3 class="font-medium text-gray-800 mb-3">옵션 설정</h3>
                        
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <!-- 페이지 옵션 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">페이지 구성</label>
                                <select name="page_option" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500">
                                    <option value="1">1페이지 (핵심 요약)</option>
                                    <option value="2">2페이지 (본문 + 첨부)</option>
                                    <option value="n">N페이지 (본문 + 다중 첨부)</option>
                                </select>
                            </div>

                            <!-- 부서명 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">부서명</label>
                                <input type="text" name="department" value="총괄기획실" 
                                    class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>

                        <!-- 추가 요청사항 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">추가 요청사항 (선택)</label>
                            <textarea name="additional_prompt" rows="2" 
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500"
                                placeholder="예: 표를 더 상세하게 만들어주세요, 핵심 결론을 강조해주세요..."></textarea>
                        </div>
                    </div>

                    <!-- 생성 버튼 -->
                    <button type="submit" id="generateBtn" class="w-full btn-primary text-white py-3 rounded-lg font-medium flex items-center justify-center">
                        <span id="btnText">보고서 생성</span>
                        <div id="btnSpinner" class="loading-spinner ml-2 hidden"></div>
                    </button>
                </form>
            </div>

            <!-- 미리보기 패널 -->
            <div class="bg-white rounded-xl card-shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-800 flex items-center">
                        <span class="w-8 h-8 bg-blue-900 text-white rounded flex items-center justify-center mr-3 text-sm">2</span>
                        미리보기 & 다운로드
                    </h2>
                    
                    <!-- 다운로드 버튼 그룹 -->
                    <div id="downloadBtns" class="flex gap-2 hidden">
                        <button onclick="downloadHTML()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
                            📄 HTML
                        </button>
                        <button onclick="downloadPDF()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
                            📑 PDF
                        </button>
                        <button onclick="printPreview()" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition-colors">
                            🖨️ 인쇄
                        </button>
                    </div>
                </div>

                <!-- 미리보기 영역 -->
                <div id="previewArea" class="preview-frame rounded-lg overflow-hidden" style="height: 600px;">
                    <div id="emptyState" class="h-full flex items-center justify-center text-gray-400">
                        <div class="text-center">
                            <svg class="mx-auto h-16 w-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 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>
                            <p>문서를 입력하고 생성 버튼을 누르세요</p>
                        </div>
                    </div>
                    <iframe id="previewFrame" class="w-full h-full hidden"></iframe>
                </div>

                <!-- 에러 메시지 -->
                <div id="errorMessage" class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 hidden"></div>
            </div>
        </div>

        <!-- HWP 변환 안내 -->
        <div class="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
            <h3 class="font-bold text-blue-900 mb-2">💡 HWP 파일이 필요하신가요?</h3>
            <p class="text-blue-800 text-sm mb-3">
                HWP 변환은 Windows + 한글 프로그램이 필요합니다. HTML 다운로드 후 제공되는 Python 스크립트로 로컬에서 변환할 수 있습니다.
            </p>
            <a href="/hwp-script" class="inline-block px-4 py-2 bg-blue-900 text-white rounded-lg text-sm hover:bg-blue-800 transition-colors">
                HWP 변환 스크립트 받기 →
            </a>
        </div>
    </main>

    <!-- 푸터 -->
    <footer class="bg-gray-100 py-6 mt-12">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>글벗 Light v1.0 | 각인된 양식 기반 보고서 생성기</p>
            <p class="mt-1">Powered by Claude API</p>
        </div>
    </footer>

    <!-- 생성된 HTML 저장용 -->
    <script>
        let generatedHTML = '';

        function switchTab(tab) {
            const fileTab = document.getElementById('tab-file');
            const textTab = document.getElementById('tab-text');
            const fileInput = document.getElementById('input-file');
            const textInput = document.getElementById('input-text');

            if (tab === 'file') {
                fileTab.classList.add('tab-active');
                textTab.classList.remove('tab-active');
                textTab.classList.add('text-gray-500');
                fileInput.classList.remove('hidden');
                textInput.classList.add('hidden');
            } else {
                textTab.classList.add('tab-active');
                fileTab.classList.remove('tab-active');
                fileTab.classList.add('text-gray-500');
                textInput.classList.remove('hidden');
                fileInput.classList.add('hidden');
            }
        }

        function handleFileSelect(input) {
            const fileName = document.getElementById('fileName');
            if (input.files && input.files[0]) {
                fileName.textContent = '📎 ' + input.files[0].name;
                fileName.classList.remove('hidden');
            }
        }

        document.getElementById('generateForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const btn = document.getElementById('generateBtn');
            const btnText = document.getElementById('btnText');
            const btnSpinner = document.getElementById('btnSpinner');
            const errorMessage = document.getElementById('errorMessage');
            
            // 로딩 상태
            btn.disabled = true;
            btnText.textContent = '생성 중...';
            btnSpinner.classList.remove('hidden');
            errorMessage.classList.add('hidden');

            try {
                const formData = new FormData(this);
                
                // 파일 또는 텍스트 내용 확인
                const file = document.getElementById('fileInput').files[0];
                const content = document.getElementById('contentInput').value;
                
                if (!file && !content.trim()) {
                    throw new Error('파일을 업로드하거나 내용을 입력해주세요.');
                }

                const response = await fetch('/generate', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.error) {
                    throw new Error(data.error);
                }

                if (data.success && data.html) {
                    generatedHTML = data.html;
                    
                    // 미리보기 표시
                    const emptyState = document.getElementById('emptyState');
                    const previewFrame = document.getElementById('previewFrame');
                    const downloadBtns = document.getElementById('downloadBtns');
                    
                    emptyState.classList.add('hidden');
                    previewFrame.classList.remove('hidden');
                    downloadBtns.classList.remove('hidden');
                    
                    // iframe에 HTML 로드
                    previewFrame.srcdoc = generatedHTML;
                }

            } catch (error) {
                errorMessage.textContent = error.message;
                errorMessage.classList.remove('hidden');
            } finally {
                btn.disabled = false;
                btnText.textContent = '보고서 생성';
                btnSpinner.classList.add('hidden');
            }
        });

        function downloadHTML() {
            if (!generatedHTML) return;
            
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/download/html';
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'html';
            input.value = generatedHTML;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }

        function downloadPDF() {
            if (!generatedHTML) return;
            
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/download/pdf';
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'html';
            input.value = generatedHTML;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }

        function printPreview() {
            const previewFrame = document.getElementById('previewFrame');
            if (previewFrame.contentWindow) {
                previewFrame.contentWindow.print();
            }
        }
    </script>
</body>
</html>
