# frontend/static/js/main.js
// Global state
let currentProfile = null;

// Initialize when page loads
document.addEventListener('DOMContentLoaded', async () => {
    await loadProfiles();
    updateWorkDirDisplay();
});

// API functions
async function apiRequest(endpoint, options = {}) {
    try {
        const response = await fetch(`/api${endpoint}`, {
            ...options,
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            }
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'API request failed');
        }
        
        return await response.json();
    } catch (error) {
        console.error('API Error:', error);
        showError(error.message);
        throw error;
    }
}

// Profile functions
async function loadProfiles() {
    try {
        const profiles = await apiRequest('/profiles');
        updateProfileSelector(profiles);
        
        // Select first profile if none selected
        if (!currentProfile) {
            const defaultProfile = profiles.find(p => p.id === 'default') || profiles[0];
            if (defaultProfile) {
                await selectProfile(defaultProfile.id);
            }
        }
    } catch (error) {
        showError('Failed to load profiles');
    }
}

function updateProfileSelector(profiles) {
    const select = document.getElementById('profileSelect');
    select.innerHTML = profiles.map(profile => `
        <option value="${profile.id}" ${profile.id === currentProfile?.id ? 'selected' : ''}>
            ${profile.name}
        </option>
    `).join('');
}

async function selectProfile(profileId) {
    try {
        currentProfile = await apiRequest(`/profiles/${profileId}`);
        updateWorkDirDisplay();
    } catch (error) {
        showError('Failed to load profile');
    }
}

async function changeProfile() {
    const select = document.getElementById('profileSelect');
    await selectProfile(select.value);
}

// Work directory functions
function updateWorkDirDisplay() {
    const input = document.getElementById('workDirPath');
    input.value = currentProfile?.work_dir || '';
}

async function selectWorkDir() {
    try {
        const response = await apiRequest('/select-directory');
        if (response.path) {
            await apiRequest(`/profiles/${currentProfile.id}`, {
                method: 'PUT',
                body: JSON.stringify({
                    ...currentProfile,
                    work_dir: response.path
                })
            });
            await selectProfile(currentProfile.id);
            showSuccess('Work directory updated successfully');
        }
    } catch (error) {
        showError('Failed to update work directory');
    }
}

// Output functions
function showError(message) {
    const output = document.getElementById('outputArea');
    output.innerHTML += `\nError: ${message}`;
    output.scrollTop = output.scrollHeight;
}

function showSuccess(message) {
    const output = document.getElementById('outputArea');
    output.innerHTML += `\nSuccess: ${message}`;
    output.scrollTop = output.scrollHeight;
}

function clearOutput() {
    const output = document.getElementById('outputArea');
    output.innerHTML = '';
}