<script setup>
import { ref, computed } from 'vue'
import SlideUploader from '@/Components/SlideUploader.vue'
import SlideGrid from '@/Components/SlideGrid.vue'

const props = defineProps({
    serviceId: {
        type: Number,
        required: true,
    },
    slides: {
        type: Array,
        default: () => [],
    },
})

const emit = defineEmits(['slides-updated'])

// Filter slides to only show moderation slides for this service
const moderationSlides = computed(() => {
    return props.slides.filter(
        (slide) => slide.type === 'moderation' && slide.service_id === props.serviceId
    )
})

function handleSlideUploaded() {
    emit('slides-updated')
}

function handleSlideDeleted() {
    emit('slides-updated')
}

function handleSlideUpdated() {
    emit('slides-updated')
}
</script>

<template>
    <div data-testid="moderation-block" class="moderation-block space-y-6">
        <!-- Block header -->
        <div class="border-b border-gray-200 pb-4">
            <h3 class="text-lg font-semibold text-gray-900">
                Moderationsfolien
            </h3>
            <p class="mt-1 text-sm text-gray-500">
                Folien für diesen Gottesdienst
            </p>
        </div>

        <!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
        <div class="flex flex-col lg:flex-row-reverse gap-6">
            <!-- Slide uploader -->
            <div class="lg:w-1/3">
                <SlideUploader
                    data-testid="moderation-block-uploader"
                    type="moderation"
                    :service-id="serviceId"
                    :show-expire-date="false"
                    @uploaded="handleSlideUploaded"
                />
            </div>

            <!-- Slide grid -->
            <div class="flex-1 lg:w-2/3">
                <SlideGrid
                    data-testid="moderation-block-grid"
                    :slides="moderationSlides"
                    type="moderation"
                    :show-expire-date="false"
                    @deleted="handleSlideDeleted"
                    @updated="handleSlideUpdated"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.moderation-block {
    /* Component-specific styles if needed */
}
</style>
