<template>
    <transition name="fade">
        <div v-if="localActive" class="overlay-lock">
            <div class="backdrop"></div>
            <div class="content" v-if="!isLoading">
                <div class="lock-box">
                    <p>To edit, please enter the password to unlock page:</p>

                    <input
                        v-model="passwordInput"
                        type="password"
                        placeholder="Enter password"
                        class="password-input"
                        @keyup.enter="verifyPassword"
                    />

                    <button @click="verifyPassword" class="unlock-btn">
                        Unlock
                    </button>

                    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
                </div>
            </div>
        </div>
    </transition>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';

interface Props {
    active?: boolean;
    section: string;
    companyId: number;
    bookingId: number;
    password?: string;
}

const props = withDefaults(defineProps<Props>(), {
    active: false,
    password: '1234'
});

const emit = defineEmits<{
    (e: 'initializeLock', value: boolean): void;
    (e: 'lock', value: boolean): void;
}>();

const queueStore = useQueueStore();
const { submit } = useRequest();

const localActive = ref(props.active);
const passwordInput = ref('');
const errorMessage = ref('');
const isLoading = ref(true);

const pendingQueue = computed(() => queueStore.isInCompleteQueue(props.section));

const fetchStatus = async () => {
    isLoading.value = true;

    await submit(route('api.rule.check.transfer.period.lock'), 'post', props.section, false, false, {
        booking_id: props.bookingId,
        company_id: props.companyId
    }, {
        successHandler: (response: any, section?: string, payload?: any) => {
            if (section === props.section) {
                emit('initializeLock', false);
                localActive.value = false;
            }

            setTimeout(() => {
                isLoading.value = false;
            }, 2000);
        },
        errorHandler: (response: any, statusCode: number, sectionName?: string) => {
            isLoading.value = false;
            if (statusCode === 422) {
                // this.$emit("lock", true);
            }
            else if(statusCode === 403) {
                 errorMessage.value = response?.message || '';
            }
        }
    });
};

const verifyPassword = async () => {
    errorMessage.value = '';

    await submit(route('api.booking.delete.lock', props.bookingId), 'delete', `${props.section}UnLock`, false, true, {
        booking_id: props.bookingId,
        password: passwordInput.value
    }, {
        successHandler: (_response: any, section?: string) => {
            if (section === `${props.section}UnLock`) {
                emit('lock', false);
                localActive.value = false;
                passwordInput.value = '';
            }

            setTimeout(() => {
                isLoading.value = false;
            }, 2000);
        },
        errorHandler: (response: any, statusCode: number) => {
            isLoading.value = false;
            if (statusCode === 403) {
                errorMessage.value = response?.message || '';
            }
        }
    });
};

watch(
    () => props.active,
    (newVal) => {
        localActive.value = newVal;
    }
);

watch(
    pendingQueue,
    (inComplete) => {
        if (inComplete) {
            fetchStatus();
        }
    }
);

onMounted(() => {
    queueStore.updateListQueue({ name: props.section });
});
</script>

<style scoped>
.overlay-lock {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
}

.lock-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 300px;
}

.password-input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
}

.unlock-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: none;
    background: #4caf50;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
}

.unlock-btn:hover {
    background: #43a047;
}

.error {
    color: red;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
</style>
