<script setup>
import Modal from '@Holos/Modal.vue';

/** Props */
const props = defineProps({
    show: {
        type: Boolean,
        required: true
    },
    formUrl: {
        type: String,
        required: true
    },
    title: {
        type: String,
        default: '¡Tu opinión nos importa!'
    },
    message: {
        type: String,
        default: 'Cuéntanos cómo fue tu experiencia. Tu feedback nos ayuda a mejorar y solo te tomará <strong class="underline">menos de un minuto</strong>.'
    },
    buttonText: {
        type: String,
        default: 'Ir a la encuesta'
    },
    laterText: {
        type: String,
        default: 'Tal vez más tarde'
    },
    footerText: {
        type: String,
        default: 'MEJORA CONTINUA · EXPERIENCIA DEL CLIENTE'
    },
    openInNewTab: {
        type: Boolean,
        default: true
    }
});

/** Emits */
const emit = defineEmits(['close']);

/** Methods */
const close = () => {
    emit('close');
};

const goToForm = () => {
    if (!props.formUrl) {
        window.Notify?.warning('No se encontro la URL del formulario.');
        return;
    }

    if (props.openInNewTab) {
        window.open(props.formUrl, '_blank', 'noopener,noreferrer');
    } else {
        window.location.href = props.formUrl;
    }

    close();
};
</script>

<template>
    <Modal :show="show" max-width="sm" @close="close">
        <div class="relative bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col items-center text-center">

            <!-- Close button -->
            <button
                type="button"
                class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
                @click="close"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>

            <!-- Star icon -->
            <div class="mb-5 flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-50 dark:bg-indigo-900/30">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                </svg>
            </div>

            <!-- Title -->
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
                {{ title }}
            </h2>

            <!-- Message -->
            <p
                class="text-sm text-indigo-500 dark:text-indigo-400 mb-7 leading-relaxed max-w-xs"
                v-html="message"
            />

            <!-- Primary button -->
            <button
                type="button"
                class="w-full flex items-center justify-center gap-2 bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white font-semibold text-sm py-3 px-6 rounded-full transition-colors mb-4"
                @click="goToForm"
            >
                {{ buttonText }}
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                </svg>
            </button>

            <!-- Later link -->
            <button
                type="button"
                class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors mb-6"
                @click="close"
            >
                {{ laterText }}
            </button>

            <!-- Footer -->
            <p class="text-[10px] tracking-widest uppercase text-gray-400 dark:text-gray-500 font-medium">
                {{ footerText }}
            </p>

        </div>
    </Modal>
</template>
