<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 {
    Gamepad2,
    Link,
    Lock,
    LockOpen,
    Plug,
    RefreshCw,
    Unlink
} from '@lucide/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={Gamepad2}
    bind:state={launcher_loc.current.section_state__controller}
    {on_expand}
    description="Mode: {launcher_loc.current?.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="bg-surface-500/5 border-surface-500/10 flex items-center justify-between rounded border p-2">
            <div class="flex items-center gap-2">
                <Plug size="1em" class="opacity-50" />
                <span class="text-[10px] font-bold tracking-wider uppercase"
                    >WebSocket Link</span>
            </div>
            {#if ws_connected}
                <span
                    class="badge preset-filled-success animate-pulse text-[8px]"
                    >Connected</span>
            {:else}
                <span class="badge preset-filled-error text-[8px]"
                    >Disconnected</span>
            {/if}
        </div>

        <!-- 2. Controller Mode Selection -->
        <div class="flex flex-col gap-1">
            <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
                Controller Strategy
            </p>
            <select
                bind:value={launcher_loc.current.controller}
                class="select select-sm preset-tonal-surface h-8 text-xs">
                <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="mt-1 grid grid-cols-2 gap-2">
            <button
                type="button"
                onclick={() => {
                    if (launcher_loc.current.ws_connect) {
                        $events_sess.launcher.trigger__ws_disconnect = true;
                    } else {
                        launcher_loc.current.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={launcher_loc.current.ws_connect}
                class:preset-tonal-success={!launcher_loc.current.ws_connect}>
                {#if launcher_loc.current.ws_connect}
                    <Unlink size="0.85em" class="mr-1" /> Disconnect
                {:else}
                    <Link size="0.85em" class="mr-1" /> 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}>
                <RefreshCw size="0.85em" class="mr-1" /> Group Reload
            </button>
        </div>

        <!-- 4. Technical Config (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">
                    Channel Configuration
                </p>
                <div class="flex gap-1">
                    <input
                        bind:value={launcher_loc.current.controller_group_code}
                        placeholder="Group Code"
                        class="input input-sm preset-tonal-surface h-7 grow font-mono text-[10px]"
                        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">
                        {#if $events_sess.launcher.controller_unlock_group_code}
                            <LockOpen size="0.85em" class="text-primary-500" />
                        {:else}
                            <Lock size="0.85em" />
                        {/if}
                    </button>
                </div>
                <p class="ml-1 text-[8px] italic opacity-40">
                    Double-click input to unlock editing. Changing code triggers
                    reconnect.
                </p>
            </div>
        {/if}
    </div>
</Launcher_Cfg_Section>
