<script setup>
import { computed, ref, watch } from 'vue';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { Button } from '@/Components/ui/button';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faCircleQuestion, faCheckCircle } from '@fortawesome/free-solid-svg-icons';

const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: 'Potrditev' },
  message: { type: String, default: 'Ali ste prepričani?' },
  confirmText: { type: String, default: 'Potrdi' },
  cancelText: { type: String, default: 'Prekliči' },
  processing: { type: Boolean, default: false },
  maxWidth: { type: String, default: 'md' },
  variant: { 
    type: String, 
    default: 'default', // 'default' or 'success'
    validator: (v) => ['default', 'success'].includes(v)
  },
});

const emit = defineEmits(['update:show', 'close', 'confirm']);

const open = ref(props.show);

watch(() => props.show, (newVal) => {
  open.value = newVal;
});

watch(open, (newVal) => {
  emit('update:show', newVal);
  if (!newVal) {
    emit('close');
  }
});

const onClose = () => {
  open.value = false;
};

const onConfirm = () => {
  emit('confirm');
};

const icon = computed(() => props.variant === 'success' ? faCheckCircle : faCircleQuestion);
const iconColor = computed(() => props.variant === 'success' ? 'text-green-600' : 'text-primary-600');
const iconBg = computed(() => props.variant === 'success' ? 'bg-green-100' : 'bg-primary-100');

const maxWidthClass = computed(() => {
  const maxWidthMap = {
    sm: 'sm:max-w-sm',
    md: 'sm:max-w-md',
    lg: 'sm:max-w-lg',
    xl: 'sm:max-w-xl',
    '2xl': 'sm:max-w-2xl',
    wide: 'sm:max-w-[1200px]',
  };
  return maxWidthMap[props.maxWidth] || 'sm:max-w-md';
});
</script>

<template>
  <Dialog v-model:open="open">
    <DialogContent :class="maxWidthClass">
      <DialogHeader>
        <DialogTitle>
          <div class="flex items-center gap-2">
            <FontAwesomeIcon :icon="icon" :class="['h-5 w-5', iconColor]" />
            <span>{{ title }}</span>
          </div>
        </DialogTitle>
        <DialogDescription>
          <div class="flex items-start gap-4 pt-4">
            <div class="flex-shrink-0">
              <div :class="['flex items-center justify-center h-12 w-12 rounded-full', iconBg]">
                <FontAwesomeIcon :icon="icon" :class="['h-6 w-6', iconColor]" />
              </div>
            </div>
            <div class="flex-1">
              <p class="text-sm text-gray-700">
                {{ message }}
              </p>
              <slot />
            </div>
          </div>
        </DialogDescription>
      </DialogHeader>

      <DialogFooter>
        <Button variant="outline" @click="onClose" :disabled="processing">
          {{ cancelText }}
        </Button>
        <Button
          @click="onConfirm"
          :disabled="processing"
        >
          {{ confirmText }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

