<template>
  <div 
    v-if="isVisible" 
    :class="['base-dialog', { 'modal-dialog': isModal, 'non-modal-dialog': !isModal }]"
    @click.self="handleOverlayClick"
  >
    <div 
      :class="['dialog-container', sizeClass]"
      :style="dialogStyle"
      @mousedown="handleMouseDown"
    >
      <!-- Header -->
      <div 
        class="dialog-header" 
        :class="{ draggable: isDraggable }"
        @mousedown="startDrag"
      >
        <h3 class="dialog-title">{{ title }}</h3>
        <slot name="header-actions"></slot>
        <div class="dialog-controls">
          <button 
            v-if="minimizable" 
            @click="$emit('minimize')" 
            class="control-btn minimize-btn" 
            :title="$t('baseDialog.minimize')"
          >
            −
          </button>
          <button 
            v-if="closable" 
            @click="handleClose" 
            class="control-btn close-btn" 
            :title="$t('baseDialog.close')"
          >
            ×
          </button>
        </div>
      </div>

      <!-- Content -->
      <div class="dialog-body">
        <slot></slot>
      </div>

      <!-- Footer (optional) -->
      <div v-if="$slots.footer" class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseDialog',
  props: {
    // Sichtbarkeit
    modelValue: {
      type: Boolean,
      default: false
    },
    
    // Dialog-Typ
    isModal: {
      type: Boolean,
      default: true
    },
    
    // Titel
    title: {
      type: String,
      required: true
    },
    
    // Größe: 'small', 'medium', 'large', 'fullscreen'
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large', 'fullscreen'].includes(value)
    },

    width: {
      type: [String, Number],
      default: null
    },

    maxWidth: {
      type: [String, Number],
      default: null
    },
    
    // Position für nicht-modale Dialoge
    position: {
      type: Object,
      default: () => ({ x: 100, y: 100 })
    },
    
    // z-Index
    zIndex: {
      type: Number,
      default: 1000
    },
    
    // Funktionalität
    closable: {
      type: Boolean,
      default: true
    },
    
    minimizable: {
      type: Boolean,
      default: false
    },
    
    draggable: {
      type: Boolean,
      default: true
    },
    
    // Schließen bei Overlay-Klick (nur bei modalen Dialogen)
    closeOnOverlay: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      localPosition: { ...this.position },
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0
    };
  },
  
  computed: {
    isVisible() {
      return this.modelValue;
    },
    
    sizeClass() {
      return `dialog-${this.size}`;
    },
    
    dialogStyle() {
      const style = {
        zIndex: this.zIndex
      };

      if (this.width !== null) {
        style.width = typeof this.width === 'number' ? `${this.width}px` : this.width;
      }

      if (this.maxWidth !== null) {
        style.maxWidth = typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth;
      }
      
      if (!this.isModal) {
        style.left = `${this.localPosition.x}px`;
        style.top = `${this.localPosition.y}px`;
      }
      
      return style;
    },
    
    isDraggable() {
      return this.draggable && !this.isModal;
    }
  },
  
  methods: {
    handleClose() {
      this.$emit('update:modelValue', false);
      this.$emit('close');
    },
    
    handleOverlayClick() {
      if (this.isModal && this.closeOnOverlay) {
        this.handleClose();
      }
    },
    
    handleMouseDown() {
      if (!this.isModal) {
        this.$emit('focus');
      }
    },
    
    startDrag(event) {
      if (!this.isDraggable) return;
      
      this.isDragging = true;
      this.dragStartX = event.clientX - this.localPosition.x;
      this.dragStartY = event.clientY - this.localPosition.y;
      
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
      
      event.preventDefault();
    },
    
    onDrag(event) {
      if (!this.isDragging) return;
      
      this.localPosition.x = event.clientX - this.dragStartX;
      this.localPosition.y = event.clientY - this.dragStartY;
      
      this.$emit('update:position', { ...this.localPosition });
    },
    
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  },
  
  watch: {
    position: {
      handler(newPos) {
        this.localPosition = { ...newPos };
      },
      deep: true
    }
  },
  
  beforeUnmount() {
    if (this.isDragging) {
      this.stopDrag();
    }
  }
};
</script>

<style scoped>
/* Base Dialog Wrapper */
.base-dialog {
  position: fixed;
  pointer-events: none;
}

/* Modal Dialog (mit Overlay) */
.modal-dialog {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  pointer-events: auto;
}

/* Non-Modal Dialog (ohne Overlay) */
.non-modal-dialog {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}

/* Dialog Container */
.dialog-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
}

/* Modal Dialog Container */
.modal-dialog .dialog-container {
  position: relative;
}

/* Non-Modal Dialog Container */
.non-modal-dialog .dialog-container {
  position: absolute;
}

/* Größen */
.dialog-small {
  width: 400px;
  max-width: 90vw;
}

.dialog-medium {
  width: 600px;
  max-width: 90vw;
}

.dialog-large {
  width: 900px;
  max-width: 90vw;
}

.dialog-fullscreen {
  width: 90vw;
  height: 90vh;
  max-width: none;
  max-height: 90vh;
}

/* Header */
.dialog-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  padding: 4px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}

.dialog-header.draggable {
  cursor: move;
}

.dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
  color: var(--text-on-primary);
}

/* Controls */
.dialog-controls {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.control-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.close-btn:hover {
  background: rgba(200, 74, 56, 0.72);
}

/* Body */
.dialog-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Footer */
.dialog-footer {
  padding: 4px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dialog-small,
  .dialog-medium,
  .dialog-large {
    width: 95vw;
    max-width: 95vw;
  }
  
  .dialog-fullscreen {
    width: 95vw;
    height: 95vh;
  }
}
</style>
