<script setup>
import { ref } from 'vue';
import AppModal from './AppModal.vue';
import AppButton from './AppButton.vue';
import Icon from './Icon.vue';

/**
 * Confirmation Dialog component.
 * 
 * A specialized modal for confirming destructive or important actions.
 * 
 * @example
 * <ConfirmDialog
 *   v-model="showConfirm"
 *   title="Eliminar elemento"
 *   message="¿Estás seguro de que quieres eliminar este elemento?"
 *   confirm-text="Eliminar"
 *   variant="danger"
 *   @confirm="deleteItem"
 * />
 */

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: 'Confirmar acción',
    },
    message: {
        type: String,
        default: '¿Estás seguro de que quieres realizar esta acción?',
    },
    confirmText: {
        type: String,
        default: 'Confirmar',
    },
    cancelText: {
        type: String,
        default: 'Cancelar',
    },
    variant: {
        type: String,
        default: 'danger',
        validator: (value) => ['danger', 'warning', 'primary'].includes(value),
    },
    loading: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

const iconConfig = {
    danger: { name: 'trash', bgClass: 'bg-red-100', iconClass: 'text-red-600' },
    warning: { name: 'alert-triangle', bgClass: 'bg-yellow-100', iconClass: 'text-yellow-600' },
    primary: { name: 'info', bgClass: 'bg-blue-100', iconClass: 'text-blue-600' },
};

const buttonVariant = {
    danger: 'danger',
    warning: 'warning',
    primary: 'primary',
};

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

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

const handleCancel = () => {
    emit('cancel');
    close();
};
</script>

<template>
    <AppModal
        :model-value="modelValue"
        size="sm"
        :closable="!loading"
        :close-on-escape="!loading"
        :close-on-overlay="!loading"
        @update:model-value="$emit('update:modelValue', $event)"
    >
        <template #header>
            <div class="flex items-center gap-3">
                <div
                    :class="[
                        'flex h-10 w-10 items-center justify-center rounded-full',
                        iconConfig[variant].bgClass
                    ]"
                >
                    <Icon
                        :name="iconConfig[variant].name"
                        :class="['h-5 w-5', iconConfig[variant].iconClass]"
                    />
                </div>
                <h3 class="text-lg font-semibold text-gray-900">
                    {{ title }}
                </h3>
            </div>
        </template>

        <p class="text-sm text-gray-600">
            {{ message }}
        </p>

        <template #footer>
            <AppButton
                variant="secondary"
                :disabled="loading"
                @click="handleCancel"
            >
                {{ cancelText }}
            </AppButton>
            <AppButton
                :variant="buttonVariant[variant]"
                :loading="loading"
                @click="handleConfirm"
            >
                {{ confirmText }}
            </AppButton>
        </template>
    </AppModal>
</template>
