<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="Digital Screen Saver"
    icon="fa-id-badge"
    bind:state={$events_loc.launcher.section_state__screen_saver}
    {on_expand}
    description="Idle: {($events_loc.launcher.idle_timer / 60000).toFixed(
        1
    )}m | Auto-Posters"
>
    <!-- Content omitted for brevity, preserved in file -->
    <div class="col-span-full flex flex-col gap-3">
        <!-- 1. Technical Timers (Edit Mode Only) -->
        {#if $ae_loc.edit_mode}
            <div class="flex flex-col gap-2">
                <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                    >Screen Saver Timers (ms)</label
                >
                <div
                    class="grid grid-cols-1 gap-2 bg-surface-500/5 p-2 rounded border border-surface-500/10"
                >
                    <div class="flex justify-between items-center gap-4">
                        <span class="text-[10px] opacity-60">Idle Wait</span>
                        <input
                            type="number"
                            min={3000}
                            bind:value={$events_loc.launcher.idle_timer}
                            class="input input-sm text-[10px] h-7 w-24 text-right preset-tonal-surface"
                        />
                    </div>
                    <div class="flex justify-between items-center gap-4">
                        <span class="text-[10px] opacity-60">Cycle Check</span>
                        <input
                            type="number"
                            min={500}
                            bind:value={$events_loc.launcher.idle_cycle}
                            class="input input-sm text-[10px] h-7 w-24 text-right preset-tonal-surface"
                        />
                    </div>
                    <div class="flex justify-between items-center gap-4">
                        <span class="text-[10px] opacity-60"
                            >Image Rotation</span
                        >
                        <input
                            type="number"
                            min={750}
                            bind:value={$events_loc.launcher.idle_loop_period}
                            class="input input-sm text-[10px] h-7 w-24 text-right preset-tonal-surface"
                        />
                    </div>
                </div>
            </div>
        {:else}
            <!-- 2. Read Only Summary (Normal Mode) -->
            <div
                class="bg-surface-500/5 p-3 rounded-lg border border-surface-500/10 flex flex-col gap-2"
            >
                <div class="flex justify-between items-center text-xs">
                    <span class="opacity-60">Active Idle Timeout:</span>
                    <span class="font-bold text-primary-500"
                        >{($events_loc.launcher.idle_timer / 60000).toFixed(1)} minutes</span
                    >
                </div>
                <p class="text-[9px] opacity-40 italic">
                    The screen saver automatically rotates digital posters when
                    no activity is detected for the specified time.
                </p>
            </div>
        {/if}

        <div class="text-center">
            <p class="text-[8px] opacity-40 italic uppercase tracking-tighter">
                Applies to "Poster" session types only
            </p>
        </div>
    </div>
</Launcher_Cfg_Section>
