PFont kater;
PImage[] pngImages = new PImage[4];
PImage logoImage;
PImage[] stickerImages = new PImage[4];  // Array für Sticker-Bilder
boolean showStartScreen = true;
PImage currentImage;
int currentColorMode;
boolean showSticker = false; // Variable zum Verfolgen, ob der Sticker angezeigt werden soll
PImage currentSticker; // Variable zum Speichern des aktuellen Stickers
float stickerRotation;

String[] locations = {"Berlin", "München", "Tokyo", "New York"};
int buttonWidth = 200;
int buttonHeight = 50;
float buttonSpacing = 20;  // Geändert zu 20 px

ArrayList<PVector> zigZagPoints;  // Zick-Zack Punkt Liste

void setup() {
  size(540, 960);
  pixelDensity(2);  // Setzt die Pixeldichte für hochauflösende Displays
  
  kater = loadFont("FuturaStd-Medium-48.vlw");
  textFont(kater);
  textSize(20);
  
  // Lade die PNG-Dateien
  logoImage    = loadImage("Kater-Kola-Logo.png");
  pngImages[0] = loadImage("Kater-Kola-Bild-1-weis.png");
  pngImages[1] = loadImage("Kater-Kola-Bild-2-weis.png");
  pngImages[2] = loadImage("Kater-Kola-Bild-3-weis.png");
  pngImages[3] = loadImage("Kater-Kola-Bild-4-weis.png");
  
  // Lade die Sticker-Bilder
  stickerImages[0] = loadImage("Kater-Kola-Sticker-1.png");
  stickerImages[1] = loadImage("Kater-Kola-Sticker-2.png");
  stickerImages[2] = loadImage("Kater-Kola-Sticker-3.png");
  stickerImages[3] = loadImage("Kater-Kola-Sticker-4.png");

  // Überprüfe, ob die PNG-Dateien korrekt geladen wurden
  for (int i = 0; i < pngImages.length; i++) {
    if (pngImages[i] == null) {
      println("Fehler beim Laden der Datei: Kater-Kola-Bild-" + (i+1) + "-weis.png");
    }
  }
  if (logoImage == null) {
    println("Fehler beim Laden der Datei: Kater-Kola-Bild-Logo.png");
  }
  
  // Überprüfe, ob die Sticker-Bilder korrekt geladen wurden
  for (int i = 0; i < stickerImages.length; i++) {
    if (stickerImages[i] == null) {
      println("Fehler beim Laden der Datei: Kater-Kola-Sticker-" + (i+1) + ".png");
    }
  }

  // Initialisiere die Zick-Zack Punkte
  zigZagPoints = new ArrayList<PVector>();
  int margin = 40;
  int step = 15;
  
  // Erzeuge Zick-Zack Punkte am Rand des Fensters
  // Oben
  for (int x = margin; x < width - margin; x += step) {
    zigZagPoints.add(new PVector(x, margin));
  }
  // Rechts
  for (int y = margin + step; y < height - margin; y += step) {
    zigZagPoints.add(new PVector(width - margin, y));
  }
  // Unten
  for (int x = width - margin - step; x >= margin; x -= step) {
    zigZagPoints.add(new PVector(x, height - margin));
  }
  // Links
  for (int y = height - margin - step; y >= margin; y -= step) {
    zigZagPoints.add(new PVector(margin, y));
  }
}

void draw() {
  if (showStartScreen) {
    // Startbildschirm anzeigen
    background(0);  // Schwarz
    
    // Logo-Bild anzeigen
    if (logoImage != null) {
      float logoScaleFactor = 0.04; // 4 % der Bildschirmgröße
      float logoWidth = logoImage.width * logoScaleFactor;
      float logoHeight = logoImage.height * logoScaleFactor;
      image(logoImage, width / 2 - logoWidth / 2, 70, logoWidth, logoHeight);  // Vom oberen Rand 100 px entfernt
    }

    // Text über den Buttons
    fill(255);  // Weiß
    textSize(22);
    textAlign(CENTER, BOTTOM);
    text("Choose your location", width / 2, height - 50 - (locations.length * (buttonHeight + buttonSpacing)) - 20);  // Text 20 px über den Buttons
    
    // Buttons
    for (int i = 0; i < locations.length; i++) {
      float buttonX = (width - buttonWidth) / 2;
      float buttonY = height - 50 - (locations.length * (buttonHeight + buttonSpacing)) + i * (buttonHeight + buttonSpacing);
      
      if (mouseX > buttonX && mouseX < buttonX + buttonWidth && mouseY > buttonY && mouseY < buttonY + buttonHeight) {
        // Hover-Effekt
        fill(255);  // Weiß
        rect(buttonX - 10, buttonY - 10, buttonWidth + 20, buttonHeight + 20, 10); // Vergrößerte Fläche
        fill(0);  // Schwarz
        textSize(25); // Vergrößerte Schriftgröße
        textAlign(CENTER, CENTER);
        text(locations[i], buttonX + buttonWidth / 2, buttonY + buttonHeight / 2);
      } else {
        fill(255);  // Weiß
        rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);
        fill(0);  // Schwarz
        textSize(18);
        textAlign(CENTER, CENTER);
        text(locations[i], buttonX + buttonWidth / 2, buttonY + buttonHeight / 2);
      }
    }
    
  } else {
    // Farbiger Hintergrund basierend auf der Mausposition und dem aktuellen Farbmodus
    color bgColor = color(0); // Default color (black) in case of an error
    switch (currentColorMode) {
      case 1:
        bgColor = getRandomGreenColor(mouseY);  // Grüntöne
        background(bgColor);
        
        // Zeige das aktuelle Bild in der Mitte des Bildschirms
        if (currentImage != null) {
          float scaleFactor = 0.045; // 4,5% der Bildschirmgröße
          float imgWidth = currentImage.width * scaleFactor;
          float imgHeight = currentImage.height * scaleFactor;
          image(currentImage, width / 2 - imgWidth / 2, height / 2 - imgHeight / 2, imgWidth, imgHeight);
          
          // Text für Berlin-Koordinaten und Standort
          fill(255);  // Weiß
          textSize(20);
          textAlign(CENTER, TOP);
          text("52.5200° N, 13.4050° E", width / 2, height / 2 + imgHeight / 2 + 25);
          text("Location Berlin", width / 2, height / 2 + imgHeight / 2 + 60);
          textSize(15);
          text("Dufte x NERVES", width / 2, height / 2 + imgHeight / 2 + 190);
        }
        break;
      case 2:
        bgColor = getRandomBrownColor(mouseX);  // Brauntöne
        background(bgColor);

        // Zeige das aktuelle Bild in der Mitte des Bildschirms
        if (currentImage != null) {
          float scaleFactor = 0.045; // 4,5% der Bildschirmgröße
          float imgWidth = currentImage.width * scaleFactor;
          float imgHeight = currentImage.height * scaleFactor;
          image(currentImage, width / 2 - imgWidth / 2, height / 2 - imgHeight / 2, imgWidth, imgHeight);
          
          // Text für München-Koordinaten und Standort
          fill(255);  // Weiß
          textSize(20);
          textAlign(CENTER, TOP);
          text("48.1351° N, 11.5820° E", width / 2, height / 2 + imgHeight / 2 + 25);
          text("Location München", width / 2, height / 2 + imgHeight / 2 + 60);
          textSize(15);
          text("Dufte x NERVES", width / 2, height / 2 + imgHeight / 2 + 190);
        }
        break;
      case 3:
        bgColor = getRandomRedColor(mouseX);    // Rottöne
        background(bgColor);
        
        // Zeige das aktuelle Bild in der Mitte des Bildschirms
        if (currentImage != null) {
          float scaleFactor = 0.045; // 4,5% der Bildschirmgröße
          float imgWidth = currentImage.width * scaleFactor;
          float imgHeight = currentImage.height * scaleFactor;
          image(currentImage, width / 2 - imgWidth / 2, height / 2 - imgHeight / 2, imgWidth, imgHeight);
          
          // Text für Tokyo-Koordinaten und Standort
          fill(255);  // Weiß
          textSize(20);
          textAlign(CENTER, TOP);
          text("35.6895° N, 139.6917° E", width / 2, height / 2 + imgHeight / 2 + 25);
          text("Location Tokyo", width / 2, height / 2 + imgHeight / 2 + 60);
          textSize(15);
          text("Dufte x NERVES", width / 2, height / 2 + imgHeight / 2 + 190);
        }
        break;
      case 4:
        bgColor = getRandomOrangeColor(mouseY); // Orangetöne
        background(bgColor);
        
        // Zeige das aktuelle Bild in der Mitte des Bildschirms
        if (currentImage != null) {
          float scaleFactor = 0.045; // 4,5% der Bildschirmgröße
          float imgWidth = currentImage.width * scaleFactor;
          float imgHeight = currentImage.height * scaleFactor;
          image(currentImage, width / 2 - imgWidth / 2, height / 2 - imgHeight / 2, imgWidth, imgHeight);
          
          // Text für New York-Koordinaten und Standort
          fill(255);  // Weiß
          textSize(20);
          textAlign(CENTER, TOP);
          text("40.7128° N, 74.0060° W", width / 2, height / 2 + imgHeight / 2 + 25);
          text("Location New York", width / 2, height / 2 + imgHeight / 2 + 60);
          textSize(15);
          text("Dufte x NERVES", width / 2, height / 2 + imgHeight / 2 + 190);
        }
        break;
    }
    
    // Zeichne die Zick-Zack-Linie am Rand des Fensters
    stroke(255); // Weißer Rand
    noFill();
    strokeWeight(5);
    
    beginShape();
    for (int i = 0; i < zigZagPoints.size(); i++) {
      PVector point = zigZagPoints.get(i);
      // Bewege die Punkte leicht basierend auf der Mausposition
      float offsetX = random(-5, 5); // Zufälliger Offset zwischen -5 und 5 px
      float offsetY = random(-5, 5); // Zufälliger Offset zwischen -5 und 5 px
      vertex(point.x + offsetX, point.y + offsetY);
    }
    endShape(CLOSE);
  }
  
  // Zeige das Sticker-Bild, falls aktiviert
  if (showSticker) {
    showStickerImage();
  }
}

void keyPressed() {
  if (key == '0') {
    showStartScreen = true;
    showSticker = false; // Sticker ausblenden, wenn zum Startbildschirm zurückgekehrt wird
    currentSticker = null; // Aktuellen Sticker zurücksetzen
  } else if (key == '1' || key == '2' || key == '3' || key == '4') {
    // Zufälliges Bild auswählen
    int randomIndex = int(random(0, 4));
    currentImage = pngImages[randomIndex];
    showStartScreen = false;
    currentColorMode = key - '0';  // Setze den Farbmodus basierend auf der gedrückten Taste
    showSticker = false; // Sticker ausblenden, wenn ein neuer Modus ausgewählt wird
    currentSticker = null; // Aktuellen Sticker zurücksetzen
  } else if (key == ' ') { // Leertaste gedrückt
    saveFrame("screenshot-####.png"); // Erstelle einen Screenshot
  } else if (key == BACKSPACE) { // Backspace-Taste gedrückt
    showSticker = false; // Sticker ausblenden
    currentSticker = null; // Aktuellen Sticker zurücksetzen
  }
}

void mousePressed() {
  if (showStartScreen) {
    for (int i = 0; i < locations.length; i++) {
      float buttonX = (width - buttonWidth) / 2;
      float buttonY = height - 50 - (locations.length * (buttonHeight + buttonSpacing)) + i * (buttonHeight + buttonSpacing);
      
      if (mouseX > buttonX && mouseX < buttonX + buttonWidth && mouseY > buttonY && mouseY < buttonY + buttonHeight) {
        // Zufälliges Bild auswählen
        int randomIndex = int(random(0, 4));
        currentImage = pngImages[randomIndex];
        currentColorMode = i + 1;
        showStartScreen = false;
        showSticker = false; // Sticker ausblenden, wenn ein neuer Modus ausgewählt wird
        currentSticker = null; // Aktuellen Sticker zurücksetzen
      }
    }
  } else {
    showSticker = true; // Sticker anzeigen, wenn irgendwo auf den Bildschirm geklickt wird
    if (currentSticker == null) {
      int randomIndex = int(random(stickerImages.length)); // Zufälliges Sticker-Bild auswählen
      currentSticker = stickerImages[randomIndex];
    }
    stickerRotation = random(-20, 20); // Zufälliger Winkel zwischen -20 und +20 Grad
  }
}

// Funktion zum Anzeigen des Sticker-Bildes
void showStickerImage() {
  if (currentSticker != null) {
    float stickerWidth = currentSticker.width * 0.09; // 9% der Bildschirmbreite
    float stickerHeight = currentSticker.height * 0.09;
    pushMatrix();
    translate(width / 2, 160); // Zentriert und 150 px vom oberen Rand entfernt
    rotate(radians(stickerRotation));
    image(currentSticker, -stickerWidth / 2, -stickerHeight / 2, stickerWidth, stickerHeight); // Bild um Mittelpunkt drehen
    popMatrix();
  }
}

// Generiert eine Braunschattierung basierend auf der Maus-x-Position
color getRandomBrownColor(float mouseX) {
  float factor = map(mouseX, 0, width, 0, 1); // Skalierung von 0 bis 1
  return lerpColor(color(139, 69, 19), color(205, 133, 63), factor); // Von dunklem zu hellem Braun
}

// Generiert eine Grüntönung basierend auf der Maus-y-Position
color getRandomGreenColor(float mouseY) {
  float factor = map(mouseY, 0, height, 0, 1); // Skalierung von 0 bis 1
  return lerpColor(color(0, 128, 0), color(144, 238, 144), factor); // Von dunklem zu hellem Grün
}

// Generiert eine Rottönung basierend auf der Maus-x-Position
color getRandomRedColor(float mouseX) {
  float factor = map(mouseX, 0, width, 0, 1); // Skalierung von 0 bis 1
  return lerpColor(color(255, 0, 0), color(255, 102, 102), factor); // Von dunklem zu hellem Rot
}

// Generiert eine Orangetönung basierend auf der Maus-y-Position
color getRandomOrangeColor(float mouseY) {
  float factor = map(mouseY, 0, height, 0, 1); // Skalierung von 0 bis 1
  return lerpColor(color(255, 165, 0), color(255, 215, 0), factor); // Von dunklem zu hellem Orange
}