script.js

window.onload = updateHistoryUI;

function saveKey() {
    const key = document.getElementById('api-key').value;
    localStorage.setItem('openai_key', key);
    alert('API Key saved securely to your browser.');
}

function loadTemplate() {
    document.getElementById('prompt-input').value = document.getElementById('prompt-select').value;
}

function downloadOutput() {
    const text = document.getElementById('output').innerText;
    const blob = new Blob([text], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'automation-result.md';
    a.click();
}

async function runAgent() {
    const outputDiv = document.getElementById('output');
    const btn = document.getElementById('run-btn');
    const input = document.getElementById('prompt-input').value;
    const apiKey = localStorage.getItem('openai_key');
    const promptSelect = document.getElementById('prompt-select');
    const taskType = promptSelect.options[promptSelect.selectedIndex].text;

    if (!apiKey) return alert("Please save your API key first!");

    btn.disabled = true;
    btn.innerText = "Processing...";
    outputDiv.innerHTML = '<div class="animate-pulse">Agent is thinking...</div>';

    try {
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
            body: JSON.stringify({
                model: "gpt-4o",
                messages: [
                    { role: "system", content: "You are an expert business assistant. Provide professional, structured output in markdown." },
                    { role: "user", content: input }
                ]
            })
        });

        const data = await response.json();
        const result = data.choices[0].message.content;
        
        outputDiv.innerHTML = marked.parse(result);
        
        await fetch('YOUR_MAKE_WEBHOOK_URL', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                Timestamp: new Date().toLocaleString(),
                Task_Type: taskType,
                Input_Data: input,
                AI_Output: result
            })
        }).catch(err => console.error("Logging to sheet failed:", err));
        
        let history = JSON.parse(localStorage.getItem('agent_history') || '[]');
        history.unshift(result.substring(0, 50) + "...");
        if (history.length > 5) history.pop();
        localStorage.setItem('agent_history', JSON.stringify(history));
        updateHistoryUI();
        
    } catch (err) {
        outputDiv.innerText = "Error: Check your connection or API key.";
    } finally {
        btn.disabled = false;
        btn.innerText = "Run Automation";
    }
}

function updateHistoryUI() {
    const history = JSON.parse(localStorage.getItem('agent_history') || '[]');
    document.getElementById('history-list').innerHTML = history.map(item => `<li>${item}</li>`).join('');
}