<script lang="ts">
interface Props {
    lq__event_exhibit_tracking_obj_li: any;
    log_lvl?: number;
}

let { lq__event_exhibit_tracking_obj_li, log_lvl = 0 }: Props = $props();

import {
    ChevronRight,
    Clock,
    FileText,
    LoaderCircle,
    Mail,
    MapPin,
    User
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { page } from '$app/state';

// Full ISO datetime for tooltip (hover title)
function format_date_full(date_str: string) {
    if (!date_str) return '';
    return new Date(date_str).toLocaleString(undefined, {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

// Fuzzy relative time — "~10 min ago", "~1.5 hrs ago", "~2 days ago"
// Exact for first few minutes, increasingly coarse after that.
function fuzzy_time_ago(date_str: string) {
    if (!date_str) return '';
    const diff_ms = Date.now() - new Date(date_str).getTime();
    if (diff_ms < 0) return 'just now';

    const min = diff_ms / 60000;
    const hr = diff_ms / 3600000;
    const days = Math.floor(hr / 24);

    if (min < 0.75) return 'just now';
    if (min < 2) return '~1 min ago';
    if (min < 7) return `~${Math.round(min)} min ago`; // e.g. "~3 min ago"
    if (min < 20) return `~${Math.round(min / 5) * 5} min ago`; // rounds to 5 min
    if (min < 55) return `~${Math.round(min / 15) * 15} min ago`; // rounds to 15 min
    if (hr < 1.5) return '~1 hr ago';
    if (hr < 23.5) {
        const r = Math.round(hr * 2) / 2; // rounds to nearest 0.5 hr
        return `~${r} hrs ago`;
    }
    if (days < 7) {
        const rem_hr = Math.round(hr - days * 24);
        const day_label = `~${days} day${days > 1 ? 's' : ''}`;
        return rem_hr > 1
            ? `${day_label} ${rem_hr} hrs ago`
            : `${day_label} ago`;
    }
    const weeks = Math.round(days / 7);
    if (days < 28) {
        return `~${weeks} week${weeks > 1 ? 's' : ''} ago`;
    }
    const months = Math.round(days / 30);
    if (days < 365) {
        return `~${months} month${months > 1 ? 's' : ''} ago`;
    }
    const years = Math.round(days / 365);
    return `~${years} year${years > 1 ? 's' : ''} ago`;
}
</script>

<div class="ae_comp__exhibit_tracking_obj_li w-full px-2 sm:px-4">
    {#if !lq__event_exhibit_tracking_obj_li}
        <div class="flex justify-center p-10">
            <LoaderCircle
                size="2rem"
                class="animate-spin opacity-20"
                aria-hidden="true" />
        </div>
    {:else if lq__event_exhibit_tracking_obj_li.length === 0}
        <div class="card preset-tonal-surface p-8 text-center">
            <p class="text-xl opacity-50">No leads found yet.</p>
            <p class="mt-2 text-sm opacity-50">
                Start scanning badges to collect leads!
            </p>
        </div>
    {:else}
        <div class="space-y-4">
            <div class="flex items-center justify-between px-2">
                <span class="text-sm font-semibold opacity-50">
                    {lq__event_exhibit_tracking_obj_li.length} Leads Collected
                </span>
            </div>

            <div class="grid grid-cols-1 gap-4">
                {#each lq__event_exhibit_tracking_obj_li as event_tracking_obj (event_tracking_obj.event_exhibit_tracking_id)}
                    <a
                        href={`/events/${page.params.event_id}/leads/exhibit/${event_tracking_obj.event_exhibit_id}/lead/${event_tracking_obj.event_exhibit_tracking_id}`}
                        class="card card-hover preset-tonal-surface border-primary-500 flex flex-col items-start gap-4 border-l-4 p-4 md:flex-row md:items-center">
                        <div class="flex-grow space-y-1">
                            <div class="flex items-center gap-2">
                                <User size="1.25em" class="text-primary-500" />
                                <span class="text-xl font-bold">
                                    {event_tracking_obj.event_badge_full_name ||
                                        event_tracking_obj.event_badge_full_name_override ||
                                        'Unknown Attendee'}
                                </span>
                            </div>

                            <div
                                class="flex flex-wrap gap-x-4 gap-y-1 text-sm opacity-70">
                                {#if event_tracking_obj.event_badge_email}
                                    <div class="flex items-center gap-1">
                                        <Mail size="1em" />
                                        {event_tracking_obj.event_badge_email}
                                    </div>
                                {/if}
                                {#if event_tracking_obj.event_badge_affiliations}
                                    <div class="flex items-center gap-1">
                                        <MapPin size="1em" />
                                        {event_tracking_obj.event_badge_affiliations}
                                    </div>
                                {/if}
                                <div
                                    class="flex items-center gap-1"
                                    title={`Added lead:\n${format_date_full(event_tracking_obj.created_on)}`}
                                    >
                                    <Clock size="1em" />
                                    {fuzzy_time_ago(
                                        event_tracking_obj.created_on
                                    )}
                                </div>
                            </div>

                            {#if event_tracking_obj.exhibitor_notes}
                                <div
                                    class="bg-surface-100-900 border-surface-300-700 mt-2 rounded border-l-2 p-2 text-sm italic">
                                    <FileText size="1em" class="mr-1 inline" />
                                    {ae_util.shorten_string({
                                        string: ae_util.strip_html(
                                            event_tracking_obj.exhibitor_notes
                                        ),
                                        max_length: 100
                                    })}
                                </div>
                            {/if}
                        </div>

                        <div class="hidden flex-shrink-0 self-center md:block">
                            <ChevronRight size="2em" class="opacity-20" />
                        </div>
                    </a>
                {/each}
            </div>
        </div>
    {/if}
</div>
