document.addEventListener('DOMContentLoaded', function() {
    loadProjectDetails();
    setupEventListeners();
});

let CURRENT_PROJECT = null;
let CURRENT_VERSION = null;

function setupEventListeners() {
    document.getElementById('saveChangesBtn').addEventListener('click', saveProject);
    document.getElementById('publishVersionBtn').addEventListener('click', publishProject);
    document.getElementById('addIntentBtn').addEventListener('click', showAddIntentModal);
    document.getElementById('newVersionBtn').addEventListener('click', showNewVersionModal);
    document.getElementById('newProjectBtn').addEventListener('click', showNewProjectModal);
}

function loadProjectDetails() {
    fetch('/project/details')
        .then(response => response.json())
        .then(data => {
            CURRENT_PROJECT = data.name;
            CURRENT_VERSION = data.version;
            renderProjectDetails(data);
        })
        .catch(error => {
            console.error('Error loading project details:', error);
            alert('Failed to load project details.');
        });
}

function renderProjectDetails(data) {
    const container = document.getElementById('projectDetails');
    container.innerHTML = '';

    const published = data.published ? '✅ Yes' : '❌ No';
    container.innerHTML += `<p><strong>Project:</strong> ${data.name}</p>`;
    container.innerHTML += `<p><strong>Version:</strong> ${data.version}</p>`;
    container.innerHTML += `<p><strong>Published:</strong> ${published}</p>`;

    const list = document.createElement('ul');
    data.intents.forEach(intent => {
        const li = document.createElement('li');
        li.style.marginBottom = '8px';
        li.innerHTML = `${intent.name} 
            <button class="btn btn-sm btn-primary" onclick="editIntent('${intent.id}')">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="removeIntent('${intent.id}')">-</button>`;
        list.appendChild(li);
    });
    container.appendChild(list);

    document.getElementById('publishVersionBtn').disabled = data.published;
}

function saveProject() {
    fetch('/project/update', { method: 'POST' })
        .then(response => response.json())
        .then(() => alert('Project saved!'))
        .catch(() => alert('Failed to save project.'));
}

function publishProject() {
    fetch('/project/publish', { method: 'POST' })
        .then(response => response.json())
        .then(() => alert('Project published!'))
        .catch(() => alert('Failed to publish project.'));
}

function showNewProjectModal() {
    const name = prompt('Enter new project name:');
    if (name) {
        fetch('/project/new', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name })
        })
        .then(r => r.json())
        .then(() => alert('Project created!'))
        .catch(() => alert('Failed to create project.'));
    }
}

function showNewVersionModal() {
    fetch('/project/versions')
        .then(response => response.json())
        .then(versions => {
            const select = document.getElementById('baseVersionSelect');
            select.innerHTML = '';
            versions.forEach(v => {
                const option = document.createElement('option');
                option.value = v.no;
                option.textContent = `Version ${v.no}`;
                select.appendChild(option);
            });
            $('#newVersionModal').modal('show');
        })
        .catch(() => alert('Failed to load versions.'));
}

function createNewVersion() {
    const baseVersionId = document.getElementById('baseVersionSelect').value;
    fetch('/project/new-version', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            project_name: CURRENT_PROJECT,
            base_version_no: parseInt(baseVersionId)
        })
    })
    .then(r => r.json())
    .then(() => {
        alert('New version created!');
        loadProjectDetails();
    })
    .catch(() => alert('Failed to create new version.'));
}

function loadSparkProjects() {
    fetch('/spark/projects')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('⚠ Spark service unreachable.');
                return;
            }
            const list = document.getElementById('sparkProjectList');
            list.innerHTML = '';
            data.projects.forEach(p => {
                const li = document.createElement('li');
                li.textContent = p.name;
                list.appendChild(li);
            });
        })
        .catch(() => alert('⚠ Spark service unreachable.'));
}

function showAddIntentModal() {
    $('#addIntentModal').modal('show');
}

function addHeaderRow() {
    const container = document.getElementById('headerContainer');
    const row = document.createElement('div');
    row.className = 'header-row mb-2';
    row.innerHTML = `
        <input type="text" class="form-control d-inline-block header-key" placeholder="Key" style="width: 40%">
        <input type="text" class="form-control d-inline-block header-value" placeholder="Value" style="width: 40%">
        <button class="btn btn-danger btn-sm" onclick="this.parentElement.remove()">-</button>`;
    container.appendChild(row);
}

function saveAPI() {
    const name = document.getElementById('apiNameInput').value;
    const url = document.getElementById('apiUrlInput').value;
    const method = document.getElementById('apiMethodSelect').value;
    const auth = document.getElementById('apiAuthInput').value;
    const headers = [];

    document.querySelectorAll('.header-row').forEach(row => {
        const key = row.querySelector('.header-key').value;
        const value = row.querySelector('.header-value').value;
        if (key && value) {
            headers.push({ key, value });
        }
    });

    const apiData = { name, url, method, auth, headers };

    fetch('/project/update-api', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            project_name: CURRENT_PROJECT,
            version_no: CURRENT_VERSION,
            api_data: apiData
        })
    })
    .then(r => r.json())
    .then(() => alert('API updated!'))
    .catch(() => alert('Failed to update API.'));
}

function login() {
    const username = document.getElementById('usernameInput').value;
    const password = document.getElementById('passwordInput').value;

    fetch('/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
    })
    .then(response => {
        if (response.ok) {
            document.getElementById('loginPanel').style.display = 'none';
            document.getElementById('mainPanel').style.display = 'block';
            loadProjectDetails();
        } else {
            document.getElementById('loginError').style.display = 'block';
        }
    })
    .catch(() => {
        document.getElementById('loginError').style.display = 'block';
    });
}