<template>
  <q-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :persistent="persistent"
  >
    <q-card :style="{ width: width, maxWidth: maxWidth }">
      <!-- Modal Header -->
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{ title }}</div>
        <q-space />
        <q-btn
          v-if="showClose"
          icon="close"
          flat
          round
          dense
          @click="handleClose"
        />
      </q-card-section>

      <!-- Modal Content -->
      <q-card-section :class="contentClass">
        <slot></slot>
      </q-card-section>

      <!-- Modal Actions -->
      <q-card-actions v-if="$slots.actions || showDefaultActions" align="right" class="q-px-md q-pb-md">
        <slot name="actions">
          <q-btn
            v-if="showDefaultActions"
            flat
            :label="cancelLabel"
            color="grey"
            @click="handleCancel"
          />
          <q-btn
            v-if="showDefaultActions"
            unelevated
            :label="confirmLabel"
            :color="confirmColor"
            :loading="loading"
            @click="handleConfirm"
          />
        </slot>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
interface Props {
  modelValue: boolean;
  title?: string;
  width?: string;
  maxWidth?: string;
  persistent?: boolean;
  showClose?: boolean;
  showDefaultActions?: boolean;
  cancelLabel?: string;
  confirmLabel?: string;
  confirmColor?: string;
  loading?: boolean;
  contentClass?: string;
}

withDefaults(defineProps<Props>(), {
  title: '',
  width: '500px',
  maxWidth: '90vw',
  persistent: false,
  showClose: true,
  showDefaultActions: true,
  cancelLabel: 'ยกเลิก',
  confirmLabel: 'ยืนยัน',
  confirmColor: 'primary',
  loading: false,
  contentClass: ''
});

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'confirm': [];
  'cancel': [];
  'close': [];
}>();

const handleClose = () => {
  emit('update:modelValue', false);
  emit('close');
};

const handleCancel = () => {
  emit('update:modelValue', false);
  emit('cancel');
};

const handleConfirm = () => {
  emit('confirm');
};
</script>
