<script setup>
import { computed, onUnmounted, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  maxWidth: {
    type: [String, Number],
    default: 600,
  },
  persistent: {
    type: Boolean,
    default: false,
  },
  fullscreenOnMobile: {
    type: Boolean,
    default: false,
  },
  hideActions: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue"]);

const isVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

// Lock background scroll when modal is open
watch(isVisible, (isOpen) => {
  if (isOpen) {
    document.documentElement.classList.add("force-no-scroll");
    document.body.classList.add("force-no-scroll");
    const appEl = document.getElementById("app");
    if (appEl) appEl.classList.add("force-no-scroll");
  } else {
    document.documentElement.classList.remove("force-no-scroll");
    document.body.classList.remove("force-no-scroll");
    const appEl = document.getElementById("app");
    if (appEl) appEl.classList.remove("force-no-scroll");
  }
});

onUnmounted(() => {
  document.documentElement.classList.remove("force-no-scroll");
  document.body.classList.remove("force-no-scroll");
  const appEl = document.getElementById("app");
  if (appEl) appEl.classList.remove("force-no-scroll");
});
</script>

<template>
  <VDialog
    v-model="isVisible"
    :max-width="maxWidth"
    :persistent="persistent"
    :fullscreen="$vuetify.display.mobile && fullscreenOnMobile"
    transition="dialog-bottom-transition"
  >
    <div class="dialog-physical-spacer">
      <VCard class="reusable-dialog-card">
        <div class="dialog-header-theme">
          <button
            v-if="!loading"
            class="close-icon"
            @click="isVisible = false"
          >
            <VIcon>bx-x</VIcon>
          </button>
          <h2 class="header-title">{{ title }}</h2>
        </div>

        <slot />

        <template v-if="!hideActions && $slots.actions">
          <div class="dialog-actions-theme">
            <slot name="actions" />
          </div>
        </template>
      </VCard>
    </div>
  </VDialog>
</template>

<style>
/* Forces the background website to stop scrolling entirely */
.force-no-scroll {
  overflow: hidden !important;
}

/* 1. Force the overlay to allow scrolling and start from the very top */
.v-overlay:has(.dialog-physical-spacer):not(:has(.v-dialog--fullscreen)) {
  align-items: flex-start !important;
  overflow-y: auto !important;
}

/* 2. Strip Vuetify's default margins and height limits off the content container */
.v-overlay__content:has(.dialog-physical-spacer):not(.v-dialog--fullscreen) {
  margin: 0 auto !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important; /* Respects the max-width prop */
}

/* 3. THE MAGIC: Because this padding is on a physical DOM element INSIDE Vuetify's
   flex container, the browser physically cannot ignore it when calculating scroll height! */
.v-overlay__content:not(.v-dialog--fullscreen) .dialog-physical-spacer {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 4. Remove the artificial padding when in Mobile Fullscreen mode */
.v-dialog--fullscreen .dialog-physical-spacer {
  padding: 0 !important;
  height: 100% !important;
}
</style>

<style scoped>
/* ========== GLOBAL DIALOG THEME ========== */
:deep(.reusable-dialog-card) {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgb(var(--v-theme-surface)) !important; /* Matches theme surface */
  border: none !important;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  display: flex;
  flex-direction: column;
}

/* Disable internal scrolling completely */
:deep(.v-card__text), :deep(.v-card-text) {
  overflow: visible !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
}

/* ========== EDGE-TO-EDGE HEADER ========== */
.dialog-header-theme {
  background: var(--ye-hero-bg, #003b6f);
  text-align: center;
  padding: 1.5rem 1.5rem;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.header-title {
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Absolute Close Icon */
.close-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.close-icon:hover {
  background: rgba(255, 255, 255, 0.25);
}

.close-icon :deep(.v-icon) {
  font-size: 24px;
}

/* ========== ACTIONS AREA ========== */
.dialog-actions-theme {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: rgb(var(--v-theme-surface));
}

/* Actions override specifically for VCardActions if passed via slot */
:deep(.v-card-actions) {
  background: transparent !important;
  padding: 0 !important;
  width: 100%;
}

/* ========== RESPONSIVE OVERRIDES ========== */
@media (max-width: 768px) {
  .dialog-header-theme {
    padding: 1.5rem 1rem;
  }
  .header-title {
    font-size: 1.3rem !important;
  }
}
</style>
