// 🎨 My Identity Pie – Interactive & Editable p5.js Sketch
// Students can add identity slices by clicking OR by editing the code manually.
// If manual slices are defined, click input will be disabled but download/reset will still work.

let identityLabels = [];
let identityColors = [];
let resetBtn, saveBtn;

// 📝 BONUS: Manually define identity slices (uncomment and edit below to customize your pie)
// Uncomment the lines below and modify them with your identity pieces and color names

let manualIdentity = [
  //{ label: "Tibetan", color: "orange" },
];

function setup() {
  createCanvas(400, 500); // Space for pie and buttons
  angleMode(DEGREES);
  textAlign(CENTER, CENTER);
  textSize(12);
  noLoop();

  // ✅ Load manual entries if defined
  for (let i = 0; i < manualIdentity.length; i++) {
    identityLabels.push(manualIdentity[i].label);
    identityColors.push(color(manualIdentity[i].color));
  }

  if (identityLabels.length > 0) {
    redraw(); // Draw pre-filled pie
  } else {
    drawInstructions(); // Show start message
  }

  // 🔁 Reset Button
  resetBtn = createButton("🔄 Reset Pie");
  resetBtn.position(30, height - 40);
  resetBtn.mousePressed(resetPie);

  // 💾 Download Button
  saveBtn = createButton("💾 Download Pie");
  saveBtn.position(280, height - 40);
  saveBtn.mousePressed(savePie);
}

function draw() {
  background(255);

  // 🧠 Heading and Info
  fill(0);
  textSize(18);
  text("🧩 My Identity Pie", width / 2, 20);
  textSize(12);

  if (identityLabels.length === 0) {
    text("Click anywhere to start adding parts of your identity.", width / 2, 50);
    return;
  } else {
    if (manualIdentity.length === 0) {
      text("Click again to add more slices!", width / 2, 50);
    } else {
      text("This pie was generated from your custom entries.", width / 2, 50);
    }
  }

  // Draw Pie
  translate(width / 2, height / 2 + 25);
  let anglePerSlice = 360 / identityLabels.length;
  let lastAngle = 0;

  for (let i = 0; i < identityLabels.length; i++) {
    fill(identityColors[i]);
    stroke(0);
    arc(0, 0, 300, 300, lastAngle, lastAngle + anglePerSlice, PIE);

    // Labels
    let midAngle = lastAngle + anglePerSlice / 2;
    let x = cos(midAngle) * 100;
    let y = sin(midAngle) * 100;
    fill(0);
    noStroke();
    text(identityLabels[i], x, y);

    lastAngle += anglePerSlice;
  }
}

// 🖱️ Only allow clicking if not using manualIdentity
function mousePressed() {
  if (manualIdentity.length > 0) return;

  if (mouseY > height - 50 || mouseX < 0 || mouseX > width) return;

  let newLabel = prompt("What’s one part of your identity?");
  if (newLabel) {
    identityLabels.push(newLabel);
    identityColors.push(color(random(100, 255), random(100, 255), random(100, 255)));
    redraw();
  }
}

// 📌 Default instruction text
function drawInstructions() {
  fill(0);
  textSize(16);
  text("Click to add pieces of your identity", width / 2, height / 2);
}

// 🔄 Clear everything
function resetPie() {
  identityLabels = [];
  identityColors = [];
  redraw();
}

// 💾 Save canvas as PNG (works even if manually entered)
function savePie() {
  if (identityLabels.length === 0) {
    alert("Please add at least one part of your identity before downloading.");
    return;
  }
  saveCanvas("my_identity_pie", "png");
}