<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_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 {
    TriangleAlert,
    Boxes,
    RefreshCw,
    Settings,
    Trash2,
    Zap
} from '@lucide/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={Boxes}
    bind:state={launcher_loc.current.section_state__template}
    {on_expand}
    description="Kitchen Sink Scaffold | Demo Only">
    <!-- A. TOP STATUS BAR (Optional) -->
    {#if action_status}
        <div
            class="bg-primary-500/10 text-primary-500 border-primary-500/20 col-span-full animate-pulse rounded border py-1 text-center text-[10px] italic">
            {action_status}
        </div>
    {/if}

    <!-- B. COMMON GRID SECTION (Read Only / High Level) -->
    <div class="flex flex-col gap-2">
        <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
            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">
                <Zap size="0.85em" class="mr-1 shrink-0" /> Primary
            </button>
            <button
                type="button"
                onclick={() => handle_test_action('Secondary')}
                class="btn btn-xs preset-tonal-secondary hover:preset-filled-secondary-500 justify-start">
                <Settings size="0.85em" class="mr-1 shrink-0" /> Secondary
            </button>
        </div>

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

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

        <div
            class="border-surface-500/10 flex flex-col gap-2 rounded-lg border p-2">
            <div class="flex items-center justify-between">
                <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="bg-surface-500/20 h-1.5 w-full overflow-hidden rounded-full">
                    <div
                        class="bg-success-500 h-full 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]">
            <RefreshCw
                size="0.85em"
                class="mr-1 {is_loading ? 'animate-spin' : ''}" />
            Refresh State
        </button>
    </div>

    <!-- D. TECHNICAL SECTION (Edit Mode Only) -->
    {#if $ae_loc.edit_mode}
        <div
            class="border-surface-500/20 col-span-full mt-1 flex flex-col gap-3 border-t pt-3">
            <!-- Dangerous Actions -->
            <div class="grid grid-cols-2 gap-2">
                <div class="flex flex-col gap-1">
                    <span
                        class="text-warning-500 text-[9px] font-bold uppercase opacity-50"
                        >System Config</span>
                    <button
                        type="button"
                        onclick={() => (show_confirm = true)}
                        class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500 justify-start">
                        <TriangleAlert size="0.85em" class="mr-1 shrink-0" /> Reset
                        All
                    </button>
                </div>
                <div class="flex flex-col gap-1">
                    <span
                        class="text-error-500 text-[9px] font-bold uppercase opacity-50"
                        >Danger Zone</span>
                    <button
                        type="button"
                        class="btn btn-xs preset-tonal-error hover:preset-filled-error-500 justify-start">
                        <Trash2 size="0.85em" class="mr-1 shrink-0" /> Wipe Cache
                    </button>
                </div>
            </div>

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

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

            <!-- Terminal / Output Log -->
            <div class="flex flex-col gap-1">
                <p class="ml-1 text-[9px] font-bold uppercase opacity-50">
                    Debug Output
                </p>
                <pre
                    class="border-surface-500/50 max-h-24 overflow-x-auto rounded border bg-black p-2 text-[8px] text-green-500 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 p-4 backdrop-blur-sm">
        <div
            class="card preset-filled-surface-100-900 border-warning-500 animate-in zoom-in-95 w-full max-w-sm border p-6 shadow-2xl duration-200">
            <h4 class="h4 text-warning-500 mb-2 font-bold">Confirm Action</h4>
            <p class="mb-6 text-sm opacity-80">
                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}
