<script lang="ts">
import { ae_loc } from '$lib/stores/ae_stores';
import { slide } from 'svelte/transition';
import { ChevronDown, ChevronRight, Pencil, Pin } from '@lucide/svelte';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type AnyComponent = any;

interface Props {
    title: string;
    icon: AnyComponent;
    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();

// Uppercase alias required: Svelte 5 treats lowercase tags as HTML elements.
let Icon = $derived(icon);

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="mb-2 w-full overflow-hidden rounded-lg border transition-all duration-300 {!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 cursor-pointer flex-row items-center justify-between p-2 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">
            <Icon
                size="1em"
                class="w-5 text-center opacity-70 {state === 'auto'
                    ? 'text-primary-500'
                    : ''} {state === 'pinned' ? 'text-warning-500' : ''}" />
            <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="max-w-[180px] truncate text-[9px] italic opacity-40"
                        >{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)'}>
                <Pin size="0.7em" />
            </button>

            <!-- Collapse Icon -->
            {#if is_open}
                <ChevronDown
                    size="1em"
                    class="opacity-30 transition-transform duration-300" />
            {:else}
                <ChevronRight
                    size="1em"
                    class="opacity-30 transition-transform duration-300" />
            {/if}
        </div>
    </header>

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

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