<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps<{
    isOpen: boolean;
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    requireHold?: boolean; // If true, user must hold button for 3s
}>();

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

const holdProgress = ref(0);
let holdInterval: number | undefined;

const startHold = () => {
    if (!props.requireHold) return;
    holdProgress.value = 0;
    holdInterval = window.setInterval(() => {
        holdProgress.value += 2; // 50 * 2 = 100% in ~2.5s (adjusted for UX)
        if (holdProgress.value >= 100) {
            stopHold();
            emit('confirm');
        }
    }, 50); // Update every 50ms
};

const stopHold = () => {
    if (holdInterval) {
        clearInterval(holdInterval);
        holdInterval = undefined;
    }
    if (holdProgress.value < 100) {
        holdProgress.value = 0;
    }
};

const onConfirmClick = () => {
    if (!props.requireHold) {
        emit('confirm');
    }
};

watch(() => props.isOpen, (val) => {
    if (!val) {
        stopHold();
        holdProgress.value = 0;
    }
});
</script>

<template>
    <transition name="fade">
        <div v-if="isOpen" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-head">{{ title }}</div>
                <div class="modal-body">{{ message }}</div>
                <div class="modal-actions">
                    <button class="btn-cancel" @click="$emit('close')">{{ cancelText || 'Cancel' }}</button>

                    <button
                        class="btn-confirm"
                        :class="{ 'holding': requireHold }"
                        @mousedown="startHold"
                        @mouseup="stopHold"
                        @mouseleave="stopHold"
                        @touchstart.prevent="startHold"
                        @touchend.prevent="stopHold"
                        @click="onConfirmClick"
                    >
                        <div v-if="requireHold" class="hold-fill" :style="{ width: `${holdProgress}%` }"></div>
                        <span class="btn-text">{{ confirmText || 'Confirm' }}</span>
                        <span v-if="requireHold && holdProgress > 0" class="hold-hint">Hold...</span>
                    </button>
                </div>
            </div>
        </div>
    </transition>
</template>

<style scoped>
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.modal-card { background: #0a0a0a; border: 1px solid #222; border-radius: 16px; padding: 24px; width: 90%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-head { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.modal-body { font-size: 13px; color: #bbb; margin-bottom: 24px; line-height: 1.5; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

.btn-cancel { background: transparent; border: 1px solid #333; color: #888; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn-cancel:hover { color: #fff; border-color: #555; }

.btn-confirm { background: #ff007a; border: none; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 900; cursor: pointer; position: relative; overflow: hidden; transition: 0.2s; }
.btn-confirm:hover { box-shadow: 0 0 15px rgba(255,0,122,0.4); }
.btn-confirm.holding { background: #33001a; border: 1px solid #ff007a; }

.hold-fill { position: absolute; top: 0; left: 0; height: 100%; background: #ff007a; transition: width 0.05s linear; z-index: 0; }
.btn-text { position: relative; z-index: 1; }
.hold-hint { position: absolute; right: 10px; font-size: 9px; opacity: 0.7; z-index: 1; top: 50%; transform: translateY(-50%); }

@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
