<template>
    <div class="reader-controls">
        <button @click="onPrevious" :disabled="isFirstPage" class="nav-button">
            <ChevronLeftIcon class="h-6 w-6" />
        </button>

        <div class="controls-center">
            <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
            <div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
                <ChapterSelector
                    :available-chapters="availableChapters"
                    @chapter-selected="onChapterSelected"
                />
            </div>
        </div>

        <div class="controls-right">
            <!-- Bouton paramètres intégré -->
            <button @click="onToggleSettings" class="settings-button" :class="{ 'active': settingsOpen }" title="Paramètres">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
                </svg>
            </button>

            <button @click="onNext" :disabled="isLastPage" class="nav-button">
                <ChevronRightIcon class="h-6 w-6" />
            </button>
        </div>
    </div>
</template>

<script setup>
    import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
import ChapterSelector from './ChapterSelector.vue';

    defineProps({
        currentPage: {
            type: Number,
            required: true
        },
        totalPages: {
            type: Number,
            required: true
        },
        isFirstPage: {
            type: Boolean,
            required: true
        },
        isLastPage: {
            type: Boolean,
            required: true
        },
        availableChapters: {
            type: Array,
            default: () => []
        },
        settingsOpen: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['previous', 'next', 'chapter-selected', 'toggle-settings']);

    const onPrevious = () => emit('previous');
    const onNext = () => emit('next');
    const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
    const onToggleSettings = () => emit('toggle-settings');
</script>

<style lang="postcss" scoped>
    .reader-controls {
        @apply flex items-center justify-between p-4 bg-gray-800;
    }

    /* Responsive pour reader-controls */
    @media (max-width: 480px) {
        .reader-controls {
            padding: 0.5rem;
            gap: 0.25rem;
        }
    }

    .controls-center {
        @apply flex flex-col items-center space-y-2;
    }

    /* Responsive pour controls-center */
    @media (max-width: 480px) {
        .controls-center {
            gap: 0.25rem;
        }
    }

    .controls-right {
        @apply flex items-center gap-2;
    }

    /* Responsive pour controls-right */
    @media (max-width: 480px) {
        .controls-right {
            gap: 0.25rem;
        }
    }

    .page-info {
        @apply text-lg font-medium;
    }

    .chapter-selector-wrapper {
        @apply min-w-[120px] max-w-[200px];
    }

    /* Responsive pour chapter-selector-wrapper */
    @media (max-width: 480px) {
        .chapter-selector-wrapper {
            min-width: 100px;
            max-width: 60vw;
        }
    }

    .nav-button {
        @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
    }

    /* Responsive pour nav-button */
    @media (max-width: 480px) {
        .nav-button {
            padding: 0.25rem 0.5rem;
        }
    }

    .nav-button:disabled {
        @apply opacity-50 cursor-not-allowed;
    }

    .settings-button {
        @apply px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors duration-200 flex items-center justify-center;
    }

    /* Responsive pour settings-button */
    @media (max-width: 480px) {
        .settings-button {
            padding: 0.25rem 0.5rem;
        }
    }

    .settings-button.active {
        @apply bg-blue-600 hover:bg-blue-700;
    }
</style>
