<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 { CloudDownload, Pause, Play, RefreshCw } from '@lucide/svelte';
interface Props {
    on_expand?: () => void;
}
let { on_expand }: Props = $props();
</script>

<Launcher_Cfg_Section
    title="Sync Engine & Timers"
    icon={RefreshCw}
    bind:state={launcher_loc.current.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="border-surface-500/10 bg-surface-500/5 mb-2 flex items-center justify-between rounded border p-2">
        <span class="text-[10px] font-bold tracking-wider uppercase opacity-70">
            {launcher_loc.current.sync_paused
                ? '⏸ Sync Paused'
                : '▶ Sync Active'}
        </span>
        <button
            type="button"
            onclick={() =>
                (launcher_loc.current.sync_paused =
                    !launcher_loc.current.sync_paused)}
            class="btn btn-xs transition-all"
            class:preset-tonal-warning={launcher_loc.current.sync_paused}
            class:preset-tonal-success={!launcher_loc.current.sync_paused}>
            {#if launcher_loc.current.sync_paused}
                <Play size="0.85em" class="mr-1" /> Resume
            {:else}
                <Pause size="0.85em" class="mr-1" /> Pause
            {/if}
        </button>
    </div>

    <!-- Force Sync: fetches all child metadata for the location to trigger pre-caching -->
    <button
        type="button"
        onclick={() => ($events_sess.launcher.trigger__force_location_sync = true)}
        class="btn btn-sm preset-filled-primary-500 hover:preset-filled-primary-600 mb-3 w-full transition-all"
        title="Fetch all sessions, presentations, and presenters for this room to force-sync all files to this machine.">
        <CloudDownload size="1.2em" class="mr-2" />
        Force Sync Location
    </button>

    {#if launcher_loc.current.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="ml-1 text-[9px] font-bold uppercase opacity-50">
                        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={
                                    launcher_loc.current.sync_intervals.event
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Device Config</span>
                            <input
                                type="number"
                                bind:value={
                                    launcher_loc.current.sync_intervals.device
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Room/Location</span>
                            <input
                                type="number"
                                bind:value={
                                    launcher_loc.current.sync_intervals.location
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Session Loop</span>
                            <input
                                type="number"
                                bind:value={
                                    launcher_loc.current.sync_intervals.session
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Presentation Loop</span>
                            <input
                                type="number"
                                bind:value={
                                    launcher_loc.current.sync_intervals
                                        .presentation
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[8px] opacity-60"
                                >Presenter Loop</span>
                            <input
                                type="number"
                                bind:value={
                                    launcher_loc.current.sync_intervals
                                        .presenter
                                }
                                class="input input-sm preset-tonal-surface h-7 text-[10px]" />
                        </div>
                    </div>
                </div>

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