<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, router } from '@inertiajs/vue3'
import { ref } from 'vue'

const props = defineProps({
    services: {
        type: Array,
        default: () => [],
    },
})

const toastMessage = ref('')

function formatDate(value) {
    if (!value) {
        return '-'
    }

    return new Date(value).toLocaleDateString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    })
}

function formatDateTime(value) {
    if (!value) {
        return '-'
    }

    return new Date(value).toLocaleString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    })
}

function showComingSoon() {
    toastMessage.value = 'Demnaechst verfuegbar'

    setTimeout(() => {
        toastMessage.value = ''
    }, 2500)
}

function finalizeService(serviceId) {
    router.post(route('services.finalize', serviceId), {}, { preserveScroll: true })
}

function reopenService(serviceId) {
    router.post(route('services.reopen', serviceId), {}, { preserveScroll: true })
}

function mappingStatusClass(service) {
    if (service.songs_total_count === 0) {
        return 'text-red-600'
    }

    if (service.songs_mapped_count === service.songs_total_count) {
        return 'text-emerald-700'
    }

    return 'text-orange-600'
}

function arrangementStatusClass(service) {
    if (service.songs_total_count === 0) {
        return 'text-red-600'
    }

    if (service.songs_arranged_count === service.songs_total_count) {
        return 'text-emerald-700'
    }

    return 'text-orange-600'
}

function stateIconClass(isDone) {
    return isDone ? 'text-emerald-600' : 'text-red-600'
}
</script>

<template>
    <Head title="Services" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xl font-semibold leading-tight text-gray-800">Services</h2>
                <p class="text-sm text-gray-500">Hier siehst du alle heutigen und kommenden Services.</p>
            </div>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <Transition
                    enter-active-class="transition duration-200 ease-out"
                    enter-from-class="translate-y-1 opacity-0"
                    enter-to-class="translate-y-0 opacity-100"
                    leave-active-class="transition duration-150 ease-in"
                    leave-from-class="opacity-100"
                    leave-to-class="opacity-0"
                >
                    <div
                        v-if="toastMessage"
                        class="mb-4 rounded-lg border border-orange-300 bg-orange-50 px-4 py-3 text-sm font-medium text-orange-700"
                        role="status"
                    >
                        {{ toastMessage }}
                    </div>
                </Transition>

                <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
                    <div v-if="services.length === 0" class="p-8 text-center text-sm text-gray-500">
                        Aktuell gibt es keine heutigen oder kommenden Services.
                    </div>

                    <div v-else class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Titel</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Prediger</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Beamer-Techniker</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Anzahl Songs</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Letzte Änderung</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Aktionen</th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-100 bg-white">
                                <tr v-for="service in services" :key="service.id" class="align-top hover:bg-gray-50/60">
                                    <td class="px-4 py-4">
                                        <div class="font-medium text-gray-900">{{ service.title }}</div>
                                        <div class="mt-1 text-xs text-gray-500">{{ formatDate(service.date) }}</div>
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.preacher_name || '-' }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.beamer_tech_name || '-' }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.songs_total_count }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ formatDateTime(service.updated_at) }}
                                    </td>

                                    <td class="px-4 py-4">
                                        <div class="space-y-1.5 text-xs font-medium">
                                            <div :class="mappingStatusClass(service)">
                                                {{ service.songs_mapped_count }}/{{ service.songs_total_count }} Songs zugeordnet
                                            </div>

                                            <div :class="arrangementStatusClass(service)">
                                                {{ service.songs_arranged_count }}/{{ service.songs_total_count }} Arrangements geprueft
                                            </div>

                                            <div :class="stateIconClass(service.has_sermon_slides)" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.has_sermon_slides ? '✓' : '•' }}</span>
                                                <span>Predigtfolien</span>
                                            </div>

                                            <div :class="stateIconClass(service.info_slides_count > 0)" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.info_slides_count > 0 ? '✓' : '•' }}</span>
                                                <span>{{ service.info_slides_count }} Infofolien</span>
                                            </div>

                                            <div :class="stateIconClass(Boolean(service.finalized_at))" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.finalized_at ? '✓' : '•' }}</span>
                                                <span>
                                                    Abgeschlossen am
                                                    {{ service.finalized_at ? formatDateTime(service.finalized_at) : '-' }}
                                                </span>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="px-4 py-4">
                                        <div class="flex flex-col gap-2">
                                            <template v-if="service.finalized_at">
                                                <button
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-amber-300 bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-800 transition hover:bg-amber-100"
                                                    @click="reopenService(service.id)"
                                                >
                                                    Wieder öffnen
                                                </button>
                                                <button
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
                                                    @click="showComingSoon"
                                                >
                                                    Herunterladen
                                                </button>
                                            </template>

                                            <template v-else>
                                                <button
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
                                                    @click="showComingSoon"
                                                >
                                                    Bearbeiten
                                                </button>
                                                <button
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-emerald-300 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-800 transition hover:bg-emerald-100"
                                                    @click="finalizeService(service.id)"
                                                >
                                                    Abschließen
                                                </button>
                                            </template>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
