<script lang="ts">
    import { ae_loc } from '$lib/stores/ae_stores';
    import { events_loc } from '$lib/stores/ae_events_stores';
    import Launcher_Cfg_Section from './launcher_cfg_section.svelte';

    interface Props {
        on_expand?: () => void;
    }
    let { on_expand }: Props = $props();
</script>

<Launcher_Cfg_Section
    title="Display & App Modes"
    icon="fa-object-group"
    bind:state={$events_loc.launcher.section_state__app_modes}
    {on_expand}
    description="Mode: {$events_loc.launcher.app_mode} | UI Layout"
>
    <!-- Content omitted for brevity, preserved in file -->
    <div class="col-span-full flex flex-col gap-3">
        <!-- 1. App Mode Selection -->
        <div class="flex flex-col gap-1">
            <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                >Operational Environment</label
            >
            <div class="grid grid-cols-3 gap-1 bg-surface-500/5 p-1 rounded-lg">
                <button
                    type="button"
                    onclick={() => ($events_loc.launcher.app_mode = 'default')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary-500={$events_loc.launcher
                        .app_mode === 'default'}
                    class:opacity-40={$events_loc.launcher.app_mode !==
                        'default'}>Web</button
                >
                <button
                    type="button"
                    onclick={() => ($events_loc.launcher.app_mode = 'native')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary-500={$events_loc.launcher
                        .app_mode === 'native'}
                    class:opacity-40={$events_loc.launcher.app_mode !==
                        'native'}>App</button
                >
                <button
                    type="button"
                    onclick={() => ($events_loc.launcher.app_mode = 'onsite')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary-500={$events_loc.launcher
                        .app_mode === 'onsite'}
                    class:opacity-40={$events_loc.launcher.app_mode !==
                        'onsite'}>Onsite</button
                >
            </div>
        </div>

        <!-- 2. UI Layout Toggles -->
        <div
            class="flex flex-col gap-1 border-t border-surface-500/10 pt-2 mt-1"
        >
            <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                >Interface Visibility</label
            >
            <div class="grid grid-cols-2 gap-2 p-1">
                <label class="flex items-center gap-2 cursor-pointer group">
                    <input
                        type="checkbox"
                        bind:checked={
                            $events_loc.launcher.hide__launcher_header
                        }
                        class="checkbox checkbox-sm"
                    />
                    <span class="text-xs group-hover:text-primary-500"
                        >Hide Header</span
                    >
                </label>
                <label class="flex items-center gap-2 cursor-pointer group">
                    <input
                        type="checkbox"
                        bind:checked={$events_loc.launcher.hide__launcher_menu}
                        class="checkbox checkbox-sm"
                    />
                    <span class="text-xs group-hover:text-primary-500"
                        >Hide Menu</span
                    >
                </label>
                <label class="flex items-center gap-2 cursor-pointer group">
                    <input
                        type="checkbox"
                        bind:checked={
                            $events_loc.launcher.hide__launcher_footer
                        }
                        class="checkbox checkbox-sm"
                    />
                    <span class="text-xs group-hover:text-primary-500"
                        >Hide Footer</span
                    >
                </label>
                <label class="flex items-center gap-2 cursor-pointer group">
                    <input
                        type="checkbox"
                        bind:checked={
                            $events_loc.launcher.hide__session_datetimes
                        }
                        class="checkbox checkbox-sm"
                    />
                    <span class="text-xs group-hover:text-primary-500"
                        >Hide Times</span
                    >
                </label>
            </div>
        </div>

        <!-- 3. Time Format Toggle -->
        <button
            type="button"
            onclick={() => {
                if ($events_loc.launcher.time_format == 'time_12_short') {
                    $events_loc.launcher.time_format = 'time_short';
                    $events_loc.launcher.time_hours = 24;
                } else {
                    $events_loc.launcher.time_format = 'time_12_short';
                    $events_loc.launcher.time_hours = 12;
                }
            }}
            class="btn btn-xs preset-tonal-surface w-full text-[10px]"
        >
            <span class="fas fa-clock mr-2 opacity-50"></span>
            Clock Format:
            <strong>{$events_loc.launcher.time_hours}-hour</strong>
        </button>

        <!-- 4. Advanced Toggles (Edit Mode Only) -->
        {#if $ae_loc.edit_mode}
            <div
                class="col-span-full border-t border-surface-500/20 pt-3 mt-1 flex flex-col gap-2"
            >
                <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                    >Technical Layout</label
                >
                <div class="grid grid-cols-1 gap-2 p-1">
                    <label class="flex items-center gap-2 cursor-pointer group">
                        <input
                            type="checkbox"
                            bind:checked={$events_loc.launcher.hide__ws_element}
                            class="checkbox checkbox-sm"
                        />
                        <span
                            class="text-xs group-hover:text-primary-500 italic"
                            >Hide WebSocket Debugger</span
                        >
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer group">
                        <input
                            type="checkbox"
                            bind:checked={
                                $events_loc.launcher.hide__modal_header_title
                            }
                            class="checkbox checkbox-sm"
                        />
                        <span
                            class="text-xs group-hover:text-primary-500 italic"
                            >Hide Poster Modal Title</span
                        >
                    </label>
                </div>
            </div>
        {/if}
    </div>
</Launcher_Cfg_Section>
