let currentParameters = [];

function listProjects() {
    apiGet('/project/list')
        .then(data => {
            const select = document.getElementById('project-select');
            select.innerHTML = '<option value="">-- Select a project --</option>';
            Object.keys(data).forEach(project => {
                const option = document.createElement('option');
                option.value = project;
                option.text = project;
                select.appendChild(option);
            });
        })
        .catch(err => console.error(err));
}

function loadProjectDetails() {
    const project = document.getElementById('project-select').value;
    if (!project) return;

    apiGet(`/project/${project}/latest`)
        .then(data => {
            const details = document.getElementById('project-details');
            const info = document.getElementById('project-info');
            details.classList.remove('d-none');

            let html = `<p><strong>Version:</strong> ${data.version_number}</p>`;
            html += `<p><strong>Published:</strong> ${data.published ? '✅ Yes' : '❌ No'}</p>`;
            html += `<div><strong>Intents:</strong><ul>`;
            if (Array.isArray(data.intents) && data.intents.length > 0) {
                data.intents.forEach(intent => {
                    html += `<li>${intent.name} 
                    <button class="btn btn-sm btn-primary ml-2" onclick="editIntent('${intent.name}')">Edit</button>
                    <button class="btn btn-sm btn-danger ml-2" onclick="removeIntent('${intent.name}')">–</button>
                    </li>`;
                });
            } else {
                html += `<li>No intents defined.</li>`;
            }
            html += `</ul><button class="btn btn-sm btn-success" onclick="addIntent()">+ Add Intent</button></div>`;
            info.innerHTML = html;

            if (data.published) {
                document.querySelectorAll('#project-info input, #project-info button').forEach(el => {
                    el.disabled = true;
                });
            }
        })
        .catch(err => console.error(err));
}

function addIntent() {
    const project = document.getElementById('project-select').value;
    const intentName = prompt('Enter new intent name:');
    if (!intentName) return;

    apiPost('/project/add_intent', { project_name: project, intent_name: intentName })
        .then(data => {
            showResult('project-result', data);
            loadProjectDetails();
        })
        .catch(err => {
            console.error(err);
            alert('Failed to add intent.');
        });
}

function removeIntent(name) {
    const project = document.getElementById('project-select').value;
    if (!confirm(`Are you sure you want to delete intent '${name}'?`)) return;

    apiPost('/project/delete_intent', { project_name: project, intent_name: name })
        .then(data => {
            showResult('project-result', data);
            loadProjectDetails();
        })
        .catch(err => {
            console.error(err);
            alert('Failed to delete intent.');
        });
}

function editIntent(name) {
    const project = document.getElementById('project-select').value;

    apiGet(`/project/${project}/latest`)
        .then(data => {
            const intent = data.intents.find(i => i.name === name);
            if (!intent) {
                alert('Intent not found.');
                return;
            }

            document.getElementById('intent-project-name').value = project;
            document.getElementById('intent-name').value = intent.name;
            document.getElementById('intent-action').value = intent.action || '';
            document.getElementById('intent-fallback').value = intent.fallback_error_message || '';
            document.getElementById('intent-prompt').value = intent.humanization_prompt || '';
            document.getElementById('intent-examples').value = (intent.examples || []).join(', ');
            currentParameters = intent.parameters || [];
            populateParameterTable(currentParameters);

            $('#intentModal').modal('show');
        })
        .catch(err => console.error(err));
}

function saveIntent() {
    const project = document.getElementById('intent-project-name').value;
    const name = document.getElementById('intent-name').value;
    const action = document.getElementById('intent-action').value;
    const fallback = document.getElementById('intent-fallback').value;
    const prompt = document.getElementById('intent-prompt').value;
    const examples = document.getElementById('intent-examples').value.split(',').map(e => e.trim());

    const intentData = {
        action: action,
        fallback_error_message: fallback,
        humanization_prompt: prompt,
        examples: examples,
        parameters: currentParameters
    };

    apiPost('/project/update_intent', {
        project_name: project,
        intent_name: name,
        intent_data: intentData
    })
    .then(data => {
        showResult('project-result', data);
        $('#intentModal').modal('hide');
        loadProjectDetails();
    })
    .catch(err => {
        console.error(err);
        alert('Failed to save intent.');
    });
}

function saveProject() {
    alert('Save logic will be implemented here.');
}

function publishProject() {
    alert('Publish logic will be implemented here.');
}

function populateParameterTable(parameters) {
    const body = document.getElementById('parameter-body');
    body.innerHTML = '';
    parameters.forEach((param, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><input type="text" class="form-control" value="${param.name || ''}" onchange="updateParam(${index}, 'name', this.value)"></td>
            <td>
                <select class="form-control" onchange="updateParam(${index}, 'type', this.value)">
                    <option value="string" ${param.type === 'string' ? 'selected' : ''}>string</option>
                    <option value="int" ${param.type === 'int' ? 'selected' : ''}>int</option>
                    <option value="float" ${param.type === 'float' ? 'selected' : ''}>float</option>
                </select>
            </td>
            <td><input type="text" class="form-control" value="${param.regex || ''}" onchange="updateParam(${index}, 'regex', this.value)"></td>
            <td><input type="text" class="form-control" value="${param.validation_message || ''}" onchange="updateParam(${index}, 'validation_message', this.value)"></td>
            <td><button class="btn btn-sm btn-danger" onclick="removeParameterRow(${index})">Delete</button></td>
        `;
        body.appendChild(row);
    });
}

function addParameterRow() {
    currentParameters.push({ name: '', type: 'string', regex: '', validation_message: '' });
    populateParameterTable(currentParameters);
}

function removeParameterRow(index) {
    currentParameters.splice(index, 1);
    populateParameterTable(currentParameters);
}

function updateParam(index, key, value) {
    currentParameters[index][key] = value;
}