function listApis() {
    apiGet('/api/list')
        .then(data => {
            const body = document.getElementById('api-body');
            body.innerHTML = '';
            const keys = Object.keys(data);
            if (keys.length === 0) {
                const row = document.createElement('tr');
                row.innerHTML = `<td colspan="4" class="text-danger">No APIs defined.</td>`;
                body.appendChild(row);
                return;
            }

            keys.forEach(apiName => {
                const api = data[apiName];
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${apiName}</td>
                    <td>${api.url}</td>
                    <td>${api.method}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="editApi('${apiName}')">Edit</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteApi('${apiName}')">Delete</button>
                    </td>
                `;
                body.appendChild(row);
            });
        })
        .catch(err => {
            console.error(err);
            showResult('api-result', { detail: 'Failed to load API list.' });
        });
}

function addApi() {
    const apiName = prompt('Enter new API name:');
    if (!apiName) return;

    const url = prompt('Enter API URL:');
    const method = prompt('Enter HTTP method (GET, POST, etc.):');

    if (!url || !method) {
        alert('URL and method are required.');
        return;
    }

    const apiData = {
        url: url,
        method: method,
        headers: [],
        body: {},
        timeout: 5,
        retry_count: 0
    };

    apiPost('/api/add', { api_name: apiName, api_data: apiData })
        .then(data => {
            showResult('api-result', data);
            listApis();
        })
        .catch(err => {
            console.error(err);
            showResult('api-result', { detail: 'Failed to add API.' });
        });
}

function editApi(apiName) {
    const url = prompt('Enter new API URL:');
    const method = prompt('Enter new HTTP method:');

    if (!url || !method) {
        alert('URL and method are required.');
        return;
    }

    const apiData = {
        url: url,
        method: method,
        headers: [],
        body: {},
        timeout: 5,
        retry_count: 0
    };

    apiPost('/api/update', { api_name: apiName, api_data: apiData })
        .then(data => {
            showResult('api-result', data);
            listApis();
        })
        .catch(err => {
            console.error(err);
            showResult('api-result', { detail: 'Failed to update API.' });
        });
}

function deleteApi(apiName) {
    if (!confirm(`Are you sure you want to delete API '${apiName}'?`)) return;

    apiPost('/api/delete', { api_name: apiName })
        .then(data => {
            showResult('api-result', data);
            listApis();
        })
        .catch(err => {
            console.error(err);
            if (err.detail) {
                alert(`❗ ${err.detail}`);
            }
            showResult('api-result', { detail: 'Failed to delete API.' });
        });
}