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

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

    document.getElementById('method').value = 'GET'; // 기본값 설정
    document.getElementById('requestEditor').parentElement.style.display = 'none';
});

const loadApiList = async () => {
    const apiUris = await endPointService.getEndpoints();
    const apiListElement = document.getElementById('apiList');

    apiUris.forEach(api => {
        const listItem = createApiListItem(api);
        apiListElement.appendChild(listItem);
    });
};

const createApiListItem = (api) => {
    const listItem = document.createElement('li');
    listItem.className = 'list-group-item';
    listItem.style.cursor = 'pointer';
    listItem.onclick = () => handleApiClick(api);
    listItem.onmouseover = () => {
        listItem.style.backgroundColor = '#f0f0f0';
    };
    listItem.onmouseout = () => {
        listItem.style.backgroundColor = '';
    };
    
    const apiInfo = `
        <strong><i class="bi bi-link-45deg"></i> URI:</strong> [${api.httpMethods.join(', ')}] ${api.uri}
    `;
    listItem.innerHTML = apiInfo;
    return listItem;
};

const handleApiClick = (api) => {
    // 요청 본문 에디터 및 응답 에디터 초기화
    requestEditor.setValue(''); // 요청 본문 에디터 초기화
    responseEditor.setValue(''); // 응답 에디터 초기화

    // 상태 코드 및 응답 시간 초기화
    document.getElementById('statusCode').textContent = ''; // 상태 코드 초기화
    document.getElementById('responseTime').textContent = ''; // 응답 시간 초기화
    
    // HTTP 메소드 및 URL 설정
    document.getElementById('method').value = api.httpMethods[0]; // 첫 번째 HTTP 메소드 선택

    // 요청 본문 에디터 표시/숨김 처리
    const requestEditorContainer = document.getElementById('requestEditor').parentElement;
    requestEditorContainer.style.display = api.httpMethods[0] === 'GET' ? 'none' : 'block';
    
    // 요청 본문 에디터에 파라미터 필드 설정
    const requestBody = createRequestBody(api.parameters);

    // 쿼리 문자열 생성
    const queryString = api.parameters
        .filter(param => param.sourceType === 'QUERY')
        .map(param => {
            if (param.typeDetails?.fields) {
                return param.typeDetails.fields.map(field => `${field.name}=`).join('&'); // fields가 존재할 경우
            } else {
                return `${param.paramName}=`; // fields가 null일 경우 paramName 사용
            }
        })
        .join('&');
    
    // URL 설정
    document.getElementById('url').value = queryString ? `${api.uri}?${queryString}` : api.uri;

    requestEditor.setValue(JSON.stringify(requestBody, null, 2)); // JSON 포맷으로 설정
};

const createRequestBody = (parameters) => {
    let requestBody = {}; // 일반 객체로 초기화
    if (parameters) {
        parameters.forEach(param => {
            if (param.typeDetails?.fields) {
                if (param.typeDetails.collection) {
                    // collection이 true일 경우 배열 생성
                    const item = {};
                    param.typeDetails.fields.forEach(field => {
                        item[field.name] = ''; // 필드 이름을 키로 하고 빈 문자열을 값으로 설정
                    });
                    requestBody = [item]; // 요청 본문에 배열 추가
                } else {
                    // collection이 false일 경우 일반 객체 생성
                    const item = {};
                    param.typeDetails.fields.forEach(field => {
                        item[field.name] = ''; // 필드 이름을 키로 하고 빈 문자열을 값으로 설정
                    });
                    requestBody = item; // 요청 본문에 객체 추가
                }
            }
        });
    }
    return requestBody;
};

// 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
    });
};

document.getElementById('apiForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const method = document.getElementById('method').value;
    const url = document.getElementById('url').value;
    if (url == '') return;
    
    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: method !== 'GET' ? JSON.stringify(requestData) : undefined
        });
        
        // 종료 시간 기록 및 소요 시간 계산
        const endTime = performance.now();
        const duration = Math.round(endTime - startTime);
        
        // 상태 코드 표시
        const statusCode = document.getElementById('statusCode');
        statusCode.textContent = `Status: ${response.status} ${response.statusText}`;
        statusCode.className = response.status >= 200 && response.status < 300 ? 'badge bg-success' : 'badge bg-danger';
        
        // 응답 시간 표시
        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';
    }
});