<template>
  <div class="checkbox-container">
    <label class="checkbox-item" :class="{ disabled: disabled }">
      <input
          @keydown.enter="$emit('enter', $event)"
          type="checkbox"
          :checked="internalChecked"
          :disabled="disabled"
          :indeterminate.prop="internalIndeterminate"
          @change="handleChange"
          ref="checkboxInput"
      >
      <span class="checkmark" :class="{ indeterminate: internalIndeterminate }"></span>
      <span class="checkbox-label"><slot></slot></span>
    </label>
  </div>
</template>

<script>
export default {
  emits: ["checkbox-changed", "enter"],
  props: {
    checked: {
      type: Boolean,
      default: true,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    indeterminate: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  name: "Checkbox",
  data() {
    return {
      internalChecked: this.checked,
      internalIndeterminate: this.indeterminate && !this.checked,
    }
  },
  watch: {
    checked(newVal) {
      this.internalChecked = newVal;
      // Wenn checked true ist, dann indeterminate deaktivieren
      if (newVal) {
        this.internalIndeterminate = false;
        this.updateIndeterminateState(false);
      }
    },
    indeterminate(newVal) {
      // Indeterminate nur setzen, wenn checked false ist
      this.internalIndeterminate = newVal && !this.internalChecked;
      this.updateIndeterminateState(this.internalIndeterminate);
    }
  },
  mounted() {
    // Beim Mount: checked hat Priorität über indeterminate
    if (this.internalChecked) {
      this.internalIndeterminate = false;
    }
    this.updateIndeterminateState(this.internalIndeterminate);
  },
  methods: {
    focus() {
      this.$refs.checkboxInput?.focus();
    },
    handleChange(event) {
      if (this.disabled) return;

      const newValue = event.target.checked;
      const valueChanged = this.internalChecked !== newValue;

      // Bei User-Interaktion: indeterminate zurücksetzen
      this.internalIndeterminate = false;
      this.internalChecked = newValue;
      this.updateIndeterminateState(false);

      if (valueChanged) {
        this.$emit('checkbox-changed', newValue);
      }
    },
    updateIndeterminateState(value) {
      if (this.$refs.checkboxInput) {
        this.$refs.checkboxInput.indeterminate = value;
      }
    }
  }
}
</script>

<style>
.checkbox-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.checkbox-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-item.disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.checkmark {
  position: relative;
  height: 2rem;
  width: 2rem;
  background-color: #ffffff;
  border: 0.2rem solid #DCDCDC;
  border-radius: 0.4rem;
  margin-right: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-item:not(.disabled):hover .checkmark {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.checkbox-item.disabled .checkmark {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}

.checkbox-item input:checked ~ .checkmark {
  background-color: #002F54;
  border-color: #002F54;
}

.checkbox-item.disabled input:checked ~ .checkmark {
  background-color: #6b7280;
  border-color: #6b7280;
}

.checkmark.indeterminate {
  background-color: #002F54;
  border-color: #002F54;
}

.checkbox-item.disabled .checkmark.indeterminate {
  background-color: #6b7280;
  border-color: #6b7280;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  width: 0.6rem;
  height: 1rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  top: 1px;
  left: 5px;
  transition: border-color 0.3s ease;
}

.checkbox-item input:checked ~ .checkmark::after {
  display: block;
}

.checkmark.indeterminate::after {
  display: block;
  width: 1rem;
  height: 0;
  border-width: 0 0 0.2rem 0;
  transform: rotate(0deg);
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.1rem;
}

.checkbox-item:not(.disabled):hover input:checked ~ .checkmark::after {
  border-color: #8DB3FE;
}

.checkbox-item:not(.disabled):hover .checkmark.indeterminate::after {
  border-color: #8DB3FE;
}

.checkbox-label {
  color: #002F54;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.checkbox-item.disabled .checkbox-label {
  color: #8a8a8a;
}
</style>