<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, router } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
import ModerationBlock from '@/Components/Blocks/ModerationBlock.vue'
import SongsBlock from '@/Components/Blocks/SongsBlock.vue'

const props = defineProps({
    service: {
        type: Object,
        required: true,
    },
    serviceSongs: {
        type: Array,
        default: () => [],
    },
    informationSlides: {
        type: Array,
        default: () => [],
    },
    moderationSlides: {
        type: Array,
        default: () => [],
    },
    sermonSlides: {
        type: Array,
        default: () => [],
    },
    songsCatalog: {
        type: Array,
        default: () => [],
    },
})

const formattedDate = computed(() => {
    if (!props.service.date) return ''
    return new Date(props.service.date).toLocaleDateString('de-DE', {
        weekday: 'long',
        day: '2-digit',
        month: 'long',
        year: 'numeric',
    })
})

/* ── Collapsible block state ─────────────────────────────── */
const expandedBlocks = ref({
    information: true,
    moderation: true,
    sermon: true,
    songs: true,
})

function toggleBlock(key) {
    expandedBlocks.value[key] = !expandedBlocks.value[key]
}

function goBack() {
    router.get(route('services.index'))
}

/* ── Block definitions ───────────────────────────────────── */
const blocks = [
    {
        key: 'information',
        label: 'Information',
        description: 'Info-Folien fuer alle kommenden Services',
        icon: 'info',
        accentFrom: 'from-sky-400',
        accentTo: 'to-blue-500',
        badgeColor: 'bg-sky-100 text-sky-700',
    },
    {
        key: 'moderation',
        label: 'Moderation',
        description: 'Moderationsfolien fuer diesen Service',
        icon: 'moderation',
        accentFrom: 'from-violet-400',
        accentTo: 'to-purple-500',
        badgeColor: 'bg-violet-100 text-violet-700',
    },
    {
        key: 'sermon',
        label: 'Predigt',
        description: 'Predigtfolien fuer diesen Service',
        icon: 'sermon',
        accentFrom: 'from-amber-400',
        accentTo: 'to-orange-500',
        badgeColor: 'bg-amber-100 text-amber-700',
    },
    {
        key: 'songs',
        label: 'Songs',
        description: 'Songs und Arrangements verwalten',
        icon: 'songs',
        accentFrom: 'from-emerald-400',
        accentTo: 'to-teal-500',
        badgeColor: 'bg-emerald-100 text-emerald-700',
    },
]

function blockSlideCount(key) {
    if (key === 'information') return props.informationSlides.length
    if (key === 'moderation') return props.moderationSlides.length
    if (key === 'sermon') return props.sermonSlides.length
    if (key === 'songs') return props.serviceSongs.length
    return 0
}

function blockBadgeLabel(key) {
    const count = blockSlideCount(key)
    if (key === 'songs') return `${count} Song${count !== 1 ? 's' : ''}`
    return `${count} Folie${count !== 1 ? 'n' : ''}`
}
</script>

<template>
    <Head :title="`${service.title} bearbeiten`" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="min-w-0">
                    <div class="flex items-center gap-3">
                        <button
                            type="button"
                            class="group flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 shadow-sm transition-all hover:border-amber-300 hover:bg-amber-50 hover:text-amber-600"
                            @click="goBack"
                            title="Zurueck zur Uebersicht"
                        >
                            <svg class="h-4 w-4 transition-transform group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                            </svg>
                        </button>

                        <div class="min-w-0">
                            <h2 class="truncate text-xl font-semibold leading-tight text-gray-900">
                                {{ service.title }}
                            </h2>
                            <p class="mt-0.5 text-sm text-gray-500">
                                {{ formattedDate }}
                                <template v-if="service.preacher_name">
                                    <span class="mx-1.5 text-gray-300">&middot;</span>
                                    <span>{{ service.preacher_name }}</span>
                                </template>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <button
                        type="button"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-600 shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
                        @click="goBack"
                    >
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                        </svg>
                        Zurueck zur Uebersicht
                    </button>
                </div>
            </div>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
                <!-- Block accordion sections -->
                <div class="space-y-4">
                    <div
                        v-for="block in blocks"
                        :key="block.key"
                        class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm transition-shadow hover:shadow-md"
                    >
                        <!-- Block header (clickable) -->
                        <button
                            type="button"
                            class="flex w-full items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-gray-50/60"
                            @click="toggleBlock(block.key)"
                        >
                            <!-- Accent icon -->
                            <div
                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br shadow-sm"
                                :class="[block.accentFrom, block.accentTo]"
                            >
                                <!-- Information icon -->
                                <svg v-if="block.icon === 'info'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                                </svg>
                                <!-- Moderation icon -->
                                <svg v-else-if="block.icon === 'moderation'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
                                </svg>
                                <!-- Sermon icon -->
                                <svg v-else-if="block.icon === 'sermon'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                                </svg>
                                <!-- Songs icon -->
                                <svg v-else-if="block.icon === 'songs'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
                                </svg>
                            </div>

                            <!-- Label + description -->
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2.5">
                                    <h3 class="text-[15px] font-semibold text-gray-900">
                                        {{ block.label }}
                                    </h3>
                                    <span
                                        class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"
                                        :class="block.badgeColor"
                                    >
                                        {{ blockBadgeLabel(block.key) }}
                                    </span>
                                </div>
                                <p class="mt-0.5 text-xs text-gray-500">
                                    {{ block.description }}
                                </p>
                            </div>

                            <!-- Chevron -->
                            <svg
                                class="h-5 w-5 shrink-0 text-gray-400 transition-transform duration-200"
                                :class="{ 'rotate-180': expandedBlocks[block.key] }"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>

                        <!-- Block content (collapsible) -->
                        <Transition
                            enter-active-class="transition-all duration-200 ease-out"
                            enter-from-class="max-h-0 opacity-0"
                            enter-to-class="max-h-[2000px] opacity-100"
                            leave-active-class="transition-all duration-150 ease-in"
                            leave-from-class="max-h-[2000px] opacity-100"
                            leave-to-class="max-h-0 opacity-0"
                        >
                            <div v-show="expandedBlocks[block.key]" class="overflow-hidden">
                                <div class="border-t border-gray-100 px-5 py-6">
                                    <InformationBlock
                                        v-if="block.key === 'information'"
                                        :service-id="service.id"
                                        :service-date="service.date"
                                        :slides="informationSlides"
                                        @slides-updated="refreshPage"
                                    />

                                    <ModerationBlock
                                        v-else-if="block.key === 'moderation'"
                                        :service-id="service.id"
                                        :slides="moderationSlides"
                                        @slides-updated="refreshPage"
                                    />

                                    <SongsBlock
                                        v-else-if="block.key === 'songs'"
                                        :service-songs="serviceSongs"
                                        :songs-catalog="songsCatalog"
                                    />

                                    <div
                                        v-else
                                        class="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50/50 py-12"
                                    >
                                        <div class="text-center">
                                            <div
                                                class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br opacity-20"
                                                :class="[block.accentFrom, block.accentTo]"
                                            >
                                                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                                </svg>
                                            </div>
                                            <p class="mt-3 text-sm font-medium text-gray-400">
                                                {{ block.label }}-Block wird hier angezeigt
                                            </p>
                                            <p class="mt-1 text-xs text-gray-300">
                                                Platzhalter — Komponente folgt
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Transition>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
