<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-surface-500 mr-2 flex items-center gap-1 text-xs font-bold tracking-wider uppercase">
            <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>
