<script lang="ts">
    /**
     * menu_launcher_controls.svelte — Aether Launcher: Bottom Control Bar
     *
     * PURPOSE:
     *   Accessibility and visibility controls for the Launcher sidebar. Placed at the
     *   bottom of launcher_menu.svelte so presenters and operators can adjust display
     *   settings without needing access to the global AE System Menu (which may be
     *   unavailable in kiosk, locked, or podium setups).
     *
     * SECTIONS:
     *   1. Visibility toggles (edit mode only) — show/hide draft files and hidden sessions
     *   2. Accessibility controls (always visible) — font size cycler and light/dark toggle
     *
     * WHY ALWAYS-VISIBLE ACCESSIBILITY CONTROLS:
     *   Projector-connected screens, tablets, and phones at conference venues vary wildly
     *   in lighting. Operators and presenters need quick one-tap access to font size and
     *   theme mode without hunting through the system menu or requiring admin access.
     */

    import { Moon, Sun } from '@lucide/svelte';

    import { ae_loc } from '$lib/stores/ae_stores';
    import { events_loc } from '$lib/stores/ae_events_stores';

    interface Props {
        log_lvl?: number;
    }

    let { log_lvl = $bindable(0) }: Props = $props();
</script>

<div class="w-full max-w-full flex flex-col gap-1 items-center justify-center">
    <!-- ── Visibility toggles — edit mode only ── -->
    {#if $ae_loc.edit_mode}
        <div class="w-full max-w-full flex flex-row gap-1 items-center justify-center">
            <button
                type="button"
                onclick={() => {
                    if ($events_loc.launcher.show_content__hidden_files) {
                        $events_loc.launcher.show_content__hidden_files = false;
                        $events_loc.launcher.hide_content__draft_files = true;
                    } else {
                        $events_loc.launcher.show_content__hidden_files = true;
                        $events_loc.launcher.hide_content__draft_files = false;
                    }
                }}
                class="
                    btn btn-sm text-xs
                    w-1/2 max-w-1/2
                    preset-tonal-tertiary hover:preset-filled-tertiary-500
                    transition-all
                "
                title="Toggle visibility of hidden and draft files in the launcher file list."
            >
                {#if $events_loc.launcher.show_content__hidden_files}
                    <span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
                    Hide Files
                {:else}
                    <span class="fas fa-eye m-1 text-neutral-800/80"></span>
                    All Files
                {/if}
            </button>

            <button
                type="button"
                onclick={() => {
                    $events_loc.launcher.show_content__hidden_sessions =
                        !$events_loc.launcher.show_content__hidden_sessions;
                }}
                class="
                    btn btn-sm text-xs
                    w-1/2 max-w-1/2
                    preset-tonal-tertiary hover:preset-filled-tertiary-500
                    transition-all
                "
                title="Toggle visibility of hidden and cancelled sessions in the launcher session list."
            >
                {#if $events_loc.launcher.show_content__hidden_sessions}
                    <span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
                    Hide Sessions
                {:else}
                    <span class="fas fa-eye m-1 text-neutral-800/80"></span>
                    All Sessions
                {/if}
            </button>
        </div>
    {/if}

    <!-- ── Accessibility controls — always visible ── -->
    <div class="w-full max-w-full flex flex-row gap-1 items-center justify-center">
        <!-- Font size cycler: default → larger → smaller → default -->
        <button
            type="button"
            onclick={() => {
                const mode = $ae_loc.font_size_mode;
                if (!mode || mode === 'default') {
                    $ae_loc.font_size_mode = 'larger';
                } else if (mode === 'larger') {
                    $ae_loc.font_size_mode = 'smaller';
                } else {
                    $ae_loc.font_size_mode = 'default';
                }
            }}
            class="
                btn btn-sm text-xs
                w-1/2 max-w-1/2
                preset-tonal-tertiary hover:preset-filled-tertiary-500
                transition-all group
            "
            title="Cycle font size (default → larger → smaller). Current: {$ae_loc.font_size_mode ?? 'default'}"
        >
            {#if !$ae_loc.font_size_mode || $ae_loc.font_size_mode === 'default'}
                <span class="font-bold text-sm font-mono leading-none m-1">A</span>
                <span class="hidden group-hover:inline-block text-xs">Font: Normal</span>
            {:else if $ae_loc.font_size_mode === 'larger'}
                <span class="font-bold text-base font-mono leading-none m-1">A+</span>
                <span class="hidden group-hover:inline-block text-xs">Font: Larger</span>
            {:else}
                <span class="font-bold text-xs font-mono leading-none m-1">A−</span>
                <span class="hidden group-hover:inline-block text-xs">Font: Smaller</span>
            {/if}
        </button>

        <!-- Light/dark mode toggle. DOM sync handled by +layout.svelte $effect on theme_mode. -->
        <button
            type="button"
            onclick={() => {
                $ae_loc.theme_mode = $ae_loc.theme_mode === 'dark' ? 'light' : 'dark';
            }}
            class="
                btn btn-sm text-xs
                w-1/2 max-w-1/2
                preset-tonal-tertiary hover:preset-filled-tertiary-500
                transition-all group
            "
            title="Toggle light/dark display mode. Current: {$ae_loc.theme_mode ?? 'light'}"
        >
            {#if $ae_loc.theme_mode === 'dark'}
                <Moon class="m-1 inline-block" size="1em" />
                <span class="hidden group-hover:inline-block">Dark Mode</span>
            {:else}
                <Sun class="m-1 inline-block" size="1em" />
                <span class="hidden group-hover:inline-block">Light Mode</span>
            {/if}
        </button>
    </div>
</div>
