<script lang="ts">
    interface Props {
        log_lvl?: number;
    }

    let { log_lvl = 0 }: Props = $props();

    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger,
        time
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig
    } from '$lib/stores/ae_events_stores';

    // Sub-components
    import Launcher_Cfg_Native_OS from './cfg_components/launcher_cfg_native_os.svelte';
    import Launcher_Cfg_Sync_Timers from './cfg_components/launcher_cfg_sync_timers.svelte';
    import Launcher_Cfg_Health from './cfg_components/launcher_cfg_health.svelte';
    import Launcher_Cfg_Updates from './cfg_components/launcher_cfg_updates.svelte';
    import Launcher_Cfg_Controller from './cfg_components/launcher_cfg_controller.svelte';
    import Launcher_Cfg_Screen_Saver from './cfg_components/launcher_cfg_screen_saver.svelte';
    import Launcher_Cfg_App_Modes from './cfg_components/launcher_cfg_app_modes.svelte';
    import Launcher_Cfg_Local_Actions from './cfg_components/launcher_cfg_local_actions.svelte';
</script>

<div
    class="
        w-full max-w-md
        flex flex-col gap-2 items-center justify-start
        "
>
    <div class="w-full flex flex-row items-center justify-between">
        <h2 class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
            Launcher Configuration
        </h2>

        <button
            onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
            class="btn btn-icon dark:text-white"
        >
            <span class="fas fa-times"></span>
            <span class="sr-only">Close Config</span>
        </button>
    </div>

    <!-- Native Sections (only if bridge is active) -->
    {#if $ae_loc.is_native}
        <Launcher_Cfg_Native_OS />
        <Launcher_Cfg_Sync_Timers />
        <Launcher_Cfg_Health />
        <Launcher_Cfg_Updates />
    {/if}

    <Launcher_Cfg_Controller />
    <Launcher_Cfg_Screen_Saver />
    <Launcher_Cfg_App_Modes />
    <Launcher_Cfg_Local_Actions />

    <div class="text-center mt-4">
        <button
            type="button"
            onclick={() => ($events_loc.launcher.hide_drawer__debug = false)}
            class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
        >
            <span class="fas fa-bug"></span>
            Debug
        </button>

        <button
            type="button"
            onclick={() => location.reload()}
            class="btn btn-sm p-1 preset-tonal-secondary hover:preset-filled-secondary-500"
        >
            <span class="fas fa-sync-alt"></span>
            Reload Page
        </button>
    </div>
</div>