<template>
    <div class="chapter-reader" :class="{ rtl: store.readingDirection === 'rtl' }">
        <div v-if="store.isLoading" class="loading">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
        </div>

        <div v-else-if="store.error" class="error">
            {{ store.error }}
        </div>

        <div v-else class="reader-content">
            <ReaderControls
                v-if="store.readingMode === 'single'"
                :current-page="store.currentPage"
                :total-pages="store.totalPages"
                :is-first-page="store.isFirstPage"
                :is-last-page="store.isLastPage"
                @previous="store.previousPage"
                @next="store.nextPage" />

            <template v-if="store.readingMode === 'single'">
                <ReaderPage
                    :page-data="store.currentPageData"
                    :page-number="store.currentPage + 1"
                    :zoom="store.zoom" />
            </template>
            <template v-else>
                <InfiniteReader :pages="store.pages" :zoom="store.zoom" @page-visible="store.handlePageVisible" />
            </template>

            <ReaderSettings
                :reading-mode="store.readingMode"
                :reading-direction="store.readingDirection"
                :zoom="store.zoom"
                @toggle-reading-mode="toggleReadingMode"
                @toggle-reading-direction="toggleReadingDirection"
                @zoom-in="zoomIn"
                @zoom-out="zoomOut" />
        </div>
    </div>
</template>

<script setup>
    import { onMounted, onUnmounted, watch } from 'vue';
    import { useReaderStore } from '../../application/store/readerStore';
    import ReaderControls from './ReaderControls.vue';
    import ReaderPage from './ReaderPage.vue';
    import ReaderSettings from './ReaderSettings.vue';
    import InfiniteReader from './InfiniteReader.vue';

    const props = defineProps({
        chapterId: {
            type: String,
            required: true
        }
    });

    const store = useReaderStore();

    const toggleReadingMode = () => {
        store.setReadingMode(store.readingMode === 'single' ? 'infinite' : 'single');
    };

    const toggleReadingDirection = () => {
        store.setReadingDirection(store.readingDirection === 'ltr' ? 'rtl' : 'ltr');
    };

    const zoomIn = () => {
        store.setZoom(Math.min(store.zoom + 0.1, 2));
    };

    const zoomOut = () => {
        store.setZoom(Math.max(store.zoom - 0.1, 0.5));
    };

    const handleKeyPress = event => {
        if (store.readingMode === 'single') {
            if (event.key === 'ArrowRight') {
                store.nextPage();
            } else if (event.key === 'ArrowLeft') {
                store.previousPage();
            }
        }
    };

    watch(
        () => props.chapterId,
        newId => {
            if (newId) {
                store.loadChapter(newId);
            }
        },
        { immediate: true }
    );

    onMounted(() => {
        window.addEventListener('keydown', handleKeyPress);
    });

    onUnmounted(() => {
        window.removeEventListener('keydown', handleKeyPress);
    });
</script>

<style lang="postcss" scoped>
    .chapter-reader {
        @apply w-full h-full flex flex-col items-center justify-center bg-gray-900 text-white;
    }

    .loading {
        @apply flex items-center justify-center h-full;
    }

    .error {
        @apply text-red-500 text-xl;
    }

    .reader-content {
        @apply w-full h-full flex flex-col;
    }

    .rtl {
        direction: rtl;
    }
</style>
