const form = document.getElementById("eventForm");
const steps = Array.from(document.querySelectorAll(".step"));
const backButton = document.getElementById("backButton");
const nextButton = document.getElementById("nextButton");
const progressBar = document.getElementById("progressBar");
const errorMessage = document.getElementById("errorMessage");
const usernameElement = document.getElementById("username");

let currentStep = 0;
const lastStep = steps.length - 1;

const nextLabels = {
  0: "Weiter",
  1: "Weiter",
  2: "Weiter",
  3: "Weiter",
  4: "Weiter",
  5: "Event veröffentlichen"
};

// Demo-Platzhalter; später aus Nutzerprofil setzen
usernameElement.textContent = "Mia";

const flowFooter = document.getElementById("flowFooter");

function showStep(index) {
  currentStep = index;

  steps.forEach((step, stepIndex) => {
    step.classList.toggle("step--active", stepIndex === index);
  });

  const isIntroStep = index === 0;

  flowFooter.hidden = isIntroStep;
  backButton.hidden = isIntroStep;
  nextButton.textContent = nextLabels[index];
  errorMessage.textContent = "";

  if (index === lastStep) {
    updateReview();
  }

 function updateProgress(index) {
  if (index === 0) {
    progressBar.style.width = "0%";
    return;
  }

  const totalSteps = lastStep;
  const progress = ((index - 1) / (totalSteps - 1)) * 100;

  progressBar.style.width = `${progress}%`;
}

  window.scrollTo({ top: 0, behavior: "smooth" });

  updateProgress(index);
}

function stepFields(stepIndex) {
  return Array.from(steps[stepIndex].querySelectorAll("input, textarea, select"));
}

function validateCurrentStep() {
  if (currentStep === 0 || currentStep === lastStep) {
    return true;
  }

  const fields = stepFields(currentStep);

  for (const field of fields) {
    if (field.type === "radio") {
      const group = Array.from(form.querySelectorAll(`input[name="${field.name}"]`));
      const isRequiredGroup = group.some((item) => item.required);
      const hasSelection = group.some((item) => item.checked);

      if (isRequiredGroup && !hasSelection) {
        errorMessage.textContent = "Bitte wähle eine Option aus, bevor du weitergehst.";
        group[0].focus();
        return false;
      }

      continue;
    }

    if (field.type === "checkbox") {
      continue;
    }

    if (!field.checkValidity()) {
      errorMessage.textContent = "Bitte fülle alle Pflichtfelder dieses Schritts aus.";
      field.reportValidity();
      return false;
    }
  }

  errorMessage.textContent = "";
  return true;
}

function getFieldValue(name) {
  const field = form.elements[name];

  if (!field) return "–";

  if (field instanceof RadioNodeList) {
    return field.value || "–";
  }

  return field.value.trim() || "–";
}

function getCheckboxValues(name) {
  const checked = Array.from(form.querySelectorAll(`input[name="${name}"]:checked`));
  return checked.length ? checked.map((item) => item.value).join(", ") : "Keine Angabe";
}

function formatDate(value) {
  if (!value || value === "–") return "–";

  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;

  return new Intl.DateTimeFormat("de-CH", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric"
  }).format(date);
}

function updateReview() {
  const values = {
    eventTitle: getFieldValue("eventTitle"),
    eventType: getFieldValue("eventType"),
    menuDescription: getFieldValue("menuDescription"),
    eventDescription: getFieldValue("eventDescription"),
    maxGuests: getFieldValue("maxGuests"),
    dietType: getFieldValue("dietType"),
    allergies: getCheckboxValues("allergies"),
    eventDate: formatDate(getFieldValue("eventDate")),
    eventTime: getFieldValue("eventTime"),
    eventAddress: getFieldValue("eventAddress"),
    eventCity: getFieldValue("eventCity")
  };

  Object.entries(values).forEach(([key, value]) => {
    const target = document.querySelector(`[data-review="${key}"]`);
    if (target) {
      target.textContent = value;
    }
  });
}

document.querySelectorAll("[data-start-flow]").forEach((button) => {
  button.addEventListener("click", () => showStep(1));
});

backButton.addEventListener("click", () => {
  if (currentStep > 1) {
    showStep(currentStep - 1);
  } else {
    showStep(0);
  }
});

nextButton.addEventListener("click", () => {
  if (!validateCurrentStep()) return;

  if (currentStep < lastStep) {
    showStep(currentStep + 1);
    return;
  }

  form.requestSubmit();
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  alert("Dein Event wurde vorbereitet und würde jetzt veröffentlicht werden.");
});

document.querySelectorAll("[data-counter]").forEach((counter) => {
  const input = counter.querySelector("input[type='number']");
  const decreaseButton = counter.querySelector("[data-counter-action='decrease']");
  const increaseButton = counter.querySelector("[data-counter-action='increase']");

  decreaseButton.addEventListener("click", () => {
    const min = Number(input.min || 1);
    const currentValue = Number(input.value || min);
    input.value = Math.max(min, currentValue - 1);
  });

  increaseButton.addEventListener("click", () => {
    const currentValue = Number(input.value || 0);
    input.value = currentValue + 1;
  });
});

showStep(0);