<script lang="ts">
import AE_Element_Data_Store from '$lib/elements/element_data_store.svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import { db_core } from '$lib/ae_core/db_core';
import { RefreshCw, Trash2 } from '@lucide/svelte';
// let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
// let test_name_global = 'Global Header Test - hub__site__root_page_header';
// let test_code_account = 'hub__site__root_page_header';
// let test_name_account = 'Account Header Test - hub__site__root_page_header';
// let test_code_specific = 'event_launcher_main_info';
// let test_name_specific = 'Event Specific Test - event_launcher_main_info';

let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
let testing_event_id = 'pjrcghqwert'; // Per README test data

let log_lvl = $state(0);
let refresh_trigger = $state(0);

async function clear_cache() {
    if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');

    if (confirm('Are you sure you want to clear the local Data Store cache?')) {
        await db_core.data_store.clear();
        refresh_trigger++;
        alert('Cache cleared.');
    }
}
</script>

<div class="mx-auto h-full max-w-4xl space-y-8 overflow-y-auto p-8">
    <header
        class="border-surface-500/30 flex items-center justify-between border-b pb-4">
        <div>
            <h1 class="h1">Data Store V3 Test Page</h1>
            <p class="opacity-70">
                Testing cascading lookup: Specific &rarr; Account &rarr; Global
            </p>
        </div>
        <div class="flex gap-2">
            <button class="btn variant-filled-warning" onclick={clear_cache}>
                <Trash2 size="1em" class="mr-2" /> Clear Cache
            </button>
            <button
                class="btn variant-filled-primary"
                onclick={() => refresh_trigger++}>
                <RefreshCw size="1em" class="mr-2" /> Force Refresh
            </button>
        </div>
    </header>

    {#key refresh_trigger}
        <section class="card variant-soft-primary space-y-4 p-4">
            <h2 class="h3">Scenario 1: Global Default</h2>
            <p class="text-sm">
                Fetching code <code>{test_null_act_and_for}</code>. Should fall
                back to <code>account_id = NULL</code> if not found for account.
            </p>
            <div
                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
                <AE_Element_Data_Store
                    ds_code={test_null_act_and_for}
                    ds_name={'Global Default Test'}
                    {log_lvl}
                    debug={true} />
            </div>
        </section>

        <section class="card variant-soft-secondary space-y-4 p-4">
            <h2 class="h3">Scenario 2: Account Default</h2>
            <p class="text-sm">
                Fetching code <code>{test_code_account}</code> for Account ID:
                <code>{$ae_loc.account_id}</code>.
            </p>
            <div
                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
                <AE_Element_Data_Store
                    ds_code={test_code_account}
                    ds_name={'Account Default Test'}
                    {log_lvl}
                    debug={true} />
            </div>
        </section>

        <section class="card variant-soft-tertiary space-y-4 p-4">
            <h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
            <p class="text-sm">
                Fetching code <code>{test_code_and_for}</code> linked to
                <code>for_type: event</code>
                and <code>for_id: {testing_event_id}</code>.
            </p>
            <div
                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
                <AE_Element_Data_Store
                    ds_code={test_code_and_for}
                    ds_name={'Specific Record Test'}
                    for_type="event"
                    for_id={testing_event_id}
                    {log_lvl}
                    debug={true} />
            </div>
        </section>

        <section class="card variant-soft-tertiary space-y-4 p-4">
            <h2 class="h3">Scenario 4: Change Props Passed</h2>
            <p class="text-sm">
                Fetching code <code>{test_code_and_for}</code> linked to
                <code>for_type: event</code>
                and <code>for_id: {testing_event_id}</code>.
            </p>
            <div
                class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
                <AE_Element_Data_Store
                    ds_code={test_code_and_for}
                    ds_name={'Specific Record Test'}
                    ds_type="html"
                    for_type="event"
                    for_id={testing_event_id}
                    class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
                    show_edit={false}
                    show_edit_btn={true}
                    {log_lvl}
                    debug={true} />
            </div>
        </section>
    {/key}

    <section class="card space-y-4 p-4">
        <h2 class="h3">Current Context</h2>
        <div class="grid grid-cols-2 gap-4 font-mono text-xs">
            <div class="bg-surface-900 text-success-500 rounded p-2">
                <strong>Account ID:</strong>
                {$ae_loc.account_id || 'NULL'}
            </div>
            <div class="bg-surface-900 text-success-500 rounded p-2">
                <strong>Edit Mode:</strong>
                {$ae_loc.edit_mode}
            </div>
        </div>
    </section>
</div>
