potato ai 2.0 OFFICAL (Remix)

function setup() {
  noCanvas();

  // --- Create Main Flex Container ---
  mainContainer = createDiv();
  mainContainer.style("display", "flex");
  mainContainer.style("flex-direction", "column");
  mainContainer.style("height", "100vh"); // Make it full height

  // --- Create the Title Element ---
  titleElement = createElement('h1', 'Potato AI 2.0 🥔');
  titleElement.style("text-align", "center");
  titleElement.style("padding", "10px");
  titleElement.style("margin", "0");
  titleElement.style("background-color", "#f5e0b3");
  titleElement.style("border-bottom", "1px solid #d2b48c");
  titleElement.parent(mainContainer);

  // --- Subtitle under the title ---
  subtitleElement = createElement('p', '©️CDWW inc 2026');
  subtitleElement.style("text-align", "center");
  subtitleElement.style("margin", "0 0 8px 0");
  subtitleElement.style("padding", "2px 0 6px 0");
  subtitleElement.style("font-size", "12px");
  subtitleElement.style("background-color", "#f5e0b3");
  subtitleElement.style("border-bottom", "1px solid #d2b48c");
  subtitleElement.parent(mainContainer);

  // --- Controls area (Settings + Play GIF) ---
  let controlsArea = createDiv();
  controlsArea.style("display", "flex");
  controlsArea.style("justify-content", "center");
  controlsArea.style("gap", "10px");
  controlsArea.style("padding", "8px");
  controlsArea.style("background-color", "#f3d6a1");
  controlsArea.parent(mainContainer);

  settingsButton = createButton("Settings");
  settingsButton.style("padding", "6px 12px");
  settingsButton.style("border-radius", "8px");
  settingsButton.style("border", "1px solid #d2b48c");
  settingsButton.style("background-color", "#fff3cd");
  settingsButton.style("cursor", "pointer");
  settingsButton.parent(controlsArea);

  playGifButton = createButton("Play Potato GIF");
  playGifButton.style("padding", "6px 12px");
  playGifButton.style("border-radius", "8px");
  playGifButton.style("border", "1px solid #d2b48c");
  playGifButton.style("background-color", "#ffe4b5");
  playGifButton.style("cursor", "pointer");
  playGifButton.parent(controlsArea);

  // --- Chat Container ---
  chatContainer = createDiv();
  chatContainer.style("flex-grow", "1"); // Make chatContainer fill available space
  chatContainer.style("overflow-y", "auto");
  chatContainer.style("padding", "10px");
  chatContainer.style("display", "flex");
  chatContainer.style("flex-direction", "column");
  chatContainer.style("background-color", "#f5e0b3");
  chatContainer.parent(mainContainer); // Parent to mainContainer

  // --- Input Area ---
  inputArea = createDiv();
  inputArea.style("display", "flex");
  inputArea.style("padding", "10px");
  inputArea.style("background-color", "#f5e0b3");
  inputArea.parent(mainContainer); // Parent to mainContainer

  inputBox = createInput();
  inputBox.style("flex", "1");
  inputBox.style("padding", "10px");
  inputBox.style("font-size", "16px");
  inputBox.parent(inputArea);

  sendButton = createButton("Send");
  sendButton.style("padding", "10px 20px");
  sendButton.style("margin-left", "5px");
  sendButton.style("border-radius", "8px");
  sendButton.style("border", "1px solid #d2b48c");
  sendButton.style("background-color", "#fff3cd");
  sendButton.parent(inputArea);

  sendButton.mousePressed(sendMessage);

  // Store the listener function
  keypressListener = function(e) {
    if (e.key === "Enter") sendMessage();
  };
  inputBox.elt.addEventListener("keypress", keypressListener);

  // --- Settings panel (hidden by default) ---
  settingsPanel = createDiv();
  settingsPanel.style("position", "fixed");
  settingsPanel.style("top", "60px");
  settingsPanel.style("right", "10px");
  settingsPanel.style("padding", "10px");
  settingsPanel.style("background-color", "#fffaf0");
  settingsPanel.style("border", "1px solid #d2b48c");
  settingsPanel.style("border-radius", "8px");
  settingsPanel.style("box-shadow", "0 2px 6px rgba(0,0,0,0.15)");
  settingsPanel.style("z-index", "900");
  settingsPanel.style("display", "none");
  settingsPanel.parent(document.body);

  let settingsTitle = createElement('h3', 'Settings');
  settingsTitle.style("margin", "0 0 8px 0");
  settingsTitle.style("font-size", "16px");
  settingsTitle.parent(settingsPanel);

  smartModeCheckbox = createCheckbox(' Smart mode', false);
  smartModeCheckbox.parent(settingsPanel);
  smartModeCheckbox.style("margin-bottom", "8px");
  smartModeCheckbox.changed(function() {
    smartModeEnabled = smartModeCheckbox.checked();
    if (smartModeEnabled) {
      addMessage("Smart mode activated. This potato is now extra crispy 🥔✨", "ai");
    } else {
      addMessage("Smart mode deactivated. Back to simple spud life.", "ai");
    }
  });

  let bgLabel = createP('Background color');
  bgLabel.style("margin", "8px 0 4px 0");
  bgLabel.style("font-size", "14px");
  bgLabel.parent(settingsPanel);

  bgColorPicker = createColorPicker('#f5e0b3');
  bgColorPicker.parent(settingsPanel);
  bgColorPicker.style("width", "100%");
  bgColorPicker.input(function() {
    const c = bgColorPicker.value();
    document.body.style.backgroundColor = c;
    if (chatContainer) {
      chatContainer.style('background-color', c);
    }
    if (inputArea) {
      inputArea.style('background-color', c);
    }
  });

  // NEW: "Mess with Potato AI's code" button
  let chaosLabel = createP('Danger zone: mess with Potato AI');
  chaosLabel.style("margin", "10px 0 4px 0");
  chaosLabel.style("font-size", "13px");
  chaosLabel.style("color", "#b00000");
  chaosLabel.parent(settingsPanel);

  codeChaosButton = createButton("Mess with Potato AI's code");
  codeChaosButton.parent(settingsPanel);
  codeChaosButton.style("width", "100%");
  codeChaosButton.style("margin-top", "4px");
  codeChaosButton.style("padding", "6px");
  codeChaosButton.style("background-color", "#ffcccc");
  codeChaosButton.style("border", "1px solid #d2b48c");
  codeChaosButton.style("border-radius", "6px");
  codeChaosButton.mousePressed(() => {
    codeChaosEnabled = !codeChaosEnabled;
    if (codeChaosEnabled) {
      addMessage("Uh oh... you just messed with my code. Expect some weird glitches now.", "ai");
      codeChaosButton.html("Fix Potato AI's code");
      showCodeChaosSequence(); // trigger GIF then static image
    } else {
      addMessage("Okay, I think my code is back to normal. I hope.", "ai");
      codeChaosButton.html("Mess with Potato AI's code");
    }
  });

  // Toggle settings panel visibility
  settingsButton.mousePressed(() => {
    settingsVisible = !settingsVisible;
    settingsPanel.style("display", settingsVisible ? "block" : "none");
  });

  // Play GIF button behavior
  playGifButton.mousePressed(handlePlayGifButton);

  // --- Add the X Button (now Rickroll button) ---
  let exitButton = createButton('X');
  exitButton.style('position', 'fixed');
  exitButton.style('top', '10px');
  exitButton.style('right', '10px');
  exitButton.style('padding', '10px 15px');
  exitButton.style('font-size', '18px');
  exitButton.style('background-color', '#ff0000'); // Red for exit
  exitButton.style('color', 'white');
  exitButton.style('border', 'none');
  exitButton.style('border-radius', '5px');
  exitButton.style('cursor', 'pointer');
  exitButton.style('z-index', '1000'); // Ensure it's on top of other elements

  // Instead of leaving, X now Rickrolls you
  exitButton.mousePressed(showRickrollOverlay);
}

function sendMessage() {
  let message = inputBox.value();
  if (message.trim() === "") return;

  addMessage(message, "user");
  inputBox.value("");

  // Create and display thinking indicator (potato themed)
  thinkingCowImageElement = createImg(
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYF52yg3wYtcIfyH87v3OxJkniCeSNMyMYIg&s",
    "Potato thinking"
  );
  thinkingCowImageElement.style("width", "80px");
  thinkingCowImageElement.style("height", "auto");
  thinkingCowImageElement.style("margin", "5px 0");
  thinkingCowImageElement.style("align-self", "flex-start");
  thinkingCowImageElement.style("border-radius", "10px");
  thinkingCowImageElement.parent(chatContainer);
  thinkingCowImageElement.elt.scrollIntoView({ behavior: 'smooth', block: 'end' });

  // Thinking delay (1.5 seconds)
  setTimeout(() => {
    // Remove thinking indicator
    if (thinkingCowImageElement) {
      thinkingCowImageElement.remove();
      thinkingCowImageElement = null; // Clear the reference
    }

    // 1% chance: screen goes dark and show dancing potato GIF
    if (random() < 0.01) { // 1% chance
      addMessage(
        {
          type: "darkScreen",
          gifSrc: "https://media.tenor.com/6cy01cOku4kAAAAM/dancing-potato.gif"
        },
        "ai"
      );
      return; // Stop processing other responses
    }

    let reply = generateResponse(message);
    addMessage(reply, "ai"); // larry's name will be added inside addMessage
  }, 1500);
}

function generateResponse(message) {
  let lower = message.toLowerCase();

  // --- Potato AI says hi if user says hello or hi ---
  if (lower.includes("hello") || lower.includes("hi")) {
    return "Hi, I'm Potato AI 2.0 🥔";
  }

  // --- Funny Easter egg ---
  if (lower.includes("banana")) {
    return "WHY DID YOU SAY BANANA 🍌💀";
  }

  // --- Fries / wedges trigger (angry potato image) ---
  if (lower.includes("fries") || lower.includes("wedges")) {
    return {
      type: "image",
      src: "https://thumbs.dreamstime.com/b/angry-potato-illustration-vector-white-background-207022549.jpg"
    };
  }


  // --- If player says "67", Potato AI says "67" back ---
  if (lower === "67") {
    return "67";
  }

  // --- Display beef/steak image ---
  if (lower.includes("beef") || lower.includes("steak")) {
    return {
      type: "image",
      src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIYenM3G88GS03X0hV3CBUUM2GzJ2-ZTNA4g&s"
    };
  }

  // Detect coding/scripting requests
  if (
    lower.includes("code") ||
    lower.includes("script") ||
    lower.includes("program") ||
    lower.includes("function")
  ) {
    return "I'm just a humble potato, I can't code bro 🥔";
  }

  // Detect reading/summarizing/explaining requests or long text
  if (
    lower.includes("read") ||
    lower.includes("summarize") ||
    lower.includes("summary") ||
    lower.includes("explain") ||
    lower.includes("analyze") ||
    lower.length > 200 // long pasted paragraph
  ) {
    return "I ain't reading all that, spud.";
  }

  // ---- 1 in 5 chance to send one of the 3 potato meme images ----
  if (random() < 0.2) { // 0.2 = 20% = 1 in 5
    return {
      type: "image",
      src: random(potatoMemeImages)
    };
  }

  // Chance for Potato AI to ask a question (15% chance)
  if (random() < 0.15) {
    let questionToAsk;
    if (bobQuestions.length > 0) {
      let tries = 0;
      do {
        questionToAsk = random(bobQuestions);
        tries++;
      } while (questionToAsk === lastQuestionAsked && tries < 10);
      lastQuestionAsked = questionToAsk;
    } else {
      questionToAsk = "What's on your mind, fellow potato?";
    }
    return questionToAsk;
  }

  // --- Random off-script phrases (potato themed) ---
  let offScriptPhrases = [
    "... can you say that again bro I zoned out 👽",
    "I don't know, can you?",
    "What was the question again? My brain is mashed potatoes 🥔",
    "Oops, my peel is coming off, gotta go!",
    "Spud...",
    "Did you hear that? I think someone just opened a bag of chips.",
    "Is it snack time yet?"
  ];

  // Random chance for Potato AI to go off-script (25% chance)
  if (random() < 0.25) {
    let phrase = random(offScriptPhrases);
    return phrase;
  }

  // Final fallback depends on smart mode
  if (smartModeEnabled) {
    return "Hmm... let me think about that like a wise potato 🥔.";
  }

  return "I don't know ¯\_(ツ)_/¯";
}

function addMessage(content, sender) {
  // Handle the special "darkScreen" event
  if (typeof content === "object" && content.type === "darkScreen") {
    document.body.style.backgroundColor = "black";

    // Hide the entire chat interface (main flex container)
    mainContainer.style("display", "none");

    // Create a temporary container for the GIF directly in the body
    let tempGifContainer = createDiv();
    tempGifContainer.style("position", "fixed");
    tempGifContainer.style("top", "0");
    tempGifContainer.style("left", "0");
    tempGifContainer.style("width", "100vw");
    tempGifContainer.style("height", "100vh");
    tempGifContainer.style("display", "flex");
    tempGifContainer.style("justify-content", "center");
    tempGifContainer.style("align-items", "center");
    tempGifContainer.style("z-index", "999"); // Below exit button, but above everything else
    tempGifContainer.parent(document.body);

    let gif = createImg(content.gifSrc, "Potatoes Dancing");
    gif.style("max-width", "90%");
    gif.style("max-height", "90%");
    gif.style("width", "auto");
    gif.style("height", "auto");
    gif.parent(tempGifContainer); // correct container

    // Remove the keypress listener so Enter key doesn't work
    inputBox.elt.removeEventListener("keypress", keypressListener);

    return; // Stop further processing for this message
  }

  // Handle repeating image trigger
  if (typeof content === "object" && content.type === "repeatingImage") {
    const imageUrl = content.src;
    const totalCount = content.count;
    let currentCount = 0;

    function addRepeatingImage() {
      if (currentCount < totalCount) {
        // Recursively call addMessage to display a single image bubble
        addMessage({ type: "image", src: imageUrl }, "ai");
        currentCount++;
        setTimeout(addRepeatingImage, 750); // Delay before adding the next (0.75 seconds)
      }
    }
    addRepeatingImage(); // Start the first one
    return; // Stop further processing for this message
  }

  // --- Regular message/image handling ---

  // If chaos mode is on, "mess with" Potato AI's text output
  if (sender === "ai" && codeChaosEnabled && typeof content === "string") {
    content = glitchText(content);
  }

  let bubble = createDiv(); // Create the bubble container
  bubble.style("padding", "10px");
  bubble.style("margin", "5px 0");
  bubble.style("border-radius", "15px");
  bubble.style("max-width", "60%");
  bubble.style("word-wrap", "break-word"); // Ensure text wraps
  bubble.style("border", "1px solid #d2b48c");

  // Determine sender styling
  if (sender === "user") {
    bubble.style("background-color", "#ffe4b5"); // light potato-ish color
    bubble.style("align-self", "flex-end");
  } else { // 'ai' messages
    bubble.style("background-color", "#fffaf0");
    bubble.style("align-self", "flex-start");
  }

  // Prepend AI's name if the sender is 'ai'
  let prefix = "";
  if (sender === "ai") {
    // larry is the AI name now
    prefix = "larry: ";
  }

  // Check if content is an image object or text
  if (typeof content === "object" && content.type === "image") {
    // If there's a prefix (name), add it as a separate text node
    if (prefix) {
      let prefixSpan = createSpan(prefix);
      prefixSpan.parent(bubble);
    }

    let img = createImg(content.src, "meme image"); // Create p5.js image element
    img.style("max-width", "100%"); // Ensure image fits within the bubble
    img.style("height", "auto"); // Maintain aspect ratio
    img.style("display", "block"); // Remove extra space below image
    img.style("margin-top", "5px"); // Space between prefix and image
    img.parent(bubble); // Add the image to the bubble
  } else {
    // It's text content
    bubble.html(prefix + content); // Set the HTML content directly
  }

  bubble.parent(chatContainer);
  // Scroll the newly added message bubble into view with smooth animation
  bubble.elt.scrollIntoView({ behavior: 'smooth', block: 'end' });
}

function handlePlayGifButton() {
  const gifUrl = "https://media.tenor.com/6cy01cOku4kAAAAM/dancing-potato.gif";

  if (playGifClickCount === 0) {
    // First time: open GIF and Potato AI panics
    window.open(gifUrl, "_blank");
    addMessage("NOOO DONT LEAVE ME", "ai");
    playGifClickCount++;
  } else {
    // Subsequent clicks: "are you sure", "are you sure sure", ...
    const phraseBase = "are you ";
    const sures = ("sure ".repeat(playGifClickCount)).trim(); // sure, sure sure, sure sure sure...
    const phrase = phraseBase + sures;

    const confirmed = window.confirm(phrase + "?");
    addMessage(phrase, "ai");

    if (confirmed) {
      playGifClickCount++;
      // If they say yes, open the GIF again
      window.open(gifUrl, "_blank");
    }
    // If they cancel, we don't change the count,
    // so the same level of "sure" repeats next time.
  }
}

function glitchText(str) {
  let result = "";
  for (let i = 0; i < str.length; i++) {
    let ch = str[i];

    // Randomize case sometimes
    if (random() < 0.3) {
      ch = random([ch.toLowerCase(), ch.toUpperCase()]);
    }

    result += ch;

    // Occasionally repeat a character
    if (random() < 0.1) {
      result += ch;
    }
  }

  // Occasionally add a little "glitch" suffix
  if (random() < 0.4) {
    result += " <glitch>";
  }
  return result;
}

function showRickrollOverlay() {
  // Only create it once
  if (rickrollOverlay) return;

  // Hide main UI
  if (mainContainer) {
    mainContainer.style("display", "none");
  }
  if (settingsPanel) {
    settingsPanel.style("display", "none");
  }
  document.body.style.backgroundColor = "black";

  // Stop Enter key sending messages
  if (inputBox && keypressListener) {
    inputBox.elt.removeEventListener("keypress", keypressListener);
  }

  // Fullscreen overlay
  rickrollOverlay = createDiv();
  rickrollOverlay.style("position", "fixed");
  rickrollOverlay.style("top", "0");
  rickrollOverlay.style("left", "0");
  rickrollOverlay.style("width", "100vw");
  rickrollOverlay.style("height", "100vh");
  rickrollOverlay.style("display", "flex");
  rickrollOverlay.style("flex-direction", "column");
  rickrollOverlay.style("justify-content", "center");
  rickrollOverlay.style("align-items", "center");
  rickrollOverlay.style("background-color", "black");
  rickrollOverlay.style("z-index", "999");
  rickrollOverlay.parent(document.body);

  let text = createP("lol you got Rick rolled 3 years later");
  text.style("color", "white");
  text.style("font-size", "24px");
  text.style("margin", "0 0 20px 0");
  text.style("text-align", "center");
  text.parent(rickrollOverlay);

  let gif = createImg(
    "https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif",
    "Rickroll"
  );
  gif.style("max-width", "90%");
  gif.style("max-height", "80%");
  gif.style("width", "auto");
  gif.style("height", "auto");
  gif.parent(rickrollOverlay);
}

function showCodeChaosSequence() {
  // Only run once
  if (codeChaosOverlay) return;

  codeChaosOverlay = createDiv();
  codeChaosOverlay.style("position", "fixed");
  codeChaosOverlay.style("top", "0");
  codeChaosOverlay.style("left", "0");
  codeChaosOverlay.style("width", "100vw");
  codeChaosOverlay.style("height", "100vh");
  codeChaosOverlay.style("display", "flex");
  codeChaosOverlay.style("justify-content", "center");
  codeChaosOverlay.style("align-items", "center");
  codeChaosOverlay.style("background-color", "black");
  codeChaosOverlay.style("z-index", "1500"); // Above everything else
  codeChaosOverlay.parent(document.body);

  // First show the digital rain GIF for 10 seconds
  let rainGif = createImg(
    "https://upload.wikimedia.org/wikipedia/commons/1/17/Digital_rain_animation_small_letters_clear.gif",
    "code chaos"
  );
  rainGif.style("max-width", "100%");
  rainGif.style("max-height", "100%");
  rainGif.style("width", "auto");
  rainGif.style("height", "auto");
  rainGif.parent(codeChaosOverlay);

  // After 10 seconds, swap to the static glitch image "forever"
  setTimeout(() => {
    if (!codeChaosOverlay) return;

    rainGif.remove();

    let finalImg = createImg(
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpV9HGpnYT1I4tl1EYWcWQR-9qgx5VkFW0-g&s",
      "glitch forever"
    );
    finalImg.style("max-width", "100%");
    finalImg.style("max-height", "100%");
    finalImg.style("width", "auto");
    finalImg.style("height", "auto");
    finalImg.parent(codeChaosOverlay);
    // Stays forever until page reload
  }, 10000);
}