<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { router } from '@inertiajs/vue3'

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

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

const serviceSong = computed(() => props.agendaItem.serviceSong ?? props.agendaItem.service_song ?? null)

const isMatched = computed(() => serviceSong.value?.song_id != null)

const searchQuery = ref('')
const selectedSongId = ref('')
const dropdownOpen = ref(false)
const useTranslation = ref(false)
const toastMessage = ref('')
const toastVariant = ref('info')

function showToast(message, variant = 'info') {
    toastMessage.value = message
    toastVariant.value = variant
    setTimeout(() => {
        toastMessage.value = ''
    }, 2500)
}

function toastClasses() {
    if (toastVariant.value === 'success') return 'border-emerald-300 bg-emerald-50 text-emerald-700'
    if (toastVariant.value === 'warning') return 'border-amber-300 bg-amber-50 text-amber-700'
    if (toastVariant.value === 'error') return 'border-red-300 bg-red-50 text-red-700'
    return 'border-slate-300 bg-slate-50 text-slate-700'
}

function normalize(value) {
    return (value ?? '').toString().toLowerCase().trim()
}

watch(
    () => serviceSong.value,
    (ss) => {
        if (ss) {
            useTranslation.value = ss.use_translation ?? false
        }
    },
    { immediate: true, deep: true },
)

const filteredCatalog = computed(() => {
    const term = normalize(searchQuery.value)
    if (term === '') return props.songsCatalog.slice(0, 100)
    return props.songsCatalog
        .filter((song) => normalize(song.title).includes(term) || normalize(song.ccli_id).includes(term))
        .slice(0, 100)
})

const arrangementPills = computed(() => {
    const groups = serviceSong.value?.arrangement?.arrangement_groups ?? []
    return [...groups].sort((a, b) => a.order - b.order)
})

const responsibleNames = computed(() => {
    const r = props.agendaItem.responsible
    if (!r || !Array.isArray(r) || r.length === 0) return ''
    return r.map((p) => p.name || p.title || p.personName || '').filter(Boolean).join(', ')
})

function openDropdown() {
    dropdownOpen.value = true
}

function closeDropdown() {
    setTimeout(() => {
        dropdownOpen.value = false
    }, 200)
}

function selectSong(song) {
    selectedSongId.value = song.id
    searchQuery.value = song.title
    dropdownOpen.value = false
}

async function assignSong() {
    const songId = Number(selectedSongId.value)
    if (!songId) {
        showToast('Bitte wähle zuerst einen Song aus.', 'warning')
        return
    }

    try {
        await window.axios.post(`/api/service-songs/${serviceSong.value.id}/assign`, {
            song_id: songId,
        })
        selectedSongId.value = ''
        searchQuery.value = ''
        showToast('Song wurde zugeordnet.', 'success')
        router.reload({ preserveScroll: true, preserveState: true })
    } catch {
        showToast('Zuordnung fehlgeschlagen.', 'error')
    }
}

async function requestCreation() {
    try {
        await window.axios.post(`/api/service-songs/${serviceSong.value.id}/request`)
        showToast('Anfrage wurde gesendet.', 'success')
        router.reload({ preserveScroll: true, preserveState: true })
    } catch {
        showToast('Anfrage konnte nicht gesendet werden.', 'error')
    }
}

async function updateUseTranslation() {
    try {
        await window.axios.patch(`/api/service-songs/${serviceSong.value.id}`, {
            use_translation: Boolean(useTranslation.value),
        })
        showToast('Übersetzung wurde gespeichert.', 'success')
    } catch {
        showToast('Speichern fehlgeschlagen.', 'error')
    }
}

function formatDateTime(value) {
    if (!value) return null
    return new Date(value).toLocaleString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    })
}
</script>

<template>
    <div
        class="rounded-lg border bg-white p-4"
        :class="{
            'border-l-4 border-amber-400': !isMatched,
            'border-l-4 border-emerald-500': isMatched && serviceSong?.song_arrangement_id,
            'border-l-4 border-yellow-400': isMatched && !serviceSong?.song_arrangement_id,
        }"
        data-testid="song-agenda-item"
    >
        <!-- Toast -->
        <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-3 rounded-lg border px-4 py-3 text-sm font-medium"
                :class="toastClasses()"
                role="status"
            >
                {{ toastMessage }}
            </div>
        </Transition>

        <!-- Kopfzeile -->
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.position || agendaItem.sort_order }}.</span>
                    <h4 class="text-lg font-semibold text-gray-900" data-testid="song-agenda-title">
                        {{ serviceSong?.cts_song_name || agendaItem.title || '-' }}
                    </h4>
                </div>
                <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-400">
                    <span v-if="agendaItem.start">
                        🕐 {{ agendaItem.start }}
                    </span>
                    <span v-if="agendaItem.duration">
                        ⏱ {{ agendaItem.duration }}
                    </span>
                    <span v-if="responsibleNames">
                        👤 {{ responsibleNames }}
                    </span>
                </div>
                <div class="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 font-medium">
                        CCLI: {{ serviceSong?.song?.ccli_id || serviceSong?.cts_ccli_id || '-' }}
                    </span>
                    <span class="rounded-full bg-gray-100 px-2.5 py-1 font-medium">
                        Übersetzung: {{ serviceSong?.song?.has_translation ? 'Ja' : 'Nein' }}
                    </span>
                </div>
            </div>

            <span
                v-if="isMatched"
                class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700"
            >
                Zugeordnet
            </span>
            <span
                v-else
                class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700"
            >
                Nicht zugeordnet
            </span>
        </div>

        <!-- Nicht zugeordnet: Suche + Anfrage -->
        <div
            v-if="!isMatched && serviceSong"
            class="mt-4 space-y-4 rounded-lg border border-amber-200 bg-amber-50/40 p-4"
        >
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-amber-900">
                        Dieser CTS-Song ist noch nicht in der Song-DB verknüpft.
                    </p>
                    <p
                        v-if="serviceSong.request_sent_at"
                        class="mt-1 text-xs text-amber-700"
                    >
                        Anfrage gesendet am {{ formatDateTime(serviceSong.request_sent_at) }}
                    </p>
                </div>

                <button
                    type="button"
                    class="inline-flex items-center rounded-md border border-amber-300 bg-white px-3 py-2 text-xs font-semibold text-amber-800 transition hover:bg-amber-100"
                    data-testid="song-request-creation"
                    @click="requestCreation"
                >
                    Erstellung anfragen
                </button>
            </div>

            <div class="grid gap-3 md:grid-cols-[1fr,auto] md:items-end">
                <div class="relative">
                    <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-gray-600">
                        Song suchen und auswählen
                    </label>
                    <input
                        v-model="searchQuery"
                        type="text"
                        placeholder="Titel oder CCLI eingeben…"
                        class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                        data-testid="song-search-input"
                        @focus="openDropdown"
                        @input="openDropdown"
                        @blur="closeDropdown"
                    />
                    <!-- Ausgewählt-Indikator -->
                    <div v-if="selectedSongId" class="mt-1 flex items-center gap-2">
                        <span class="text-xs font-medium text-emerald-700">
                            Ausgewählt: {{ songsCatalog.find((s) => s.id === Number(selectedSongId))?.title || '' }}
                        </span>
                        <button
                            type="button"
                            class="text-xs text-gray-400 hover:text-red-500"
                            @click="selectedSongId = ''; searchQuery = ''"
                        >
                            &#10005;
                        </button>
                    </div>
                    <!-- Dropdown -->
                    <div
                        v-if="dropdownOpen && filteredCatalog.length > 0"
                        class="absolute z-30 mt-1 max-h-48 w-full overflow-auto rounded-md border border-gray-200 bg-white shadow-lg"
                    >
                        <button
                            v-for="song in filteredCatalog"
                            :key="song.id"
                            type="button"
                            class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-emerald-50"
                            @mousedown.prevent="selectSong(song)"
                        >
                            <span class="font-medium text-gray-900">{{ song.title }}</span>
                            <span class="ml-auto text-xs text-gray-400">CCLI: {{ song.ccli_id || '–' }}</span>
                        </button>
                    </div>
                </div>

                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-md bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow transition hover:bg-emerald-700"
                    data-testid="song-assign-button"
                    @click="assignSong"
                >
                    Zuordnen
                </button>
            </div>
        </div>

        <!-- Zugeordnet: Arrangement + Übersetzung -->
        <div v-if="isMatched" class="mt-4 space-y-4">
            <div class="flex flex-wrap items-center gap-4">
                <p class="text-sm text-gray-600">
                    Zugeordnet zu:
                    <span class="font-semibold text-gray-900">{{ serviceSong?.song?.title }}</span>
                </p>

                <label
                    v-if="serviceSong?.song?.has_translation"
                    class="inline-flex items-center gap-2 text-sm font-medium text-gray-800"
                >
                    <input
                        v-model="useTranslation"
                        type="checkbox"
                        class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
                        data-testid="song-translation-checkbox"
                        @change="updateUseTranslation"
                    />
                    Übersetzung verwenden
                </label>
            </div>

            <!-- Arrangement-Pills -->
            <div v-if="arrangementPills.length > 0" class="space-y-2">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ serviceSong?.arrangement?.name || 'Arrangement' }}</p>
                <div class="flex flex-wrap gap-1.5">
                    <span
                        v-for="ag in arrangementPills"
                        :key="ag.id"
                        class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium text-white"
                        :style="{ backgroundColor: ag.group?.color || '#6b7280' }"
                        data-testid="arrangement-pill"
                    >
                        {{ ag.group?.name || '-' }}
                    </span>
                </div>
            </div>

            <!-- Aktionen -->
            <div class="flex flex-wrap gap-2">
                <button
                    type="button"
                    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
                    data-testid="song-edit-arrangement"
                    @click="emit('arrangement-selected', serviceSong)"
                >
                    Arrangement bearbeiten
                </button>
            </div>
        </div>
    </div>
</template>
