<script lang="ts">
    /**
     * Launcher_Cfg_Template.svelte
     * A "Kitchen Sink" scaffold demonstrating all standard UI patterns
     * for the Launcher Configuration overhaul.
     */
    import { ae_loc, ae_api, ae_sess } 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();

    // --- 1. LOCAL STATE ---
    let toggle_val = $state(false);
    let text_input = $state('');
    let number_input = $state(100);
    let select_val = $state('option1');
    let is_loading = $state(false);
    let action_status = $state('');

    // --- 2. LOGIC HANDLERS ---
    async function handle_test_action(label: string) {
        is_loading = true;
        action_status = `Executing ${label}...`;

        // Simulate async work
        await new Promise((r) => setTimeout(r, 1500));

        is_loading = false;
        action_status = `Finished: ${label}`;
        setTimeout(() => (action_status = ''), 3000);
    }

    // Modal state for destructive actions
    let show_confirm = $state(false);
</script>

<Launcher_Cfg_Section
    title="Template Section"
    icon="fa-cubes"
    bind:state={$events_loc.launcher.section_state__template}
    {on_expand}
    description="Kitchen Sink Scaffold | Demo Only"
>
    <!-- A. TOP STATUS BAR (Optional) -->
    {#if action_status}
        <div
            class="col-span-full text-[10px] text-center italic bg-primary-500/10 py-1 rounded animate-pulse text-primary-500 border border-primary-500/20"
        >
            {action_status}
        </div>
    {/if}

    <!-- B. COMMON GRID SECTION (Read Only / High Level) -->
    <div class="flex flex-col gap-2">
        <p class="text-[9px] font-bold uppercase opacity-50 ml-1"
            >Standard Actions</p
        >

        <!-- Action Buttons -->
        <div class="grid grid-cols-2 gap-1">
            <button
                type="button"
                onclick={() => handle_test_action('Primary')}
                class="btn btn-xs preset-tonal-primary hover:preset-filled-primary-500 justify-start"
            >
                <span class="fas fa-bolt mr-2 w-3 text-center"></span> Primary
            </button>
            <button
                type="button"
                onclick={() => handle_test_action('Secondary')}
                class="btn btn-xs preset-tonal-secondary hover:preset-filled-secondary-500 justify-start"
            >
                <span class="fas fa-cog mr-2 w-3 text-center"></span> Secondary
            </button>
        </div>

        <!-- Toggles & Checkboxes -->
        <div class="flex flex-col gap-1 mt-1 bg-surface-500/5 p-2 rounded">
            <label class="flex items-center gap-2 cursor-pointer group">
                <input
                    type="checkbox"
                    bind:checked={toggle_val}
                    class="checkbox checkbox-sm"
                />
                <span
                    class="text-xs group-hover:text-primary-500 transition-colors"
                    >Toggle Feature Alpha</span
                >
            </label>
            <label class="flex items-center gap-2 cursor-pointer group">
                <input
                    type="radio"
                    name="demo"
                    value="a"
                    class="radio radio-sm"
                />
                <span
                    class="text-xs group-hover:text-primary-500 transition-colors"
                    >Mode A</span
                >
            </label>
        </div>
    </div>

    <!-- C. STATUS & GAUGES SECTION -->
    <div class="flex flex-col gap-2">
        <p class="text-[9px] font-bold uppercase opacity-50 ml-1"
            >Current Status</p
        >

        <div
            class="flex flex-col gap-2 p-2 border border-surface-500/10 rounded-lg"
        >
            <div class="flex justify-between items-center">
                <span class="text-[10px] font-medium">Engine Health</span>
                <span class="badge preset-filled-success text-[8px] uppercase"
                    >Stable</span
                >
            </div>

            <!-- Progress / Gauge Example -->
            <div class="flex flex-col gap-1">
                <div
                    class="flex justify-between text-[8px] uppercase opacity-60"
                >
                    <span>Processing Load</span>
                    <span>45%</span>
                </div>
                <div
                    class="w-full h-1.5 bg-surface-500/20 rounded-full overflow-hidden"
                >
                    <div
                        class="h-full bg-success-500 transition-all duration-1000"
                        style="width: 45%"
                    ></div>
                </div>
            </div>
        </div>

        <button
            type="button"
            onclick={() => handle_test_action('Refresh')}
            class="btn btn-xs preset-outlined-surface-500 w-full text-[10px]"
        >
            <span class="fas fa-sync mr-2" class:fa-spin={is_loading}></span>
            Refresh State
        </button>
    </div>

    <!-- D. TECHNICAL SECTION (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-3"
        >
            <!-- Dangerous Actions -->
            <div class="grid grid-cols-2 gap-2">
                <div class="flex flex-col gap-1">
                    <span
                        class="text-[9px] font-bold uppercase opacity-50 text-warning-500"
                        >System Config</span
                    >
                    <button
                        type="button"
                        onclick={() => (show_confirm = true)}
                        class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500 justify-start"
                    >
                        <span class="fas fa-exclamation-triangle mr-2 w-3"
                        ></span> Reset All
                    </button>
                </div>
                <div class="flex flex-col gap-1">
                    <span
                        class="text-[9px] font-bold uppercase opacity-50 text-error-500"
                        >Danger Zone</span
                    >
                    <button
                        type="button"
                        class="btn btn-xs preset-tonal-error hover:preset-filled-error-500 justify-start"
                    >
                        <span class="fas fa-trash-alt mr-2 w-3"></span> Wipe Cache
                    </button>
                </div>
            </div>

            <!-- Form Inputs -->
            <div class="grid grid-cols-1 gap-2">
                <div class="flex flex-col gap-1">
                    <span
                        class="text-[9px] font-bold uppercase opacity-50 ml-1"
                        >Raw Settings</span
                    >
                    <div class="flex gap-1">
                        <input
                            type="text"
                            bind:value={text_input}
                            placeholder="Enter string parameter..."
                            class="input input-sm grow text-[10px] preset-tonal-surface h-7"
                        />
                        <select
                            bind:value={select_val}
                            class="select select-sm h-7 py-0 text-[10px] w-24 preset-tonal-surface"
                        >
                            <option value="option1">Global</option>
                            <option value="option2">Local</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-1">
                    <span class="text-[8px] opacity-60 ml-1"
                        >Threshold (ms)</span
                    >
                    <input
                        type="number"
                        bind:value={number_input}
                        class="input input-sm text-[10px] h-7 preset-tonal-surface"
                    />
                </div>
            </div>

            <!-- Terminal / Output Log -->
            <div class="flex flex-col gap-1">
                <p class="text-[9px] font-bold uppercase opacity-50 ml-1"
                    >Debug Output</p
                >
                <pre
                    class="text-[8px] bg-black text-green-500 p-2 overflow-x-auto rounded border border-surface-500/50 max-h-24 shadow-inner">
[LOG] System Initialized
[INFO] Store synced with IndexedDB
[DEBUG] active_tab: template
[WARN] Latency detected in sync loop
                </pre>
            </div>
        </div>
    {/if}
</Launcher_Cfg_Section>

<!-- Confirmation Modal Demo -->
{#if show_confirm}
    <div
        class="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
    >
        <div
            class="card p-6 w-full max-w-sm preset-filled-surface-100-900 border border-warning-500 shadow-2xl animate-in zoom-in-95 duration-200"
        >
            <h4 class="h4 text-warning-500 font-bold mb-2">Confirm Action</h4>
            <p class="text-sm opacity-80 mb-6">
                Are you sure you want to perform this test operation? This
                demonstrate the standard confirmation pattern.
            </p>
            <div class="flex justify-end gap-2">
                <button
                    type="button"
                    onclick={() => (show_confirm = false)}
                    class="btn btn-sm preset-tonal-surface">Cancel</button
                >
                <button
                    type="button"
                    onclick={() => {
                        show_confirm = false;
                        handle_test_action('Confirm');
                    }}
                    class="btn btn-sm preset-filled-warning"
                >
                    Yes, Proceed
                </button>
            </div>
        </div>
    </div>
{/if}
