<script setup>
import LabelPicker from '@/Components/LabelPicker.vue'
import MacroPicker from '@/Components/MacroPicker.vue'
import { router } from '@inertiajs/vue3'
import { reactive } from 'vue'
import { route } from 'ziggy-js'

const props = defineProps({
    assignments: { type: Array, default: () => [] },
    macros: { type: Array, default: () => [] },
    labels: { type: Array, default: () => [] },
    collections: { type: Array, default: () => [] },
})

const parts = [
    { key: 'information', label: 'Informationen' },
    { key: 'moderation', label: 'Moderation' },
    { key: 'sermon', label: 'Predigt' },
    { key: 'song', label: 'Lieder' },
    { key: 'agenda_item', label: 'Agenda-Items' },
    { key: 'abspann', label: 'Abspann' },
]

const positions = [
    { key: 'all_slides', label: 'Alle Folien' },
    { key: 'first_slide', label: 'Erste Folie' },
    { key: 'last_slide', label: 'Letzte Folie' },
    { key: 'by_label', label: 'Nach Label' },
]

function assignmentsForPart(partKey) {
    return props.assignments.filter((a) => a.part_type === partKey)
}

function positionsForPart(partKey) {
    if (partKey === 'song') return positions
    return positions.filter((p) => p.key !== 'by_label')
}

const adding = reactive({})
const newAssignment = reactive({})

function startAdd(partKey) {
    adding[partKey] = true
    newAssignment[partKey] = { macro_id: null, position: 'all_slides', label_id: null }
}

function cancelAdd(partKey) {
    adding[partKey] = false
}

async function saveAssignment(partKey) {
    const data = newAssignment[partKey]
    if (!data.macro_id) return

    await fetch(route('settings.macro-assignments.store'), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
        },
        body: JSON.stringify({
            part_type: partKey,
            macro_id: data.macro_id,
            position: data.position,
            label_id: data.position === 'by_label' ? data.label_id : null,
            order: assignmentsForPart(partKey).length,
        }),
    })
    adding[partKey] = false
    router.reload({ preserveScroll: true })
}

async function deleteAssignment(id) {
    await fetch(route('settings.macro-assignments.destroy', id), {
        method: 'DELETE',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
        },
    })
    router.reload({ preserveScroll: true })
}

function positionLabel(pos) {
    return positions.find((p) => p.key === pos)?.label ?? pos
}
</script>

<template>
    <div>
        <h3 class="mb-1 text-sm font-semibold text-gray-900">Globale Makro-Zuweisungen</h3>
        <p class="mb-4 text-xs text-gray-500">
            Diese Zuweisungen gelten für alle Gottesdienste. Pro Gottesdienst können sie überschrieben werden.
        </p>

        <div class="space-y-6">
            <div v-for="part in parts" :key="part.key">
                <div class="mb-2 flex items-center justify-between">
                    <h4 class="text-sm font-medium text-gray-700">{{ part.label }}</h4>
                    <span class="text-xs text-gray-400">{{ assignmentsForPart(part.key).length }} Zuweisungen</span>
                </div>

                <div class="space-y-1">
                    <div
                        v-for="a in assignmentsForPart(part.key)"
                        :key="a.id"
                        class="flex items-center gap-2 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-sm"
                        :data-testid="'assignment-card-' + a.id"
                    >
                        <span
                            v-if="a.macro?.color"
                            class="h-3 w-3 shrink-0 rounded"
                            :style="{ backgroundColor: a.macro.color }"
                        />
                        <span class="flex-1 text-gray-700">{{ a.macro?.name }}</span>
                        <span class="text-xs text-gray-400">{{ positionLabel(a.position) }}</span>
                        <span
                            v-if="a.position === 'by_label' && a.label"
                            class="text-xs text-gray-500"
                        >
                            → {{ a.label.name }}
                        </span>
                        <span
                            v-if="a.position === 'by_label' && a.label?.hidden_at"
                            class="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-700"
                            data-testid="warning-hidden-label"
                        >
                            ⚠ Label deaktiviert
                        </span>
                        <span
                            v-if="a.macro?.hidden_at"
                            class="rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700"
                            data-testid="warning-hidden-macro"
                        >
                            ⚠ Makro deaktiviert
                        </span>
                        <button
                            class="ml-2 text-gray-400 hover:text-red-500"
                            :data-testid="'delete-assignment-' + a.id"
                            @click="deleteAssignment(a.id)"
                        >
                            <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="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div
                    v-if="adding[part.key]"
                    class="mt-2 space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-3"
                >
                    <MacroPicker
                        v-model="newAssignment[part.key].macro_id"
                        :macros="macros"
                        :collections="collections"
                    />
                    <div class="flex flex-wrap gap-3">
                        <label
                            v-for="pos in positionsForPart(part.key)"
                            :key="pos.key"
                            class="flex items-center gap-1.5 text-xs text-gray-700"
                        >
                            <input
                                type="radio"
                                :value="pos.key"
                                v-model="newAssignment[part.key].position"
                                class="text-amber-500"
                            />
                            {{ pos.label }}
                        </label>
                    </div>
                    <LabelPicker
                        v-if="newAssignment[part.key]?.position === 'by_label'"
                        v-model="newAssignment[part.key].label_id"
                        :labels="labels"
                    />
                    <div class="flex gap-2">
                        <button
                            class="rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-600"
                            :data-testid="'save-assignment-' + part.key"
                            @click="saveAssignment(part.key)"
                        >
                            Hinzufügen
                        </button>
                        <button
                            class="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50"
                            @click="cancelAdd(part.key)"
                        >
                            Abbrechen
                        </button>
                    </div>
                </div>

                <button
                    v-else
                    class="mt-1 flex items-center gap-1 rounded-lg border border-dashed border-gray-200 px-3 py-1.5 text-xs text-gray-500 transition-colors hover:border-amber-300 hover:text-amber-600"
                    :data-testid="'add-assignment-' + part.key"
                    @click="startAdd(part.key)"
                >
                    <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 4v16m8-8H4" />
                    </svg>
                    Zuweisung hinzufügen
                </button>
            </div>
        </div>
    </div>
</template>
