<script lang="ts">
    import { ae_loc, ae_api } from '$lib/stores/ae_stores';
    import { events_loc } from '$lib/stores/ae_events_stores';
    import Launcher_Cfg_Section from './launcher_cfg_section.svelte';

    interface Props {
        on_expand?: () => void;
    }
    let { on_expand }: Props = $props();

    let selected_reset = $state('');

    function handle_reset_action(val: string) {
        if (!val) return;

        if (val == 'delete_idbs') {
            if (
                confirm(
                    'Are you sure you want to delete ALL IndexedDB databases?'
                )
            ) {
                indexedDB.deleteDatabase('ae_archives_db');
                indexedDB.deleteDatabase('ae_core_db');
                indexedDB.deleteDatabase('ae_events_db');
                indexedDB.deleteDatabase('ae_journals_db');
                indexedDB.deleteDatabase('ae_posts_db');
                indexedDB.deleteDatabase('ae_sponsorships_db');
                alert(
                    'All IndexedDB databases deleted. Please reload the app.'
                );
            }
        } else if (val == 'delete_idbs_events') {
            if (
                confirm(
                    'Are you sure you want to delete ONLY the Events IndexedDB database?'
                )
            ) {
                indexedDB.deleteDatabase('ae_events_db');
                alert(
                    'Events IndexedDB database deleted. Please reload the app.'
                );
            }
        } else if (val == 'delete_local') {
            if (confirm('Are you sure you want to delete ALL local config?')) {
                localStorage.removeItem('ae_loc');
                localStorage.removeItem('ae_events_loc');
                localStorage.removeItem('ae_idaa_loc');
                localStorage.removeItem('ae_journals_loc');
                location.reload();
            }
        } else if (val == 'delete_local_events') {
            if (
                confirm(
                    'Are you sure you want to delete ONLY the Events local config?'
                )
            ) {
                localStorage.removeItem('ae_events_loc');
                location.reload();
            }
        }
        selected_reset = '';
    }
</script>

<Launcher_Cfg_Section
    title="Local Reset & Actions"
    icon="fa-tools"
    bind:state={$events_loc.launcher.section_state__local_actions}
    {on_expand}
    description="Cache wiping and global menu toggles"
>
    <div class="col-span-full flex flex-col gap-3">
        <!-- 1. Reset Actions -->
        <div class="flex flex-col gap-1">
            <label
                class="text-[9px] font-bold uppercase opacity-50 ml-1 text-error-500"
                >Maintenance & Resets</label
            >
            <select
                bind:value={selected_reset}
                onchange={(e) =>
                    handle_reset_action((e.target as HTMLSelectElement).value)}
                class="select select-sm text-xs preset-tonal-surface h-8 text-error-500 border-error-500/20"
            >
                <option value="">-- Select a reset action --</option>
                <option value="delete_idbs">Delete ALL Databases</option>
                <option value="delete_idbs_events">Delete Events DB Only</option
                >
                <option value="delete_local">Wipe ALL Local Storage</option>
                <option value="delete_local_events"
                    >Wipe Events Storage Only</option
                >
            </select>
            <span class="text-[8px] opacity-40 italic ml-1 leading-tight">
                * Destructive actions require browser confirmation.
            </span>
        </div>

        <!-- 2. UI Toggles -->
        <div class="grid grid-cols-2 gap-2 mt-1">
            <button
                type="button"
                onclick={() => ($ae_loc.sys_menu.hide = !$ae_loc.sys_menu.hide)}
                class="btn btn-xs preset-tonal-surface hover:preset-filled-primary-500"
                title="Show/Hide Aether global system menu"
            >
                <span
                    class="fas {$ae_loc.sys_menu.hide
                        ? 'fa-eye'
                        : 'fa-eye-slash'} mr-2"
                ></span>
                {$ae_loc.sys_menu.hide ? 'Show' : 'Hide'} Sys Menu
            </button>

            <button
                type="button"
                onclick={() =>
                    ($ae_loc.debug_menu.hide = !$ae_loc.debug_menu.hide)}
                class="btn btn-xs preset-tonal-surface hover:preset-filled-primary-500"
                title="Show/Hide Aether global debug menu"
            >
                <span
                    class="fas {$ae_loc.debug_menu.hide
                        ? 'fa-bug'
                        : 'fa-bug-slash'} mr-2"
                ></span>
                {$ae_loc.debug_menu.hide ? 'Show' : 'Hide'} Debug
            </button>
        </div>

        <!-- 3. Connection Summary (Edit Mode Only) -->
        {#if $ae_loc.edit_mode}
            <div
                class="col-span-full border-t border-surface-500/20 pt-2 mt-1 flex flex-col gap-1"
            >
                <label class="text-[9px] font-bold uppercase opacity-50 ml-1"
                    >API Context</label
                >
                <div
                    class="bg-black/10 p-2 rounded text-[9px] font-mono opacity-60 break-all leading-tight"
                >
                    Endpoint: {$ae_api.base_url}<br />
                    Account: {$ae_loc.account_id}
                </div>
            </div>
        {/if}
    </div>
</Launcher_Cfg_Section>
