<script setup>
import { ref, computed } from 'vue'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import SlideUploader from '@/Components/SlideUploader.vue'
import SlideGrid from '@/Components/SlideGrid.vue'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'

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

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

// Information slides are already filtered server-side (expire_date >= service.date)
// but we keep a computed for any additional client-side needs
const informationSlides = computed(() => {
    return props.slides.filter((slide) => slide.type === 'information')
})

// Count slides expiring within 3 days of service date for the warning badge
const expiringSoonCount = computed(() => {
    const serviceDate = new Date(props.serviceDate)
    const threeDaysAfter = new Date(serviceDate)
    threeDaysAfter.setDate(threeDaysAfter.getDate() + 3)

    return informationSlides.value.filter((slide) => {
        if (!slide.expire_date) return false
        const expDate = new Date(slide.expire_date)
        return expDate >= serviceDate && expDate <= threeDaysAfter
    }).length
})

// Delete all state (#2)
const confirmingDeleteAll = ref(false)
const deletingAll = ref(false)

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

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

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

function confirmDeleteAll() {
    deletingAll.value = true
    axios.delete(route('slides.bulk-destroy'), {
        data: { type: 'information', service_id: null },
    })
        .then(() => {
            confirmingDeleteAll.value = false
            deletingAll.value = false
            emit('slides-updated')
            router.reload({ preserveScroll: true })
        })
        .catch(() => {
            deletingAll.value = false
        })
}

function downloadBundle() {
    window.location.href = route('services.download-bundle', {
        service: props.serviceId,
        blockType: 'information',
    })
}
</script>

<template>
    <div data-testid="information-block" class="information-block space-y-4">
        <!-- Block header with badges and delete-all (#2) -->
        <div class="flex items-center justify-end gap-2">
            <span
                v-if="informationSlides.length > 0"
                class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700 ring-1 ring-amber-200/80"
            >
                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5a2.25 2.25 0 002.25-2.25V5.25a2.25 2.25 0 00-2.25-2.25H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
                </svg>
                {{ informationSlides.length }} {{ informationSlides.length === 1 ? 'Folie' : 'Folien' }}
            </span>

            <span
                v-if="expiringSoonCount > 0"
                class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2.5 py-1 text-xs font-semibold text-orange-700 ring-1 ring-orange-300/80"
                :title="`${expiringSoonCount} Folie(n) laufen bald ab`"
            >
                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                </svg>
                {{ expiringSoonCount }} l&auml;uft bald ab
            </span>

            <!-- Delete all button (#2) -->
            <button
                v-if="informationSlides.length > 0"
                @click="confirmingDeleteAll = true"
                class="flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 transition hover:bg-red-50 hover:text-red-600"
                title="Alle Folien l&ouml;schen"
            >
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                </svg>
            </button>
        </div>

        <SlideGrid
            data-testid="information-block-grid"
            :slides="informationSlides"
            type="information"
            :show-expire-date="true"
            :show-uploader="true"
            @deleted="handleSlideDeleted"
            @updated="handleSlideUpdated"
        >
            <template #upload-card>
                <SlideUploader
                    data-testid="information-block-uploader"
                    type="information"
                    :service-id="null"
                    :show-expire-date="true"
                    :inline="true"
                    @uploaded="handleSlideUploaded"
                />
            </template>
        </SlideGrid>

        <button
            v-if="informationSlides.length > 0"
            @click="downloadBundle"
            class="inline-flex items-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900"
            data-testid="download-probundle-button-information"
        >
            <svg class="mr-2 h-4 w-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>
            .probundle herunterladen
        </button>

        <!-- Delete all confirmation (#2) -->
        <ConfirmDialog
            :show="confirmingDeleteAll"
            title="Alle Folien l&ouml;schen?"
            message="M&ouml;chtest du wirklich alle Informationsfolien l&ouml;schen?"
            confirm-label="Alle l&ouml;schen"
            cancel-label="Abbrechen"
            variant="danger"
            @confirm="confirmDeleteAll"
            @cancel="confirmingDeleteAll = false"
        />
    </div>
</template>

<style scoped>
.information-block {
    /* Subtle warm background hint for visual distinction */
}
</style>
