<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import AgendaSettings from './Settings/AgendaSettings.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 } 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: () => ({}) },
})

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

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
    }
}
</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 p-6" data-testid="settings-active-panel">
                            <MacroAssignments
                                v-if="activeSubmenu === 'assignments'"
                                :assignments="assignments"
                                :macros="macros"
                                :labels="labels"
                                :collections="collections"
                                @switch-submenu="switchSubmenu"
                            />

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

                            <LabelImport
                                v-if="activeSubmenu === 'labels'"
                                :labels="labels"
                                :last_labels_import="last_labels_import"
                            />

                            <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, drücke <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+A</kbd> dann <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+C</kbd>, und klicke dann auf „Aus CCLI importieren" in der Song-Datenbank oder im Gottesdienst-Formular.
                                        </p>
                                    </details>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
