script.js

const canvas = document.getElementById("wheel");
const ctx = canvas.getContext("2d");
const spinBtn = document.getElementById("spin-btn");
const resultEl = document.getElementById("result");
const optionList = document.getElementById("option-list");
const addForm = document.getElementById("add-form");
const optionInput = document.getElementById("option-input");
const clearBtn = document.getElementById("clear-btn");
const resetBtn = document.getElementById("reset-btn");

const DEFAULT_OPTIONS = ["Buy Bitcoin", "Buy Conference Ticket", "HODL", "Drink Beer", "Buy more Bitcoin", "All In"];
const COLORS = ["#7c5cff", "#4f7cff", "#2ec4b6", "#ff6b6b", "#ffd166", "#f72585", "#90be6d", "#4cc9f0"];

let options = loadOptions();
let rotation = 0;
let spinning = false;

function loadOptions() {
  try {
    const saved = JSON.parse(localStorage.getItem("decision-wheel-options"));
    if (Array.isArray(saved) && saved.length) return saved;
  } catch (_) {}
  return [...DEFAULT_OPTIONS];
}

function saveOptions() {
  localStorage.setItem("decision-wheel-options", JSON.stringify(options));
}

function drawWheel() {
  const size = canvas.width;
  const center = size / 2;
  const radius = center - 8;
  const n = Math.max(options.length, 1);
  const arc = (Math.PI * 2) / n;

  ctx.clearRect(0, 0, size, size);

  for (let i = 0; i < n; i++) {
    const start = rotation + i * arc;
    const end = start + arc;

    ctx.beginPath();
    ctx.moveTo(center, center);
    ctx.arc(center, center, radius, start, end);
    ctx.closePath();
    ctx.fillStyle = COLORS[i % COLORS.length];
    ctx.fill();

    // label
    ctx.save();
    ctx.translate(center, center);
    ctx.rotate(start + arc / 2);
    ctx.textAlign = "right";
    ctx.fillStyle = "#fff";
    ctx.font = "bold 16px system-ui, sans-serif";
    const label = options[i] || "—";
    ctx.fillText(label.slice(0, 14), radius - 16, 6);
    ctx.restore();
  }

  // center cap
  ctx.beginPath();
  ctx.arc(center, center, 28, 0, Math.PI * 2);
  ctx.fillStyle = "#121628";
  ctx.fill();
  ctx.strokeStyle = "#2a3148";
  ctx.lineWidth = 3;
  ctx.stroke();
}

function renderList() {
  optionList.innerHTML = "";
  options.forEach((text, index) => {
    const li = document.createElement("li");
    li.innerHTML = `<span>${text}</span>`;
    const btn = document.createElement("button");
    btn.type = "button";
    btn.setAttribute("aria-label", `Remove ${text}`);
    btn.textContent = "✕";
    btn.addEventListener("click", () => {
      if (spinning) return;
      options.splice(index, 1);
      saveOptions();
      update();
    });
    li.appendChild(btn);
    optionList.appendChild(li);
  });

  spinBtn.disabled = options.length < 2 || spinning;
}

function update() {
  drawWheel();
  renderList();
}

function getWinnerIndex() {
  const n = options.length;
  const arc = (Math.PI * 2) / n;
  // pointer is at the top (-90deg = -PI/2)
  const normalized = (Math.PI * 1.5 - (rotation % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2);
  return Math.floor(normalized / arc) % n;
}

function spin() {
  if (spinning || options.length < 2) return;

  spinning = true;
  spinBtn.disabled = true;
  resultEl.classList.remove("winner");
  resultEl.textContent = "Spinning…";

  const extraTurns = 5 + Math.random() * 4; // 5–9 full turns
  const target = rotation + extraTurns * Math.PI * 2 + Math.random() * Math.PI * 2;
  const duration = 4500;
  const start = performance.now();
  const startRotation = rotation;

  function animate(now) {
    const t = Math.min(1, (now - start) / duration);
    // ease-out cubic
    const eased = 1 - Math.pow(1 - t, 3);
    rotation = startRotation + (target - startRotation) * eased;
    drawWheel();

    if (t < 1) {
      requestAnimationFrame(animate);
    } else {
      spinning = false;
      const winner = options[getWinnerIndex()];
      resultEl.textContent = `Result: ${winner}`;
      resultEl.classList.add("winner");
      spinBtn.disabled = options.length < 2;
    }
  }

  requestAnimationFrame(animate);
}

addForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (spinning) return;
  const value = optionInput.value.trim();
  if (!value) return;
  if (options.length >= 16) {
    resultEl.textContent = "Max 16 options";
    return;
  }
  options.push(value);
  optionInput.value = "";
  saveOptions();
  update();
});

clearBtn.addEventListener("click", () => {
  if (spinning) return;
  options = [];
  saveOptions();
  resultEl.classList.remove("winner");
  resultEl.textContent = "Add at least 2 options, then spin";
  update();
});

resetBtn.addEventListener("click", () => {
  if (spinning) return;
  options = [...DEFAULT_OPTIONS];
  saveOptions();
  resultEl.classList.remove("winner");
  resultEl.textContent = "Defaults restored";
  update();
});

spinBtn.addEventListener("click", spin);

update();