// Listen for changes on inputs including iterationCount
[
  "animationType",
  "duration",
  "delay",
  "iterationCount",
  "timingFunction",
  "direction",
  "fillMode"
].forEach(id => {
  document.getElementById(id).addEventListener("input", showPreviewAnimation);
});

showPreviewAnimation();

function showPreviewAnimation() {
  const type = document.getElementById("animationType").value;
  const duration = document.getElementById("duration").value;
  const delay = document.getElementById("delay").value;
  let iterationCount = document.getElementById("iterationCount").value.trim();
  const timing = document.getElementById("timingFunction").value;
  const direction = document.getElementById("direction").value;
  const fillMode = document.getElementById("fillMode").value;

  // Validate iterationCount: allow "infinite" or positive integer else fallback to 1
  if (iterationCount.toLowerCase() !== "infinite") {
    if (!/^\d+$/.test(iterationCount) || parseInt(iterationCount) <= 0) {
      iterationCount = "1";
    }
  }

  const box = document.getElementById("box");
  const cssOutput = document.getElementById("cssOutput");

  // Reset animation
  box.style.animation = "none";
  void box.offsetWidth; // reflow

  const animations = {
    fadeIn: {
      name: "fadeIn",
      keyframes: `
@keyframes fadeIn {
  from { }
  to { }
}`
    },
    fadeOut: {
      name: "fadeOut",
      keyframes: `
@keyframes fadeOut {
  from { }
  to { }
}`
    },
    slideInLeft: {
      name: "slideInLeft",
      keyframes: `
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}`
    },
    slideInRight: {
      name: "slideInRight",
      keyframes: `
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}`
    },
    slideInUp: {
      name: "slideInUp",
      keyframes: `
@keyframes slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}`
    },
    slideInDown: {
      name: "slideInDown",
      keyframes: `
@keyframes slideInDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}`
    },
    slideOutLeft: {
      name: "slideOutLeft",
      keyframes: `
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}`
    },
    slideOutRight: {
      name: "slideOutRight",
      keyframes: `
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}`
    },
    slideOutUp: {
      name: "slideOutUp",
      keyframes: `
@keyframes slideOutUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}`
    },
    slideOutDown: {
      name: "slideOutDown",
      keyframes: `
@keyframes slideOutDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}`
    },
    scaleIn: {
      name: "scaleIn",
      keyframes: `
@keyframes scaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}`
    },
    scaleOut: {
      name: "scaleOut",
      keyframes: `
@keyframes scaleOut {
  from { transform: scale(1); }
  to { transform: scale(0); }
}`
    },
    rotateIn: {
      name: "rotateIn",
      keyframes: `
@keyframes rotateIn {
  from { transform: rotate(-200deg); }
  to { transform: rotate(0); }
}`
    },
    rotateOut: {
      name: "rotateOut",
      keyframes: `
@keyframes rotateOut {
  from { transform: rotate(0); }
  to { transform: rotate(200deg); }
}`
    },
    bounceIn: {
      name: "bounceIn",
      keyframes: `
@keyframes bounceIn {
  0%   { transform: scale(0.3); }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}`
    },
    bounceOut: {
      name: "bounceOut",
      keyframes: `
@keyframes bounceOut {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.9); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(0.3); }
}`
    },
    flipInX: {
      name: "flipInX",
      keyframes: `
@keyframes flipInX {
  from { transform: perspective(400px) rotateX(90deg); }
  to { transform: perspective(400px) rotateX(0deg); }
}`
    },
    flipInY: {
      name: "flipInY",
      keyframes: `
@keyframes flipInY {
  from { transform: perspective(400px) rotateY(90deg); }
  to { transform: perspective(400px) rotateY(0deg); }
}`
    },
    flipOutX: {
      name: "flipOutX",
      keyframes: `
@keyframes flipOutX {
  from { transform: perspective(400px) rotateX(0deg); }
  to { transform: perspective(400px) rotateX(90deg); }
}`
    },
    flipOutY: {
      name: "flipOutY",
      keyframes: `
@keyframes flipOutY {
  from { transform: perspective(400px) rotateY(0deg); }
  to { transform: perspective(400px) rotateY(90deg); }
}`
    },
    zoomIn: {
      name: "zoomIn",
      keyframes: `
@keyframes zoomIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}`
    },
    zoomOut: {
      name: "zoomOut",
      keyframes: `
@keyframes zoomOut {
  from { transform: scale(1); }
  to { transform: scale(0); }
}`
    },
    shake: {
      name: "shake",
      keyframes: `
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}`
    },
    headShake: {
      name: "headShake",
      keyframes: `
@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}`
    },
    pulse: {
      name: "pulse",
      keyframes: `
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}`
    },
    flash: {
      name: "flash",
      keyframes: `
@keyframes flash {
  0%, 100% { }
  50% { }
}`
    },
    spin: {
      name: "spin",
      keyframes: `
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}`
    }
  };

  const animation = animations[type] || animations.fadeIn;

  // Remove old keyframe style if exists
  const oldStyle = document.getElementById("dynamicKeyframes");
  if (oldStyle) oldStyle.remove();

  // Inject keyframes style
  const style = document.createElement("style");
  style.id = "dynamicKeyframes";
  style.innerHTML = animation.keyframes;
  document.head.appendChild(style);

  // Apply animation
  box.style.animation = `${animation.name} ${duration}s ${timing} ${delay}s ${iterationCount} ${direction} ${fillMode}`;

  // Update CSS output textarea
  cssOutput.value = `${animation.keyframes}

.box {
  animation: ${animation.name} ${duration}s ${timing} ${delay}s ${iterationCount} ${direction} ${fillMode};
}`;
}

// Copy CSS to clipboard
function copyCSS() {
  const textarea = document.getElementById("cssOutput");
  textarea.select();
  document.execCommand("copy");
  alert("CSS copied to clipboard!");
}

// Download CSS file
function downloadCSS() {
  const css = document.getElementById("cssOutput").value;
  const blob = new Blob([css], { type: "text/css" });
  const link = document.createElement("a");
  link.download = "animation.css";
  link.href = URL.createObjectURL(blob);
  link.click();
}