document.addEventListener('DOMContentLoaded', function() {

    // CSS 스타일을 추가합니다
    const style = document.createElement('style');
    style.textContent = `
    .history-query {
        white-space: pre-wrap;
    }`;
    document.head.appendChild(style);

    const queryTypeSelect = document.getElementById('queryType');
    const queryInput = document.getElementById('queryInput');
    const executeButton = document.getElementById('executeButton');
    const commitButton = document.getElementById('commitButton');
    const rollbackButton = document.getElementById('rollbackButton');
    const transactionStatus = document.getElementById('transactionStatus');
    const resultInfo = document.getElementById('resultInfo');
    const resultTable = document.getElementById('resultTable');
    const queryHistory = document.getElementById('queryHistory');
    const detectedQueryType = document.getElementById('detectedQueryType');

    let currentTransactionId = null;
    let queryHistoryList = [];

    // 트랜잭션 상태 업데이트
    function updateTransactionStatus() {
        if (currentTransactionId) {
            transactionStatus.textContent = `트랜잭션: 활성 (ID: ${currentTransactionId.substring(0, 8)}...)`;
            commitButton.disabled = false;
            rollbackButton.disabled = false;
        } else {
            transactionStatus.textContent = '트랜잭션: 없음';
            commitButton.disabled = true;
            rollbackButton.disabled = true;
        }
    }

    // queryInput에서 Ctrl+Enter 키 조합 감지하여 실행 버튼 이벤트 실행
    queryInput.addEventListener('keydown', function(event) {
        // Ctrl+Enter 키 조합 감지
        if (event.ctrlKey && event.key === 'Enter') {
            event.preventDefault(); // 기본 동작 방지
            executeButton.click(); // 실행 버튼 클릭 이벤트 실행
        }
    });

    // 텍스트 입력 시 감지된 쿼리 타입 업데이트
    queryInput.addEventListener('input', updateDetectedQueryType);

    // 커서 이동 시 감지된 쿼리 타입 업데이트
    queryInput.addEventListener('keyup', updateDetectedQueryType);
    queryInput.addEventListener('click', updateDetectedQueryType);
    queryInput.addEventListener('focus', updateDetectedQueryType);

    // 초기 로드 시 감지된 쿼리 타입 업데이트
    updateDetectedQueryType();

    // 커서 위치에서 현재 쿼리 추출 함수
    function getCurrentQueryAtCursor() {
        const fullText = queryInput.value;
        const cursorPosition = queryInput.selectionStart;

        // 세미콜론으로 쿼리들을 분리
        const queries = fullText.split(';');
        let currentPosition = 0;

        // 커서가 위치한 쿼리 찾기
        for (let i = 0; i < queries.length; i++) {
            const queryLength = queries[i].length;
            const queryEnd = currentPosition + queryLength + (i < queries.length - 1 ? 1 : 0); // 세미콜론 포함

            if (cursorPosition <= queryEnd) {
                return queries[i].trim();
            }

            currentPosition = queryEnd;
        }

        // 마지막 쿼리 반환 (커서가 맨 끝에 있는 경우)
        return queries[queries.length - 1].trim();
    }

    // 쿼리 타입 자동 감지 함수
    function detectQueryType(query) {
        const upperQuery = query.toUpperCase().trim();

        if (upperQuery.startsWith('SELECT')) {
            return 'SELECT';
        } else if (upperQuery.startsWith('INSERT')) {
            return 'INSERT';
        } else if (upperQuery.startsWith('UPDATE')) {
            return 'UPDATE';
        } else if (upperQuery.startsWith('DELETE')) {
            return 'DELETE';
        } else if (upperQuery.startsWith('COMMIT')) {
            return 'COMMIT';
        } else if (upperQuery.startsWith('ROLLBACK')) {
            return 'ROLLBACK';
        } else {
            // 기본값으로 SELECT 반환
            return 'SELECT';
        }
    }

    // 감지된 쿼리 타입을 화면에 업데이트하는 함수
    function updateDetectedQueryType() {
        const currentQuery = getCurrentQueryAtCursor();
        if (currentQuery && currentQuery.trim()) {
            const detectedType = detectQueryType(currentQuery);
            detectedQueryType.textContent = detectedType;
            detectedQueryType.className = 'detected-query-type ' + detectedType.toLowerCase();
        } else {
            detectedQueryType.textContent = '-';
            detectedQueryType.className = 'detected-query-type';
        }
    }

    // 쿼리 실행
    executeButton.addEventListener('click', function() {
        const fullQuery = queryInput.value.trim();

        if (!fullQuery) {
            showError('쿼리를 입력해주세요.');
            return;
        }

        // 커서 위치의 현재 쿼리 추출
        const currentQuery = getCurrentQueryAtCursor();

        if (!currentQuery) {
            showError('실행할 쿼리가 없습니다.');
            return;
        }

        // 쿼리 타입 자동 감지
        const detectedQueryType = detectQueryType(currentQuery);

        // 쿼리 타입 선택 박스 업데이트 (사용자에게 감지된 타입 표시)
        queryTypeSelect.value = detectedQueryType;

        executeQuery(currentQuery, detectedQueryType);
    });

    // 커밋 버튼
    commitButton.addEventListener('click', function() {
        if (!currentTransactionId) {
            showError('활성화된 트랜잭션이 없습니다.');
            return;
        }

        executeQuery('COMMIT', 'COMMIT');
    });

    // 롤백 버튼
    rollbackButton.addEventListener('click', function() {
        if (!currentTransactionId) {
            showError('활성화된 트랜잭션이 없습니다.');
            return;
        }

        executeQuery('ROLLBACK', 'ROLLBACK');
    });

    // 쿼리 히스토리 클릭 이벤트
    queryHistory.addEventListener('click', function(event) {
        // 클릭된 요소 또는 부모 요소 중에서 history-item 클래스를 가진 요소 찾기
        let targetElement = event.target;
        while (targetElement && targetElement !== queryHistory) {
            if (targetElement.classList.contains('history-item')) {
                const index = targetElement.dataset.index;
                if (index && queryHistoryList[index]) {
                    queryInput.value = queryHistoryList[index].query;
                    queryTypeSelect.value = queryHistoryList[index].queryType;
                }
                break;
            }
            targetElement = targetElement.parentElement;
        }
    });

    function sanitizeQuery(query) {
        // 쿼리 문자열 정리 - 줄바꿈 문자를 공백으로 처리
        return query
            .replace(/\t/g, ' ')     // 탭 문자를 공백으로
            .replace(/--(.*)$/gm, '') // 주석 제거
            .trim();
    }

    function executeQuery(query, queryType) {
        const sanQuery = sanitizeQuery(query);
        const changeQuery = sanQuery;

        // 디버깅을 위한 로그 추가
        console.log('전송 데이터:', JSON.stringify({
            query: `${changeQuery}`,
            isBase64Encoded: true,
            queryType: queryType,
            transactionId: currentTransactionId
        }, null, 2));

        resultInfo.innerHTML = '쿼리 실행 중...';
        resultInfo.className = '';
        resultTable.innerHTML = '';

        const encoder = new TextEncoder();
        const base64Query = btoa(String.fromCharCode(...encoder.encode(query)));

        // 요청 데이터 준비
        const requestData = {
            //query: `${changeQuery}`,
            query: base64Query,
            isBase64Encoded: true,
            queryType: queryType,
            transactionId: currentTransactionId
        };

        // COMMIT/ROLLBACK은 특별 처리
        if (queryType === 'COMMIT' || queryType === 'ROLLBACK') {
            $.ajax({
                url: queryExecUrl,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(requestData),
                success: function(data) {
                    if (data.success) {
                        showSuccess(data);
                        // 트랜잭션 종료
                        currentTransactionId = null;
                        updateTransactionStatus();

                        // 히스토리에 추가
                        addToHistory({
                            query: query,
                            queryType: queryType,
                            timestamp: new Date().toISOString()
                        });
                    } else {
                        showError(data.message);
                    }
                },
                error: function(xhr, status, error) {
                    // 오류 응답 상세 정보 표시
                    let errorMsg = '서버 통신 오류: ' + error;
                    if (xhr.responseText) {
                        errorMsg += ' - ' + xhr.responseText;
                    }
                    showError(errorMsg);
                    console.error('AJAX 오류:', status, error, xhr.responseText);
                }
            });
            return;
        }

        // 일반 쿼리 실행
        $.ajax({
            url: queryExecUrl,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(requestData),
            success: function(data) {
                if (data.success) {
                    // 트랜잭션 ID 저장
                    if (data.transactionId) {
                        currentTransactionId = data.transactionId;
                        updateTransactionStatus();
                    }

                    showSuccess(data);

                    // 히스토리에 추가
                    addToHistory({
                        query: query,
                        queryType: queryType,
                        timestamp: new Date().toISOString()
                    });
                } else {
                    showError(data.message);
                }
            },
            error: function(xhr, status, error) {
                // 오류 응답 상세 정보 표시
                let errorMsg = '서버 통신 오류: ' + error;
                try {
                    // 응답이 있는 경우 내용 확인
                    if (xhr.responseText) {
                        const responseText = xhr.responseText.substring(0, 200);  // 응답 텍스트 일부만 표시
                        errorMsg += ' - ' + responseText;

                        // HTML 응답인지 확인 (일반적인 Unexpected token < 오류 원인)
                        if (responseText.trim().startsWith('<')) {
                            errorMsg += ' (HTML 응답이 반환되었습니다. 서버 오류일 수 있습니다.)';
                        }
                    }
                    console.error('AJAX 오류:', status, error, xhr.responseText);
                } catch (e) {
                    errorMsg += ' (응답 처리 중 오류 발생: ' + e.message + ')';
                }
                showError(errorMsg);
            }
        });
    }

    function showSuccess(data) {
        if (data.queryType === 'SELECT') {
            resultInfo.innerHTML = `쿼리가 성공적으로 실행되었습니다. ${data.rowsAffected}개의 결과가 반환되었습니다.`;
            if(data.message != null ){
                resultInfo.innerHTML += "<br/>"+data.message;
            }
            resultInfo.className = 'success';

            if (Array.isArray(data.result) && data.result.length > 0) {
                createTable(data.result);
            } else {
                resultTable.innerHTML = '<p>반환된 결과가 없습니다.</p>';
            }
        } else if (data.queryType === 'COMMIT') {
            resultInfo.innerHTML = '트랜잭션이 성공적으로 커밋되었습니다.';
            resultInfo.className = 'success';
        } else if (data.queryType === 'ROLLBACK') {
            resultInfo.innerHTML = '트랜잭션이 롤백되었습니다.';
            resultInfo.className = 'success';
        } else {
            resultInfo.innerHTML = `쿼리가 성공적으로 실행되었습니다. ${data.rowsAffected}개의 행이 영향을 받았습니다. 변경사항을 저장하려면 커밋을 실행하세요.`;
            resultInfo.className = 'success';
        }
    }

    function showError(message) {
        resultInfo.innerHTML = '오류: ' + message;
        resultInfo.className = 'error';
        resultTable.innerHTML = '';
    }

    function createTable(data) {
        if (!data || !data.length) return;

        resultTable.innerHTML = '';

        // 테이블 컨트롤 영역 생성
        const tableControls = document.createElement('div');
        tableControls.className = 'table-controls';

        // 복사 버튼 생성
        const copyButton = document.createElement('button');
        copyButton.className = 'copy-button';
        copyButton.textContent = '테이블 내용 복사';

        // 복사 상태 표시 요소
        const copyStatus = document.createElement('span');
        copyStatus.className = 'copy-status';
        copyStatus.textContent = '복사 완료!';

        // 테이블 컨트롤에 버튼 추가
        tableControls.appendChild(copyButton);
        tableControls.appendChild(copyStatus);

        // 상단 스크롤바용 컨테이너
        const topScrollbar = document.createElement('div');
        topScrollbar.className = 'top-scrollbar';
        const topScrollbarChild = document.createElement('div');
        topScrollbarChild.className = 'top-scrollbar-child';
        topScrollbar.appendChild(topScrollbarChild);

        // 테이블 컨테이너 생성
        const tableContainer = document.createElement('div');
        tableContainer.className = 'table-container';

        const table = document.createElement('table');
        table.className = 'result-table';
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        // 테이블 헤더 생성
        const headerRow = document.createElement('tr');
        Object.keys(data[0]).forEach(key => {
            const th = document.createElement('th');
            th.textContent = key;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);

        // 테이블 본문 생성
        data.forEach(row => {
            const tr = document.createElement('tr');
            Object.values(row).forEach(value => {
                const td = document.createElement('td');
                td.textContent = value !== null ? value : 'NULL';
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });

        table.appendChild(thead);
        table.appendChild(tbody);

        // 테이블을 컨테이너에 추가
        tableContainer.appendChild(table);

        // 결과 영역에 컨트롤, 상단 스크롤바와 테이블 컨테이너 추가
        resultTable.appendChild(tableControls);
        resultTable.appendChild(topScrollbar);
        resultTable.appendChild(tableContainer);

        // 상단 스크롤바 너비 설정
        topScrollbarChild.style.width = table.offsetWidth + 'px';

        // 스크롤 이벤트 연동
        topScrollbar.addEventListener('scroll', function() {
            tableContainer.scrollLeft = topScrollbar.scrollLeft;
        });

        tableContainer.addEventListener('scroll', function() {
            topScrollbar.scrollLeft = tableContainer.scrollLeft;
        });

        // 복사 버튼 클릭 이벤트
        copyButton.addEventListener('click', function() {
            // 테이블 데이터를 CSV 형식으로 변환
            let csvContent = '';

            // 헤더 추가
            const headers = Object.keys(data[0]);
            csvContent += headers.join('\t') + '\n';

            // 데이터 행 추가
            data.forEach(row => {
                const rowValues = Object.values(row).map(value =>
                    value !== null ? value : 'NULL'
                );
                csvContent += rowValues.join('\t') + '\n';
            });

            // 클립보드에 복사
            navigator.clipboard.writeText(csvContent)
                .then(() => {
                    // 성공 시 메시지 표시
                    copyStatus.classList.add('visible');
                    setTimeout(() => {
                        copyStatus.classList.remove('visible');
                    }, 2000);
                })
                .catch(err => {
                    console.error('클립보드 복사 실패:', err);
                    alert('클립보드 복사에 실패했습니다.');
                });
        });
    }



    function addToHistory(historyItem) {
        // 최근 쿼리가 맨 위로 오도록 추가
        queryHistoryList.unshift(historyItem);

        // 최대 20개까지만 유지
        if (queryHistoryList.length > 20) {
            queryHistoryList.pop();
        }

        renderHistory();
    }

    function renderHistory() {
        queryHistory.innerHTML = '';
        queryHistoryList.forEach((item, index) => {
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';
            historyItem.dataset.index = index;

            const timestamp = new Date(item.timestamp).toLocaleString();
            historyItem.innerHTML = `
                <span class="history-time">[${timestamp}]</span>
                <span class="history-type">${item.queryType}</span>
                <span class="history-query">${item.query}</span>
            `;

            queryHistory.appendChild(historyItem);
        });
    }
});
