<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  isOpen: boolean
  title?: string
  size?: 'sm' | 'md' | 'lg' | 'xl'
  closeButton?: boolean
  backdrop?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  closeButton: true,
  backdrop: true,
})

const emit = defineEmits<{
  close: []
}>()

const modalClass = computed(() => ({
  [`modal-${props.size}`]: true,
}))

const handleBackdropClick = (e: MouseEvent) => {
  if (e.target === e.currentTarget && props.backdrop) {
    emit('close')
  }
}

const handleEscapeKey = (e: KeyboardEvent) => {
  if (e.key === 'Escape' && props.isOpen) {
    emit('close')
  }
}
</script>

<template>
  <Teleport to="body">
    <transition name="modal">
      <div v-if="isOpen" class="modal-overlay" @click="handleBackdropClick" @keydown="handleEscapeKey">
        <div class="modal-dialog" :class="modalClass">
          <!-- Header -->
          <div v-if="title || $slots.header" class="modal-header">
            <slot name="header">
              <h2 class="modal-title">{{ title }}</h2>
            </slot>
            <button
              v-if="closeButton"
              class="modal-close"
              aria-label="Close dialog"
              @click="emit('close')"
            >
              ×
            </button>
          </div>

          <!-- Body -->
          <div class="modal-body">
            <slot></slot>
          </div>

          <!-- Footer -->
          <div v-if="$slots.footer" class="modal-footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  padding: var(--spacing-4);
}

.modal-dialog {
  background: var(--color-background-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-2xl);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalOpen var(--transition-base) ease-out;
}

@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Size variants */
.modal-sm {
  width: 100%;
  max-width: 400px;
}

.modal-md {
  width: 100%;
  max-width: 600px;
}

.modal-lg {
  width: 100%;
  max-width: 800px;
}

.modal-xl {
  width: 100%;
  max-width: 1000px;
}

/* Header */
.modal-header {
  padding: var(--spacing-4);
  border-bottom: var(--border-width-1) solid var(--color-border-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
}

.modal-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.modal-close {
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  transition: color var(--transition-fast);
  border-radius: var(--border-radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
}

/* Body */
.modal-body {
  padding: var(--spacing-4);
  overflow-y: auto;
  flex: 1;
  color: var(--color-text-primary);
}

/* Footer */
.modal-footer {
  padding: var(--spacing-4);
  border-top: var(--border-width-1) solid var(--color-border-secondary);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* Transition */
.modal-enter-active,
.modal-leave-active {
  transition: opacity var(--transition-base);
}

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

.modal-enter-from .modal-dialog,
.modal-leave-to .modal-dialog {
  transform: scale(0.95);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .modal-overlay {
    padding: var(--spacing-2);
  }

  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl {
    max-width: 100%;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-3);
  }

  .modal-body {
    max-height: calc(90vh - 120px);
  }
}
</style>
