<script lang="ts">
    import { onMount } from 'svelte';

    import { api } from '$lib/api/api';
    import { ae_loc, ae_api, ae_sess } from '$lib/stores/ae_stores';
    import { get_object } from '$lib/ae_api/api_get_object';
    import { post_object } from '$lib/ae_api/api_post_object';
    import { patch_object } from '$lib/ae_api/api_patch_object';
    import { 
        Database, 
        Server, 
        User, 
        Users, 
        UserCheck,
        Building2,
        MapPin, 
        Contact, 
        ShieldCheck, 
        Globe, 
        RefreshCcw,
        Trash2,
        Bug,
        Zap,
        Eye,
        EyeOff,
        Key,
        Unlock,
        ShieldAlert,
        ArrowRightLeft,
        Code,
        FlaskConical,
        Info,
        Satellite,
        Settings2
    } from 'lucide-svelte';

    // Core Module Imports
    import { load_ae_obj_li__account } from '$lib/ae_core/ae_core__account';
    import { lookup_site_domain_v3 } from '$lib/ae_core/ae_core__site';
    import { load_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
    import { db_core } from '$lib/ae_core/db_core';
    import { events_loc } from '$lib/stores/ae_events_stores';

    // State Variables
    let test_result: any = $state(null);
    let trace_details: any = $state(null);
    let test_fqdn = $state('');
    let db_counts: Record<string, number> = $state({});
    let show_raw_keys = $state(false);

    // Trace Controls
    let trace_use_jwt = $state(true);
    let trace_jwt_method = $state('header'); // 'header' or 'url'
    let trace_use_bypass = $state(false);
    let trace_agent_key = 'IDF68Em5X4HTZlswRNgepQ';
    let trace_use_agent_key = $state(false);

    onMount(async () => {
        console.log('Testing Dashboard: +page.svelte mounted');
        await update_db_counts();
    });

    async function update_db_counts() {
        try {
            db_counts = {
                user: await db_core.user.count(),
                person: await db_core.person.count(),
                account: await db_core.account.count(),
                address: await db_core.address.count(),
                contact: await db_core.contact.count(),
                site: await db_core.site.count()
            };
        } catch (e) {
            console.error('Failed to get DB counts:', e);
        }
    }

    async function run_test(name: string, test_fn: () => Promise<any>) {
        test_result = 'loading...';
        trace_details = null;
        try {
            const result = await test_fn();
            test_result = { test: name, timestamp: new Date().toISOString(), result };
            await update_db_counts();
        } catch (error: any) {
            test_result = { test: name, error: error.message, details: error };
        }
    }

    async function run_trace_test() {
        test_result = 'loading...';
        const endpoint = '/v3/crud/journal/';
        const params: Record<string, any> = { limit: 1 };
        
        const custom_headers: Record<string, string> = {};
        const active_key = trace_use_agent_key ? trace_agent_key : $ae_api.api_secret_key;
        custom_headers['x-aether-api-key'] = active_key;

        if (trace_use_bypass) {
            custom_headers['x-no-account-id'] = 'bypass';
        } else {
            custom_headers['x-account-id'] = $ae_loc.account_id || 'nqOzejLCDXM';
        }

        if (trace_use_jwt && $ae_loc.jwt) {
            if (trace_jwt_method === 'header') {
                custom_headers['Authorization'] = `Bearer ${$ae_loc.jwt}`;
            } else {
                params['jwt'] = $ae_loc.jwt;
            }
        }

        trace_details = {
            request: {
                method: 'GET',
                url: `${$ae_api.base_url}${endpoint}`,
                params,
                headers: custom_headers
            }
        };

        try {
            const url = new URL(endpoint, $ae_api.base_url);
            Object.keys(params).forEach(k => url.searchParams.append(k, String(params[k])));
            
            const response = await fetch(url.toString(), {
                method: 'GET',
                headers: custom_headers
            });

            const status = response.status;
            const statusText = response.statusText;
            let body;
            try { body = await response.json(); } catch (e) { body = await response.text(); }

            trace_details.response = { status, statusText, body };
            test_result = { test: 'V3 Journal Trace', status, success: response.ok };
        } catch (error: any) {
            test_result = { test: 'V3 Journal Trace', error: error.message };
            trace_details.response_error = error;
        }
    }

    const test_site_domain_lookup = () => run_test('Site Domain Lookup', async () => {
        const fqdn = test_fqdn || window.location.host;
        return await lookup_site_domain_v3({ api_cfg: $ae_api, fqdn, log_lvl: 1 });
    });

    const test_load_accounts = () => run_test('Load Accounts', async () => {
        return await load_ae_obj_li__account({ api_cfg: $ae_api, enabled: 'all', log_lvl: 1 });
    });

    const test_whoami = () => run_test('Who Am I? (JWT Test)', async () => {
        if (!$ae_loc.user_id) throw new Error('No user_id found in session.');
        return await load_ae_obj_id__user({ 
            api_cfg: $ae_api, 
            user_id: $ae_loc.user_id, 
            try_cache: false, 
            log_lvl: 1 
        });
    });

    const clear_local_cache = () => run_test('Clear Local Cache', async () => {
        await Promise.all([
            db_core.user.clear(),
            db_core.person.clear(),
            db_core.account.clear(),
            db_core.address.clear(),
            db_core.contact.clear(),
            db_core.site.clear()
        ]);
        return 'Local cache cleared successfully';
    });

    const test_manifest = () => run_test('PWA Manifest Lookup', async () => {
        const response = await fetch('/manifest.webmanifest');
        if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        return await response.json();
    });

    // V3 Schema & Error Validation
    const test_permissive_mode = () => run_test('Permissive Mode Test', async () => {
        // Capture current state at test time
        const current_ae_api = $ae_api;
        const current_ae_loc = $ae_loc;
        
        const endpoint = `/v3/crud/account/${current_ae_loc.account_id || 'ghost'}`;
        const data = { 
            name: current_ae_loc.account_name, 
            _non_existent_field: 'This should be ignored by the API' 
        };
        
        console.log('Permissive Mode: Starting PATCH test...', { endpoint, headers: current_ae_api.headers });
        
        const result = await patch_object({ 
            api_cfg: current_ae_api, 
            endpoint, 
            data, 
            log_lvl: 1 
        });
        
        if (!result) throw new Error('API returned false. Check console for 401/403/500 errors.');
        
        return { 
            message: 'SUCCESS: API accepted request with unknown field (Permissive Mode Active)',
            account_id: result.account_id,
            id_vision: typeof result.account_id === 'string' ? 'V3 (String)' : 'LEGACY (Integer)',
            returned_data: result 
        };
    });

    const test_structured_error = () => run_test('Structured Error Validation (Deliberate 400)', async () => {
        const current_ae_api = $ae_api;
        
        // Use the exact Recovery Meetings search pattern to verify why it's throwing 403
        const endpoint = `/v3/crud/event/search`;
        const search_query = { 
            and: [
                { field: "conference", op: "eq", value: 0 },
                { field: "trigger_schema_violation_400", op: "eq", value: "fail" }
            ] 
        };
        
        console.log('Structured Error: Starting deliberate 400 test with Recovery filters...', { endpoint });
        
        const result = await post_object({ 
            api_cfg: current_ae_api, 
            endpoint, 
            data: search_query,
            log_lvl: 1 
        });
        
        // In Structured Error Mode, the helper returns the JSON object if it contains meta.details
        if (result?.meta?.details) {
            return { 
                success: true, 
                message: 'PASS: Successfully extracted rich error metadata',
                source: result.meta.details.category === 'validation' ? 'FastAPI Detail (Wrapped)' : 'V3 Meta Envelope',
                details: result.meta.details 
            };
        }
        
        return { 
            success: false, 
            message: 'FAIL: API returned an error but the helper could not extract metadata.',
            raw_result: result 
        };
    });

    // Environment Diagnostics
    let is_native = $derived(typeof window !== 'undefined' && !!(window as any).native_app);
    let app_mode = $derived($events_loc?.launcher?.app_mode || 'web');
    
    // Derived state for Header Inspection - dynamically reconstruct standard request headers
    let active_headers = $derived({
        ...($ae_api.headers || {}),
        'x-account-id': $ae_loc.account_id || '(missing)',
        'Authorization': $ae_loc.jwt ? `Bearer ${$ae_loc.jwt.slice(0, 10)}...` : '(missing)'
    });

</script>

<!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
    <div class="container mx-auto p-4 space-y-8 pb-20">
        <header class="flex justify-between items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500">
            <div class="space-y-1">
                <h1 class="h1 flex items-center gap-3">
                    <Bug class="text-error-500" /> System Testing
                </h1>
                <p class="opacity-60 text-sm">Validation dashboard for Aether Platform V3</p>
            </div>
            <div class="flex gap-4">
                <div class="card p-3 variant-soft-secondary flex items-center gap-4 shadow-inner">
                    <div class="flex flex-col items-center px-2">
                        <span class="font-bold">{db_counts.user ?? 0}</span>
                        <span class="text-[10px] uppercase opacity-60">Users</span>
                    </div>
                    <div class="divider-vertical h-8 border-l border-gray-500"></div>
                    <div class="flex flex-col items-center px-2">
                        <span class="font-bold">{db_counts.person ?? 0}</span>
                        <span class="text-[10px] uppercase opacity-60">People</span>
                    </div>
                    <div class="divider-vertical h-8 border-l border-gray-500"></div>
                    <button class="btn-icon btn-icon-sm hover:variant-filled-secondary transition-all" onclick={update_db_counts} title="Refresh Row Counts">
                        <RefreshCcw size={14} />
                    </button>
                </div>
            </div>
        </header>

        <div class="grid grid-cols-1 xl:grid-cols-[1fr_400px] gap-8">
            <main class="space-y-6">
                
                <!-- Environment & Bridge Card -->
                <div class="card p-6 variant-soft-tertiary space-y-4 border border-gray-500 shadow-lg">
                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
                        <div class="flex items-center gap-2 text-tertiary-700 dark:text-tertiary-300">
                            <Satellite size={20} />
                            <h3 class="h3 font-bold">Environment & Bridge Diagnostics</h3>
                        </div>
                        <span class="badge variant-filled-tertiary font-mono p-2 uppercase">
                            Runtime: {is_native ? 'Electron' : 'Web Browser'}
                        </span>
                    </header>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The current logic mode of the application (e.g. native, onsite, web).">
                            <span class="text-[10px] uppercase opacity-50 font-bold">App Mode</span>
                            <span class="text-sm font-bold text-tertiary-600 dark:text-tertiary-400 uppercase tracking-widest">{app_mode}</span>
                        </div>
                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="Presence of window.native_app bridge object.">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Bridge Detected</span>
                            <div class="flex items-center gap-2">
                                <div class="w-2 h-2 rounded-full {is_native ? 'bg-success-500 animate-pulse' : 'bg-surface-500'}"></div>
                                <span class="text-sm font-semibold">{is_native ? 'Active' : 'Missing / Inactive'}</span>
                            </div>
                        </div>
                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The host string being used for bootstrap site resolution.">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Bootstrap Host</span>
                            <span class="font-mono text-xs truncate">{$ae_loc.hostname || '--'}</span>
                        </div>
                    </div>
                </div>

                <!-- Header Inspection Card -->
                <div class="card p-6 variant-soft-primary space-y-4 border border-gray-500 shadow-lg">
                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
                        <div class="flex items-center gap-2 text-primary-700 dark:text-primary-300">
                            <Settings2 size={20} />
                            <h3 class="h3 font-bold">Live V3 Header Inspection</h3>
                        </div>
                        <span class="text-[10px] font-mono opacity-50 uppercase tracking-tighter">Real-time API Store View</span>
                    </header>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {#each Object.entries(active_headers) as [key, value]}
                            <div class="flex justify-between items-center p-3 bg-gray-500/10 rounded border border-gray-500/20">
                                <span class="text-[10px] font-mono font-bold opacity-70">{key}</span>
                                <span class="text-xs font-mono {key === 'x-ae-ignore-extra-fields' ? 'text-success-500 font-bold' : ''}">
                                    {key.includes('key') || key.includes('token') || key.includes('account') ? '********' : value}
                                </span>
                            </div>
                        {/each}
                    </div>
                </div>

                <!-- Session Context Card -->
                <div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
                    <header class="flex justify-between items-center border-b border-gray-500 pb-3">
                        <div class="flex items-center gap-2 text-surface-700 dark:text-surface-300">
                            <User size={20} />
                            <h3 class="h3 font-bold">Active Session Context</h3>
                        </div>
                        <span class="badge variant-filled-primary font-mono p-2" title="Your current logical rank in the application (e.g. super, manager, trusted).">
                            Level: {$ae_loc.access_type || 'anonymous'}
                        </span>
                    </header>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="The Aether Username from the User object.">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Username</span>
                            <span class="font-mono text-sm truncate">{$ae_loc.user?.username || '--'}</span>
                        </div>
                        <div class="flex flex-col p-3 bg-gray-500/10 rounded" title="Full Name from the linked Person object.">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Full Name</span>
                            <span class="text-sm font-semibold truncate">{$ae_loc.person?.full_name || '--'}</span>
                        </div>
                        <div class="flex flex-col items-center p-3 rounded bg-gray-500/10" title="TRUE if session has matched a 'Trusted' level site passcode.">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Trusted</span>
                            <div class="flex items-center gap-1 mt-1">
                                {#if $ae_loc.trusted_access}
                                    <ShieldCheck size={18} class="text-success-500" />
                                    <span class="text-[10px] text-success-500 font-bold uppercase">YES</span>
                                {:else}
                                    <Unlock size={18} class="opacity-30" />
                                    <span class="text-[10px] opacity-30 font-bold uppercase">NO</span>
                                {/if}
                            </div>
                        </div>
                        <div class="flex flex-col items-center p-3 rounded bg-gray-500/10" title="TRUE if user has signed in with credentials (Username/Email).">
                            <span class="text-[10px] uppercase opacity-50 font-bold">Authenticated</span>
                            <div class="flex items-center gap-1 mt-1">
                                {#if $ae_loc.authenticated_access}
                                    <ShieldCheck size={18} class="text-success-500" />
                                    <span class="text-[10px] text-success-500 font-bold uppercase">YES</span>
                                {:else}
                                    <Unlock size={18} class="opacity-30" />
                                    <span class="text-[10px] opacity-30 font-bold uppercase">NO</span>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Security Dashboard -->
                <div class="card p-6 variant-soft-warning space-y-6 shadow-lg border border-warning-500">
                    <header class="flex justify-between items-center border-b border-warning-500 pb-3">
                        <div class="flex items-center gap-2 text-warning-700 dark:text-warning-500">
                            <Key size={20} />
                            <h3 class="h3 font-bold">API Security Controls</h3>
                        </div>
                        <button class="btn btn-sm variant-filled-warning shadow-md transition-all hover:scale-105" onclick={() => show_raw_keys = !show_raw_keys} title="Toggle visibility of the raw secret keys for character verification.">
                            {#if show_raw_keys} <EyeOff size={14} class="mr-2" /> Hide Raw {:else} <Eye size={14} class="mr-2" /> Inspect Raw {/if}
                        </button>
                    </header>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <label class="label space-y-2">
                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Primary secret key identifying this application. Required for ALL V3 requests. Sent as 'x-aether-api-key'.">
                                Active API Key <span class="text-secondary-500"><Info size={10} /></span>
                            </span>
                            <div class="flex shadow-sm border border-gray-500 rounded-lg overflow-hidden bg-surface-500/10">
                                <input type={show_raw_keys ? 'text' : 'password'} readonly value={$ae_api.api_secret_key || 'MISSING'} class="flex-1 font-mono text-xs p-3 bg-transparent border-none focus:ring-0" />
                                <div class="bg-gray-500/20 p-3 flex items-center"><span class="fas" class:fa-check-circle={$ae_api.api_secret_key} class:text-success-500={$ae_api.api_secret_key}></span></div>
                            </div>
                        </label>
                        <label class="label space-y-2">
                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Token received after successful user login. Stored in localStorage ($ae_loc.jwt). Required for multi-tenant isolation.">
                                Local JWT Store <span class="text-secondary-500"><Info size={10} /></span>
                            </span>
                            <div class="flex shadow-sm border border-gray-500 rounded-lg overflow-hidden bg-surface-500/10">
                                <input type={show_raw_keys ? 'text' : 'password'} readonly value={$ae_loc.jwt || 'No Token'} class="flex-1 font-mono text-xs p-3 bg-transparent border-none focus:ring-0" />
                                <div class="bg-gray-500/20 p-3 flex items-center"><span class="fas" class:fa-key={$ae_loc.jwt} class:text-warning-500={$ae_loc.jwt}></span></div>
                            </div>
                        </label>
                        <label class="label space-y-2">
                            <span class="text-[10px] uppercase font-bold opacity-70 flex items-center gap-1" title="Verifies if the Local JWT has been synced to the active API configuration ($ae_api.jwt).">
                                Sync Status <span class="text-secondary-500"><Info size={10} /></span>
                            </span>
                            <div class="card p-2 text-center text-xs font-bold border border-gray-500 shadow-sm flex items-center justify-center h-[46px] bg-transparent">
                                {#if $ae_api.jwt === $ae_loc.jwt} 
                                    <span class="text-success-600 dark:text-success-400 flex items-center gap-1"><ShieldCheck size={14}/> HANDSHAKE OK</span> 
                                {:else} 
                                    <span class="text-error-600 dark:text-error-400 flex items-center gap-1"><ShieldAlert size={14}/> MISMATCH</span> 
                                {/if}
                            </div>
                        </label>
                    </div>

                    {#if show_raw_keys}
                        <div class="p-4 bg-black/20 rounded-container text-[10px] font-mono break-all space-y-2 border border-gray-500 shadow-inner">
                            <p class="text-warning-500 font-bold border-b border-gray-500 pb-1 flex items-center gap-2 uppercase tracking-widest">
                                <Bug size={12} /> Raw Strings
                            </p>
                            <div class="grid grid-cols-[80px_1fr] gap-x-2 gap-y-1">
                                <span class="opacity-50">CUR_KEY:</span> <span>{$ae_api.api_secret_key}</span>
                                <span class="opacity-50">AGT_KEY:</span> <span>{trace_agent_key}</span>
                                <span class="opacity-50">LOC_JWT:</span> <span>{$ae_loc.jwt || 'NULL'}</span>
                            </div>
                        </div>
                    {/if}

                    <div class="space-y-4 border-t border-gray-500 pt-6">
                        <header class="flex items-center gap-2">
                            <FlaskConical size={18} class="text-secondary-500"/>
                            <h4 class="h4 font-bold">V3 Trace Controls</h4>
                        </header>
                        <div class="p-4 bg-gray-500/5 rounded-container border border-gray-500 space-y-4 shadow-inner">
                            <div class="flex flex-wrap gap-6 text-sm">
                                <label class="flex items-center gap-2 cursor-pointer group" title="When checked, the request will include the JWT token. Mandatory for nearly all V3 CRUD calls.">
                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_jwt} />
                                    <span class="group-hover:text-secondary-500 transition-colors">Include JWT</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer group" title="Sets 'x-no-account-id: bypass'. Combined with valid API Key, grants superuser access across all accounts.">
                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_bypass} />
                                    <span class="group-hover:text-error-500 transition-colors">Bypass Header</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer group" title="Test using the dedicated Agent API Key (IDF68...).">
                                    <input type="checkbox" class="checkbox" bind:checked={trace_use_agent_key} />
                                    <span class="text-secondary-600 font-bold underline decoration-dotted">Use Agent Key</span>
                                </label>
                            </div>
                            
                            <div class="flex flex-wrap gap-6 pt-3 border-t border-gray-500 mt-2" title="Section 6: JWT can be sent via Header (standard) or URL Parameter (for direct links/downloads).">
                                <span class="text-[10px] uppercase font-bold opacity-50 flex items-center gap-1">JWT Method <span class="text-secondary-500"><Info size={10} /></span>:</span>
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="radio" name="jwt_method" value="header" bind:group={trace_jwt_method} class="radio" />
                                    <span class="text-xs font-semibold">Header (Bearer)</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="radio" name="jwt_method" value="url" bind:group={trace_jwt_method} class="radio" />
                                    <span class="text-xs font-semibold">URL Param (?jwt=)</span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <button class="btn variant-filled-secondary p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95 flex items-center justify-center gap-2" onclick={run_trace_test} title="Initiate GET request to /v3/crud/journal/ and capture headers.">
                                <ArrowRightLeft size={16} /> RUN TRACE
                            </button>
                            <button class="btn variant-filled-warning p-4 font-bold shadow-lg transition-all hover:brightness-110 active:scale-95 flex items-center justify-center gap-2" disabled={!$ae_loc.jwt} onclick={test_whoami} title="Verify user authentication by loading your own profile.">
                                <UserCheck size={16} /> WHO AM I?
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Trace Visualizer -->
                {#if trace_details}
                    <div class="card p-6 variant-soft-secondary space-y-4 shadow-xl border border-gray-500">
                        <header class="flex items-center gap-2 border-b border-gray-500 pb-3">
                            <Code size={20} class="text-secondary-500" />
                            <h3 class="h3 font-bold">Request / Response Trace</h3>
                        </header>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 font-mono text-[10px]">
                            <div class="space-y-2">
                                <p class="font-bold opacity-70 tracking-widest uppercase">📤 Sent</p>
                                <div class="bg-black/20 p-4 rounded shadow-inner border border-black/10 overflow-auto">
                                    <p class="mb-2 text-secondary-500 font-bold">URL: {trace_details.request.url}</p>
                                    <p class="mb-1 text-secondary-500 underline uppercase">Headers:</p>
                                    <pre>{JSON.stringify(trace_details.request.headers, null, 2)}</pre>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <p class="font-bold opacity-70 tracking-widest uppercase">📥 Received</p>
                                <div class="bg-black/20 p-4 rounded shadow-inner border border-black/10 overflow-auto max-h-[400px] border-l-4" 
                                     class:border-l-success-500={test_result?.success} 
                                     class:border-l-error-500={!test_result?.success}>
                                    <pre>{JSON.stringify(trace_details.response || trace_details.response_error, null, 2)}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
                                        <header class="flex items-center gap-2 text-primary-500 border-b border-gray-500 pb-2">
                                            <Server size={20}/>
                                            <h4 class="h4 font-bold uppercase tracking-widest">Infrastructure</h4>
                                        </header>
                                        <button class="btn variant-filled-primary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_site_domain_lookup} title="Test guest site domain lookup.">
                                            <Globe size={16}/> Site Domain Lookup
                                        </button>
                                        <button class="btn variant-filled-primary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_manifest} title="Verifies the dynamic PWA manifest returns correct branding for this domain.">
                                            <Code size={16}/> PWA Manifest Lookup
                                        </button>
                                    </div>                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
                        <header class="flex items-center gap-2 text-secondary-500 border-b border-gray-500 pb-2">
                            <Database size={20}/>
                            <h4 class="h4 font-bold uppercase tracking-widest">Core V3</h4>
                        </header>
                        <button class="btn variant-filled-secondary p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_load_accounts} title="Test authenticated accounts load.">
                            <Building2 size={16}/> Load Accounts
                        </button>
                    </div>
                    <div class="card p-6 space-y-4 border border-gray-500 shadow-lg transition-all group hover:bg-surface-500/5">
                        <header class="flex items-center gap-2 text-warning-500 border-b border-gray-500 pb-2">
                            <ShieldAlert size={20}/>
                            <h4 class="h4 font-bold uppercase tracking-widest">V3 Hardening</h4>
                        </header>
                        <button class="btn variant-filled-warning p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_permissive_mode} title="Verifies the API ignores unknown fields (x-ae-ignore-extra-fields).">
                            <Zap size={16}/> Permissive Mode Test
                        </button>
                        <button class="btn variant-filled-error p-4 w-full shadow-md transition-all hover:scale-[1.02] flex items-center justify-center gap-2" onclick={test_structured_error} title="Deliberately triggers a 400 error to verify rich metadata extraction.">
                            <ShieldAlert size={16}/> Structured Error Test
                        </button>
                    </div>
                </div>

                <!-- Maintenance -->
                <div class="card p-6 variant-soft-error flex justify-between items-center shadow-lg border border-error-500">
                    <div class="flex items-center gap-4 text-error-700 dark:text-error-400">
                        <Trash2 size={24}/>
                        <div>
                            <p class="font-bold text-lg">Cache Management</p>
                            <p class="text-xs opacity-70 font-mono italic uppercase tracking-tighter">Wipe IndexedDB (ae_core_db)</p>
                        </div>
                    </div>
                    <button class="btn variant-filled-error p-4 font-bold shadow-lg transition-all hover:scale-105" onclick={clear_local_cache}>CLEAR LOCAL IDB</button>
                </div>
            </main>

            <aside class="space-y-4">
                <div class="card p-6 h-full bg-surface-100 dark:bg-surface-800 overflow-hidden flex flex-col sticky top-4 max-h-[calc(100vh-2rem)] shadow-2xl border border-gray-500">
                    <header class="flex justify-between items-center border-b border-gray-500 pb-3 mb-4">
                        <h3 class="h3 font-bold uppercase tracking-widest opacity-70">Audit Result</h3>
                        {#if test_result === 'loading...'} <span class="badge variant-filled-warning animate-pulse">RUNNING</span>
                        {:else if test_result?.success} <span class="badge variant-filled-success font-bold uppercase">Passed</span>
                        {:else if test_result?.error || (test_result && !test_result.success)} <span class="badge variant-filled-error font-bold italic uppercase">Failed</span>
                        {:else} <span class="badge variant-soft-surface opacity-50 italic uppercase">Idle</span> {/if}
                    </header>
                    <div class="flex-1 overflow-auto bg-black/20 rounded p-4 font-mono text-xs shadow-inner border border-black/10">
                        {#if test_result === 'loading...'} 
                            <div class="flex flex-col items-center justify-center h-full gap-4 opacity-30"><RefreshCcw size={32} class="animate-spin"/><p class="italic uppercase">Auditing...</p></div>
                        {:else if test_result} 
                            <pre class="whitespace-pre-wrap leading-relaxed text-blue-600 dark:text-blue-400">{JSON.stringify(test_result, null, 2)}</pre>
                        {:else} 
                            <div class="flex flex-col items-center justify-center h-full opacity-20 py-20 text-center"><Zap size={64} class="mb-4" /><p class="font-bold uppercase tracking-widest">Select test to begin</p></div> 
                        {/if}
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

<style lang="postcss">
    /* No @apply on Skeleton tokens to prevent Tailwind 4 errors */
    .checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; }
    .radio { width: 1.15rem; height: 1.15rem; cursor: pointer; }
    .btn:disabled { opacity: 0.3; filter: saturate(0); cursor: not-allowed; }
</style>