<script lang="ts">
// console.log(`ae_root +page data:`, data);

import { onMount } from 'svelte';

import {
    Brain,
    House,
    Library,
    Pencil,
    RefreshCw,
    RefreshCcwDot,
    Satellite,
    ToggleLeft,
    ToggleRight,
    UserRound,
} from '@lucide/svelte';

// import { PUBLIC_TESTING } from '$env/static/public';
// console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING);

import Element_data_store from '$lib/elements/element_data_store.svelte';

// import { api } from '$lib/api';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';
interface Props {
    /** @type {import('./$types').PageData} */
    data: any;
}

let { data }: Props = $props();
// import type { key_val } from '$lib/ae_stores';
// console.log($ae_loc, $ae_sess, $ae_api);

onMount(() => {
    console.log(`Root: +page.svelte; URL: ${data.url}`);
});
</script>

<svelte:head>
    <title>{$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<section
    class="ae_root mx-auto flex h-full flex-col items-center space-y-12 p-4 md:container"
    class:ae_root--auth_access={$ae_loc.auth_access}
    class:ae_root--public_access={$ae_loc.public_access}
    class:ae_root--trusted_access={$ae_loc.trusted_access}
    class:ae_root--administrator_access={$ae_loc.administrator_access}
    class:ae_root--manager_access={$ae_loc.manager_access}
    class:ae_root--super_access={$ae_loc.super_access}>
    <Element_data_store
        ds_code="hub__site__root_page_header"
        ds_type="html"
        for_type={null}
        for_id={null}
        ds_name="Default: AE Hub - Site root page header HTML"
        class_li={!$ae_loc.manager_access &&
        $ae_sess.ds_loaded.hub__site__root_page_header === false
            ? 'hidden'
            : ''}
        bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_header} />
    <!-- page header DS: {$ae_sess.ds_loaded.hub__site__root_page_header} -->

    <Element_data_store
        ds_code="hub__site__root_page_content"
        ds_type="html"
        for_type={null}
        for_id={null}
        ds_name="Default: AE Hub - Site root page content HTML"
        show_edit={false}
        class_li={!$ae_loc.manager_access &&
        $ae_sess.ds_loaded.hub__site__root_page_content === false
            ? 'hidden'
            : 'grow'}
        bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_content} />
    <!-- page content DS: {$ae_sess.ds_loaded.hub__site__root_page_content} -->

    <section class="flex flex-col items-center gap-2 space-y-6 p-4">
        <div
            data-sveltekit-preload-data="false"
            class="flex flex-row flex-wrap items-center justify-center">
            <button
                type="button"
                onclick={async () => {
                    const edit_mode = $ae_loc.edit_mode;
                    const confirm_msg = edit_mode
                        ? 'Clear all IDB caches, service worker caches, localStorage, and sessionStorage? Your sign-in will be preserved. This will reload the page.'
                        : 'Clear all IDB caches and service worker caches? This will reload the page.';

                    if (!confirm(confirm_msg)) return;

                    // Non-edit: skip_ls=true — SW+Cache+IDB only, localStorage untouched (sign-in preserved naturally).
                    // Edit mode: preserve_ls_keys=['ae_loc'] — full clear but sign-in survives the wipe.
                    await core_func.clear_all_storage(
                        undefined,
                        edit_mode ? { preserve_ls_keys: ['ae_loc'] } : { skip_ls: true }
                    );
                    window.location.reload();
                }}
                class="btn btn-sm
                        preset-tonal-surface
                        preset-outlined-warning-100-900
                        hover:preset-filled-warning-200-800
                        m-1 transition-all"
                title="Clear & Reload: Delete all IDB caches, unregister service workers, and reload, preserving your sign-in. In edit mode also clears localStorage/sessionStorage.">
                <RefreshCw class="mx-1" />
                Clear & Reload
            </button>
            <button
                type="button"
                onclick={async () => {
                    if (
                        !confirm(
                            'FULL RESET: Unregister service workers, clear all caches, delete IndexedDB databases, clear localStorage and sessionStorage, then reload?'
                        )
                    ) {
                        return;
                    }

                    // Unregister service workers and clear Cache Storage so stale
                    // SW-cached assets don't survive the reset and re-serve old bundles.
                    await core_func.clear_all_storage();
                    window.location.reload();
                }}
                class="btn btn-sm
                        preset-tonal-surface
                        preset-outlined-error-100-900
                        hover:preset-filled-error-200-800
                        m-1 p-1 transition-all"
                title="Full Reset: Unregister service workers, clear all caches, delete IndexedDB databases, clear localStorage and sessionStorage for this origin, then reload. This may help fix issues with stale service workers or corrupted IndexedDB data.">
                <RefreshCcwDot class="mx-1" />
                Clear Browser's Site Caches and Reload
            </button>

            {#if $ae_loc?.trusted_access}
                {#if $ae_loc?.edit_mode}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = false;
                        }}
                        class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-error-300 hover:text-error-800 m-1 p-1 transition-all"
                        title="Turn off edit mode">
                        <ToggleRight size="1em" class="m-1" />
                        <span class="grow">
                            <Pencil size="1em" class="m-1" />
                            Edit Mode Off
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = true;
                        }}
                        class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-surface-300 hover:text-error-800 m-1 p-1 transition-all"
                        title="Turn on edit mode">
                        <ToggleLeft size="1em" class="m-1" />
                        <span class="grow">
                            <UserRound size="1em" class="m-1" />
                            Edit Mode?
                        </span>
                    </button>
                {/if}
            {/if}
        </div>

        <Element_data_store
            expire_minutes={2}
            ds_code="hub__site__root_page_footer"
            ds_type="html"
            for_type={null}
            for_id={null}
            ds_name="Default: AE Hub - Site root page footer HTML"
            display="block"
            class_li={!$ae_loc.manager_access &&
            $ae_sess.ds_loaded.hub__site__root_page_footer === false
                ? 'hidden'
                : ''}
            bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_footer} />
        <!-- page footer DS: {$ae_sess.ds_loaded.hub__site__root_page_footer} -->

        <ol class="hidden list-decimal">
            <li>Placeholder for Tailwind</li>
        </ol>
    </section>
</section>

<style lang="postcss">
</style>
