<script lang="ts">
	// console.log(`ae_events_pres_mgmt +page data:`, data);
	// console.log(`ae_events_pres_mgmt Data Params:`, data.url.searchParams.get('event_id'));

	import { onMount } from 'svelte';

	import { liveQuery } from 'dexie';
	import { db_events } from '$lib/ae_events/db_events';
	import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
	import { events_loc, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';

	interface Props {
		data: any;
	}

	let { data }: Props = $props();

	// import Element_data_store from '$lib/element_data_store_v2.svelte';

	let ae_acct = data[$slct.account_id];

	let lq__event_obj_li = $derived(
		liveQuery(async () => {
			let results = await db_events.event
				.where('account_id')
				.equals(ae_acct.slct.account_id)
				.reverse()
				.sortBy('start_datetime');
			return results;
		})
	);

	let items_per_page = 10;
	let current_page = $state(1);

	let paginated_events = $derived(() => {
		const start = (current_page - 1) * items_per_page;
		const end = start + items_per_page;
		return $lq__event_obj_li?.slice(start, end) ?? [];
	});

	let total_events = $derived($lq__event_obj_li?.length ?? 0);
	let total_pages = $derived(Math.ceil(total_events / items_per_page));

	function next_page() {
		if (current_page < total_pages) {
			current_page++;
		}
	}

	function prev_page() {
		if (current_page > 1) {
			current_page--;
		}
	}

	onMount(() => {
		// console.log('Events - Presentation Management: +page.svelte');
	});
</script>

<!-- <section
    class="ae_events_pres_mgmt md:container h-full mx-auto"
    > -->

<h2 class="h3">Presentation Management for {$ae_loc.account_name ?? 'Æ loading...'}</h2>

{#if $ae_loc.administrator_access}
	<h3 class="h4">Administrator Access - Technical Support</h3>
	<p>
		You are accessing the presentation management system with "administrator" level permissions.
	</p>
{:else if $ae_loc.trusted_access}
	<h3 class="h4">Trusted Access - Staff</h3>
	<p>You are accessing the presentation management system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
	<h3 class="h4">Restricted Access</h3>
	<p>You access to the presentation management system is limited.</p>
{/if}

<!-- <Element_data_store
    ds_code="events__pres_mgmt__overview"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    display="block"
    class_li="p-2"
    /> -->

<!-- <Element_data_store
    ds_code="events__pres_mgmt__example"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    ds_name="Default: Events - Presentation Management Example"
    store="local"
    display="block"
    class_li="variant-ghost-surface p-2"
    try_cache={true}
    show_edit={false}
    /> -->

{#if $lq__event_obj_li}
	<!-- <div class="flex flex-row items-center justify-center">
        <span class="fas fa-check text-green-500 mx-1"></span>
        <span>Loaded</span>
    </div> -->

	{#if $lq__event_obj_li.length}
		<ul class="space-y-2">
			{#each paginated_events as event_obj}
				<li class:dim={event_obj?.hide}>
					<!-- We do not want to show events more than 8 months old. -->
					{#if new Date(event_obj.start_datetime ?? '').getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 8 || $ae_loc.trusted_access}
						<!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
						<a
							href="/events/{event_obj.event_id}"
							class="btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500"
						>
							{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
							-
							{event_obj.name}
						</a>
					{:else}
						<button disabled class="btn btn-md preset-tonal-surface border border-surface-500">
							{ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
							-
							{event_obj.name}
						</button>
					{/if}

					{#if $ae_loc.trusted_access}
						<a
							data-sveltekit-reload
							href="/event/{event_obj.event_id}"
							class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500"
						>
							Manage
						</a>
					{/if}
				</li>
			{/each}
		</ul>
		<div class="flex justify-center items-center space-x-4 mt-4">
			<button class="btn btn-sm" onclick={prev_page} disabled={current_page === 1}>Previous</button>
			<span>Page {current_page} of {total_pages}</span>
			<button class="btn btn-sm" onclick={next_page} disabled={current_page === total_pages}
				>Next</button
			>
		</div>
	{:else}
		<div class="flex flex-row items-center justify-center">
			<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
			<span>No events available to display.</span>
			<span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
		</div>
	{/if}
{:else}
	<div class="flex flex-row items-center justify-center">
		<span class="fas fa-spinner fa-spin mx-1"></span>
		<span>Loading...</span>
	</div>
	<!-- {/if} -->
{/if}

<!-- {:catch error}
    <div class="text-red-800">
        <span class="fas fa-exclamation-triangle text-xl"></span>
        <span>Error: {error.message}</span>
    </div>
{/await} -->

<!-- </section> -->

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