<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import MacroPicker from '@/Components/MacroPicker.vue'
import LabelPicker from '@/Components/LabelPicker.vue'
import AgendaSettings from './Settings/AgendaSettings.vue'
import ExportProFiles from './Settings/ExportProFiles.vue'
import LabelImport from './Settings/LabelImport.vue'
import MacroAssignments from './Settings/MacroAssignments.vue'
import MacroImport from './Settings/MacroImport.vue'
import { Head, router } from '@inertiajs/vue3'
import { computed, onMounted, ref, watch } from 'vue'

const props = defineProps({
    settings: { type: Object, default: () => ({}) },
    assignments: { type: Array, default: () => [] },
    macros: { type: Array, default: () => [] },
    labels: { type: Array, default: () => [] },
    collections: { type: Array, default: () => [] },
    last_macros_import: { type: Object, default: () => ({}) },
    last_labels_import: { type: Object, default: () => ({}) },
    export_pro_files: { type: Object, default: () => ({ prefix: [], postfix: [], keyword: [] }) },
})

const submenus = [
    { key: 'assignments', label: 'Makro-Zuweisungen' },
    { key: 'macros', label: 'Makro' },
    { key: 'labels', label: 'Label' },
    { key: 'agenda', label: 'Agenda' },
    { key: 'ccli', label: 'CCLI Import' },
    { key: 'export-files', label: 'Export-Dateien' },
]

const activeSubmenu = ref('assignments')

onMounted(() => {
    const hash = window.location.hash.replace('#', '')
    if (submenus.some((s) => s.key === hash)) {
        activeSubmenu.value = hash
    }
})

function switchSubmenu(key) {
    activeSubmenu.value = key
    window.location.hash = key
}

// Fetch bookmarklet href from the server endpoint
const bookmarkletHref = ref('javascript:void(0)')
onMounted(async () => {
    try {
        const res = await fetch(route('bookmarklets.ccli'))
        if (res.ok) {
            bookmarkletHref.value = await res.text()
        }
    } catch {
        // fallback: keep void
    }
})

async function updateSetting(key, value) {
    try {
        await fetch(route('settings.update'), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-XSRF-TOKEN': decodeURIComponent(document.cookie.split('; ').find(r => r.startsWith('XSRF-TOKEN='))?.split('=')[1] ?? ''),
                'Accept': 'application/json',
            },
            body: JSON.stringify({ key, value }),
        })
    } catch {
        // silent fail
    }
}

// Task 5: Namenseinblender macro picker (moved into assignments panel)
const nametagMacroId = ref(props.settings.namenseinblender_macro_id ? Number(props.settings.namenseinblender_macro_id) : null)
watch(nametagMacroId, (value) => {
    updateSetting('namenseinblender_macro_id', value === null ? '' : String(value))
})

// Task 6: Song prefix/postfix label defaults
const songPrefixLabelId = ref(props.settings.song_prefix_label_id ? Number(props.settings.song_prefix_label_id) : null)
const songPostfixLabelId = ref(props.settings.song_postfix_label_id ? Number(props.settings.song_postfix_label_id) : null)
watch(songPrefixLabelId, (value) => {
    updateSetting('song_prefix_label_id', value === null ? '' : String(value))
})
watch(songPostfixLabelId, (value) => {
    updateSetting('song_postfix_label_id', value === null ? '' : String(value))
})
</script>

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

    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Einstellungen
            </h2>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
                <div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm">
                    <div class="flex min-h-[400px]">
                        <!-- Sidebar (desktop) -->
                        <div class="hidden w-48 shrink-0 border-r border-gray-100 sm:block">
                            <nav class="flex flex-col gap-1 p-2">
                                <button
                                    v-for="item in submenus"
                                    :key="item.key"
                                    :data-testid="'settings-submenu-' + item.key"
                                    @click="switchSubmenu(item.key)"
                                    :class="[
                                        'w-full rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors',
                                        activeSubmenu === item.key
                                            ? 'border-l-2 border-amber-500 bg-amber-50 text-amber-700'
                                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
                                    ]"
                                >
                                    {{ item.label }}
                                </button>
                            </nav>
                        </div>

                        <!-- Mobile tab bar -->
                        <div class="w-full border-b border-gray-100 sm:hidden">
                            <nav class="flex overflow-x-auto">
                                <button
                                    v-for="item in submenus"
                                    :key="item.key"
                                    :data-testid="'settings-submenu-' + item.key"
                                    @click="switchSubmenu(item.key)"
                                    :class="[
                                        'shrink-0 whitespace-nowrap border-b-2 px-4 py-3 text-sm font-medium transition-colors',
                                        activeSubmenu === item.key
                                            ? 'border-amber-500 text-amber-700'
                                            : 'border-transparent text-gray-600 hover:text-gray-900',
                                    ]"
                                >
                                    {{ item.label }}
                                </button>
                            </nav>
                        </div>

                        <!-- Content panel -->
                        <div class="flex-1 overflow-y-auto p-6 max-h-[calc(100vh-12rem)]" data-testid="settings-active-panel">
                            <!-- Makro-Zuweisungen: includes Namenseinblender at top -->
                            <div v-if="activeSubmenu === 'assignments'" class="space-y-6">
                                <!-- Task 5: Namenseinblender MacroPicker at top of assignments -->
                                <div class="rounded-lg border border-gray-200 p-4">
                                    <h3 class="mb-1 text-sm font-semibold text-gray-900">Namenseinblender</h3>
                                    <p class="mb-3 text-xs text-gray-500">
                                        Wähle das ProPresenter-Makro für die Namenseinblendung bei Moderation und Predigt. Wenn kein Makro konfiguriert ist, werden keine Namensfolien generiert.
                                    </p>
                                    <MacroPicker
                                        v-model="nametagMacroId"
                                        :macros="macros"
                                        :collections="collections"
                                        data-testid="namenseinblender-macro-picker"
                                    />
                                </div>

                                <MacroAssignments
                                    :assignments="assignments"
                                    :macros="macros"
                                    :labels="labels"
                                    :collections="collections"
                                    @switch-submenu="switchSubmenu"
                                />
                            </div>

                            <MacroImport
                                v-if="activeSubmenu === 'macros'"
                                :macros="macros"
                                :collections="collections"
                                :last_macros_import="last_macros_import"
                                @switch-submenu="switchSubmenu"
                            />

                            <!-- Label panel: import + prefix/postfix defaults -->
                            <div v-if="activeSubmenu === 'labels'" class="space-y-6">
                                <LabelImport
                                    :labels="labels"
                                    :last_labels_import="last_labels_import"
                                />

                                <!-- Task 6: Song prefix/postfix label defaults -->
                                <div class="rounded-lg border border-gray-200 p-4 space-y-4">
                                    <div>
                                        <h3 class="text-sm font-semibold text-gray-900">Standard-Labels für Songs</h3>
                                        <p class="mt-1 text-xs text-gray-500">
                                            Diese Labels werden bei jedem Song-Export automatisch als Prefix (z.&nbsp;B. COPYRIGHT) und Postfix (z.&nbsp;B. BLANK) angehängt.
                                        </p>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1">Prefix-Label (Standard: COPYRIGHT)</label>
                                        <LabelPicker
                                            v-model="songPrefixLabelId"
                                            :labels="labels"
                                            data-testid="song-prefix-label-picker"
                                        />
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1">Postfix-Label (Standard: BLANK)</label>
                                        <LabelPicker
                                            v-model="songPostfixLabelId"
                                            :labels="labels"
                                            data-testid="song-postfix-label-picker"
                                        />
                                    </div>
                                </div>
                            </div>

                            <AgendaSettings
                                v-if="activeSubmenu === 'agenda'"
                                :settings="settings"
                            />

                            <!-- CCLI Import Settings -->
                            <div v-if="activeSubmenu === 'ccli'" class="space-y-6">
                                <div>
                                    <h3 class="text-base font-semibold text-gray-900">CCLI SongSelect Import</h3>
                                    <p class="mt-1 text-sm text-gray-500">
                                        Importiere Songs direkt aus SongSelect in deine Song-Datenbank.
                                    </p>
                                </div>

                                <!-- Default Translation Language -->
                                <div class="rounded-lg border border-gray-200 p-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Standard-Übersetzungssprache
                                    </label>
                                    <p class="text-xs text-gray-500 mb-3">
                                        Wenn ein Song auf SongSelect in mehreren Sprachen verfügbar ist, wird diese Sprache als Übersetzung importiert.
                                    </p>
                                    <select
                                        data-testid="default-translation-language"
                                        :value="settings.default_translation_language || 'DE'"
                                        @change="updateSetting('default_translation_language', $event.target.value)"
                                        class="block w-48 rounded-md border-gray-300 text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                    >
                                        <option value="DE">Deutsch (DE)</option>
                                        <option value="EN">Englisch (EN)</option>
                                        <option value="FR">Französisch (FR)</option>
                                        <option value="ES">Spanisch (ES)</option>
                                        <option value="NL">Niederländisch (NL)</option>
                                        <option value="IT">Italienisch (IT)</option>
                                    </select>
                                </div>

                                <!-- Bookmarklet Installer -->
                                <div class="rounded-lg border border-blue-100 bg-blue-50 p-4">
                                    <h4 class="text-sm font-semibold text-blue-900 mb-2">Browser-Lesezeichen installieren</h4>
                                    <p class="text-sm text-blue-800 mb-3">
                                        Mit diesem Lesezeichen kannst du Songs direkt von SongSelect in pp-planer importieren — ohne Copy-Paste.
                                    </p>
                                    <ol class="text-sm text-blue-800 space-y-1 list-decimal list-inside mb-4">
                                        <li>Ziehe den Button unten in deine Lesezeichen-Leiste</li>
                                        <li>Öffne ein Lied auf <strong>songselect.ccli.com</strong> (du musst eingeloggt sein)</li>
                                        <li>Klicke das Lesezeichen — der Liedtext wird automatisch übertragen</li>
                                        <li>Klicke auf „Importieren" — fertig!</li>
                                    </ol>
                                    <p class="text-xs text-blue-600 mb-3">
                                        Lesezeichen-Leiste aktivieren: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+Umschalt+B</kbd> (Mac: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Cmd+Shift+B</kbd>)
                                    </p>
                                    <a
                                        data-testid="ccli-bookmarklet-drag-link"
                                        :href="bookmarkletHref"
                                        class="inline-flex items-center gap-2 rounded-md border border-blue-300 bg-white px-4 py-2 text-sm font-medium text-blue-700 shadow-sm cursor-grab hover:bg-blue-50"
                                        @click.prevent
                                        draggable="true"
                                    >
                                        📥 CCLI Import
                                    </a>
                                    <p class="mt-2 text-xs text-blue-500">
                                        Diesen Button in die Lesezeichen-Leiste ziehen.
                                    </p>

                                    <!-- Troubleshooting -->
                                    <details class="mt-4">
                                        <summary class="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Was tun, wenn der Liedtext nicht erkannt wird?</summary>
                                        <p class="mt-2 text-xs text-blue-700">
                                            Falle zurück auf das manuelle Einfügen: Öffne das Lied auf SongSelect, klicke das <strong>Kopier-Symbol</strong> neben dem Liedtext (es kopiert Titel, Liedtext und CCLI-Infos), und klicke dann auf „Aus CCLI importieren" in der Song-Datenbank oder im Gottesdienst-Formular.
                                        </p>
                                    </details>
                                </div>
                            </div>

                            <!-- Task 7: Export-Dateien submenu -->
                            <div v-if="activeSubmenu === 'export-files'" class="space-y-8">
                                <!-- Countdown-Folie Toggle -->
                                <label class="flex cursor-pointer items-start gap-3 rounded-lg border border-gray-200 p-4">
                                    <input
                                        type="checkbox"
                                        class="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
                                        data-testid="setting-add-countdown-slide"
                                        :checked="settings.add_countdown_slide === '1'"
                                        @change="updateSetting('add_countdown_slide', $event.target.checked ? '1' : '0')"
                                    />
                                    <span class="min-w-0">
                                        <span class="block text-sm font-semibold text-gray-900">Countdown-Folie hinzufügen</span>
                                        <span class="mt-1 block text-xs text-gray-500">
                                            Fügt am Anfang eine Folie mit Keyvisual und Uhrzeit-Timer (hh:mm) oben links hinzu.
                                        </span>
                                    </span>
                                </label>

                                <ExportProFiles
                                    :prefix-files="export_pro_files.prefix"
                                    :postfix-files="export_pro_files.postfix"
                                    :keyword-files="export_pro_files.keyword"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
