<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing Module Test - 그리기 모듈 테스트</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- Drawing Module CSS -->
    <link href="css/drawingModule.css" rel="stylesheet">
    
    <style> 
        body {
            padding: 20px;
            background-color: #f8f9fa;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .result-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 20px;
            min-height: 200px;
        }
        .result-image {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
        }
        .info-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .demo-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        pre {
            background: #f4f4f4;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .feature-list {
            list-style: none;
            padding-left: 0;
        }
        .feature-list li {
            padding: 5px 0;
        }
        .feature-list li:before {
            content: "✓ ";
            color: #28a745;
            font-weight: bold;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1 class="mb-4">
            <i class="bi bi-brush"></i> Drawing Module Test
        </h1>
        
        <div class="info-box">
            <h4>그리기 모듈 테스트 페이지</h4>
            <p>이 페이지는 독립적인 그리기 모듈(DrawingModule)의 기능을 테스트하기 위한 페이지입니다.</p>
            <p class="mb-0">아래 버튼들을 클릭하여 다양한 설정으로 그리기 모듈을 실행해보세요.</p>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">테스트 버튼</h5>
            </div>
            <div class="card-body">
                <div class="demo-buttons">
                    <button type="button" class="btn btn-primary" onclick="openBasicDrawing()">
                        <i class="bi bi-pencil"></i> 기본 그리기
                    </button>
                    
                    <button type="button" class="btn btn-success" onclick="openLargeCanvas()">
                        <i class="bi bi-arrows-fullscreen"></i> 큰 캔버스 (640x480)
                    </button>
                    
                    <button type="button" class="btn btn-info" onclick="openWithImage()">
                        <i class="bi bi-image"></i> 이미지 포함
                    </button>
                    
                    <button type="button" class="btn btn-warning" onclick="openCustomCallback()">
                        <i class="bi bi-gear"></i> 커스텀 콜백
                    </button>
                    
                    <button type="button" class="btn btn-secondary" onclick="openMultiple()">
                        <i class="bi bi-layers"></i> 다중 인스턴스
                    </button>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">주요 기능</h5>
            </div>
            <div class="card-body">
                <ul class="feature-list">
                    <li>점연결(Polyline), 직선(Line), 자유선(Free) 그리기 모드</li>
                    <li>직각 모드 지원 (수평/수직선 자동 정렬)</li>
                    <li>색상 선택 및 선 굵기 조절</li>
                    <li>지우개 기능 (크기 조절 가능)</li>
                    <li>텍스트 추가 기능</li>
                    <li>실행취소(Undo) 기능</li>
                    <li>초기화 기능</li>
                    <li>이미지 저장 및 다운로드</li>
                    <li>터치 디바이스 지원 (모바일/태블릿)</li>
                    <li>반응형 디자인</li>
                </ul>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">사용 예제 코드</h5>
            </div>
            <div class="card-body">
                <pre><code>// 기본 사용법
const drawer = new DrawingModule({
    container: 'body',
    onSave: (data) => {
        console.log('저장된 이미지:', data.imageData);
        console.log('저장 시간:', data.timestamp);
    }
});
drawer.show();

// 고급 설정
const advancedDrawer = new DrawingModule({
    container: '#myContainer',
    width: 1000,
    height: 700,
    canvasWidth: 640,
    canvasHeight: 480,
    title: '나의 그리기 도구',
    initialImage: 'path/to/image.png',
    onSave: (data) => {
        // 서버로 이미지 전송
        sendToServer(data.imageData);
    },
    onCancel: () => {
        console.log('그리기 취소됨');
    }
});</code></pre>
            </div>
        </div>

        <div class="result-container">
            <h4>결과 표시 영역</h4>
            <div id="resultArea">
                <p class="text-muted">그리기를 완료하면 여기에 결과가 표시됩니다.</p>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Drawing Module JS -->
    <script src="js/drawingModule.js"></script>

    <script>
        // 기본 그리기
        function openBasicDrawing() {
            const drawer = new DrawingModule({
                container: 'body',
                onSave: (data) => {
                    displayResult(data, '기본 그리기');
                }
            });
            drawer.show();
        }

        // 큰 캔버스
        function openLargeCanvas() {
            const drawer = new DrawingModule({
                container: 'body',
                canvasWidth: 640,
                canvasHeight: 480,
                title: '큰 캔버스 그리기 (640x480)',
                onSave: (data) => {
                    displayResult(data, '큰 캔버스');
                }
            });
            drawer.show();
        }

        // 이미지 포함
        function openWithImage() {
            // 샘플 이미지 데이터 URL (1x1 투명 픽셀)
            const sampleImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
            
            const drawer = new DrawingModule({
                container: 'body',
                initialImage: sampleImage,
                title: '이미지 편집',
                onSave: (data) => {
                    displayResult(data, '이미지 편집');
                }
            });
            drawer.show();
        }

        // 커스텀 콜백
        function openCustomCallback() {
            const drawer = new DrawingModule({
                container: 'body',
                title: '커스텀 콜백 테스트',
                onSave: (data) => {
                    // 커스텀 처리
                    const confirmSave = confirm('이미지를 저장하시겠습니까?');
                    if (confirmSave) {
                        displayResult(data, '커스텀 콜백');
                        
                        // 다운로드 옵션
                        if (confirm('이미지를 다운로드하시겠습니까?')) {
                            downloadImage(data.imageData, 'drawing_' + Date.now() + '.jpg');
                        }
                    }
                },
                onCancel: () => {
                    alert('그리기가 취소되었습니다.');
                }
            });
            drawer.show();
        }

        // 다중 인스턴스
        function openMultiple() {
            // 첫 번째 인스턴스
            const drawer1 = new DrawingModule({
                container: 'body',
                title: '그리기 1',
                canvasWidth: 200,
                canvasHeight: 200,
                onSave: (data) => {
                    displayResult(data, '그리기 1');
                }
            });
            
            // 두 번째 인스턴스 (1초 후)
            setTimeout(() => {
                const drawer2 = new DrawingModule({
                    container: 'body',
                    title: '그리기 2',
                    canvasWidth: 300,
                    canvasHeight: 200,
                    onSave: (data) => {
                        displayResult(data, '그리기 2');
                    }
                });
                drawer2.show();
            }, 100);
            
            drawer1.show();
        }

        // 결과 표시
        function displayResult(data, title) {
            const resultHtml = `
                <div class="alert alert-success">
                    <h5>${title} 완료!</h5>
                    <p>저장 시간: ${new Date(data.timestamp).toLocaleString()}</p>
                    <p>캔버스 크기: ${data.width} x ${data.height}px</p>
                </div>
                <img src="${data.imageData}" class="result-image" alt="그리기 결과">
                <div class="mt-3">
                    <button class="btn btn-sm btn-primary" onclick="downloadImage('${data.imageData}', 'drawing.jpg')">
                        <i class="bi bi-download"></i> JPG 다운로드
                    </button>
                    <button class="btn btn-sm btn-secondary" onclick="downloadImage('${data.imageData}', 'drawing.png')">
                        <i class="bi bi-download"></i> PNG 다운로드
                    </button>
                    <button class="btn btn-sm btn-success" onclick="saveToServer('${data.imageData}')">
                        <i class="bi bi-cloud-upload"></i> 서버에 저장
                    </button>
                </div>
            `;
            document.getElementById('resultArea').innerHTML = resultHtml;
        }

        // 이미지 다운로드
        function downloadImage(dataUrl, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = dataUrl;
            link.click();
        } 

        // 서버에 저장 (예제)
        function saveToServer(imageData) {
            // 실제 구현시 AJAX로 서버에 전송
            console.log('서버에 저장할 이미지 데이터:', imageData.substring(0, 50) + '...');
            alert('서버 저장 기능은 실제 구현이 필요합니다.\n콘솔에서 데이터를 확인하세요.');
            
            // 예제: jQuery AJAX
            /*
            $.ajax({
                url: '/api/save-image',
                method: 'POST',
                data: {
                    image: imageData,
                    timestamp: new Date().toISOString()
                },
                success: function(response) {
                    alert('저장 성공!');
                },
                error: function(error) {
                    alert('저장 실패: ' + error.responseText);
                }
            });
            */
        }

        // 페이지 로드 시 안내
        $(document).ready(function() {
            console.log('Drawing Module Test Page Ready');
            console.log('DrawingModule 버전: 1.0.0');
        });
    </script>
</body>
</html> 