<script lang="ts">
    /**
     * AE_ObjectFlags.svelte
     * GENERIC Aether Object Flags & Visibility Toggles
     * Manages: alert, private, public, personal, professional, template
     */
    import {
        Siren, MessageSquareWarning, Fingerprint,
        Globe, BookHeart, BriefcaseBusiness, NotepadTextDashed,
        Settings
    } from '@lucide/svelte';
    import { ae_loc } from '$lib/stores/ae_stores';

    interface Props {
        // The object containing the flags (bindable)
        obj: any;

        // Visibility configuration (optional overrides)
        show_labels?: boolean;
        hide_alert?: boolean;
        hide_private?: boolean;
        hide_public?: boolean;
        hide_personal?: boolean;
        hide_professional?: boolean;
        hide_template?: boolean;

        // Callbacks
        on_toggle?: (prop: string, newValue: boolean) => void;

        // Styling
        container_class?: string;
    }

    let {
        obj = $bindable(),
        show_labels = true,
        hide_alert: hide_alert = false,
        hide_private: hide_private = false,
        hide_public: hide_public = false,
        hide_personal: hide_personal = false,
        hide_professional: hide_professional = false,
        hide_template: hide_template = false,
        on_toggle: onToggle,
        container_class = "flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10"
    }: Props = $props();

    function handle_toggle(prop: string) {
        obj[prop] = !obj[prop];
        if (onToggle) onToggle(prop, obj[prop]);
    }
</script>

<div class={container_class}>
    {#if show_labels}
        <span class="text-xs text-surface-500 flex items-center gap-1 uppercase font-bold tracking-wider mr-2">
            <Settings size="1.1em" /> Flags:
        </span>
    {/if}

    <!-- Alert Status -->
    {#if !hide_alert}
        <button
            type="button"
            onclick={() => handle_toggle('alert')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Alert Status"
        >
            <Siren size="1.2em" class={obj?.alert ? 'text-error-500' : 'opacity-40'} />
        </button>
    {/if}

    <!-- Private / E2EE -->
    {#if !hide_private}
        <button
            type="button"
            onclick={() => handle_toggle('private')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Private/Encrypted"
        >
            <Fingerprint size="1.2em" class={obj?.private ? 'text-success-500' : 'opacity-40'} />
        </button>
    {/if}

    <!-- Public Visibility -->
    {#if !hide_public}
        <button
            type="button"
            onclick={() => handle_toggle('public')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Public Visibility"
        >
            <Globe size="1.2em" class={obj?.public ? 'text-success-500' : 'opacity-40'} />
        </button>
    {/if}

    <!-- Personal Scope -->
    {#if !hide_personal}
        <button
            type="button"
            onclick={() => handle_toggle('personal')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Personal Scope"
        >
            <BookHeart size="1.2em" class={obj?.personal ? 'text-success-500' : 'opacity-40'} />
        </button>
    {/if}

    <!-- Professional Scope -->
    {#if !hide_professional}
        <button
            type="button"
            onclick={() => handle_toggle('professional')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Professional Scope"
        >
            <BriefcaseBusiness size="1.2em" class={obj?.professional ? 'text-success-500' : 'opacity-40'} />
        </button>
    {/if}

    <!-- Template Status -->
    {#if !hide_template && $ae_loc.edit_mode}
        <button
            type="button"
            onclick={() => handle_toggle('template')}
            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
            title="Toggle Template Mode"
        >
            <NotepadTextDashed size="1.2em" class={obj?.template ? 'text-success-500' : 'opacity-40'} />
        </button>
    {/if}
</div>
