<script lang="ts">
    interface Props {
        // Exports
        container_class_li?: string | Array<string>;
        event_file_id_random_li?: Array<string>;
        lq__event_file_obj_li: any;
        allow_basic?: boolean;
        allow_moderator?: boolean;
        // export let max_records: number = 100;
        show_direct_download?: boolean;
        show_location_fields?: boolean;
        show_presentation_fields?: boolean;
        // export let show_presenter_fields: boolean = false;
        show_session_fields?: boolean;
        hide_session_code?: boolean;
        log_lvl?: number;
    }

    let {
        container_class_li = [],
        event_file_id_random_li = [],
        lq__event_file_obj_li,
        allow_basic = false,
        allow_moderator = false,
        show_direct_download = $bindable(false),
        show_location_fields = false,
        show_presentation_fields = false,
        show_session_fields = false,
        hide_session_code = false,
        log_lvl = $bindable(0)
    }: Props = $props();

    // Imports
    // import { liveQuery } from 'dexie';

    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    // import { api } from '$lib/api/api';

    // import { db_events } from '$lib/ae_events/db_events';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    // 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_functions';
    import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
    import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';

    // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

    // Variables
    let ae_promises: key_val = $state({});

    // *** Functions and Logic

    // Define the list of unacceptable characters if not using the default.
    // const unacceptable_chars = /[ <>:"/\\|?*]/g;

    let horiz_scroll_warning: boolean = $state(false);
    let horiz_check_element: HTMLElement | null = $state(null);

    // Check if element is scrolling horizontally
    $effect(() => {
        if (
            horiz_check_element &&
            horiz_check_element.scrollWidth > horiz_check_element.offsetWidth
        ) {
            horiz_scroll_warning = true;
            // console.log('Element is too wide for the container. Horizontal scrolling detected.');
        } else {
            horiz_scroll_warning = false;
            // console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
        }
    });

    function generate_file_export_csv(ae_obj_li: any[]) {
        console.log(`*** generate_file_export_csv() ***`, ae_obj_li);

        // We need to create a list with the column names and then a list of lists with the data.
        let csv_data = [];
        let csv_columns = [
            'File ID',
            'Filename',
            'Extension',
            'Size',
            'SHA256 Hash',
            'Uploaded On',
            'Updated On',
            'Session ID',
            'Session Code',
            'Session Name',
            'Session Start Datetime',
            'Presentation ID',
            'Presentation Name',
            'Presentation Time',
            'Presenter ID',
            'Name',
            'Email',
            'Download Link',
            'Download Link - Session Code'
        ];
        csv_data.push(csv_columns);

        for (let i = 0; i < ae_obj_li.length; i++) {
            let csv_row = [];
            csv_row.push(ae_obj_li[i].event_file_id);
            csv_row.push(
                ae_obj_li[i].filename
                    ? `"${ae_util.clean_filename(ae_obj_li[i].filename)}"`
                    : ''
            );
            csv_row.push(ae_obj_li[i].extension ? ae_obj_li[i].extension : '');
            csv_row.push(
                ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size
                    ? ae_util.format_bytes(ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size)
                    : ''
            );
            csv_row.push(ae_obj_li[i].hash_sha256?.slice(0, 10) ?? 'N/A');
            csv_row.push(
                ae_obj_li[i].created_on
                    ? ae_util.iso_datetime_formatter(
                          ae_obj_li[i].created_on,
                          'datetime_iso_12_no_seconds'
                      )
                    : ''
            );
            csv_row.push(
                ae_obj_li[i].updated_on
                    ? ae_util.iso_datetime_formatter(
                          ae_obj_li[i].updated_on,
                          'datetime_iso_12_no_seconds'
                      )
                    : ''
            );

            csv_row.push(
                ae_obj_li[i].event_session_id
                    ? ae_obj_li[i].event_session_id
                    : ''
            );
            csv_row.push(
                ae_obj_li[i].event_session_code
                    ? ae_obj_li[i].event_session_code
                    : ''
            );
            csv_row.push(ae_obj_li[i].event_session_name ?? '');
            csv_row.push(
                ae_obj_li[i].event_session_start_datetime
                    ? ae_util.iso_datetime_formatter(
                          ae_obj_li[i].event_session_start_datetime,
                          'datetime_iso_12_no_seconds'
                      )
                    : ''
            );

            csv_row.push(
                ae_obj_li[i].event_presentation_id
                    ? ae_obj_li[i].event_presentation_id
                    : ''
            );
            csv_row.push(ae_obj_li[i].event_presentation_name ?? '');
            csv_row.push(
                ae_obj_li[i].event_presentation_start_datetime
                    ? ae_util.iso_datetime_formatter(
                          ae_obj_li[i].event_presentation_start_datetime,
                          'datetime_iso_12_no_seconds'
                      )
                    : ''
            );

            csv_row.push(
                ae_obj_li[i].event_presenter_id
                    ? ae_obj_li[i].event_presenter_id
                    : ''
            );
            csv_row.push(ae_obj_li[i].event_presenter_full_name ?? '');
            csv_row.push(
                ae_obj_li[i].event_presenter_email
                    ? ae_obj_li[i].event_presenter_email
                    : ''
            );

            csv_row.push(
                encodeURI(
                    `${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
                )
            );

            csv_row.push(
                encodeURI(
                    `${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_obj_li[i]?.event_session_code}-${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
                )
            );

            csv_data.push(csv_row);
        }

        console.log('CSV Data:', csv_data);

        let csv_content_str = '';
        csv_data.forEach(function (row) {
            csv_content_str += row.join(';');
            csv_content_str += '\n';
        });

        const blob = new Blob([csv_content_str], {
            type: 'text/csv;charset=utf-8;'
        });
        const obj_url = URL.createObjectURL(blob);

        const download_link = document.createElement('a');
        download_link.setAttribute('href', obj_url);
        download_link.setAttribute(
            'download',
            `file_list_${ae_util.iso_datetime_formatter()}.csv`
        );
        download_link.setAttribute('style', 'display: none;');
        download_link.textContent = 'Download CSV';

        const container = document.getElementById('download_csv_container');
        if (container) {
            container.appendChild(download_link);
        } else {
            document.body.appendChild(download_link);
        }

        // Automatically download the file
        download_link.click();

        return csv_data;
    }
</script>

<section
    class:border-r-2={horiz_scroll_warning}
    class:border-dashed={horiz_scroll_warning}
    class:border-warning-900-100={horiz_scroll_warning}
    class="ae_comp event_file_obj_tbl {container_class_li} container overflow-auto max-w-screen"
>
    <!-- {#if event_file_id_random_li && $lq_kv__event_file_obj_li && $lq_kv__event_file_obj_li?.length > 0 && $lq_kv__event_file_obj_li?.length == event_file_id_random_li?.length} -->
    {#if $lq__event_file_obj_li && $lq__event_file_obj_li?.length}
        <div
            bind:this={horiz_check_element}
            id="tbl_container"
            class="space-y-2 pb-8"
        >
            <header
                class="flex flex-row flex-wrap gap-1 items-center justify-between"
            >
                <h2 class="h3">
                    <span class="text-base"> Results: </span>

                    {#if $lq__event_file_obj_li.length}
                        <span
                            class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
                            title="Count {$lq__event_file_obj_li.length ??
                                'None'}"
                        >
                            <span class="fas fa-list-ol mx-4"></span>
                            {$lq__event_file_obj_li.length ?? 'None'}&times;
                        </span>
                    {/if}
                </h2>

                <div
                    class="flex flex-row flex-wrap gap-1 items-center justify-end"
                    class:hidden={!$ae_loc.edit_mode}
                >
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-warning border border-warning-500 mb-1 generate_csv_btn"
                        onclick={() => {
                            if (
                                !confirm(
                                    'Generate and download a CSV file with the file list?'
                                )
                            ) {
                                return false;
                            }

                            let csv_data = generate_file_export_csv(
                                $lq__event_file_obj_li
                            );
                            console.log('CSV Data:', csv_data);
                        }}
                    >
                        <span class="fas fa-file-csv mx-1"></span>
                        Export Files CSV
                    </button>
                    <span id="download_csv_container"></span>

                    {#if show_session_fields}
                        <button
                            type="button"
                            onclick={() => {
                                show_session_fields = !show_session_fields;
                            }}
                            class="btn btn-sm {show_session_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the session-related column fields."
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            Showing Session Fields
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                show_session_fields = !show_session_fields;
                            }}
                            class="btn btn-sm {show_session_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the session-related column fields."
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            Show Session Fields
                        </button>
                    {/if}

                    <!-- Show or hide the session code -->
                    {#if !hide_session_code}
                        <button
                            type="button"
                            onclick={() => {
                                hide_session_code = true;
                            }}
                            class="btn btn-sm ae_btn_surface"
                            title="Hide the session code column from view. Currently showing the Session Code column."
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            Showing Session Code
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                hide_session_code = false;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined"
                            title="Show the session code column. Currently hiding the Session Code column from view."
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            Show Session Code
                        </button>
                    {/if}

                    {#if show_presentation_fields}
                        <button
                            type="button"
                            onclick={() => {
                                show_presentation_fields =
                                    !show_presentation_fields;
                            }}
                            class="btn btn-sm {show_presentation_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the extra presentation-related column fields."
                        >
                            <span class="fas fa-toggle-on m-1"></span>
                            Showing Presentation Fields
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                show_presentation_fields =
                                    !show_presentation_fields;
                            }}
                            class="btn btn-sm {show_presentation_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the extra presentation-related column fields."
                        >
                            <span class="fas fa-toggle-off m-1"></span>
                            Show Presentation Fields
                        </button>
                    {/if}
                </div>
            </header>

            <table
                class="table table-auto table-striped w-full text-xs lg:text-sm"
            >
                <thead class="">
                    <tr>
                        <th class="px-4 py-2">
                            Filename
                            <!-- ({$lq__event_file_obj_li?.length}&times;) -->
                        </th>
                        <th
                            class="px-4 py-2"
                            class:hidden={!show_direct_download}
                        >
                            Link
                        </th>
                        <th class="px-4 py-2">Size</th>
                        <th class="px-4 py-2">Uploaded</th>
                        {#if show_location_fields}
                            <th class="px-4 py-2">Location</th>
                        {/if}
                        {#if show_session_fields}
                            <th
                                class="px-4 py-2"
                                class:hidden={hide_session_code}
                            >
                                Code
                            </th>
                            <th class="px-4 py-2"> Session </th>
                            <th class="px-4 py-2">Start datetime</th>
                        {/if}
                        {#if show_presentation_fields}
                            <th class="px-4 py-2">Presentation</th>
                            <th class="px-4 py-2">Presentation time</th>
                        {/if}
                        <th class="px-4 py-2">Name</th>
                        <!-- <th class="px-4 py-2">Email</th> -->
                        <!-- <th class="px-4 py-2">Agree</th> -->
                    </tr>
                </thead>
                <tbody class="">
                    {#each $lq__event_file_obj_li as event_file_obj}
                        <tr class:dim={event_file_obj?.hide}>
                            <td class="px-4 py-2">
                                <AE_Comp_Hosted_Files_Download_Button
                                    hosted_file_id={event_file_obj?.hosted_file_id}
                                    hosted_file_obj={event_file_obj}
                                    show_divider={true}
                                    {show_direct_download}
                                    max_filename={50}
                                    classes="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 min-w-72"
                                />
                                <!-- {event_file_obj?.filename} -->
                            </td>
                            <td
                                class="px-4 py-2 flex flex-col gap-0.5"
                                class:hidden={!show_direct_download}
                            >
                                <div
                                    class:hidden={!show_direct_download}
                                    class="flex flex-row gap-0.5"
                                >
                                    <span class="text-xs text-gray-500 w-32">
                                        Original:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/download?filename={ae_util.clean_filename(
                                            event_file_obj?.filename
                                        )}&key={$ae_api.account_id}"
                                        class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                                        title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256?.slice(0, 10) ?? 'N/A'}\nHosted ID: ${event_file_obj?.hosted_file_id} Event File ID: ${event_file_obj?.event_file_id}`}
                                    >
                                        <span class="fas fa-download mx-1"
                                        ></span>
                                        <span class="hidden"> Download </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&key=${$ae_api.account_id}`
                                        )}
                                        btn_text="Copy Link"
                                        btn_title="Copy the direct download file link: {ae_util.clean_filename(
                                            event_file_obj?.filename ??
                                                'unknown'
                                        )}"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>

                                <div
                                    class="flex flex-row gap-0.5"
                                    class:hidden={!show_direct_download}
                                >
                                    <span class="text-xs text-gray-500 w-32">
                                        Session Name:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/v3/action/event_file/{event_file_obj?.event_file_id}/download?filename={event_file_obj?.event_session_code}-{ae_util
                                            .clean_filename(
                                                event_file_obj?.event_presentation_name
                                            )
                                            .substring(
                                                0,
                                                20
                                            )}-{ae_util.clean_filename(
                                            event_file_obj?.event_presenter_full_name
                                        )}.{event_file_obj?.extension}&key={$ae_api.account_id}"
                                        class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                                        title={`Download renamed with session name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
                                    >
                                        <span class="fas fa-download mx-1"
                                        ></span>
                                        <span class="hidden"> Renamed </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
                                        )}
                                        btn_text="Copy Renamed"
                                        btn_title="Copy the renamed file link"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>

                                <div
                                    class:hidden={!show_direct_download}
                                    class="flex flex-row gap-0.5"
                                >
                                    <span class="text-xs text-gray-500 w-32">
                                        Presentation Name:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/download?filename={event_file_obj?.event_session_code}-{ae_util
                                            .clean_filename(
                                                event_file_obj?.event_presentation_name
                                            )
                                            .substring(
                                                0,
                                                20
                                            )}-{ae_util.clean_filename(
                                            event_file_obj?.event_presenter_full_name
                                        )}.{event_file_obj?.extension}&key=${$ae_api.account_id}"
                                        class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                                        title={`Download renamed with presentation name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
                                    >
                                        <span class="fas fa-download mx-1"
                                        ></span>
                                        <span class="hidden"> Renamed </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
                                        )}
                                        btn_text="Copy Renamed"
                                        btn_title="Copy the renamed file link"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>
                            </td>
                            <td class="px-4 py-2"
                                >{ae_util.format_bytes(
                                    event_file_obj?.file_size || event_file_obj?.hosted_file_size
                                )}</td
                            >
                            <td class="px-4 py-2">
                                <div>
                                    <span>
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.created_on,
                                            'dddd'
                                        )}
                                    </span>
                                    <span>
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.created_on,
                                            'date_long_month_day'
                                        )}
                                    </span>
                                </div>
                                <span
                                    class:bg-yellow-200={ae_util.is_datetime_recent(
                                        {
                                            datetime:
                                                event_file_obj?.created_on,
                                            minutes: 30
                                        }
                                    )}
                                    class:bg-green-200={ae_util.is_datetime_recent(
                                        {
                                            datetime:
                                                event_file_obj?.created_on,
                                            minutes: 240
                                        }
                                    )}
                                    class:bg-blue-200={ae_util.is_datetime_recent(
                                        {
                                            datetime:
                                                event_file_obj?.created_on,
                                            minutes: 2880
                                        }
                                    )}
                                >
                                    {ae_util.iso_datetime_formatter(
                                        event_file_obj?.created_on,
                                        'time_12_short'
                                    )}
                                </span>
                            </td>
                            {#if show_location_fields}
                                <td class="px-4 py-2 lg:text-xs">
                                    {#if event_file_obj?.event_location_id}
                                        <!-- <span class="fas fa-map-marker-alt"></span> -->
                                        {event_file_obj?.event_location_name}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                            {/if}

                            {#if show_session_fields}
                                <td
                                    class="px-4 py-2 lg:text-xs"
                                    class:hidden={hide_session_code}
                                >
                                    {event_file_obj?.event_session_code ??
                                        '-- not set --'}
                                </td>
                                <td class="px-4 py-2 lg:text-xs">
                                    <span class="fas fa-chalkboard-teacher"
                                    ></span>
                                    <a
                                        href="/events/{event_file_obj?.event_id}/session/{event_file_obj?.event_session_id}"
                                        class="text-blue-500 underline hover:text-blue-800"
                                    >
                                        {event_file_obj?.event_session_name}
                                    </a>
                                </td>
                                <td class="px-4 py-2"
                                    >{ae_util.iso_datetime_formatter(
                                        event_file_obj?.event_session_start_datetime,
                                        'datetime_iso_12_no_seconds'
                                    )}</td
                                >
                            {/if}
                            {#if show_presentation_fields}
                                <td class="px-4 py-2 lg:text-xs">
                                    {#if event_file_obj?.event_presentation_id}
                                        {event_file_obj?.event_presentation_name}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                                <td class="px-4 py-2">
                                    {#if event_file_obj?.event_presentation_id}
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.event_presentation_start_datetime,
                                            'time_12_short'
                                        )}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                            {/if}
                            <td class="px-4 py-2">
                                {#if event_file_obj?.event_presenter_id}
                                    <span class="fas fa-user"></span>
                                    <a
                                        href="/events/{event_file_obj?.event_id}/presenter/{event_file_obj?.event_presenter_id}"
                                        class="text-blue-500 underline hover:text-blue-800"
                                    >
                                        {event_file_obj?.event_presenter_full_name}
                                    </a>
                                {:else}
                                    <!-- <span class="text-gray-500">--</span> -->
                                    {@html ae_snip.html__not_set}
                                {/if}
                            </td>

                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <p class="text-sm">No files available to show.</p>
    {/if}
</section>

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