// frontend/static/js/workdir_config.js

async function getWorkDirConfig() {
    if (!currentProfile?.work_dir) {
        showError('No se ha seleccionado un directorio de trabajo');
        return null;
    }
    
    try {
        return await apiRequest(`/workdir-config/${encodeURIComponent(currentProfile.work_dir)}`);
    } catch (error) {
        showError('Error al cargar la configuración del directorio de trabajo');
        return null;
    }
}

async function getGroupConfig(groupId) {
    if (!currentProfile?.work_dir) {
        showError('No se ha seleccionado un directorio de trabajo');
        return null;
    }
    
    try {
        return await apiRequest(
            `/workdir-config/${encodeURIComponent(currentProfile.work_dir)}/group/${groupId}`
        );
    } catch (error) {
        showError('Error al cargar la configuración del grupo');
        return null;
    }
}

async function updateGroupConfig(groupId, settings) {
    if (!currentProfile?.work_dir) {
        showError('No se ha seleccionado un directorio de trabajo');
        return false;
    }
    
    try {
        await apiRequest(
            `/workdir-config/${encodeURIComponent(currentProfile.work_dir)}/group/${groupId}`,
            {
                method: 'PUT',
                body: JSON.stringify(settings)
            }
        );
        showSuccess('Group configuration updated successfully');
        return true;
    } catch (error) {
        showError('Failed to update group configuration');
        return false;
    }
}

function showConfigEditor(config, schema) {
    const modal = document.createElement('div');
    modal.className = 'modal active';
    
    const formContent = Object.entries(schema).map(([key, field]) => `
        <div class="form-group">
            <label class="block text-sm font-medium text-gray-700">${field.description || key}</label>
            ${getInputByType(key, field, config[key])}
        </div>
    `).join('');

    modal.innerHTML = `
        <div class="modal-content">
            <h2 class="text-xl font-bold mb-4">Work Directory Configuration</h2>
            <form id="configForm" class="space-y-4">
                ${formContent}
                <div class="mt-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeModal(this)" 
                            class="${STYLES.buttonSecondary}">Cancel</button>
                    <button type="submit" 
                            class="${STYLES.button}">Save</button>
                </div>
            </form>
        </div>
    `;
    
    document.body.appendChild(modal);
}

function getInputByType(key, field, value) {
    switch (field.type) {
        case 'select':
            return `
                <select name="${key}" 
                        class="${STYLES.editableInput}">
                    ${field.options.map(opt => `
                        <option value="${opt}" ${value === opt ? 'selected' : ''}>
                            ${opt}
                        </option>
                    `).join('')}
                </select>`;
        case 'boolean':
            return `
                <select name="${key}" 
                        class="${STYLES.editableInput}">
                    <option value="true" ${value ? 'selected' : ''}>Yes</option>
                    <option value="false" ${!value ? 'selected' : ''}>No</option>
                </select>`;
        case 'number':
            return `
                <input type="number" name="${key}" 
                       value="${value || field.default || ''}"
                       class="${STYLES.editableInput}">`;
        default:
            return `
                <input type="text" name="${key}" 
                       value="${value || field.default || ''}"
                       class="${STYLES.editableInput}">`;
    }
}

// static/js/workdir_config.js
async function showWorkDirConfig() {
    if (!currentProfile?.work_dir) {
        showError('No se ha seleccionado un directorio de trabajo');
        return;
    }
    
    try {
        const config = await getWorkDirConfig();
        
        const content = `
            <div class="space-y-4">
                <div>
                    <h4 class="text-sm font-medium text-gray-900">Directory</h4>
                    <p class="mt-1 text-sm text-gray-500">${currentProfile.work_dir}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-900">Version</h4>
                    <p class="mt-1 text-sm text-gray-500">${config.version}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-900">Group Configurations</h4>
                    <div class="mt-2 space-y-3">
                        ${Object.entries(config.group_settings || {}).map(([groupId, settings]) => `
                            <div class="rounded-md bg-gray-50 p-3">
                                <h5 class="text-sm font-medium text-gray-900">${groupId}</h5>
                                <pre class="mt-2 text-xs text-gray-500">${JSON.stringify(settings, null, 2)}</pre>
                            </div>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;
        
        createModal('Work Directory Configuration', content);
    } catch (error) {
        showError('Error al cargar la configuración del directorio de trabajo');
    }
}

function closeModal(button) {
    const modal = button.closest('.modal');
    if (modal) {
        modal.remove();
    }
}