<script lang="ts">
    import { ae_loc } from '$lib/stores/ae_stores';
    import { events_loc, events_sess } 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();

    const ws_connected = $derived(
        $events_sess.launcher.ws_connect_status === 'connected'
    );
</script>

<Launcher_Cfg_Section
    title="Remote Controller"
    icon="fa-gamepad"
    bind:state={$events_loc.launcher.section_state__controller}
    {on_expand}
    description="Mode: {$events_loc.launcher?.controller} | WS: {ws_connected
        ? 'Connected'
        : 'Offline'}"
>
    <!-- Content omitted for brevity, preserved in file -->
    <div class="col-span-full flex flex-col gap-3">
        <!-- 1. Connection Status Badge -->
        <div
            class="flex items-center justify-between bg-surface-500/5 p-2 rounded border border-surface-500/10"
        >
            <div class="flex items-center gap-2">
                <span class="fas fa-plug opacity-50"></span>
                <span class="text-[10px] font-bold uppercase tracking-wider"
                    >WebSocket Link</span
                >
            </div>
            {#if ws_connected}
                <span
                    class="badge variant-filled-success text-[8px] animate-pulse"
                    >Connected</span
                >
            {:else}
                <span class="badge variant-filled-error text-[8px]"
                    >Disconnected</span
                >
            {/if}
        </div>

        <!-- 2. Controller Mode Selection -->
        <div class="flex flex-col gap-1">
            <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                >Controller Strategy</label
            >
            <select
                bind:value={$events_loc.launcher.controller}
                class="select select-sm text-xs preset-tonal-surface h-8"
            >
                <option value="local">Local Only</option>
                <option value="remote">Remotely WS Controlled</option>
                <option value="local_push">Local and WS Controller</option>
            </select>
        </div>

        <!-- 3. Connection Actions -->
        <div class="grid grid-cols-2 gap-2 mt-1">
            <button
                type="button"
                onclick={() => {
                    if ($events_loc.launcher.ws_connect) {
                        $events_sess.launcher.trigger__ws_disconnect = true;
                    } else {
                        $events_loc.launcher.ws_connect = true;
                        $events_sess.launcher.trigger__ws_connect = true;
                    }
                    $events_sess.launcher.controller_unlock_group_code = false;
                }}
                class="btn btn-sm text-[10px] font-bold transition-all"
                class:preset-tonal-error={$events_loc.launcher.ws_connect}
                class:preset-tonal-success={!$events_loc.launcher.ws_connect}
            >
                {#if $events_loc.launcher.ws_connect}
                    <span class="fas fa-unlink mr-2"></span> Disconnect
                {:else}
                    <span class="fas fa-link mr-2"></span> Connect Now
                {/if}
            </button>

            <button
                type="button"
                onclick={() => {
                    $events_sess.launcher.controller_cmd = 'ae_refresh:now';
                    $events_sess.launcher.controller_trigger_send = 'trigger';
                }}
                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 text-[10px] font-bold"
                disabled={!ws_connected}
            >
                <span class="fas fa-sync-alt mr-2"></span> Group Reload
            </button>
        </div>

        <!-- 4. Technical Config (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"
                    >Channel Configuration</label
                >
                <div class="flex gap-1">
                    <input
                        bind:value={$events_loc.launcher.controller_group_code}
                        placeholder="Group Code"
                        class="input input-sm grow text-[10px] h-7 preset-tonal-surface font-mono"
                        readonly={!$events_sess.launcher
                            .controller_unlock_group_code}
                        ondblclick={() =>
                            ($events_sess.launcher.controller_unlock_group_code = true)}
                    />
                    <button
                        type="button"
                        onclick={() =>
                            ($events_sess.launcher.controller_unlock_group_code =
                                !$events_sess.launcher
                                    .controller_unlock_group_code)}
                        class="btn btn-xs preset-tonal-surface"
                        title="Toggle Unlock"
                    >
                        <span
                            class="fas {$events_sess.launcher
                                .controller_unlock_group_code
                                ? 'fa-lock-open text-primary-500'
                                : 'fa-lock'}"
                        ></span>
                    </button>
                </div>
                <p class="text-[8px] opacity-40 italic ml-1">
                    Double-click input to unlock editing. Changing code triggers
                    reconnect.
                </p>
            </div>
        {/if}
    </div>
</Launcher_Cfg_Section>
