<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 } from '@inertiajs/vue3'
import { 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' },
]

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
}
</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"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
