<!-- SPDX-License-Identifier: 0BSD -->

<template>
    <v-dialog
        v-if="!isPage"
        v-model="visible"
        :fullscreen="dialogFullscreen"
        max-width="800"
        scrollable
        transition="dialog-bottom-transition"
        class="tutorial-dialog"
        persistent
        @update:model-value="onVisibleUpdate"
    >
        <v-card
            class="flex min-h-0 flex-1 flex-col bg-white dark:bg-zinc-950 border-0 overflow-hidden relative h-full max-h-dvh"
        >
            <!-- Settings Controls -->
            <div class="absolute top-4 left-4 z-50 flex items-center gap-1">
                <LanguageSelector @language-change="onLanguageChange" />
                <button
                    type="button"
                    class="rounded-full p-1.5 sm:p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
                    :title="config?.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
                    @click="toggleTheme"
                >
                    <MaterialDesignIcon
                        :icon-name="config?.theme === 'dark' ? 'brightness-6' : 'brightness-4'"
                        class="w-5 h-5 sm:w-6 sm:h-6"
                    />
                </button>
            </div>

            <!-- Progress Bar -->
            <div class="w-full h-1.5 bg-gray-100 dark:bg-zinc-900 overflow-hidden flex">
                <div
                    v-for="step in totalSteps"
                    :key="step"
                    class="h-full transition-all duration-500 ease-out"
                    :class="[
                        currentStep >= step ? 'bg-blue-500' : 'bg-transparent',
                        currentStep === step ? 'flex-2' : 'flex-1',
                    ]"
                    :style="{ borderRight: step < totalSteps ? '1px solid rgba(0,0,0,0.05)' : 'none' }"
                ></div>
            </div>

            <!-- Content Area -->
            <v-card-text
                class="relative min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 md:px-12 md:py-10"
            >
                <transition name="fade-slide" mode="out-in">
                    <!-- Step 1: Welcome -->
                    <div v-if="currentStep === 1" key="step1" class="flex flex-col items-center text-center space-y-6">
                        <div class="relative">
                            <div class="w-24 h-24 bg-blue-500/10 rounded-3xl rotate-12 absolute -inset-2"></div>
                            <img :src="logoUrl" class="w-24 h-24 relative z-10 p-2" />
                        </div>
                        <div class="space-y-2">
                            <h1 class="text-4xl font-black tracking-tight text-gray-900 dark:text-white">
                                {{ $t("tutorial.welcome") }} <span class="text-blue-500">MeshChatX</span>
                            </h1>
                            <p class="text-lg text-gray-600 dark:text-zinc-400 max-w-md mx-auto">
                                {{ $t("tutorial.welcome_desc") }}
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full mt-8">
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-shield-lock" color="blue" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.security") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.security_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-map-marker-path" color="purple" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">{{ $t("tutorial.maps") }}</div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.maps_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-phone" color="green" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.voice") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.voice_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-tools" color="orange" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.tools") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.tools_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-database-search" color="teal" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.archiver") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.archiver_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-account-cancel" color="amber" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.banishment") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.banishment_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-keyboard-outline" color="red" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.palette") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.palette_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-xl hover:z-10"
                            >
                                <v-icon icon="mdi-translate" color="cyan" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">{{ $t("tutorial.i18n") }}</div>
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $t("tutorial.i18n_desc") }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full flex justify-end items-center gap-2 mt-4 px-4 text-gray-400 dark:text-zinc-500"
                        >
                            <v-icon icon="mdi-plus" size="16"></v-icon>
                            <span class="text-xs font-bold uppercase tracking-widest">{{
                                $t("tutorial.more_features")
                            }}</span>
                        </div>
                    </div>

                    <!-- Step 2: Choose Connection Mode -->
                    <div v-else-if="currentStep === 2" key="step2-mode" class="space-y-6">
                        <div class="text-center space-y-2">
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $t("tutorial.connect") }}
                            </h2>
                            <p class="text-gray-600 dark:text-zinc-400 text-base">
                                {{ $t("tutorial.connect_desc") }}
                            </p>
                        </div>

                        <div class="grid grid-cols-1 gap-4">
                            <button
                                type="button"
                                class="text-left flex items-start gap-4 p-5 rounded-2xl bg-blue-500/5 dark:bg-blue-500/10 border-2 transition-all"
                                :class="[
                                    connectionMode === 'discovery'
                                        ? 'border-blue-500 ring-2 ring-blue-500/30'
                                        : 'border-blue-500/20 hover:border-blue-500',
                                ]"
                                :disabled="savingDiscovery"
                                @click="useDiscoveryMode"
                            >
                                <v-icon icon="mdi-radar" color="blue" size="40"></v-icon>
                                <div class="flex-1 min-w-0">
                                    <div class="font-bold text-lg text-gray-900 dark:text-white">
                                        {{ $t("tutorial.mode_discovery_title") }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-zinc-400 mt-1">
                                        {{ $t("tutorial.mode_discovery_desc") }}
                                    </div>
                                </div>
                                <v-progress-circular
                                    v-if="savingDiscovery"
                                    indeterminate
                                    size="20"
                                    width="2"
                                ></v-progress-circular>
                            </button>

                            <button
                                type="button"
                                class="text-left flex items-start gap-4 p-5 rounded-2xl bg-emerald-500/5 dark:bg-emerald-500/10 border-2 transition-all"
                                :class="[
                                    connectionMode === 'local'
                                        ? 'border-emerald-500 ring-2 ring-emerald-500/30'
                                        : 'border-emerald-500/20 hover:border-emerald-500',
                                ]"
                                :disabled="addingLocal || reloadingReticulum"
                                @click="useLocalMode"
                            >
                                <v-icon icon="mdi-lan" color="emerald" size="40"></v-icon>
                                <div class="flex-1 min-w-0">
                                    <div class="font-bold text-lg text-gray-900 dark:text-white">
                                        {{ $t("tutorial.mode_local_title") }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-zinc-400 mt-1">
                                        {{ $t("tutorial.mode_local_desc") }}
                                    </div>
                                </div>
                                <v-progress-circular
                                    v-if="addingLocal || reloadingReticulum"
                                    indeterminate
                                    size="20"
                                    width="2"
                                ></v-progress-circular>
                            </button>

                            <button
                                type="button"
                                class="text-left flex items-start gap-4 p-5 rounded-2xl bg-gray-100/50 dark:bg-zinc-800/40 border-2 transition-all"
                                :class="[
                                    connectionMode === 'manual'
                                        ? 'border-gray-500 ring-2 ring-gray-500/30'
                                        : 'border-gray-300 dark:border-zinc-700 hover:border-gray-500',
                                ]"
                                @click="useManualMode"
                            >
                                <v-icon icon="mdi-cog-outline" color="gray" size="40"></v-icon>
                                <div class="flex-1 min-w-0">
                                    <div class="font-bold text-lg text-gray-900 dark:text-white">
                                        {{ $t("tutorial.mode_manual_title") }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-zinc-400 mt-1">
                                        {{ $t("tutorial.mode_manual_desc") }}
                                    </div>
                                </div>
                            </button>
                        </div>

                        <p class="text-xs text-center text-gray-400 dark:text-zinc-500">
                            {{ $t("tutorial.mode_change_later") }}
                        </p>
                    </div>

                    <!-- Step 3: Bootstrap Selection -->
                    <div v-else-if="currentStep === 3" key="step3-bootstrap" class="space-y-6">
                        <div class="text-center space-y-2">
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $t("tutorial.bootstrap_title") }}
                            </h2>
                            <p class="text-gray-600 dark:text-zinc-400 text-sm">
                                {{ $t("tutorial.bootstrap_desc") }}
                            </p>
                        </div>

                        <div
                            class="flex items-start gap-3 sm:gap-4 rounded-2xl border border-gray-200 dark:border-zinc-700 bg-white/80 dark:bg-zinc-900/60 p-3.5 sm:p-4"
                        >
                            <div class="shrink-0 pr-0.5 pt-0.5 sm:pt-1 sm:pr-1 flex items-start">
                                <Toggle
                                    v-model="defaultBootstrapOnly"
                                    @update:model-value="persistDefaultBootstrapOnly"
                                />
                            </div>
                            <div class="min-w-0 flex-1 pl-0.5 sm:pl-0 sm:pt-0.5">
                                <div class="text-sm font-semibold text-gray-900 dark:text-white leading-snug">
                                    {{ $t("tutorial.bootstrap_only_label") }}
                                </div>
                                <p class="text-xs text-gray-500 dark:text-zinc-400 mt-1.5 leading-relaxed">
                                    {{ $t("tutorial.bootstrap_only_hint") }}
                                </p>
                            </div>
                        </div>

                        <div class="space-y-4">
                            <div
                                v-if="hasAnyBootstrapsToShow"
                                class="w-full max-w-6xl mx-auto flex items-center gap-2 border-0 border-b border-gray-200/90 dark:border-zinc-600/90 py-1.5"
                            >
                                <v-icon icon="mdi-magnify" size="20" class="shrink-0 text-gray-400" />
                                <input
                                    v-model="bootstrapListSearch"
                                    type="search"
                                    autocomplete="off"
                                    :placeholder="$t('tutorial.bootstrap_search_placeholder')"
                                    class="min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 shadow-none ring-0 outline-hidden focus:ring-0 dark:text-zinc-100 placeholder:text-gray-400 dark:placeholder:text-zinc-500"
                                />
                                <button
                                    v-if="bootstrapListSearch"
                                    type="button"
                                    class="shrink-0 rounded p-1 text-gray-400 transition-colors hover:text-gray-700 dark:hover:text-zinc-200"
                                    :title="$t('tutorial.bootstrap_search_clear')"
                                    :aria-label="$t('tutorial.bootstrap_search_clear')"
                                    @click="bootstrapListSearch = ''"
                                >
                                    <v-icon icon="mdi-close" size="18" />
                                </button>
                            </div>

                            <div
                                v-if="sortedDiscoveredInterfaces.length > 0"
                                class="h-fit min-w-0 bg-emerald-500/5 dark:bg-emerald-500/10 rounded-3xl border border-emerald-500/20"
                            >
                                <button
                                    type="button"
                                    class="flex w-full items-center justify-between gap-2 p-4 text-left sm:px-4"
                                    :aria-expanded="bootstrapDiscoveredSectionOpen"
                                    @click="bootstrapDiscoveredSectionOpen = !bootstrapDiscoveredSectionOpen"
                                >
                                    <div class="flex min-w-0 items-center gap-2 text-sm">
                                        <MaterialDesignIcon
                                            :icon-name="bootstrapDiscoveredSectionOpen ? 'chevron-up' : 'chevron-down'"
                                            class="size-4 shrink-0 text-gray-500"
                                        />
                                        <v-icon icon="mdi-radar" color="emerald"></v-icon>
                                        <span class="font-bold text-gray-900 dark:text-white">{{
                                            $t("tutorial.bootstrap_discovered")
                                        }}</span>
                                    </div>
                                </button>
                                <div v-show="bootstrapDiscoveredSectionOpen" class="px-4 pb-4">
                                    <p
                                        v-if="
                                            bootstrapListSearch &&
                                            sortedDiscoveredInterfaces.length > 0 &&
                                            filteredDiscoveredForBootstrap.length === 0
                                        "
                                        class="text-xs text-gray-500 dark:text-zinc-400"
                                    >
                                        {{ $t("tutorial.bootstrap_search_no_match") }}
                                    </p>
                                    <div
                                        v-else
                                        class="space-y-2 max-h-[260px] overflow-y-auto pr-2 pt-1 custom-scrollbar"
                                    >
                                        <label
                                            v-for="iface in filteredDiscoveredForBootstrap"
                                            :key="iface.discovery_hash || iface.name"
                                            class="flex cursor-pointer items-center gap-3 rounded-xl border bg-white p-3 transition-all dark:bg-zinc-800"
                                            :class="[
                                                isBootstrapSelected(`disc:${iface.discovery_hash || iface.name}`)
                                                    ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20'
                                                    : 'border-gray-100 dark:border-zinc-700 hover:border-emerald-400',
                                            ]"
                                        >
                                            <input
                                                type="checkbox"
                                                class="h-4 w-4 accent-emerald-500"
                                                :checked="
                                                    isBootstrapSelected(`disc:${iface.discovery_hash || iface.name}`)
                                                "
                                                @change="toggleBootstrap(`disc:${iface.discovery_hash || iface.name}`)"
                                            />
                                            <MaterialDesignIcon
                                                :icon-name="getDiscoveryIcon(iface)"
                                                class="h-5 w-5 shrink-0 text-emerald-500"
                                            />
                                            <div class="min-w-0 flex-1">
                                                <div class="truncate text-sm font-bold text-gray-900 dark:text-white">
                                                    {{ iface.name }}
                                                </div>
                                                <div
                                                    class="truncate font-mono text-[10px] text-gray-500 dark:text-zinc-400"
                                                >
                                                    <span v-if="iface.reachable_on"
                                                        >{{ iface.reachable_on
                                                        }}<span v-if="iface.port">:{{ iface.port }}</span></span
                                                    >
                                                    <span v-else>{{ iface.type }}</span>
                                                    <span class="ml-2 capitalize">{{ iface.status }}</span>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="h-fit min-w-0 rounded-3xl border border-gray-100 bg-gray-50 p-0 dark:border-zinc-800 dark:bg-zinc-900"
                            >
                                <div class="flex items-center justify-between gap-2 p-4 pr-2 sm:px-4">
                                    <button
                                        type="button"
                                        class="flex min-w-0 flex-1 items-center gap-2 text-left text-sm"
                                        :aria-expanded="bootstrapCommunitySectionOpen"
                                        @click="bootstrapCommunitySectionOpen = !bootstrapCommunitySectionOpen"
                                    >
                                        <MaterialDesignIcon
                                            :icon-name="bootstrapCommunitySectionOpen ? 'chevron-up' : 'chevron-down'"
                                            class="size-4 shrink-0 text-gray-500"
                                        />
                                        <v-icon icon="mdi-web" color="blue"></v-icon>
                                        <span class="font-bold text-gray-900 dark:text-white">{{
                                            $t("tutorial.bootstrap_community")
                                        }}</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="shrink-0 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-blue-600 disabled:opacity-50 dark:hover:bg-zinc-800 dark:hover:text-blue-400"
                                        :disabled="refreshingCommunityPresets"
                                        :title="$t('interfaces.community_presets_refresh')"
                                        :aria-label="$t('interfaces.community_presets_refresh')"
                                        @click.stop="refreshCommunityPresets"
                                    >
                                        <v-icon
                                            icon="mdi-refresh"
                                            size="20"
                                            :class="{ 'animate-spin': refreshingCommunityPresets }"
                                        />
                                    </button>
                                </div>
                                <div v-show="bootstrapCommunitySectionOpen" class="px-4 pb-4">
                                    <p
                                        v-if="
                                            bootstrapListSearch &&
                                            communityInterfaces.length > 0 &&
                                            filteredCommunityForBootstrap.length === 0
                                        "
                                        class="text-xs text-gray-500 dark:text-zinc-400"
                                    >
                                        {{ $t("tutorial.bootstrap_search_no_match") }}
                                    </p>
                                    <div
                                        v-else
                                        class="space-y-2 max-h-[260px] overflow-y-auto pr-2 pt-1 custom-scrollbar"
                                    >
                                        <label
                                            v-for="iface in filteredCommunityForBootstrap"
                                            :key="iface.name"
                                            class="flex cursor-pointer items-center gap-3 rounded-xl border border-gray-100 bg-white p-3 transition-all dark:border-zinc-700 dark:bg-zinc-800"
                                            :class="[
                                                isBootstrapSelected(`comm:${iface.name}`)
                                                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                                                    : 'hover:border-blue-400',
                                            ]"
                                        >
                                            <input
                                                type="checkbox"
                                                class="h-4 w-4 accent-blue-500"
                                                :checked="isBootstrapSelected(`comm:${iface.name}`)"
                                                @change="toggleBootstrap(`comm:${iface.name}`)"
                                            />
                                            <v-icon icon="mdi-server-network" color="blue" size="20"></v-icon>
                                            <div class="min-w-0 flex-1">
                                                <div class="truncate text-sm font-bold text-gray-900 dark:text-white">
                                                    {{ iface.name }}
                                                </div>
                                                <div
                                                    class="truncate font-mono text-[10px] text-gray-500 dark:text-zinc-400"
                                                >
                                                    {{ iface.target_host
                                                    }}<span v-if="iface.target_port">:{{ iface.target_port }}</span>
                                                </div>
                                            </div>
                                            <span
                                                v-if="iface.online"
                                                class="shrink-0 text-[9px] font-bold uppercase tracking-widest text-green-500"
                                                >{{ $t("tutorial.online") }}</span
                                            >
                                        </label>
                                        <div v-if="loadingInterfaces" class="flex justify-center py-3">
                                            <v-progress-circular
                                                indeterminate
                                                color="blue"
                                                size="24"
                                            ></v-progress-circular>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2">
                                <p class="text-xs text-gray-500 dark:text-zinc-500">
                                    {{
                                        $t("tutorial.bootstrap_selected", {
                                            count: selectedBootstrapCount,
                                        })
                                    }}
                                </p>
                                <div class="flex gap-2">
                                    <button
                                        type="button"
                                        class="px-4 py-2 text-xs rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold transition-all hover:bg-gray-50 dark:hover:bg-zinc-700"
                                        @click="skipBootstraps"
                                    >
                                        {{ $t("tutorial.bootstrap_skip") }}
                                    </button>
                                    <button
                                        type="button"
                                        class="px-5 py-2 text-xs rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-sm transition-all"
                                        :disabled="
                                            addingBootstraps || reloadingReticulum || selectedBootstrapCount === 0
                                        "
                                        @click="confirmBootstraps"
                                    >
                                        <v-progress-circular
                                            v-if="addingBootstraps || reloadingReticulum"
                                            indeterminate
                                            size="14"
                                            width="2"
                                            class="mr-1"
                                        ></v-progress-circular>
                                        {{ $t("tutorial.bootstrap_confirm") }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4: Propagation Mode -->
                    <div v-else-if="currentStep === 4" key="step4-prop" class="space-y-6">
                        <div class="text-center space-y-2">
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $t("tutorial.propagation") }}
                            </h2>
                            <p class="text-gray-600 dark:text-zinc-400 text-base">
                                {{ $t("tutorial.propagation_desc") }}
                            </p>
                        </div>

                        <div class="flex flex-col items-center gap-6 py-4">
                            <div
                                class="bg-blue-500/10 dark:bg-blue-500/20 p-6 rounded-4xl text-center space-y-4 border border-blue-500/20 max-w-md"
                            >
                                <v-icon icon="mdi-server-network" color="blue" size="48"></v-icon>
                                <div class="text-lg font-bold text-gray-900 dark:text-white">
                                    {{ $t("tutorial.propagation_question") }}
                                </div>
                                <p class="text-sm text-gray-600 dark:text-zinc-400">
                                    {{ $t("tutorial.propagation_auto") }}
                                </p>
                                <div class="flex flex-col gap-3 pt-2">
                                    <button
                                        type="button"
                                        class="w-full px-6 py-3 rounded-2xl bg-blue-600 hover:bg-blue-500 text-white font-bold shadow-lg transition-all transform hover:scale-[1.02]"
                                        :disabled="savingPropagation"
                                        @click="enableAutoPropagation"
                                    >
                                        <v-progress-circular
                                            v-if="savingPropagation"
                                            indeterminate
                                            size="20"
                                            width="2"
                                            class="mr-2"
                                        ></v-progress-circular>
                                        {{ $t("tutorial.propagation_enable_auto") }}
                                    </button>
                                    <button
                                        type="button"
                                        class="w-full px-6 py-3 rounded-2xl border-2 border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-bold shadow-xs transition-all transform hover:scale-[1.02]"
                                        @click="nextStep"
                                    >
                                        {{ $t("tutorial.propagation_skip_auto") }}
                                    </button>
                                </div>
                                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-zinc-800">
                                    <div class="text-sm font-bold text-gray-900 dark:text-white mb-1">
                                        {{ $t("tutorial.propagation_manual") }}
                                    </div>
                                    <p class="text-xs text-gray-500 dark:text-zinc-500">
                                        {{ $t("tutorial.propagation_manual_desc") }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 5: Documentation & Tools -->
                    <div v-else-if="currentStep === 5" key="step5-tools" class="space-y-6">
                        <div class="text-center space-y-2">
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $t("tutorial.learn_create") }}
                            </h2>
                            <p class="text-gray-600 dark:text-zinc-400">
                                {{ $t("tutorial.learn_create_desc") }}
                            </p>
                        </div>

                        <div class="grid grid-cols-1 gap-4">
                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800"
                            >
                                <v-icon icon="mdi-book-open-variant" color="blue" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.documentation") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mb-2">
                                        {{ $t("tutorial.documentation_desc") }}
                                    </div>
                                    <div class="flex gap-2">
                                        <a
                                            href="/meshchatx-docs/index.html"
                                            target="_blank"
                                            class="px-3 py-1 text-[10px] rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold shadow-xs transition-all inline-block"
                                        >
                                            {{ $t("tutorial.meshchatx_docs") }}
                                        </a>
                                        <a
                                            :href="reticulumBundledDocsUrl"
                                            target="_blank"
                                            class="px-3 py-1 text-[10px] rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold shadow-xs transition-all hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-blue-400 dark:hover:border-blue-500 inline-block"
                                        >
                                            {{ $t("tutorial.reticulum_docs") }}
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800"
                            >
                                <v-icon icon="mdi-file-document-edit-outline" color="orange" size="32"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.micron_editor") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mb-2">
                                        {{ $t("tutorial.micron_editor_desc") }}
                                    </div>
                                    <button
                                        type="button"
                                        class="px-3 py-1 text-[10px] rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold shadow-xs transition-all hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-blue-400 dark:hover:border-blue-500"
                                        @click="gotoRoute('micron-editor')"
                                    >
                                        {{ $t("tutorial.open_micron_editor") }}
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div
                                    class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-colors"
                                    @click="gotoRoute('nomadnetwork')"
                                >
                                    <v-icon icon="mdi-earth" color="purple" size="24"></v-icon>
                                    <div>
                                        <div class="font-bold text-gray-900 dark:text-white text-xs">
                                            {{ $t("tutorial.paper_messages") }}
                                        </div>
                                        <div class="text-[10px] text-gray-900 dark:text-white">
                                            {{ $t("tutorial.paper_messages_desc") }}
                                        </div>
                                    </div>
                                </div>

                                <div
                                    class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-colors"
                                    @click="gotoRoute('messages')"
                                >
                                    <v-icon icon="mdi-message-text-outline" color="green" size="24"></v-icon>
                                    <div>
                                        <div class="font-bold text-gray-900 dark:text-white text-xs">
                                            {{ $t("tutorial.send_messages") }}
                                        </div>
                                        <div class="text-[10px] text-gray-900 dark:text-white">
                                            {{ $t("tutorial.send_messages_desc") }}
                                        </div>
                                    </div>
                                </div>

                                <div
                                    class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-colors"
                                    @click="gotoRoute('network-visualiser')"
                                >
                                    <v-icon icon="mdi-hub" color="teal" size="24"></v-icon>
                                    <div>
                                        <div class="font-bold text-gray-900 dark:text-white text-xs">
                                            {{ $t("tutorial.explore_nodes") }}
                                        </div>
                                        <div class="text-[10px] text-gray-900 dark:text-white">
                                            {{ $t("tutorial.explore_nodes_desc") }}
                                        </div>
                                    </div>
                                </div>

                                <div
                                    class="flex items-start gap-4 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-colors"
                                    @click="gotoRoute('call')"
                                >
                                    <v-icon icon="mdi-phone-in-talk-outline" color="red" size="24"></v-icon>
                                    <div>
                                        <div class="font-bold text-gray-900 dark:text-white text-xs">
                                            {{ $t("tutorial.voice_calls") }}
                                        </div>
                                        <div class="text-[10px] text-gray-900 dark:text-white">
                                            {{ $t("tutorial.voice_calls_desc") }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 6: Finish -->
                    <div
                        v-else-if="currentStep === 6"
                        key="step6-finish"
                        class="flex flex-col items-center text-center space-y-8 py-10"
                    >
                        <div class="w-32 h-32 bg-green-500/10 rounded-full flex items-center justify-center relative">
                            <v-icon icon="mdi-check-decagram" color="green" size="80"></v-icon>
                            <div class="absolute inset-0 bg-green-500/20 rounded-full animate-ping opacity-20"></div>
                        </div>
                        <div class="space-y-3">
                            <h2 class="text-3xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.ready") }}
                            </h2>
                            <p class="text-lg text-gray-600 dark:text-zinc-400 max-w-md mx-auto">
                                {{ $t("tutorial.ready_desc") }}
                            </p>
                        </div>
                        <div
                            v-if="interfaceAddedViaTutorial"
                            class="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-2xl border border-amber-100 dark:border-amber-900/30 text-amber-700 dark:text-amber-400 text-sm flex gap-3 max-w-md text-left"
                        >
                            <v-icon icon="mdi-information-outline" class="shrink-0"></v-icon>
                            <span>{{ $t("tutorial.docker_note") }}</span>
                        </div>
                    </div>
                </transition>
            </v-card-text>

            <!-- Footer -->
            <v-divider class="dark:border-zinc-900"></v-divider>
            <v-card-actions
                class="shrink-0 flex justify-between bg-gray-50 px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] dark:bg-zinc-950/50 sm:px-6 sm:py-6"
            >
                <button
                    v-if="currentStep > 1 && currentStep < totalSteps"
                    type="button"
                    class="px-6 py-2.5 rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold text-sm shadow-xs transition-all hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-blue-400 dark:hover:border-blue-500"
                    @click="previousStep"
                >
                    {{ $t("tutorial.back") }}
                </button>
                <div v-else></div>

                <div class="flex gap-3">
                    <button
                        v-if="currentStep < totalSteps"
                        type="button"
                        class="px-6 py-2.5 rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold text-sm shadow-xs transition-all opacity-50 hover:opacity-100 hover:bg-gray-50 dark:hover:bg-zinc-700"
                        @click="skipTutorial"
                    >
                        {{ $t("tutorial.skip") }}
                    </button>

                    <button
                        v-if="currentStep < totalSteps"
                        type="button"
                        class="px-8 h-12 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold text-sm shadow-xs transition-all"
                        @click="nextStep"
                    >
                        {{ $t("tutorial.next") }}
                    </button>

                    <button
                        v-else
                        type="button"
                        class="px-8 h-12 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm shadow-xs transition-all"
                        @click="finishTutorial"
                    >
                        {{ $t("tutorial.finish_setup") }}
                    </button>
                </div>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <div v-else class="flex flex-col h-full bg-white dark:bg-zinc-950 overflow-hidden relative">
        <!-- Settings Controls -->
        <div class="absolute top-4 left-4 z-50 flex items-center gap-1">
            <LanguageSelector @language-change="onLanguageChange" />
            <button
                type="button"
                class="rounded-full p-1.5 sm:p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
                :title="config?.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
                @click="toggleTheme"
            >
                <MaterialDesignIcon
                    :icon-name="config?.theme === 'dark' ? 'brightness-6' : 'brightness-4'"
                    class="w-5 h-5 sm:w-6 sm:h-6"
                />
            </button>
        </div>

        <!-- Progress Bar -->
        <div class="w-full h-1.5 bg-gray-100 dark:bg-zinc-900 overflow-hidden flex">
            <div
                v-for="step in totalSteps"
                :key="step"
                class="h-full transition-all duration-500 ease-out"
                :class="[
                    currentStep >= step ? 'bg-blue-500' : 'bg-transparent',
                    currentStep === step ? 'flex-2' : 'flex-1',
                ]"
                :style="{ borderRight: step < totalSteps ? '1px solid rgba(0,0,0,0.05)' : 'none' }"
            ></div>
        </div>

        <div class="flex-1 overflow-y-auto px-6 md:px-12 py-10">
            <div class="w-full h-full flex flex-col justify-between">
                <transition name="fade-slide" mode="out-in">
                    <!-- Step 1: Welcome -->
                    <div
                        v-if="currentStep === 1"
                        key="page-step1"
                        class="flex flex-col items-center text-center space-y-8 py-10"
                    >
                        <div class="relative">
                            <div class="w-32 h-32 bg-blue-500/10 rounded-3xl rotate-12 absolute -inset-2"></div>
                            <img :src="logoUrl" class="w-32 h-32 relative z-10 p-2" />
                        </div>
                        <div class="space-y-4">
                            <h1 class="text-5xl font-black tracking-tight text-gray-900 dark:text-white">
                                {{ $t("tutorial.welcome") }} <span class="text-blue-500">MeshChatX</span>
                            </h1>
                            <p class="text-xl text-gray-600 dark:text-zinc-400 max-w-2xl mx-auto">
                                {{ $t("tutorial.welcome_desc") }}
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full mt-12">
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-shield-lock" color="blue" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.security") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.security_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-map-marker-path" color="purple" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.maps") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.maps_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-phone" color="green" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.voice") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.voice_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-tools" color="orange" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.tools") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.tools_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-database-search" color="teal" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.archiver") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.archiver_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-account-cancel" color="amber" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.banishment") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.banishment_desc") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-keyboard-outline" color="red" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.palette") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.palette_desc_page") }}
                                    </div>
                                </div>
                            </div>
                            <div
                                class="flex items-start gap-6 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-left border border-gray-100 dark:border-zinc-800 transition-all hover:scale-[1.03] hover:shadow-2xl hover:z-10"
                            >
                                <v-icon icon="mdi-translate" color="cyan" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-xl text-gray-900 dark:text-white">
                                        {{ $t("tutorial.i18n") }}
                                    </div>
                                    <div class="text-gray-900 dark:text-white">
                                        {{ $t("tutorial.i18n_desc_page") }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full flex justify-end items-center gap-2 mt-8 px-6 text-gray-400 dark:text-zinc-500"
                        >
                            <v-icon icon="mdi-plus" size="24"></v-icon>
                            <span class="text-base font-bold uppercase tracking-widest">{{
                                $t("tutorial.more_features")
                            }}</span>
                        </div>
                    </div>

                    <!-- Step 2: Choose Connection Mode -->
                    <div v-else-if="currentStep === 2" key="page-step2-mode" class="space-y-8 py-8">
                        <div class="text-center space-y-2">
                            <h2 class="text-3xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.connect") }}
                            </h2>
                            <p class="text-lg text-gray-600 dark:text-zinc-400 max-w-2xl mx-auto">
                                {{ $t("tutorial.connect_desc_page") }}
                            </p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
                            <button
                                type="button"
                                class="text-left flex flex-col gap-4 p-8 rounded-3xl bg-blue-500/5 dark:bg-blue-500/10 border-2 transition-all hover:scale-[1.02]"
                                :class="[
                                    connectionMode === 'discovery'
                                        ? 'border-blue-500 ring-2 ring-blue-500/30'
                                        : 'border-blue-500/20 hover:border-blue-500',
                                ]"
                                :disabled="savingDiscovery"
                                @click="useDiscoveryMode"
                            >
                                <v-icon icon="mdi-radar" color="blue" size="56"></v-icon>
                                <div class="font-bold text-xl text-gray-900 dark:text-white">
                                    {{ $t("tutorial.mode_discovery_title") }}
                                </div>
                                <div class="text-sm text-gray-600 dark:text-zinc-400">
                                    {{ $t("tutorial.mode_discovery_desc") }}
                                </div>
                                <v-progress-circular
                                    v-if="savingDiscovery"
                                    indeterminate
                                    size="20"
                                    width="2"
                                ></v-progress-circular>
                            </button>

                            <button
                                type="button"
                                class="text-left flex flex-col gap-4 p-8 rounded-3xl bg-emerald-500/5 dark:bg-emerald-500/10 border-2 transition-all hover:scale-[1.02]"
                                :class="[
                                    connectionMode === 'local'
                                        ? 'border-emerald-500 ring-2 ring-emerald-500/30'
                                        : 'border-emerald-500/20 hover:border-emerald-500',
                                ]"
                                :disabled="addingLocal || reloadingReticulum"
                                @click="useLocalMode"
                            >
                                <v-icon icon="mdi-lan" color="emerald" size="56"></v-icon>
                                <div class="font-bold text-xl text-gray-900 dark:text-white">
                                    {{ $t("tutorial.mode_local_title") }}
                                </div>
                                <div class="text-sm text-gray-600 dark:text-zinc-400">
                                    {{ $t("tutorial.mode_local_desc") }}
                                </div>
                                <v-progress-circular
                                    v-if="addingLocal || reloadingReticulum"
                                    indeterminate
                                    size="20"
                                    width="2"
                                ></v-progress-circular>
                            </button>

                            <button
                                type="button"
                                class="text-left flex flex-col gap-4 p-8 rounded-3xl bg-gray-100/50 dark:bg-zinc-800/40 border-2 transition-all hover:scale-[1.02]"
                                :class="[
                                    connectionMode === 'manual'
                                        ? 'border-gray-500 ring-2 ring-gray-500/30'
                                        : 'border-gray-300 dark:border-zinc-700 hover:border-gray-500',
                                ]"
                                @click="useManualMode"
                            >
                                <v-icon icon="mdi-cog-outline" color="gray" size="56"></v-icon>
                                <div class="font-bold text-xl text-gray-900 dark:text-white">
                                    {{ $t("tutorial.mode_manual_title") }}
                                </div>
                                <div class="text-sm text-gray-600 dark:text-zinc-400">
                                    {{ $t("tutorial.mode_manual_desc") }}
                                </div>
                            </button>
                        </div>

                        <p class="text-xs text-center text-gray-400 dark:text-zinc-500">
                            {{ $t("tutorial.mode_change_later") }}
                        </p>
                    </div>

                    <!-- Step 3: Bootstrap Selection -->
                    <div v-else-if="currentStep === 3" key="page-step3-bootstrap" class="space-y-6 py-8">
                        <div class="text-center space-y-2">
                            <h2 class="text-3xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.bootstrap_title") }}
                            </h2>
                            <p class="text-lg text-gray-600 dark:text-zinc-400 max-w-3xl mx-auto">
                                {{ $t("tutorial.bootstrap_desc_page") }}
                            </p>
                        </div>

                        <div
                            class="flex items-start gap-3 sm:gap-5 max-w-3xl mx-auto rounded-2xl border border-gray-200 dark:border-zinc-700 bg-white/80 dark:bg-zinc-900/60 p-3.5 sm:p-5"
                        >
                            <div class="shrink-0 pr-0.5 pt-0.5 sm:pt-1.5 sm:pr-1 flex items-start">
                                <Toggle
                                    v-model="defaultBootstrapOnly"
                                    @update:model-value="persistDefaultBootstrapOnly"
                                />
                            </div>
                            <div class="min-w-0 flex-1 pl-0.5 sm:pl-0 sm:pt-0.5">
                                <div
                                    class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white leading-snug"
                                >
                                    {{ $t("tutorial.bootstrap_only_label") }}
                                </div>
                                <p
                                    class="text-xs sm:text-sm text-gray-500 dark:text-zinc-400 mt-1.5 sm:mt-2 leading-relaxed"
                                >
                                    {{ $t("tutorial.bootstrap_only_hint") }}
                                </p>
                            </div>
                        </div>

                        <div
                            v-if="hasAnyBootstrapsToShow"
                            class="flex w-full max-w-6xl mx-auto items-center gap-2 border-0 border-b border-gray-200/90 dark:border-zinc-600/90 py-1.5"
                        >
                            <v-icon icon="mdi-magnify" size="22" class="shrink-0 text-gray-400" />
                            <input
                                v-model="bootstrapListSearch"
                                type="search"
                                autocomplete="off"
                                :placeholder="$t('tutorial.bootstrap_search_placeholder')"
                                class="min-w-0 flex-1 border-0 bg-transparent p-0 text-base text-gray-900 shadow-none ring-0 outline-hidden focus:ring-0 dark:text-zinc-100 placeholder:text-gray-400 dark:placeholder:text-zinc-500"
                            />
                            <button
                                v-if="bootstrapListSearch"
                                type="button"
                                class="shrink-0 rounded p-1.5 text-gray-400 transition-colors hover:text-gray-700 dark:hover:text-zinc-200"
                                :title="$t('tutorial.bootstrap_search_clear')"
                                :aria-label="$t('tutorial.bootstrap_search_clear')"
                                @click="bootstrapListSearch = ''"
                            >
                                <v-icon icon="mdi-close" size="20" />
                            </button>
                        </div>

                        <div class="grid max-w-6xl mx-auto grid-cols-1 items-start gap-6 lg:grid-cols-2">
                            <div
                                v-if="sortedDiscoveredInterfaces.length > 0"
                                class="h-fit min-w-0 bg-emerald-500/5 dark:bg-emerald-500/10 rounded-3xl border border-emerald-500/20"
                            >
                                <button
                                    type="button"
                                    class="flex w-full items-center justify-between gap-2 p-4 text-left sm:px-5"
                                    :aria-expanded="bootstrapDiscoveredSectionOpen"
                                    @click="bootstrapDiscoveredSectionOpen = !bootstrapDiscoveredSectionOpen"
                                >
                                    <div class="flex min-w-0 items-center gap-2.5 text-base">
                                        <MaterialDesignIcon
                                            :icon-name="bootstrapDiscoveredSectionOpen ? 'chevron-up' : 'chevron-down'"
                                            class="size-4 shrink-0 text-gray-500"
                                        />
                                        <v-icon icon="mdi-radar" color="emerald" size="22"></v-icon>
                                        <span class="font-bold text-gray-900 dark:text-white">{{
                                            $t("tutorial.bootstrap_discovered")
                                        }}</span>
                                    </div>
                                </button>
                                <div v-show="bootstrapDiscoveredSectionOpen" class="px-4 pb-5 sm:px-5">
                                    <p
                                        v-if="
                                            bootstrapListSearch &&
                                            sortedDiscoveredInterfaces.length > 0 &&
                                            filteredDiscoveredForBootstrap.length === 0
                                        "
                                        class="text-sm text-gray-500 dark:text-zinc-400"
                                    >
                                        {{ $t("tutorial.bootstrap_search_no_match") }}
                                    </p>
                                    <div
                                        v-else
                                        class="max-h-[480px] space-y-2 overflow-y-auto pr-2 pt-1 custom-scrollbar"
                                    >
                                        <label
                                            v-for="iface in filteredDiscoveredForBootstrap"
                                            :key="iface.discovery_hash || iface.name"
                                            class="flex cursor-pointer items-center gap-3 rounded-xl border border-gray-100 bg-white p-3 transition-all dark:border-zinc-700 dark:bg-zinc-800"
                                            :class="[
                                                isBootstrapSelected(`disc:${iface.discovery_hash || iface.name}`)
                                                    ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20'
                                                    : 'hover:border-emerald-400',
                                            ]"
                                        >
                                            <input
                                                type="checkbox"
                                                class="h-4 w-4 accent-emerald-500"
                                                :checked="
                                                    isBootstrapSelected(`disc:${iface.discovery_hash || iface.name}`)
                                                "
                                                @change="toggleBootstrap(`disc:${iface.discovery_hash || iface.name}`)"
                                            />
                                            <MaterialDesignIcon
                                                :icon-name="getDiscoveryIcon(iface)"
                                                class="h-5 w-5 shrink-0 text-emerald-500"
                                            />
                                            <div class="min-w-0 flex-1">
                                                <div class="truncate text-sm font-bold text-gray-900 dark:text-white">
                                                    {{ iface.name }}
                                                </div>
                                                <div
                                                    class="truncate font-mono text-[10px] text-gray-500 dark:text-zinc-400"
                                                >
                                                    <span v-if="iface.reachable_on"
                                                        >{{ iface.reachable_on
                                                        }}<span v-if="iface.port">:{{ iface.port }}</span></span
                                                    >
                                                    <span v-else>{{ iface.type }}</span>
                                                    <span class="ml-2 capitalize">{{ iface.status }}</span>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="h-fit min-w-0 rounded-3xl border border-gray-100 bg-gray-50 p-0 dark:border-zinc-800 dark:bg-zinc-900"
                                :class="[sortedDiscoveredInterfaces.length === 0 ? 'lg:col-span-2' : '']"
                            >
                                <div class="flex items-center justify-between gap-2 p-4 pr-2 sm:px-5">
                                    <button
                                        type="button"
                                        class="flex min-w-0 flex-1 items-center gap-2.5 text-left text-base"
                                        :aria-expanded="bootstrapCommunitySectionOpen"
                                        @click="bootstrapCommunitySectionOpen = !bootstrapCommunitySectionOpen"
                                    >
                                        <MaterialDesignIcon
                                            :icon-name="bootstrapCommunitySectionOpen ? 'chevron-up' : 'chevron-down'"
                                            class="size-4 shrink-0 text-gray-500"
                                        />
                                        <v-icon icon="mdi-web" color="blue" size="22"></v-icon>
                                        <span class="font-bold text-gray-900 dark:text-white">{{
                                            $t("tutorial.bootstrap_community")
                                        }}</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="shrink-0 rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-blue-600 disabled:opacity-50 dark:hover:bg-zinc-800 dark:hover:text-blue-400"
                                        :disabled="refreshingCommunityPresets"
                                        :title="$t('interfaces.community_presets_refresh')"
                                        :aria-label="$t('interfaces.community_presets_refresh')"
                                        @click.stop="refreshCommunityPresets"
                                    >
                                        <v-icon
                                            icon="mdi-refresh"
                                            size="22"
                                            :class="{ 'animate-spin': refreshingCommunityPresets }"
                                        />
                                    </button>
                                </div>
                                <div v-show="bootstrapCommunitySectionOpen" class="px-4 pb-5 sm:px-5">
                                    <p
                                        v-if="
                                            bootstrapListSearch &&
                                            communityInterfaces.length > 0 &&
                                            filteredCommunityForBootstrap.length === 0
                                        "
                                        class="text-sm text-gray-500 dark:text-zinc-400"
                                    >
                                        {{ $t("tutorial.bootstrap_search_no_match") }}
                                    </p>
                                    <div
                                        v-else
                                        class="max-h-[480px] space-y-2 overflow-y-auto pr-2 pt-1 custom-scrollbar"
                                    >
                                        <label
                                            v-for="iface in filteredCommunityForBootstrap"
                                            :key="iface.name"
                                            class="flex cursor-pointer items-center gap-3 rounded-xl border border-gray-100 bg-white p-3 transition-all dark:border-zinc-700 dark:bg-zinc-800"
                                            :class="[
                                                isBootstrapSelected(`comm:${iface.name}`)
                                                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                                                    : 'hover:border-blue-400',
                                            ]"
                                        >
                                            <input
                                                type="checkbox"
                                                class="h-4 w-4 accent-blue-500"
                                                :checked="isBootstrapSelected(`comm:${iface.name}`)"
                                                @change="toggleBootstrap(`comm:${iface.name}`)"
                                            />
                                            <v-icon icon="mdi-server-network" color="blue" size="22"></v-icon>
                                            <div class="min-w-0 flex-1">
                                                <div class="truncate text-sm font-bold text-gray-900 dark:text-white">
                                                    {{ iface.name }}
                                                </div>
                                                <div
                                                    class="truncate font-mono text-[10px] text-gray-500 dark:text-zinc-400"
                                                >
                                                    {{ iface.target_host
                                                    }}<span v-if="iface.target_port">:{{ iface.target_port }}</span>
                                                </div>
                                            </div>
                                            <span
                                                v-if="iface.online"
                                                class="shrink-0 text-[9px] font-bold uppercase tracking-widest text-green-500"
                                                >{{ $t("tutorial.online") }}</span
                                            >
                                        </label>
                                        <div v-if="loadingInterfaces" class="flex justify-center py-3">
                                            <v-progress-circular
                                                indeterminate
                                                color="blue"
                                                size="24"
                                            ></v-progress-circular>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div
                            class="flex flex-col sm:flex-row items-center justify-between gap-4 max-w-6xl mx-auto pt-4"
                        >
                            <p class="text-sm text-gray-500 dark:text-zinc-500">
                                {{
                                    $t("tutorial.bootstrap_selected", {
                                        count: selectedBootstrapCount,
                                    })
                                }}
                            </p>
                            <div class="flex gap-3">
                                <button
                                    type="button"
                                    class="px-6 py-3 text-sm rounded-xl border-2 border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-bold transition-all hover:bg-gray-50 dark:hover:bg-zinc-700"
                                    @click="skipBootstraps"
                                >
                                    {{ $t("tutorial.bootstrap_skip") }}
                                </button>
                                <button
                                    type="button"
                                    class="px-8 py-3 text-sm rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg transition-all"
                                    :disabled="addingBootstraps || reloadingReticulum || selectedBootstrapCount === 0"
                                    @click="confirmBootstraps"
                                >
                                    <v-progress-circular
                                        v-if="addingBootstraps || reloadingReticulum"
                                        indeterminate
                                        size="16"
                                        width="2"
                                        class="mr-2"
                                    ></v-progress-circular>
                                    {{ $t("tutorial.bootstrap_confirm") }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4: Propagation Mode -->
                    <div v-else-if="currentStep === 4" key="page-step4-prop" class="space-y-8 py-12">
                        <div class="text-center space-y-4">
                            <h2 class="text-4xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.propagation") }}
                            </h2>
                            <p class="text-xl text-gray-600 dark:text-zinc-400 max-w-2xl mx-auto">
                                {{ $t("tutorial.propagation_desc") }}
                            </p>
                        </div>

                        <div class="flex flex-col items-center gap-10 py-12">
                            <div
                                class="bg-blue-500/10 dark:bg-blue-500/20 p-12 rounded-[3rem] text-center space-y-8 border border-blue-500/20 max-w-2xl shadow-2xl"
                            >
                                <v-icon icon="mdi-server-network" color="blue" size="80"></v-icon>
                                <div class="text-3xl font-black text-gray-900 dark:text-white">
                                    {{ $t("tutorial.propagation_question") }}
                                </div>
                                <p class="text-xl text-gray-600 dark:text-zinc-400">
                                    {{ $t("tutorial.propagation_auto") }}
                                </p>
                                <div class="flex flex-col gap-4 pt-4">
                                    <button
                                        type="button"
                                        class="px-10 py-4 text-xl rounded-2xl bg-blue-600 hover:bg-blue-500 text-white font-black shadow-xl transition-all transform hover:scale-105"
                                        :disabled="savingPropagation"
                                        @click="enableAutoPropagation"
                                    >
                                        <v-progress-circular
                                            v-if="savingPropagation"
                                            indeterminate
                                            size="24"
                                            width="3"
                                            class="mr-3"
                                        ></v-progress-circular>
                                        {{ $t("tutorial.propagation_enable_auto") }}
                                    </button>
                                    <button
                                        type="button"
                                        class="px-10 py-4 text-xl rounded-2xl border-2 border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-black shadow-lg transition-all transform hover:scale-105"
                                        @click="nextStep"
                                    >
                                        {{ $t("tutorial.propagation_skip_auto") }}
                                    </button>
                                </div>
                                <div class="mt-8 pt-8 border-t-2 border-gray-200 dark:border-zinc-800">
                                    <div class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                                        {{ $t("tutorial.propagation_manual") }}
                                    </div>
                                    <p class="text-base text-gray-500 dark:text-zinc-500">
                                        {{ $t("tutorial.propagation_manual_desc") }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 5: Documentation & Tools -->
                    <div v-else-if="currentStep === 5" key="page-step5-tools" class="space-y-8 py-10">
                        <div class="text-center space-y-4">
                            <h2 class="text-4xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.learn_create") }}
                            </h2>
                            <p class="text-xl text-gray-600 dark:text-zinc-400 max-w-2xl mx-auto">
                                {{ $t("tutorial.learn_create_desc_page") }}
                            </p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div
                                class="flex flex-col items-center gap-6 p-8 rounded-4xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800"
                            >
                                <v-icon icon="mdi-book-open-variant" color="blue" size="64"></v-icon>
                                <div>
                                    <div class="font-bold text-2xl text-gray-900 dark:text-white mb-2">
                                        {{ $t("tutorial.documentation") }}
                                    </div>
                                    <p class="text-gray-900 dark:text-white mb-6">
                                        {{ $t("tutorial.documentation_desc_page") }}
                                    </p>
                                    <div class="flex flex-col gap-3">
                                        <a
                                            href="/meshchatx-docs/index.html"
                                            target="_blank"
                                            class="h-12 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold shadow-xs transition-all inline-flex items-center justify-center px-6"
                                        >
                                            {{ $t("tutorial.read_meshchatx_docs") }}
                                        </a>
                                        <a
                                            :href="reticulumBundledDocsUrl"
                                            target="_blank"
                                            class="h-12 rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold shadow-xs transition-all hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-blue-400 dark:hover:border-blue-500 inline-flex items-center justify-center px-6"
                                        >
                                            {{ $t("tutorial.reticulum_manual") }}
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex flex-col items-center gap-6 p-8 rounded-4xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800"
                            >
                                <v-icon icon="mdi-file-document-edit-outline" color="orange" size="64"></v-icon>
                                <div>
                                    <div class="font-bold text-2xl text-gray-900 dark:text-white mb-2">
                                        {{ $t("tutorial.micron_editor") }}
                                    </div>
                                    <p class="text-gray-900 dark:text-white mb-6">
                                        {{ $t("tutorial.micron_editor_desc_page") }}
                                    </p>
                                    <button
                                        type="button"
                                        class="w-full h-12 rounded-xl bg-orange-600 hover:bg-orange-500 text-white font-semibold shadow-xs transition-all"
                                        @click="gotoRoute('micron-editor')"
                                    >
                                        {{ $t("tutorial.open_micron_editor") }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div
                                class="flex flex-col items-center gap-4 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-all hover:scale-[1.02]"
                                @click="gotoRoute('nomadnetwork')"
                            >
                                <v-icon icon="mdi-earth" color="purple" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.paper_messages") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $t("tutorial.paper_messages_desc") }}
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex flex-col items-center gap-4 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-all hover:scale-[1.02]"
                                @click="gotoRoute('messages')"
                            >
                                <v-icon icon="mdi-message-text-outline" color="green" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.send_messages") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $t("tutorial.send_messages_desc") }}
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex flex-col items-center gap-4 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-all hover:scale-[1.02]"
                                @click="gotoRoute('network-visualiser')"
                            >
                                <v-icon icon="mdi-hub" color="teal" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.explore_nodes") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $t("tutorial.explore_nodes_desc") }}
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex flex-col items-center gap-4 p-6 rounded-3xl bg-gray-50 dark:bg-zinc-900 text-center border border-gray-100 dark:border-zinc-800 cursor-pointer hover:border-blue-500 transition-all hover:scale-[1.02]"
                                @click="gotoRoute('call')"
                            >
                                <v-icon icon="mdi-phone-in-talk-outline" color="red" size="40"></v-icon>
                                <div>
                                    <div class="font-bold text-gray-900 dark:text-white">
                                        {{ $t("tutorial.voice_calls") }}
                                    </div>
                                    <div class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $t("tutorial.voice_calls_desc") }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 6: Finish -->
                    <div
                        v-else-if="currentStep === 6"
                        key="page-step6-finish"
                        class="flex flex-col items-center text-center space-y-10 py-20"
                    >
                        <div class="w-48 h-48 bg-green-500/10 rounded-full flex items-center justify-center relative">
                            <v-icon icon="mdi-check-decagram" color="green" size="120"></v-icon>
                            <div class="absolute inset-0 bg-green-500/20 rounded-full animate-ping opacity-20"></div>
                        </div>
                        <div class="space-y-4">
                            <h2 class="text-5xl font-black text-gray-900 dark:text-white">
                                {{ $t("tutorial.ready") }}
                            </h2>
                            <p class="text-xl text-gray-600 dark:text-zinc-400 max-w-2xl mx-auto">
                                {{ $t("tutorial.ready_desc_page") }}
                            </p>
                        </div>
                        <div
                            class="p-6 bg-amber-50 dark:bg-amber-900/20 rounded-3xl border border-amber-100 dark:border-amber-900/30 text-amber-700 dark:text-amber-400 flex gap-4 max-w-xl text-left"
                        >
                            <v-icon icon="mdi-information-outline" size="32" class="shrink-0"></v-icon>
                            <div class="space-y-1">
                                <div class="font-bold text-lg">{{ $t("tutorial.restart_required") }}</div>
                                <div class="opacity-90">
                                    {{ $t("tutorial.restart_desc_page") }}
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>

                <!-- Navigation Buttons (Page Mode) -->
                <div class="flex justify-between items-center mt-12 border-t dark:border-zinc-900 pt-8">
                    <button
                        v-if="currentStep > 1 && currentStep < totalSteps"
                        type="button"
                        class="px-8 h-12 rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold text-sm shadow-xs transition-all hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-blue-400 dark:hover:border-blue-500"
                        @click="previousStep"
                    >
                        {{ $t("tutorial.back") }}
                    </button>
                    <div v-else></div>

                    <div class="flex gap-4">
                        <button
                            v-if="currentStep < totalSteps"
                            type="button"
                            class="px-8 h-12 rounded-xl border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 font-semibold text-sm shadow-xs transition-all opacity-50 hover:opacity-100 hover:bg-gray-50 dark:hover:bg-zinc-700"
                            @click="skipTutorial"
                        >
                            {{ $t("tutorial.skip_setup") }}
                        </button>

                        <button
                            v-if="currentStep < totalSteps"
                            type="button"
                            class="px-12 h-14 text-lg rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold shadow-xs transition-all"
                            @click="nextStep"
                        >
                            {{ $t("tutorial.continue") }}
                        </button>

                        <button
                            v-else
                            type="button"
                            class="px-12 h-14 text-lg rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold shadow-xs transition-all"
                            @click="finishTutorial"
                        >
                            {{ $t("tutorial.finish_setup") }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import logoUrl from "../assets/images/logo.png";
import ToastUtils from "../js/ToastUtils";
import DialogUtils from "../js/DialogUtils";
import GlobalState from "../js/GlobalState";
import { bundledReticulumDocsUrl } from "../js/reticulumDocsEntryUrl.js";
import LanguageSelector from "./LanguageSelector.vue";
import MaterialDesignIcon from "./MaterialDesignIcon.vue";
import Toggle from "./forms/Toggle.vue";

export default {
    name: "TutorialModal",
    components: {
        LanguageSelector,
        MaterialDesignIcon,
        Toggle,
    },
    data() {
        return {
            visible: false,
            currentStep: 1,
            totalSteps: 6,
            logoUrl,
            communityInterfaces: [],
            loadingInterfaces: false,
            interfaceAddedViaTutorial: false,
            connectionMode: null,
            selectedBootstrapKeys: [],
            addedBootstrapKeys: [],
            addingBootstraps: false,
            addingLocal: false,
            reloadingReticulum: false,
            discoveredInterfaces: [],
            discoveredActive: [],
            loadingDiscovered: false,
            savingDiscovery: false,
            savingPropagation: false,
            discoveryInterval: null,
            markingSeen: false,
            windowWidth: typeof window !== "undefined" ? window.innerWidth : 1024,
            defaultBootstrapOnly: true,
            refreshingCommunityPresets: false,
            bootstrapListSearch: "",
            bootstrapDiscoveredSectionOpen: true,
            bootstrapCommunitySectionOpen: true,
        };
    },
    computed: {
        isPage() {
            return this.$route?.meta?.isPage === true;
        },
        dialogFullscreen() {
            return this.windowWidth < 768;
        },
        config() {
            return GlobalState.config;
        },
        sortedDiscoveredInterfaces() {
            return [...this.discoveredInterfaces].sort((a, b) => (b.last_heard || 0) - (a.last_heard || 0));
        },
        interfacesWithLocation() {
            return this.discoveredInterfaces.filter((iface) => iface.latitude != null && iface.longitude != null);
        },
        bootstrapCommunityKey() {
            return (iface) => `comm:${iface.name}`;
        },
        bootstrapDiscoveredKey() {
            return (iface) => `disc:${iface.discovery_hash || iface.name}`;
        },
        hasAnyBootstrapsToShow() {
            return this.communityInterfaces.length > 0 || this.sortedDiscoveredInterfaces.length > 0;
        },
        filteredDiscoveredForBootstrap() {
            const list = this.sortedDiscoveredInterfaces;
            const q = (this.bootstrapListSearch || "").trim().toLowerCase();
            if (!q) {
                return list;
            }
            return list.filter((iface) => {
                const parts = [
                    iface.name,
                    iface.type,
                    iface.reachable_on,
                    String(iface.port ?? ""),
                    iface.status,
                    iface.discovery_hash,
                ].filter(Boolean);
                return parts.join(" ").toLowerCase().includes(q);
            });
        },
        filteredCommunityForBootstrap() {
            const list = this.communityInterfaces;
            const q = (this.bootstrapListSearch || "").trim().toLowerCase();
            if (!q) {
                return list;
            }
            return list.filter((iface) => {
                const parts = [iface.name, iface.target_host, String(iface.target_port ?? ""), iface.type].filter(
                    Boolean
                );
                return parts.join(" ").toLowerCase().includes(q);
            });
        },
        selectedBootstrapCount() {
            return this.selectedBootstrapKeys.length;
        },
        reticulumBundledDocsUrl() {
            return bundledReticulumDocsUrl(this.$i18n.locale);
        },
    },
    beforeUnmount() {
        if (this.onWindowResize) {
            window.removeEventListener("resize", this.onWindowResize);
        }
        if (this.discoveryInterval) {
            clearInterval(this.discoveryInterval);
        }
    },
    mounted() {
        this.onWindowResize = () => {
            this.windowWidth = window.innerWidth;
        };
        window.addEventListener("resize", this.onWindowResize, { passive: true });
        if (this.isPage) {
            this.loadDiscoveryBootstrapDefaults();
            this.loadCommunityInterfaces();
            this.loadDiscoveredInterfaces();
            this.discoveryInterval = setInterval(() => {
                this.loadDiscoveredInterfaces();
            }, 5000);
        }
    },
    methods: {
        async toggleTheme() {
            const newTheme = this.config.theme === "dark" ? "light" : "dark";
            try {
                await window.api.patch("/api/v1/config", {
                    theme: newTheme,
                });
                GlobalState.config.theme = newTheme;
            } catch (e) {
                console.error("Failed to update theme:", e);
            }
        },
        async onLanguageChange(langCode) {
            try {
                await window.api.patch("/api/v1/config", {
                    language: langCode,
                });
                this.$i18n.locale = langCode;
                GlobalState.config.language = langCode;
            } catch (e) {
                console.error("Failed to update language:", e);
            }
        },
        async show() {
            this.visible = true;
            this.currentStep = 1;
            this.interfaceAddedViaTutorial = false;
            this.connectionMode = null;
            this.selectedBootstrapKeys = [];
            this.addedBootstrapKeys = [];
            this.bootstrapListSearch = "";
            this.bootstrapDiscoveredSectionOpen = true;
            this.bootstrapCommunitySectionOpen = true;
            await this.loadDiscoveryBootstrapDefaults();
            await this.loadCommunityInterfaces();
            await this.loadDiscoveredInterfaces();

            if (this.discoveryInterval) {
                clearInterval(this.discoveryInterval);
            }
            this.discoveryInterval = setInterval(() => {
                this.loadDiscoveredInterfaces();
            }, 5000);
        },
        async loadCommunityInterfaces() {
            this.loadingInterfaces = true;
            try {
                const response = await window.api.get("/api/v1/community-interfaces");
                this.communityInterfaces = response.data.interfaces;
            } catch (e) {
                console.error("Failed to load community interfaces:", e);
            } finally {
                this.loadingInterfaces = false;
            }
        },
        async refreshCommunityPresets() {
            if (this.refreshingCommunityPresets) return;
            this.refreshingCommunityPresets = true;
            try {
                const r = await window.api.post("/api/v1/community-interfaces/refresh", {});
                const n = r.data?.count ?? 0;
                ToastUtils.success(this.$t("interfaces.community_presets_refreshed", { count: n }));
                await this.loadCommunityInterfaces();
            } catch (e) {
                ToastUtils.error(e.response?.data?.message || this.$t("interfaces.community_presets_refresh_failed"));
                console.error(e);
            } finally {
                this.refreshingCommunityPresets = false;
            }
        },
        async loadDiscoveredInterfaces() {
            this.loadingDiscovered = true;
            try {
                const response = await window.api.get(`/api/v1/reticulum/discovered-interfaces`);
                this.discoveredInterfaces = response.data?.interfaces ?? [];
                this.discoveredActive = response.data?.active ?? [];
            } catch (e) {
                console.error("Failed to load discovered interfaces:", e);
            } finally {
                this.loadingDiscovered = false;
            }
        },
        async reloadReticulum() {
            this.reloadingReticulum = true;
            try {
                await window.api.post("/api/v1/reticulum/reload");
                GlobalState.hasPendingInterfaceChanges = false;
                if (GlobalState.modifiedInterfaceNames && GlobalState.modifiedInterfaceNames.clear) {
                    GlobalState.modifiedInterfaceNames.clear();
                }
                return true;
            } catch (e) {
                console.error("Failed to reload Reticulum:", e);
                ToastUtils.error(this.$t("tutorial.failed_reload_rns"));
                return false;
            } finally {
                this.reloadingReticulum = false;
            }
        },
        async useDiscoveryMode() {
            this.savingDiscovery = true;
            try {
                const payload = {
                    discover_interfaces: true,
                    autoconnect_discovered_interfaces: 3,
                    default_bootstrap_only: true,
                };
                await window.api.patch(`/api/v1/reticulum/discovery`, payload);
                this.defaultBootstrapOnly = true;
                ToastUtils.success(this.$t("tutorial.discovery_enabled"));
                this.connectionMode = "discovery";
                this.currentStep = 3;
                this.bootstrapListSearch = "";
                this.bootstrapDiscoveredSectionOpen = true;
                this.bootstrapCommunitySectionOpen = true;
            } catch (e) {
                console.error("Failed to enable discovery:", e);
                ToastUtils.error(this.$t("tutorial.failed_enable_discovery"));
            } finally {
                this.savingDiscovery = false;
            }
        },
        async useLocalMode() {
            if (this.addingLocal) return;
            this.addingLocal = true;
            try {
                await window.api.post("/api/v1/reticulum/interfaces/add", {
                    name: "Local Network",
                    type: "AutoInterface",
                    enabled: true,
                });
                this.interfaceAddedViaTutorial = true;
                GlobalState.hasPendingInterfaceChanges = true;
                GlobalState.modifiedInterfaceNames.add("Local Network");
                ToastUtils.success(this.$t("tutorial.local_added"));
                await this.reloadReticulum();
                this.connectionMode = "local";
                this.currentStep = 4;
            } catch (e) {
                console.error("Failed to add AutoInterface:", e);
                ToastUtils.error(e.response?.data?.message || this.$t("tutorial.failed_add_local"));
            } finally {
                this.addingLocal = false;
            }
        },
        useManualMode() {
            this.connectionMode = "manual";
            this.currentStep = 4;
        },
        isBootstrapSelected(key) {
            return this.selectedBootstrapKeys.includes(key);
        },
        toggleBootstrap(key) {
            const idx = this.selectedBootstrapKeys.indexOf(key);
            if (idx >= 0) {
                this.selectedBootstrapKeys.splice(idx, 1);
            } else {
                this.selectedBootstrapKeys.push(key);
            }
        },
        buildBootstrapPayload(item) {
            if (item.kind === "discovered") {
                const iface = item.iface;
                const payload = {
                    name: iface.name || `Discovered ${iface.discovery_hash || ""}`.trim(),
                    type: iface.type === "BackboneInterface" ? "TCPClientInterface" : iface.type,
                    enabled: true,
                    bootstrap_only: this.defaultBootstrapOnly === true,
                };
                if (iface.reachable_on) {
                    payload.target_host = iface.reachable_on;
                }
                if (iface.port) {
                    payload.target_port = iface.port;
                }
                return payload;
            }
            const iface = item.iface;
            return {
                name: iface.name,
                type: iface.type,
                target_host: iface.target_host,
                target_port: iface.target_port,
                enabled: true,
                bootstrap_only: this.defaultBootstrapOnly === true,
            };
        },
        parseDiscoveryBool(value, defaultValue = true) {
            if (value === undefined || value === null || value === "") {
                return defaultValue;
            }
            if (typeof value === "string") {
                return ["true", "yes", "1", "y", "on"].includes(value.toLowerCase());
            }
            return Boolean(value);
        },
        async loadDiscoveryBootstrapDefaults() {
            try {
                const response = await window.api.get("/api/v1/reticulum/discovery");
                const d = response.data?.discovery ?? {};
                this.defaultBootstrapOnly = this.parseDiscoveryBool(d.default_bootstrap_only, true);
            } catch (e) {
                console.error(e);
                this.defaultBootstrapOnly = true;
            }
        },
        async persistDefaultBootstrapOnly(value) {
            try {
                await window.api.patch("/api/v1/reticulum/discovery", {
                    default_bootstrap_only: value === true,
                });
            } catch (e) {
                console.error("Failed to save default_bootstrap_only:", e);
            }
        },
        async confirmBootstraps() {
            if (this.addingBootstraps) return;
            if (this.selectedBootstrapKeys.length === 0) {
                ToastUtils.warning(this.$t("tutorial.bootstrap_pick_at_least_one"));
                return;
            }
            this.addingBootstraps = true;
            const items = [];
            for (const key of this.selectedBootstrapKeys) {
                if (this.addedBootstrapKeys.includes(key)) continue;
                if (key.startsWith("comm:")) {
                    const iface = this.communityInterfaces.find((c) => `comm:${c.name}` === key);
                    if (iface) items.push({ key, kind: "community", iface });
                } else if (key.startsWith("disc:")) {
                    const iface = this.discoveredInterfaces.find((d) => `disc:${d.discovery_hash || d.name}` === key);
                    if (iface) items.push({ key, kind: "discovered", iface });
                }
            }
            let added = 0;
            for (const item of items) {
                try {
                    const payload = this.buildBootstrapPayload(item);
                    if (!payload.target_host) continue;
                    await window.api.post("/api/v1/reticulum/interfaces/add", payload);
                    this.addedBootstrapKeys.push(item.key);
                    GlobalState.hasPendingInterfaceChanges = true;
                    GlobalState.modifiedInterfaceNames.add(payload.name);
                    added += 1;
                } catch (e) {
                    console.error("Failed to add bootstrap interface:", e);
                    ToastUtils.error(e.response?.data?.message || this.$t("tutorial.failed_add_bootstrap"));
                }
            }
            if (added > 0) {
                this.interfaceAddedViaTutorial = true;
                ToastUtils.success(this.$t("tutorial.bootstrap_added", { count: added }));
                await this.reloadReticulum();
            }
            this.addingBootstraps = false;
            this.currentStep = 4;
        },
        skipBootstraps() {
            this.currentStep = 4;
        },
        async enableAutoPropagation() {
            this.savingPropagation = true;
            try {
                await window.api.patch("/api/v1/config", {
                    lxmf_preferred_propagation_node_auto_select: true,
                });
                ToastUtils.success("Auto-propagation enabled");
                this.nextStep();
            } catch (e) {
                console.error("Failed to enable auto-propagation:", e);
                ToastUtils.error("Failed to enable auto-propagation");
            } finally {
                this.savingPropagation = false;
            }
        },
        getDiscoveryIcon(iface) {
            switch (iface.type) {
                case "AutoInterface":
                    return "home-automation";
                case "RNodeInterface":
                    return iface.port && iface.port.toString().startsWith("tcp://") ? "lan-connect" : "radio-tower";
                case "RNodeMultiInterface":
                    return "access-point-network";
                case "TCPClientInterface":
                case "BackboneInterface":
                    return "lan-connect";
                case "TCPServerInterface":
                    return "lan";
                case "UDPInterface":
                    return "wan";
                case "SerialInterface":
                    return "usb-port";
                case "KISSInterface":
                case "AX25KISSInterface":
                    return "antenna";
                case "I2PInterface":
                    return "eye";
                case "PipeInterface":
                    return "pipe";
                default:
                    return "server-network";
            }
        },
        formatLastHeard(ts) {
            const seconds = Math.max(0, Math.floor(Date.now() / 1000 - ts));
            if (seconds < 60) return `${seconds}s ago`;
            if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
            if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
            return `${Math.floor(seconds / 86400)}d ago`;
        },
        copyToClipboard(text, label) {
            if (!text) return;
            navigator.clipboard.writeText(text);
            ToastUtils.success(`${label} copied to clipboard`);
        },
        mapAllDiscovered() {
            if (!this.isPage) {
                this.visible = false;
            }
            this.$router.push({
                name: "map",
                query: { view: "discovered" },
            });
        },
        async selectCommunityInterface(iface) {
            try {
                await window.api.post("/api/v1/reticulum/interfaces/add", {
                    name: iface.name,
                    type: iface.type,
                    target_host: iface.target_host,
                    target_port: iface.target_port,
                    enabled: true,
                });
                ToastUtils.success(`Added interface: ${iface.name}`);

                this.interfaceAddedViaTutorial = true;

                // track change
                GlobalState.hasPendingInterfaceChanges = true;
                GlobalState.modifiedInterfaceNames.add(iface.name);

                this.nextStep();
            } catch (e) {
                console.error(e);
                ToastUtils.error(e.response?.data?.message || "Failed to add interface");
            }
        },
        gotoAddInterface() {
            if (!this.isPage) {
                this.visible = false;
            }
            if (this.$router) {
                this.$router.push({ path: "/interfaces/add" });
            }
        },
        gotoRoute(routeName) {
            if (!this.isPage) {
                this.visible = false;
            }
            if (this.$router) {
                this.$router.push({ name: routeName });
            }
        },
        nextStep() {
            if (this.currentStep >= this.totalSteps) return;
            if (this.currentStep === 2 && this.connectionMode !== "discovery") {
                this.currentStep = 4;
                return;
            }
            this.currentStep++;
            if (this.currentStep === 3) {
                this.bootstrapListSearch = "";
                this.bootstrapDiscoveredSectionOpen = true;
                this.bootstrapCommunitySectionOpen = true;
            }
        },
        previousStep() {
            if (this.currentStep <= 1) return;
            if (this.currentStep === 4 && this.connectionMode !== "discovery") {
                this.currentStep = 2;
                return;
            }
            this.currentStep--;
        },
        async skipTutorial() {
            if (await DialogUtils.confirm(this.$t("tutorial.skip_confirm"))) {
                this.visible = false;
                this.markSeen();
            }
        },
        async markSeen() {
            if (this.markingSeen) return;
            this.markingSeen = true;
            try {
                await window.api.post("/api/v1/app/tutorial/seen");
            } catch (e) {
                console.error("Failed to mark tutorial as seen:", e);
            } finally {
                this.markingSeen = false;
            }
        },
        async finishTutorial() {
            if (GlobalState.hasPendingInterfaceChanges) {
                await this.reloadReticulum();
            }
            this.visible = false;
            this.markSeen();
            if (this.interfaceAddedViaTutorial) {
                ToastUtils.success(this.$t("tutorial.ready_finished"));
            }
        },
        async onVisibleUpdate(val) {
            if (!val) {
                // if closed by clicking away or programmatically, mark as seen
                this.markSeen();
            }
        },
    },
};
</script>

<style scoped>
.tutorial-dialog :deep(.v-field) {
    border-radius: 1rem !important;
}

.tutorial-dialog :deep(.v-field--variant-outlined .v-field__outline) {
    --v-field-border-opacity: 0.15;
}

.tutorial-dialog :deep(.v-field--focused .v-field__outline) {
    --v-field-border-opacity: 1;
}

.tutorial-dialog :deep(.v-field__input) {
    padding-top: 24px !important;
    padding-bottom: 8px !important;
}

.tutorial-dialog :deep(.v-label.v-field-label--floating) {
    transform: translateY(-8px) scale(0.75) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.tutorial-dialog :deep(.v-select .v-theme--light),
.tutorial-dialog :deep(.v-list),
.tutorial-dialog :deep(.v-list-item) {
    background-color: white !important;
    color: #111827 !important;
}

.tutorial-dialog :deep(.v-list-item-title),
.tutorial-dialog :deep(.v-list-item-subtitle) {
    color: inherit !important;
}

.tutorial-dialog :deep(.dark .v-list),
.tutorial-dialog :deep(.dark .v-list-item) {
    background-color: #18181b !important;
    color: white !important;
}

.tutorial-dialog :deep(.v-field__input) {
    color: inherit !important;
}

.tutorial-dialog :deep(.v-label.v-field-label) {
    color: #6b7280 !important;
}

.tutorial-dialog :deep(.dark .v-label.v-field-label) {
    color: #a1a1aa !important;
}

.tutorial-dialog .v-overlay__content {
    border-radius: 2rem !important;
    overflow: hidden;
}

@media (max-width: 767px) {
    .tutorial-dialog .v-overlay__content {
        border-radius: 0 !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

.fade-slide-enter-active,
.fade-slide-leave-active {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
    opacity: 0;
    transform: translateX(30px);
}

.fade-slide-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}
</style>
