<template>
  <label class="toggle-container" :class="{ 'is-disabled': disabled }" :aria-checked="modelValue" :aria-disabled="disabled" role="switch">
    <input
      type="checkbox"
      class="toggle-input"
      :checked="modelValue"
      :disabled="disabled"
      @change="handleChange"
    >
    <div class="toggle-switch">
      <span class="toggle-label toggle-on">✔</span>
      <span class="toggle-label toggle-off">✖</span>
    </div>
  </label>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue']);

const handleChange = () => {
  if (!props.disabled) {
    emit('update:modelValue', !props.modelValue)
  }
}
</script>

<style scoped>
/* 🔹 Toggle Container */
.toggle-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: 5rem;
  height: 2.5rem;
}

/* 🔹 Hide default input */
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 🔹 Switch Background */
.toggle-switch {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #CBD5E1; /* Cool gray */
  border-radius: 9999px;
  transition: background 0.25s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
}

/* 🔹 Labels */
.toggle-label {
  position: absolute;
  font-size: 1.25rem;
  font-weight: bold;
  transition: opacity 0.25s ease-in-out;
  color: white;
}

.toggle-on {
  left: 0.75rem;
  opacity: 0;
}

.toggle-off {
  right: 0.75rem;
  opacity: 1;
}

/* 🔹 Toggle Knob */
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 2rem;
  height: 2rem;
  background-color: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s ease-in-out, box-shadow 0.25s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid white;
}

/* ✅ When Checked */
.toggle-input:checked + .toggle-switch {
  background-color: #de3163; /* Pink */
}

/* ✅ Move Knob */
.toggle-input:checked + .toggle-switch::after {
  transform: translate(2.5rem, -50%);
}

/* ✅ Show Correct Label */
.toggle-input:checked + .toggle-switch .toggle-on {
  opacity: 1;
}

.toggle-input:checked + .toggle-switch .toggle-off {
  opacity: 0;
}

/* 🔹 Hover & Active Effects */
.toggle-container:hover .toggle-switch::after {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.toggle-container:active .toggle-switch::after {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* 🔹 Disabled State */
.toggle-container.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(50%);
}

.toggle-container.is-disabled .toggle-switch {
  pointer-events: none;
}

.toggle-container.is-disabled:hover .toggle-switch::after {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* 🔹 Mobile Optimization */
@media (max-width: 480px) {
  .toggle-container {
    width: 4rem;
    height: 2rem;
  }

  .toggle-switch::after {
    width: 1.75rem;
    height: 1.75rem;
  }

  .toggle-input:checked + .toggle-switch::after {
    transform: translate(2rem, -50%);
  }
}
</style>
