// ---------------------------------------------------------
// World Title: "VibeMaker — The Conversational Coder"
// Author: You
// Description: 
//   Build JS programs by typing English. The app remembers 
//   your conversation and generates runnable code on-screen.
//   You can run, edit, or evolve your vibe-coded creations.
// ---------------------------------------------------------

// ---- Config ----
AB.world.newWorld({
    name: "VibeMaker — The Conversational Coder",
    icon: "💫",
    sizeX: 1200,
    sizeY: 800,
    color: "#111",
    groundY: 0,
    intro: "Type English to make programs! ‘Draw bouncing balls’, ‘Make a particle effect’, ‘Add a score counter’, etc."
});

// ---- Global Vars ----
let chatHistory = [];
let currentCode = "";
let codeDisplay, textInput, runButton, saveButton, restoreButton, debugButton, outputFrame;

// ---- Setup UI ----
AB.newDiv("vibeUI", 10, 10, 1180, 780, { color: "#222", overflow: "auto", padding: "20px", borderRadius: "10px" });

$("#vibeUI").html(`
  <h2 style='color:white;'>💫 VibeMaker — The Conversational Coder</h2>
  <p style='color:#aaa;'>Describe what you want in English. The AI will create or edit JavaScript code that runs here.</p>
  <textarea id='vibeInput' rows='3' style='width:100%;'></textarea><br>
  <button id='vibeSend'>Generate Code</button>
  <button id='vibeRun'>Run Code</button>
  <button id='vibeSave'>💾 Save</button>
  <button id='vibeRestore'>🔁 Restore</button>
  <button id='vibeDebug'>🧠 Debug Mode</button>
  <div id='vibeOutput' style='margin-top:20px; background:#111; padding:10px; color:#0f0; min-height:200px; font-family:monospace;'></div>
  <iframe id='vibeFrame' style='width:100%; height:400px; margin-top:20px; border:1px solid #333; background:white;'></iframe>
`);

textInput = $("#vibeInput");
codeDisplay = $("#vibeOutput");
outputFrame = document.getElementById("vibeFrame");

// ---- Event Listeners ----
$("#vibeSend").on("click", generateCode);
$("#vibeRun").on("click", runCode);
$("#vibeSave").on("click", saveVibe);
$("#vibeRestore").on("click", restoreVibe);
$("#vibeDebug").on("click", debugCode);

// ---- AI Settings ----
const OPENAI_API_KEY = "YOUR_OPENAI_API_KEY_HERE";
const MODEL = "gpt-4o-mini";  // Use GPT-4o for creativity and JS understanding

async function generateCode() {
    const userPrompt = textInput.val().trim();
    if (!userPrompt) return;

    chatHistory.push({ role: "user", content: userPrompt });

    const systemPrompt = `
You are VibeMaker, an AI that writes correct, runnable JavaScript for the browser.
The user describes what they want in English. You output ONLY the JS code (no explanations).
It must be self-contained and runnable in an iframe, using plain JS, HTML, or Canvas.
You can use graphics, animations, DOM, etc.
`;

    const conversation = [
        { role: "system", content: systemPrompt },
        ...chatHistory
    ];

    codeDisplay.html("<em>💭 Thinking...</em>");

    const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + OPENAI_API_KEY
        },
        body: JSON.stringify({
            model: MODEL,
            messages: conversation,
            temperature: 0.8
        })
    });

    const data = await response.json();
    const aiMessage = data.choices[0].message.content;
    currentCode = extractCode(aiMessage);
    chatHistory.push({ role: "assistant", content: currentCode });
    codeDisplay.text(currentCode);
}

function extractCode(text) {
    const match = text.match(/```(?:javascript|js)?\n([\s\S]*?)```/);
    return match ? match[1].trim() : text.trim();
}

function runCode() {
    const doc = outputFrame.contentDocument || outputFrame.contentWindow.document;
    doc.open();
    doc.write(currentCode);
    doc.close();
}

function saveVibe() {
    AB.saveData("vibeCode", { chatHistory, currentCode });
    AB.msg("💾 Saved your vibe!");
}

function restoreVibe() {
    const data = AB.loadData("vibeCode");
    if (!data) {
        AB.msg("⚠️ No saved vibe found.");
        return;
    }
    chatHistory = data.chatHistory;
    currentCode = data.currentCode;
    codeDisplay.text(currentCode);
    AB.msg("🔁 Restored last vibe.");
}

async function debugCode() {
    if (!currentCode) return AB.msg("No code to debug!");

    const debugPrompt = `
You are a JS debugger AI. Review the following code for possible errors or inefficiencies.
Suggest fixes or improvements clearly.
\`\`\`js
${currentCode}
\`\`\`
`;

    const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + OPENAI_API_KEY
        },
        body: JSON.stringify({
            model: MODEL,
            messages: [
                { role: "system", content: "You are a helpful JS debugger." },
                { role: "user", content: debugPrompt }
            ],
            temperature: 0.4
        })
    });

    const data = await response.json();
    const analysis = data.choices[0].message.content;
    AB.msg("🧠 Debug Mode:\n" + analysis);
}