<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="Sync Engine & Timers"
    icon="fa-sync"
    bind:state={$events_loc.launcher.section_state__sync_timers}
    {on_expand}
    description="Prefix: {$ae_loc.native_device?.hash_prefix_length ||
        2} | Loops: Active"
>
    <!-- Content omitted for brevity, preserved in file -->
    <!-- Pause toggle: always visible — useful during testing or onsite troubleshooting -->
    <div class="flex items-center justify-between mb-2 p-2 rounded border border-surface-500/10 bg-surface-500/5">
        <span class="text-[10px] font-bold uppercase tracking-wider opacity-70">
            {$events_loc.launcher.sync_paused ? '⏸ Sync Paused' : '▶ Sync Active'}
        </span>
        <button
            type="button"
            onclick={() => ($events_loc.launcher.sync_paused = !$events_loc.launcher.sync_paused)}
            class="btn btn-xs transition-all"
            class:preset-tonal-warning={$events_loc.launcher.sync_paused}
            class:preset-tonal-success={!$events_loc.launcher.sync_paused}
        >
            {#if $events_loc.launcher.sync_paused}
                <span class="fas fa-play mr-1"></span> Resume
            {:else}
                <span class="fas fa-pause mr-1"></span> Pause
            {/if}
        </button>
    </div>

    {#if $events_loc.launcher.sync_intervals}
        <div class="grid grid-cols-1 gap-3">
            <!-- Technical Timers (Edit Mode Only) -->
            {#if $ae_loc.edit_mode}
                <div class="flex flex-col gap-2">
                    <p
                        class="text-[9px] font-bold uppercase opacity-50 ml-1"
                        >Polling Periods (ms)</p
                    >
                    <div class="grid grid-cols-2 gap-2">
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60">Event Data</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.event
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Device Config</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.device
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Room/Location</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.location
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Session Loop</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.session
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Presentation Loop</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.presentation
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Presenter Loop</span
                            >
                            <input
                                type="number"
                                bind:value={
                                    $events_loc.launcher.sync_intervals.presenter
                                }
                                class="input input-sm text-[10px] h-7 preset-tonal-surface"
                            />
                        </div>
                    </div>
                </div>

                <div
                    class="flex flex-col gap-1 mt-1 border-t border-surface-500/10 pt-2"
                >
                    <p
                        class="text-[9px] font-bold uppercase opacity-50 ml-1"
                        >Cache Structure</p
                    >
                    <div class="flex items-center justify-between px-1">
                        <span class="text-[9px]">Hash Prefix Length</span>
                        {#if $ae_loc.native_device}
                            <select
                                bind:value={
                                    $ae_loc.native_device.hash_prefix_length
                                }
                                class="select select-sm h-6 py-0 text-[10px] w-16 preset-tonal-surface"
                            >
                                <option value={1}>1 char</option>
                                <option value={2}>2 chars</option>
                                <option value={3}>3 chars</option>
                            </select>
                        {:else}
                            <span class="text-[9px] opacity-50 italic">loading…</span>
                        {/if}
                    </div>
                    <p class="text-[8px] opacity-40 italic mt-1">
                        * Prefix change requires a full app reload to take
                        effect.
                    </p>
                </div>
            {:else}
                <!-- Read Only Summary (Normal Mode) -->
                <div
                    class="bg-surface-500/5 p-2 rounded border border-surface-500/10 flex flex-col gap-1"
                >
                    <div
                        class="flex justify-between text-[9px] opacity-60 font-mono"
                    >
                        <span>Event Sync:</span>
                        <span
                            >{(
                                $events_loc.launcher.sync_intervals.event /
                                1000
                            ).toFixed(1)}s</span
                        >
                    </div>
                    <div
                        class="flex justify-between text-[9px] opacity-60 font-mono"
                    >
                        <span>Room Monitor:</span>
                        <span
                            >{(
                                $events_loc.launcher.sync_intervals.location / 1000
                            ).toFixed(1)}s</span
                        >
                    </div>
                    <div
                        class="flex justify-between text-[9px] opacity-60 font-mono border-t border-surface-500/10 pt-1"
                    >
                        <span>Prefix Sharding:</span>
                        <span
                            >{$ae_loc.native_device?.hash_prefix_length || 2} chars</span
                        >
                    </div>
                </div>
                <div class="text-center">
                    <p class="text-[8px] opacity-40 italic">
                        Enable Edit Mode to adjust polling intervals.
                    </p>
                </div>
            {/if}
        </div>
    {:else}
        <div class="text-center p-4 opacity-50 italic text-xs">
            Device configuration not loaded.
        </div>
    {/if}
</Launcher_Cfg_Section>
