<template>
  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]"
    @click.self="handleOverlayClick">
    <div class="dialog" :class="{ minimized: minimized }"
      :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
      v-if="!minimized" ref="dialog">
      <div class="dialog-header" @mousedown="startDragging">
        <span v-if="icon" class="dialog-icon">
          <img :src="'/images/icons/' + icon" alt="Icon" />
        </span>
        <span class="dialog-title">{{ localIsTitleTranslated ? $t(localTitle) : localTitle }}</span>
        <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
        <span v-if="showClose" class="dialog-close" @click="close">✖</span>
      </div>
      <div class="dialog-body" :style="{ '--dialog-display': display }">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <button v-for="button in buttons" :key="button.text" @click="buttonClick(button.action)" class="dialog-button" :disabled="button.disabled">
          {{ isTitleTranslated ? $t(button.text) : button.text }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DialogWidget',
  props: {
    icon: {
      type: String,
      default: null
    },
    title: {
      type: String,
      required: true
    },
    showClose: {
      type: Boolean,
      default: false
    },
    buttons: {
      type: Array,
      default: () => [{ text: 'Ok', action: 'close' }]
    },
    modal: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '70%'
    },
    height: {
      type: String,
      default: '60%'
    },
    name: {
      type: String,
      required: true
    },
    isTitleTranslated: {
      type: Boolean,
      default: false
    },
    display: {
      type: String,
      default: 'block'
    }
  },
  data() {
    return {
      visible: false,
      minimized: false,
      dialogTop: '50%',
      dialogLeft: '50%',
      isDragging: false,
      dragOffsetX: 0,
      dragOffsetY: 0,
      localTitle: this.title,
      localIsTitleTranslated: this.isTitleTranslated,
      isActive: false,
    };
  },
  computed: {
    dialogWidth() {
      const val = this.width || '70%';
      return val;
    },
    dialogHeight() {
      return this.height || '60%';
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.minimized = false;
      }
    },
    title(newValue) {
      this.updateTitle(newValue);
    }
  },
  methods: {
    open() {
      this.visible = true;
      if (this.modal === false) {
        this.$store.dispatch('dialogs/addOpenDialog', {
          status: 'open',
          dialog: this
        });
      }
    },
    close() {
      this.visible = false;
      this.$store.dispatch('dialogs/removeOpenDialog', this.name);
    },
    buttonClick(action) {
      if (typeof action === 'function') {
        action();
      } else {
        this.$emit(action);
        if (action === 'close') {
          this.close();
        }
      }
    },
    handleOverlayClick() {
      if (!this.modal) {
        this.close();
      }
    },
    minimize() {
      this.minimized = true;
    },
    toggleMinimize() {
      this.minimized = !this.minimized;
      this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
    },
    isMinimized() {
      return this.minimized;
    },
    startDragging(event) {
      if (window.innerWidth <= 760) {
        return;
      }
      this.isDragging = true;
      const dialog = this.$refs.dialog;
      this.dragOffsetX = event.clientX - dialog.offsetLeft;
      this.dragOffsetY = event.clientY - dialog.offsetTop;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDragging);
    },
    onDrag(event) {
      if (!this.isDragging) return;
      this.dialogLeft = `${event.clientX - this.dragOffsetX}px`;
      this.dialogTop = `${event.clientY - this.dragOffsetY}px`;
    },
    stopDragging() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDragging);
    },
    updateTitle(newTitle, newIsTitleTranslated) {
      this.localTitle = newTitle;
      this.localIsTitleTranslated = newIsTitleTranslated;
      this.$store.dispatch('dialogs/updateDialogTitle', {
        name: this.name,
        newTitle: newTitle,
        isTitleTranslated: this.localIsTitleTranslated
      });
    },
    setActiveState(newActiveState) {
      this.isActive = newActiveState;
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(24, 18, 11, 0.44);
  backdrop-filter: blur(10px);
}

.dialog-overlay.non-modal {
  background: transparent;
  pointer-events: none;
}

.dialog {
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 242, 232, 0.98) 100%);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-medium);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(93, 64, 55, 0.12);
  pointer-events: all;
  position: absolute;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.dialog.minimized {
  height: auto;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(93, 64, 55, 0.1);
  background:
    linear-gradient(180deg, rgba(248, 162, 43, 0.16) 0%, rgba(255, 255, 255, 0.56) 100%);
  cursor: move;
}

.dialog-icon {
  padding: 2px 6px 0 0;
}

.dialog-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.dialog-title {
  flex-grow: 1;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.dialog-close,
.dialog-minimize {
  cursor: pointer;
  font-size: 1.1rem;
  margin-left: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dialog-close:hover,
.dialog-minimize:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-text-primary);
}

.dialog-body {
  flex-grow: 1;
  padding: 18px 20px;
  overflow-y: auto;
  display: var(--dialog-display);
  color: var(--color-text-primary);
  &[style*="--dialog-display: flex"] {
    flex-direction: column;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(93, 64, 55, 0.08);
  background: rgba(255, 255, 255, 0.46);
}

.dialog-button {
  margin-left: 0;
  min-height: 38px;
}

.dialog-button:hover {
  color: #2b1f14;
}

.is-active {
  z-index: 1100;
}

@media (max-width: 760px) {
  .dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    height: auto !important;
    max-height: calc(100dvh - 16px);
  }

  .dialog-header {
    cursor: default;
    padding: 10px 12px;
  }

  .dialog-title {
    font-size: 1rem;
  }

  .dialog-body {
    padding: 14px;
  }

  .dialog-footer {
    flex-direction: column;
  }

  .dialog-button {
    width: 100%;
  }
}
</style>
