<script lang="ts">
// Imports
// import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';

import { liveQuery } from 'dexie';
import { db_core } from '$lib/ae_core/db_core';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    Building2,
    ListOrdered,
    Mail,
    Unlink,
    User,
    UserCheck
} from '@lucide/svelte';
// import { core_func } from '$lib/ae_core_functions';
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
// import { events_func } from '$lib/ae_events/ae_events_functions';

interface Props {
    // Exports
    container_class_li?: string | Array<string>;
    person_id_li?: Array<string>;
    allow_basic?: boolean;
    allow_moderator?: boolean;
    show_user_fields?: boolean;
    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
}

let {
    container_class_li = [],
    person_id_li = $bindable([]),
    allow_basic = false,
    allow_moderator = false,
    show_user_fields = false,
    display_mode = 'default'
}: Props = $props();

// Variables

// *** Functions and Logic
let lq_kv__person_obj_li = $derived(
    liveQuery(() => db_core.person.where('person_id').anyOf(person_id_li).toArray())
);
</script>

<section class="ae_comp person_obj_tbl container {container_class_li}">
    {#if person_id_li && $lq_kv__person_obj_li && $lq_kv__person_obj_li?.length > 0}
        <div class="overflow-auto">
            <h2 class="h3">
                <span class="text-md"> Results: </span>

                {#if $lq_kv__person_obj_li.length}
                    <span
                        class="bg-success-100 border-success-200 rounded-lg border px-4 text-3xl font-bold"
                        title="Count {$lq_kv__person_obj_li.length ?? 'None'}">
                        <ListOrdered size="1em" class="mx-4" />
                        {$lq_kv__person_obj_li.length ?? 'None'}
                    </span>
                {/if}
            </h2>

            <table
                class="table-striped table w-full table-auto text-xs lg:text-sm">
                <thead>
                    <tr>
                        <th class="px-4 py-2"
                            >Name ({$lq_kv__person_obj_li?.length}×)</th>
                        <th class="px-4 py-2">Email</th>
                        <th class="px-4 py-2">Affiliations</th>
                        {#if show_user_fields}
                            <th class="px-4 py-2">Username</th>
                            <th class="px-4 py-2">Access</th>
                        {/if}
                        <th class="px-4 py-2">Created/Updated</th>
                    </tr>
                </thead>
                <tbody>
                    {#each $lq_kv__person_obj_li as person_obj (person_obj?.person_id)}
                        <tr class:dim={person_obj?.hide}>
                            <td class="px-4 py-2">
                                <User size="1em" />
                                <a
                                    href="/core/people/{person_obj?.person_id}"
                                    class="text-blue-500 underline hover:text-blue-800"
                                    title="View {person_obj?.full_name ??
                                        'no name'} (ID={person_obj?.person_id})">
                                    <!-- {@html person_obj?.full_name ?? ae_snip.html__not_set} -->
                                    {@html person_obj?.full_name
                                        ? person_obj?.full_name
                                        : ae_snip.html__not_set}
                                </a>
                            </td>
                            <td class="px-4 py-2">
                                <Mail size="1em" />
                                {#if person_obj?.primary_email}
                                    <a
                                        href="mailto:{person_obj?.primary_email}"
                                        class="text-blue-500 underline hover:text-blue-800">
                                        {@html person_obj?.primary_email ??
                                            ae_snip.html__not_set}
                                    </a>
                                {:else}
                                    {@html ae_snip.html__not_set}
                                {/if}
                            </td>
                            <td class="px-4 py-2">
                                <Building2 size="1em" />
                                {@html person_obj?.affiliations ??
                                    ae_snip.html__not_set}
                            </td>

                            {#if show_user_fields}
                                <td class="px-4 py-2">
                                    {#if person_obj?.user_id}
                                        <div class="flex flex-col gap-1">
                                            <span
                                                class="flex items-center gap-1 font-bold">
                                                <UserCheck
                                                    size="1em"
                                                    class="text-success-500" />
                                                <a
                                                    href="/core/users/{person_obj?.user_id}"
                                                    class="text-blue-500 underline hover:text-blue-800">
                                                    {@html person_obj?.username ??
                                                        '-- no username --'}
                                                </a>
                                            </span>
                                            <span
                                                class="font-mono text-[10px] opacity-50"
                                                >{person_obj.user_id}</span>
                                        </div>
                                    {:else}
                                        <span
                                            class="badge preset-tonal-warning">
                                            <Unlink size="1em" class="mr-1" />
                                            Not Linked
                                        </span>
                                    {/if}
                                </td>
                                <td class="px-4 py-2">
                                    <div class="flex flex-wrap gap-1">
                                        {#if person_obj?.user_super}<span
                                                class="badge preset-filled-error text-[10px]"
                                                >Super</span
                                            >{/if}
                                        {#if person_obj?.user_manager}<span
                                                class="badge preset-filled-warning text-[10px]"
                                                >Manager</span
                                            >{/if}
                                        {#if person_obj?.user_administrator}<span
                                                class="badge preset-filled-primary text-[10px]"
                                                >Admin</span
                                            >{/if}
                                        {#if !person_obj?.user_id}<span
                                                class="opacity-30">--</span
                                            >{/if}
                                    </div>
                                </td>
                            {/if}

                            <td class="px-4 py-2">
                                {ae_util.iso_datetime_formatter(
                                    person_obj?.created_on,
                                    'datetime_iso_12_no_seconds'
                                )}
                                <br />
                                {ae_util.iso_datetime_formatter(
                                    person_obj?.updated_on,
                                    'datetime_iso_12_no_seconds'
                                )}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {/if}
</section>

<style>
.dim {
    opacity: 0.5;
    color: #999;
}
</style>
