<script lang="ts">
import { ae_loc } from '$lib/stores/ae_stores';
import { events_sess } from '$lib/stores/ae_events_stores';
import { launcher_loc } from '$lib/stores/ae_events_stores__launcher.svelte';
import Launcher_Cfg_Section from './launcher_cfg_section.svelte';
import { Clock, GraduationCap, IdCard, LayoutGrid } from '@lucide/svelte';
interface Props {
    on_expand?: () => void;
}
let { on_expand }: Props = $props();

// Poster Kiosk mode presets:
//   iframe=true hides global site chrome
//   hide__launcher_menu/header/footer removes all launcher panels
// Oral/Default restores everything.
// WHY: A single tap lets event staff reconfigure a device (or all WS-connected
// remote devices) for a session type without touching individual toggles.
const POSTER_PRESET = {
    iframe: true,
    hide__launcher_menu: true,
    hide__launcher_header: true,
    hide__launcher_footer: true
};
const ORAL_PRESET = {
    iframe: false,
    hide__launcher_menu: false,
    hide__launcher_header: false,
    hide__launcher_footer: false
};

// Detect current mode: if both iframe AND hide_menu are on, we're in poster mode.
// Individual overrides are still possible via the checkboxes below.
let is_poster_mode = $derived(
    $ae_loc.iframe === true && launcher_loc.current.hide__launcher_menu === true
);

function apply_mode(mode: 'poster' | 'oral') {
    const preset = mode === 'poster' ? POSTER_PRESET : ORAL_PRESET;
    $ae_loc.iframe = preset.iframe;
    launcher_loc.current.hide__launcher_menu = preset.hide__launcher_menu;
    launcher_loc.current.hide__launcher_header = preset.hide__launcher_header;
    launcher_loc.current.hide__launcher_footer = preset.hide__launcher_footer;

    // Push to WS-connected remote devices when we're acting as a controller.
    // Only send when connected so the UI button doesn't silently no-op.
    if (
        launcher_loc.current.ws_connect &&
        (launcher_loc.current.controller === 'local_push' ||
            launcher_loc.current.controller === 'remote')
    ) {
        $events_sess.launcher.controller_cmd = `ae_mode:${mode}`;
        $events_sess.launcher.controller_trigger_send = 'trigger';
    }
}
</script>

<Launcher_Cfg_Section
    title="Display & App Modes"
    icon={LayoutGrid}
    bind:state={launcher_loc.current.section_state__app_modes}
    {on_expand}
    description="Mode: {launcher_loc.current.app_mode} | UI Layout">
    <!-- Content omitted for brevity, preserved in file -->
    <div class="col-span-full flex flex-col gap-3">
        <!-- 0. Oral / Poster Kiosk Mode Preset Toggle -->
        <div class="flex flex-col gap-1">
            <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
                Session Mode Preset
            </p>
            <div class="bg-surface-500/5 grid grid-cols-2 gap-1 rounded-lg p-1">
                <button
                    type="button"
                    onclick={() => apply_mode('oral')}
                    class="btn btn-xs text-[10px] font-bold"
                    class:preset-filled-secondary={!is_poster_mode}
                    class:preset-tonal-surface={is_poster_mode}
                    title="Standard oral/presentation layout — menus and headers visible">
                    <GraduationCap size="0.85em" class="mr-1 opacity-70" />
                    Oral / Default
                </button>
                <button
                    type="button"
                    onclick={() => apply_mode('poster')}
                    class="btn btn-xs text-[10px] font-bold"
                    class:preset-filled-primary={is_poster_mode}
                    class:preset-tonal-surface={!is_poster_mode}
                    title="Digital Poster kiosk — hides site chrome, menu, header & footer">
                    <IdCard size="0.85em" class="mr-1 opacity-70" />
                    Poster Kiosk
                </button>
            </div>
            {#if launcher_loc.current.ws_connect && (launcher_loc.current.controller === 'local_push' || launcher_loc.current.controller === 'remote')}
                <p class="ml-1 text-[8px] italic opacity-40">
                    Applies to all connected WS devices
                </p>
            {/if}
        </div>

        <!-- 1. App Mode Selection -->
        <div class="flex flex-col gap-1">
            <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
                Operational Environment
            </p>
            <div class="bg-surface-500/5 grid grid-cols-3 gap-1 rounded-lg p-1">
                <button
                    type="button"
                    onclick={() => (launcher_loc.current.app_mode = 'default')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary={launcher_loc.current
                        .app_mode === 'default'}
                    class:preset-tonal-surface={launcher_loc.current
                        .app_mode !== 'default'}
                    title="Default standard web browser (Chromium, Firefox, Safari based) launcher, for remote presenters and testing before being onsite">
                    Web</button>
                <button
                    type="button"
                    onclick={() => (launcher_loc.current.app_mode = 'native')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary={launcher_loc.current
                        .app_mode === 'native'}
                    class:preset-tonal-surface={launcher_loc.current
                        .app_mode !== 'native'}
                    title="Native Electron based app launcher, for onsite presenters in session rooms"
                    >App</button>
                <button
                    type="button"
                    onclick={() => (launcher_loc.current.app_mode = 'onsite')}
                    class="btn btn-xs text-[9px] font-bold"
                    class:preset-filled-primary={launcher_loc.current
                        .app_mode === 'onsite'}
                    class:preset-tonal-surface={launcher_loc.current
                        .app_mode !== 'onsite'}
                    title="Customized onsite OS and web browser (Chromium or Firefox based) launcher, for onsite presenters in for practice and onsite backup"
                    >Onsite</button>
            </div>
        </div>

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

        <!-- 3. Time Format Toggle -->
        <button
            type="button"
            onclick={() => {
                if (launcher_loc.current.time_format == 'time_12_short') {
                    launcher_loc.current.time_format = 'time_short';
                    launcher_loc.current.time_hours = 24;
                } else {
                    launcher_loc.current.time_format = 'time_12_short';
                    launcher_loc.current.time_hours = 12;
                }
            }}
            class="btn btn-xs preset-tonal-surface w-full text-[10px]">
            <Clock size="0.85em" class="mr-1 opacity-50" />
            Clock Format:
            <strong>{launcher_loc.current.time_hours}-hour</strong>
        </button>

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

            <!-- 5. Native Test Mode (Edit Mode Only) -->
            <!-- Simulates the full native open flow without Electron/Mac hardware.
                 Shows what commands, profile, and AppleScript WOULD be sent,
                 as a popup, instead of actually running them. -->
            <div
                class="border-surface-500/20 col-span-full mt-1 flex flex-col gap-2 border-t pt-3">
                <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
                    Dev / Testing
                </p>
                <label class="group flex cursor-pointer items-center gap-2 p-1">
                    <input
                        type="checkbox"
                        bind:checked={launcher_loc.current.native_test_mode}
                        class="checkbox checkbox-sm" />
                    <span class="group-hover:text-warning-500 text-xs italic">
                        Native Test Mode
                    </span>
                </label>
                {#if launcher_loc.current.native_test_mode}
                    <p class="badge preset-tonal-warning ml-1 text-[8px] leading-tight italic">
                        ⚠ Active: Open buttons will simulate native launch and
                        show a debug popup instead of running commands.
                    </p>
                {/if}
            </div>
        {/if}
    </div>
</Launcher_Cfg_Section>
