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

interface Props {
    isOpen: boolean;
    documentTitle: string;
    documentUrl: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
    close: [];
}>();

const isMobile = ref(false);

// Check if device is mobile/tablet
const checkMobile = () => {
    isMobile.value = window.innerWidth < 1024; // Less than 1024px = mobile/tablet
};

onMounted(() => {
    checkMobile();
    window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
    window.removeEventListener('resize', checkMobile);
});

// Handle body scroll lock when modal is open
watch(() => props.isOpen, (isOpen) => {
    if (isOpen) {
        document.body.style.overflow = 'hidden';
        
        // On mobile, open PDF directly in new tab
        if (isMobile.value) {
            window.open(props.documentUrl, '_blank');
            // Close modal immediately on mobile
            emit('close');
        }
    } else {
        document.body.style.overflow = 'unset';
    }
});

const handleBackdropClick = (e: MouseEvent) => {
    if (e.target === e.currentTarget) {
        emit('close');
    }
};

const handleDownload = () => {
    window.open(props.documentUrl, '_blank');
};
</script>

<template>
    <!-- Only show modal on desktop (>= 1024px) -->
    <div
        v-if="isOpen && !isMobile"
        class="fixed inset-0 bg-black/75 flex items-center justify-center z-50 p-4"
        @click="handleBackdropClick"
    >
        <div
            class="bg-white rounded-lg w-[95%] h-[95%] max-w-[1200px] max-h-[900px] flex flex-col shadow-2xl"
            @click.stop
        >
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b bg-[#394053] rounded-t-lg">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <h2 class="text-lg font-semibold text-white">
                        {{ documentTitle }}
                    </h2>
                </div>
                <div class="flex items-center gap-2">
                    <button
                        @click="handleDownload"
                        class="flex items-center gap-2 px-4 py-2 bg-[#7CAE7A] text-white rounded-md hover:bg-[#6b9c69] transition-colors text-sm font-medium"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        Download
                    </button>
                    <button
                        @click="emit('close')"
                        class="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-md transition-colors"
                    >
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- PDF Content -->
            <div class="flex-1 p-4 bg-gray-50">
                <iframe
                    :src="`${documentUrl}#view=FitH&toolbar=1&navpanes=1&scrollbar=1`"
                    class="w-full h-full border-0 rounded-md bg-white"
                    :title="documentTitle"
                />
            </div>
        </div>
    </div>
</template>
