import infoService from '../../apis/endpoint-api.js';

document.addEventListener('DOMContentLoaded', () => {
    loadApiList();
    initMonaco();
});

// API 목록 로드 함수
const loadApiList = async () => {
    const apiUris = await infoService.getEndpoints();
    const apiListElement = document.getElementById('apiList');

    apiUris.forEach(api => {
        const listItem = document.createElement('li');
        listItem.className = 'list-group-item';
        const apiInfo = `
            <strong>URI:</strong> ${api.uri} <br>
            <strong>HTTP 메소드:</strong> ${api.httpMethods.join(', ')} <br>
            <strong>컨트롤러:</strong> ${api.controllerName} <br>
            <strong>메소드:</strong> ${api.methodName}
        `;
        listItem.innerHTML = apiInfo;
        apiListElement.appendChild(listItem);
    });
};

// Monaco Editor 초기화
let headerEditor, requestEditor, responseEditor;
const initMonaco = () => {
    // 헤더 에디터 초기화
    headerEditor = monaco.editor.create(document.getElementById('headerEditor'), {
        value: JSON.stringify({
            'Content-Type': 'application/json'
        }, null, 2),
        language: 'json',
        theme: 'vs-light',
        minimap: { enabled: false },
        automaticLayout: true
    });

    // 요청 본문 에디터 초기화
    requestEditor = monaco.editor.create(document.getElementById('requestEditor'), {
        value: JSON.stringify({
            "example": "request body here"
        }, null, 2),
        language: 'json',
        theme: 'vs-light',
        minimap: { enabled: false },
        automaticLayout: true
    });

    // 응답 결과 에디터 초기화
    responseEditor = monaco.editor.create(document.getElementById('responseEditor'), {
        value: '',
        language: 'json',
        theme: 'vs-light',
        minimap: { enabled: false },
        readOnly: true,
        automaticLayout: true
    });
};

// API 요청 폼 제출 처리
document.getElementById('apiForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const method = document.getElementById('method').value;
    const url = document.getElementById('url').value;
    
    try {
        // 헤더 파싱
        const customHeaders = JSON.parse(headerEditor.getValue());
        
        // 요청 본문 파싱
        let requestData = null;
        if (method !== 'GET') {
            try {
                requestData = JSON.parse(requestEditor.getValue());
            } catch (e) {
                alert('요청 본문 JSON 형식이 올바르지 않습니다.');
                return;
            }
        }
        
        // 시작 시간 기록
        const startTime = performance.now();

        // API 요청 실행
        const response = await fetch(url, {
            method: method,
            headers: customHeaders,
            body: requestData
        });
        
        // 종료 시간 기록 및 소요 시간 계산
        const endTime = performance.now();
        const duration = Math.round(endTime - startTime);
        
        // 상태 코드 표시
        const statusCode = document.getElementById('statusCode');
        statusCode.textContent = `Status: ${response.status} ${response.statusText}`;
        statusCode.className = 'badge bg-success';
        
        // 응답 시간 표시
        document.getElementById('responseTime').textContent = `${duration}ms`;
        
        // 응답 결과 처리
        const responseData = await response.text();
        try {
            // JSON 응답인 경우 포맷팅
            const formattedResponse = JSON.parse(responseData);
            responseEditor.setValue(JSON.stringify(formattedResponse, null, 2));
        } catch {
            // 일반 텍스트 응답인 경우
            responseEditor.setValue(responseData);
        }
        
    } catch (error) {
        // 에러 처리
        document.getElementById('statusCode').textContent = `Error: ${error.response?.status || 'Network Error'}`;
        document.getElementById('statusCode').className = 'badge bg-danger';
        document.getElementById('responseTime').textContent = '-';
        
        const errorResponse = error.response?.data || error.message;
        responseEditor.setValue(
            typeof errorResponse === 'object'
                ? JSON.stringify(errorResponse, null, 2)
                : String(errorResponse)
        );
    }
});

// HTTP 메소드 변경 시 요청 본문 에디터 표시/숨김 처리
document.getElementById('method').addEventListener('change', function(e) {
    const requestEditorContainer = document.getElementById('requestEditor').parentElement;
    if (e.target.value === 'GET') {
        requestEditorContainer.style.display = 'none';
    } else {
        requestEditorContainer.style.display = 'block';
    }
});

// 툴팁 초기화
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});