<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DB Console - eLink Admin</title>

    <!-- Bootstrap 5 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/addon/bootstrap-5.3.2/css/bootstrap.min.css">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/addon/bootstrap-icons-1.11.3/bootstrap-icons.min.css">
    <!-- Monaco Editor CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/addon/monaco/editor/editor.main.css">
    <!-- AG Grid CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/addon/ag-grid/ag-grid.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/addon/ag-grid/ag-theme-alpine.min.css">
    <!-- DB Console CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/dbconsole/dbconsole.css">
</head>
<body>
    <div class="dbconsole-container">
        <!-- 헤더 -->
        <div class="dbconsole-header">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <h5 class="mb-0"><i class="bi bi-terminal"></i> DB Console</h5>
                    <div id="connection-status" class="connection-status">
                        <span class="status-dot disconnected"></span>
                        <span class="status-text">연결 안됨</span>
                    </div>
                    <span id="transaction-indicator" class="transaction-indicator"></span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="small text-muted">Admin 전용</span>
                </div>
            </div>
        </div>

        <!-- 본문 -->
        <div class="dbconsole-body">
            <!-- 사이드바: 스키마 탐색기 -->
            <div class="dbconsole-sidebar">
                <div class="dbconsole-sidebar-header">
                    <h6><i class="bi bi-folder-tree"></i> 스키마 탐색기</h6>
                    <small class="text-muted">테이블 더블클릭: SELECT 생성 / 우클릭: DDL</small>
                </div>
                <div class="dbconsole-sidebar-body">
                    <div id="schema-tree" class="schema-tree">
                        <div class="text-muted small">데이터소스에 연결하세요</div>
                    </div>
                </div>
            </div>

            <!-- 리사이저 -->
            <div class="dbconsole-resizer"></div>

            <!-- 메인 영역 -->
            <div class="dbconsole-main">
                <!-- 에디터 영역 -->
                <div class="dbconsole-editor-area">
                    <!-- 툴바 -->
                    <div class="dbconsole-editor-toolbar">
                        <!-- 데이터소스 선택 -->
                        <div class="toolbar-group">
                            <label class="toolbar-label">데이터소스:</label>
                            <select id="datasource-select" class="dbconsole-select">
                                <option value="">-- 선택 --</option>
                            </select>
                            <button id="btn-connect" class="btn btn-sm btn-outline-primary btn-toolbar">
                                <i class="bi bi-plug"></i> 연결
                            </button>
                            <button id="btn-disconnect" class="btn btn-sm btn-outline-secondary btn-toolbar" style="display:none;">
                                <i class="bi bi-plug"></i> 연결해제
                            </button>
                        </div>

                        <!-- 직접 입력 영역 (숨김) -->
                        <div id="direct-input-area" class="toolbar-group" style="display:none;">
                            <input type="text" id="direct-jdbc-url" class="form-control form-control-sm" placeholder="JDBC URL" style="width:250px;">
                            <input type="text" id="direct-username" class="form-control form-control-sm" placeholder="Username" style="width:100px;">
                            <input type="password" id="direct-password" class="form-control form-control-sm" placeholder="Password" autocomplete="off" style="width:100px;">
                        </div>

                        <div class="toolbar-divider"></div>

                        <!-- 실행 버튼 -->
                        <div class="toolbar-group">
                            <button id="btn-execute" class="btn btn-sm btn-execute btn-toolbar" disabled title="커서 위치 구문 실행 (Ctrl+Enter)">
                                <i class="bi bi-play-fill"></i> 실행
                            </button>
                            <button id="btn-execute-all" class="btn btn-sm btn-outline-success btn-toolbar" disabled title="전체 SQL 순차 실행 (Ctrl+Shift+Enter)">
                                <i class="bi bi-skip-end-fill"></i> Run All
                            </button>
                        </div>

                        <div class="toolbar-divider"></div>

                        <!-- 트랜잭션 -->
                        <div class="toolbar-group">
                            <button id="btn-commit" class="btn btn-sm btn-commit btn-toolbar" disabled>
                                <i class="bi bi-check-lg"></i> COMMIT
                            </button>
                            <button id="btn-rollback" class="btn btn-sm btn-rollback btn-toolbar" disabled>
                                <i class="bi bi-x-lg"></i> ROLLBACK
                            </button>
                        </div>

                        <div class="toolbar-divider"></div>

                        <!-- Fetch Count -->
                        <div class="toolbar-group">
                            <label class="toolbar-label">Fetch:</label>
                            <select id="fetch-count" class="dbconsole-select" style="min-width:80px;">
                                <option value="100">100</option>
                                <option value="500">500</option>
                                <option value="1000" selected>1000</option>
                                <option value="5000">5000</option>
                                <option value="10000">10000</option>
                                <option value="all">All</option>
                            </select>
                        </div>

                        <div class="toolbar-divider"></div>

                        <!-- 에디터 테마 -->
                        <div class="toolbar-group">
                            <label class="toolbar-label">테마:</label>
                            <select id="editor-theme" class="dbconsole-select" style="min-width:80px;">
                                <option value="vs-dark" selected>Dark</option>
                                <option value="vs">Light</option>
                                <option value="hc-black">High Contrast</option>
                            </select>
                        </div>

                        <div class="toolbar-divider"></div>

                        <!-- 복호화 모드 -->
                        <div class="toolbar-group">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="chk-decrypt-mode">
                                <label class="form-check-label toolbar-label" for="chk-decrypt-mode" title="활성화시 암호화 데이터에 복호화 버튼 표시. 셀 우클릭으로도 복호화 가능.">복호화</label>
                            </div>
                        </div>
                    </div>

                    <!-- Monaco 에디터 -->
                    <div class="dbconsole-editor-container">
                        <div id="sql-editor"></div>
                        <div class="dbconsole-loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 결과 영역 -->
                <div class="dbconsole-result-area">
                    <div class="dbconsole-result-header">
                        <div class="dbconsole-result-tabs">
                            <button class="dbconsole-result-tab active" data-target="result-grid-container">
                                <i class="bi bi-table"></i> 결과
                            </button>
                            <button class="dbconsole-result-tab" data-target="sql-log">
                                <i class="bi bi-journal-text"></i> SQL Log
                            </button>
                        </div>
                        <div class="dbconsole-result-actions">
                            <span id="result-message" class="small text-muted me-2"></span>
                            <button id="btn-export-csv" class="btn btn-sm btn-outline-secondary" title="CSV 내보내기">CSV</button>
                            <button id="btn-export-md" class="btn btn-sm btn-outline-secondary" title="Markdown 내보내기">MD</button>
                            <button id="btn-export-sql" class="btn btn-sm btn-outline-secondary" title="INSERT SQL 내보내기">SQL</button>
                            <button id="btn-export-json" class="btn btn-sm btn-outline-secondary" title="JSON 내보내기">JSON</button>
                        </div>
                    </div>
                    <div class="dbconsole-result-body">
                        <!-- AG Grid -->
                        <div id="result-grid-container" class="dbconsole-result-content active">
                            <div id="result-grid" class="ag-theme-alpine"></div>
                        </div>
                        <!-- SQL Log -->
                        <div id="sql-log" class="dbconsole-result-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- COMMIT 확인 모달 -->
    <div class="modal fade dbconsole-modal" id="commit-modal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-shield-lock"></i> COMMIT 확인</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted">변경사항을 커밋하려면 비밀번호를 입력하세요.</p>
                    <input type="password" id="commit-password" class="form-control" placeholder="비밀번호" autocomplete="off">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">취소</button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="DbConsole.commit()">COMMIT</button>
                </div>
            </div>
        </div>
    </div>

    <!-- DDL 모달 -->
    <div class="modal fade dbconsole-modal" id="ddl-modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-code-square"></i> DDL</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <pre id="ddl-content" class="ddl-content"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="navigator.clipboard.writeText($('#ddl-content').text()); alert('클립보드에 복사되었습니다.');">
                        <i class="bi bi-clipboard"></i> 복사
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.1.min.js"></script>
    <!-- Bootstrap 5 JS -->
    <script src="${pageContext.request.contextPath}/addon/bootstrap-5.3.2/js/bootstrap.bundle.min.js"></script>
    <!-- AG Grid (Monaco loader 전에 로드해야 AMD 충돌 방지) -->
    <script src="${pageContext.request.contextPath}/addon/ag-grid/ag-grid-community.min.js"></script>
    <!-- Monaco Editor Loader -->
    <script src="${pageContext.request.contextPath}/addon/monaco/loader.js"></script>
    <!-- DB Console JS -->
    <script src="${pageContext.request.contextPath}/js/dbconsole/dbconsole.js"></script>

    <script>
        $(document).ready(function() {
            // DB Console 초기화
            DbConsole.init({
                contextPath: '${pageContext.request.contextPath}',
                sessionId: '${sessionId}',
                datasources: ${datasourcesJson}
            });
        });
    </script>
</body>
</html>
