<script lang="ts">
    import { ae_loc } from '$lib/stores/ae_stores';
    import { events_loc } from '$lib/stores/ae_events_stores';
    import { slide } from 'svelte/transition';

    interface Props {
        title: string;
        icon: string;
        state: 'collapsed' | 'auto' | 'pinned';
        description?: string;
        children?: import('svelte').Snippet;
        on_expand?: () => void;
        on_toggle?: (new_state: 'collapsed' | 'auto' | 'pinned') => void;
    }

    let {
        title,
        icon,
        state = $bindable(),
        description,
        children,
        on_expand,
        on_toggle
    }: Props = $props();

    function toggle_expand() {
        if (state === 'collapsed') {
            state = 'auto';
            if (on_expand) on_expand();
        } else {
            state = 'collapsed';
        }
        if (on_toggle) on_toggle(state);
    }

    function toggle_pin(e: MouseEvent) {
        e.stopPropagation();
        if (state === 'pinned') {
            state = 'auto';
            if (on_expand) on_expand();
        } else {
            state = 'pinned';
        }
        if (on_toggle) on_toggle(state);
    }

    const is_open = $derived(state !== 'collapsed');
</script>

<section
    class="w-full transition-all duration-300 border rounded-lg overflow-hidden mb-2 {!is_open
        ? 'preset-outlined-surface-300-700'
        : ''} {state === 'auto'
        ? 'preset-outlined-primary-500 shadow-xl'
        : ''} {state === 'pinned'
        ? 'preset-outlined-warning-500 shadow-xl'
        : ''}"
>
    <!-- Header -->
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <header
        class="flex flex-row items-center justify-between p-2 cursor-pointer transition-colors {!is_open
            ? 'bg-surface-500/5'
            : ''} {state === 'auto' ? 'bg-primary-500/10' : ''} {state ===
        'pinned'
            ? 'bg-warning-500/10'
            : ''}"
        onclick={toggle_expand}
    >
        <div class="flex items-center gap-3">
            <span
                class="fas {icon} w-5 text-center opacity-70 {state === 'auto'
                    ? 'text-primary-500'
                    : ''} {state === 'pinned' ? 'text-warning-500' : ''}"
            ></span>
            <div class="flex flex-col">
                <span
                    class="text-sm font-bold tracking-tight uppercase {!is_open
                        ? 'opacity-50'
                        : ''}">{title}</span
                >
                {#if description && !is_open}
                    <span
                        class="text-[9px] opacity-40 italic truncate max-w-[180px]"
                        >{description}</span
                    >
                {/if}
            </div>
        </div>

        <div class="flex items-center gap-2">
            <!-- Pin Toggle -->
            <button
                type="button"
                onclick={toggle_pin}
                class="btn btn-icon btn-xs transition-all hover:scale-110"
                class:opacity-20={state !== 'pinned'}
                class:text-warning-500={state === 'pinned'}
                title={state === 'pinned'
                    ? 'Unpin Section'
                    : 'Pin Section (Stay open)'}
            >
                <span class="fas fa-thumbtack text-[10px]"></span>
            </button>

            <!-- Collapse Icon -->
            <span
                class="fas transition-transform duration-300 opacity-30"
                class:fa-chevron-right={!is_open}
                class:fa-chevron-down={is_open}
                class:rotate-180={is_open}
            ></span>
        </div>
    </header>

    <!-- Content -->
    {#if is_open}
        <div
            transition:slide={{ duration: 300 }}
            class="p-3 bg-white/5 dark:bg-black/5"
        >
            {#if $ae_loc.edit_mode}
                <div class="mb-2 flex justify-between items-center px-1">
                    <span
                        class="text-[8px] uppercase font-bold tracking-widest text-primary-500/60 flex items-center gap-1"
                    >
                        <span class="fas fa-edit"></span> Technical Mode
                    </span>
                    {#if state === 'pinned'}
                        <span
                            class="badge variant-filled-warning text-[8px] uppercase"
                            >Pinned</span
                        >
                    {/if}
                </div>
            {/if}

            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-3"
            >
                {@render children?.()}
            </div>
        </div>
    {/if}
</section>
