<template>
  <teleport to="body">
    <transition name="modal" appear>
      <div
          v-if="isVisible"
          class="modal-overlay"
          @click="closeOnBackdrop && close()"
          @keydown.esc="closeOnEscape && close()"
          tabindex="-1"
          ref="modalOverlay"
          :style="modalAddStyle"
      >
        <div class="modal-container">
          <box
              @click.stop
              class="modal-box"
              @mouseenter="onModalMouseEnter"
              @mouseleave="onModalMouseLeave"
          >
            <slot></slot>
          </box>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script>
import Box from "@/components/UI/Box.vue";

export default {
  name: "Modal",
  components: {Box},
  props: {
    state: {
      type: Boolean,
      default: false
    },
    closeOnBackdrop: {
      type: Boolean,
      default: true
    },
    closeOnEscape: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      validators: (value) => value >= 0,
      default: 5000,
    },
    resizeTransitionDuration: {
      type: String,
      default: '0.3s'
    }
  },
  emits: ['close'],
  computed: {
    modalAddStyle() {
      return {
        zIndex: this.zIndex,
        '--resize-duration': this.resizeTransitionDuration
      }
    },
    isVisible() {
      return this.state;
    }
  },
  watch: {
    isVisible(newVal) {
      if (newVal) {
        this.handleOpen();
      } else {
        this.handleClose();
      }
    }
  },
  data() {
    return {
      preventScroll: null
    }
  },
  mounted() {
    if (this.isVisible) {
      this.handleOpen();
    }
  },
  beforeUnmount() {
    this.handleClose();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    handleOpen() {
      // Prevent scroll via event listener
      this.preventScroll = (e) => {
        // Allow scrolling when mouse is over modal
        if (this.isMouseOverModal) {
          return;
        }
        e.preventDefault();
      };

      // Prevent scroll, touch events and keyboard scrolling
      document.addEventListener('wheel', this.preventScroll, { passive: false });
      document.addEventListener('touchmove', this.preventScroll, { passive: false });
      document.addEventListener('keydown', this.preventScrollKeys, { passive: false });

      this.$nextTick(() => {
        if (this.$refs.modalOverlay) {
          this.$refs.modalOverlay.focus();
        }
      });
    },
    handleClose() {
      // Re-enable scrolling
      if (this.preventScroll) {
        document.removeEventListener('wheel', this.preventScroll);
        document.removeEventListener('touchmove', this.preventScroll);
        document.removeEventListener('keydown', this.preventScrollKeys);
      }
      this.isMouseOverModal = false;
    },
    preventScrollKeys(e) {
      // Check if focus is inside modal
      if (this.$refs.modalOverlay && this.$refs.modalOverlay.contains(document.activeElement)) {
        return; // Allow keyboard scrolling inside modal
      }

      // Prevent scrolling via keyboard (arrow keys, space, page up/down)
      const scrollKeys = [32, 33, 34, 35, 36, 37, 38, 39, 40];
      if (scrollKeys.includes(e.keyCode)) {
        e.preventDefault();
      }
    },
    onModalMouseEnter() {
      this.isMouseOverModal = true;
    },
    onModalMouseLeave() {
      this.isMouseOverModal = false;
    }
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;      /* Statt right: 0 */
  height: 100vh;     /* Statt bottom: 0 */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 1rem;
}

.modal-container {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  /* Smooth transitions for size changes */
  transition:
      width var(--resize-duration, 0.3s) ease,
      height var(--resize-duration, 0.3s) ease,
      max-width var(--resize-duration, 0.3s) ease,
      max-height var(--resize-duration, 0.3s) ease,
      transform var(--resize-duration, 0.3s) ease;

}

/* Transition animations for modal open/close */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.9) translateY(-10px);
}

/* Optional: Add transition to content inside the modal for smoother changes */
.modal-box :deep(*) {
  transition: opacity 0.2s ease;
}
</style>