<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAM 개발 문서 - Development Documentation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 800px;
            width: 100%;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .docs-list {
            padding: 40px;
        }

        .doc-item {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px 25px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .doc-item:hover {
            background: #e9ecef;
            border-color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
        }

        .doc-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .doc-content {
            flex: 1;
        }

        .doc-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .doc-file {
            font-size: 0.9rem;
            color: #6c757d;
            font-family: 'Courier New', monospace;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            width: 95%;
            height: 90%;
            max-width: 1400px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 12px 12px 0 0;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .modal-body {
            flex: 1;
            overflow: auto;
            padding: 0;
        }

        .modal-body iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #6c757d;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }

            .doc-item {
                padding: 15px 20px;
            }

            .doc-icon {
                font-size: 1.5rem;
            }

            .doc-title {
                font-size: 1rem;
            }

            .modal-content {
                width: 100%;
                height: 95%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📚 SAM 개발 문서</h1>
            <p>Development Documentation Portal</p>
        </div>

        <div class="docs-list">
            <div class="doc-item" onclick="openDoc('system-architecture-diagram.html', '시스템 아키텍처 다이어그램')">
                <div class="doc-icon">🏗️</div>
                <div class="doc-content">
                    <div class="doc-title">시스템 아키텍처 다이어그램</div>
                    <div class="doc-file">system-architecture-diagram.html</div>
                </div>
            </div>

            <div class="doc-item" onclick="openDoc('server-spec-cost-analysis.html', '서버 사양 및 비용 분석표')">
                <div class="doc-icon">💰</div>
                <div class="doc-content">
                    <div class="doc-title">서버 사양 및 비용 분석표</div>
                    <div class="doc-file">server-spec-cost-analysis.html</div>
                </div>
            </div>

            <div class="doc-item" onclick="openDoc('cicd-pipeline-flow.html', 'CI/CD 파이프라인 흐름도')">
                <div class="doc-icon">🔄</div>
                <div class="doc-content">
                    <div class="doc-title">CI/CD 파이프라인 흐름도</div>
                    <div class="doc-file">cicd-pipeline-flow.html</div>
                </div>
            </div>

            <div class="doc-item" onclick="openMarkdown('disaster-recovery-plan.md', '재해복구(DR) 계획서')">
                <div class="doc-icon">🛡️</div>
                <div class="doc-content">
                    <div class="doc-title">재해복구(DR) 계획서</div>
                    <div class="doc-file">disaster-recovery-plan.md</div>
                </div>
            </div>

            <div class="doc-item" onclick="openDoc('network-topology-diagram.html', '네트워크 토폴로지 다이어그램')">
                <div class="doc-icon">🌐</div>
                <div class="doc-content">
                    <div class="doc-title">네트워크 토폴로지 다이어그램</div>
                    <div class="doc-file">network-topology-diagram.html</div>
                </div>
            </div>
        </div>

        <div class="footer">
            &copy; 2025 SAM Project - Smart Automation Management
        </div>
    </div>

    <!-- Modal -->
    <div class="modal" id="docModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="modalTitle">문서 제목</div>
                <button class="close-btn" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>

    <script>
        function openDoc(filename, title) {
            const modal = document.getElementById('docModal');
            const modalTitle = document.getElementById('modalTitle');
            const modalBody = document.getElementById('modalBody');

            modalTitle.textContent = title;
            modalBody.innerHTML = `<iframe src="${filename}"></iframe>`;
            modal.classList.add('active');
        }

        function openMarkdown(filename, title) {
            const modal = document.getElementById('docModal');
            const modalTitle = document.getElementById('modalTitle');
            const modalBody = document.getElementById('modalBody');

            modalTitle.textContent = title;

            // Fetch markdown and convert to HTML
            fetch(filename)
                .then(response => response.text())
                .then(text => {
                    // Simple markdown to HTML conversion
                    let html = text
                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                        .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
                        .replace(/\*(.*)\*/gim, '<em>$1</em>')
                        .replace(/!\[(.*?)\]\((.*?)\)/gim, '<img alt="$1" src="$2" />')
                        .replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>')
                        .replace(/\n$/gim, '<br />');

                    modalBody.innerHTML = `
                        <div style="padding: 40px; max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.8; color: #333;">
                            ${html}
                        </div>
                    `;
                })
                .catch(error => {
                    modalBody.innerHTML = `
                        <div style="padding: 40px; text-align: center; color: #dc3545;">
                            <h3>⚠️ 문서를 불러올 수 없습니다</h3>
                            <p>${error.message}</p>
                        </div>
                    `;
                });

            modal.classList.add('active');
        }

        function closeModal() {
            const modal = document.getElementById('docModal');
            modal.classList.remove('active');
            document.getElementById('modalBody').innerHTML = '';
        }

        // ESC 키로 모달 닫기
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeModal();
            }
        });

        // 모달 배경 클릭시 닫기
        document.getElementById('docModal').addEventListener('click', function(event) {
            if (event.target === this) {
                closeModal();
            }
        });
    </script>
</body>
</html>