<script lang="ts">
import { onMount } from 'svelte';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
import AE_Comp_Hosted_Files_Download_Button from '$lib/elements/ae_comp__hosted_files_download_button.svelte';
import * as Lucide from '@lucide/svelte';

let hosted_files: any[] = $state([]);
let large_file_obj: any = $state(null);
let loading = $state(true);

// Testing Toggles
let test_direct_download = $state(false);

const LARGE_FILE_ID = 'sPw1he_RGCW';
const test_ids = [
    'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
    'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
    'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
    'INVALID_ID_TEST'
];

onMount(async () => {
    // Load the large file specifically first
    large_file_obj = await load_ae_obj_id__hosted_file({
        api_cfg: $ae_api,
        hosted_file_id: LARGE_FILE_ID,
        log_lvl: 1
    });

    // Fallback for large file if API doesn't have it (for UI testing)
    if (!large_file_obj) {
        large_file_obj = {
            id: LARGE_FILE_ID,
            hosted_file_id: LARGE_FILE_ID,
            filename: 'Large_Test_File_Fallback.zip',
            extension: 'zip',
            hash_sha256: 'pending...'
        };
    }

    const promises = test_ids.map((id) =>
        load_ae_obj_id__hosted_file({
            api_cfg: $ae_api,
            hosted_file_id: id,
            log_lvl: 1
        })
    );

    const results = await Promise.all(promises);
    hosted_files = results.filter((f: any) => f !== null) as any[];

    // Add a fake object for the invalid ID test
    hosted_files.push({
        id: 'INVALID_ID_TEST',
        hosted_file_id: 'INVALID_ID_TEST',
        filename: 'non_existent_file.txt',
        extension: 'txt',
        hash_sha256: '0000000000'
    });

    loading = false;
});
</script>

<!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
<div class="h-full w-full overflow-x-hidden overflow-y-auto bg-transparent">
    <div class="container mx-auto space-y-8 p-4 pb-20">
        <header
            class="bg-surface-50-900-token rounded-container flex flex-col items-start justify-between gap-4 border border-gray-500 p-6 shadow-xl md:flex-row md:items-center">
            <div class="space-y-1">
                <h1 class="h1 flex items-center gap-3">
                    <Lucide.Download class="text-primary-500" /> Hosted Files Testing
                </h1>
                <p class="text-sm opacity-60">
                    Testing the AE_Comp_Hosted_Files_Download_Button component
                </p>
            </div>

            <div
                class="flex flex-wrap items-center gap-3 rounded-lg border border-white/10 bg-black/20 p-3">
                <div
                    class="flex items-center gap-2 border-r border-white/10 pr-3">
                    <span class="text-[10px] font-bold uppercase opacity-50"
                        >Edit Mode</span>
                    <span
                        class="badge {$ae_loc.edit_mode
                            ? 'variant-filled-success'
                            : 'variant-filled-surface'}">
                        {$ae_loc.edit_mode ? 'ON' : 'OFF'}
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <span class="text-[10px] font-bold uppercase opacity-50"
                        >Direct Download</span>
                    <button
                        class="btn btn-sm {test_direct_download
                            ? 'variant-filled-primary'
                            : 'variant-soft-surface'}"
                        onclick={() =>
                            (test_direct_download = !test_direct_download)}>
                        {test_direct_download
                            ? 'Anchor Mode (<a>)'
                            : 'Action Mode (<button>)'}
                    </button>
                </div>
            </div>
        </header>

        <!-- Dedicated Large File Section -->
        <div
            class="card variant-soft-primary border-primary-500 space-y-4 border-2 p-6 shadow-xl">
            <header
                class="border-primary-500/30 flex items-center justify-between border-b pb-2">
                <h2 class="h2 flex items-center gap-2">
                    <Lucide.Zap class="text-warning-500" /> Large File Progress Test
                </h2>
                <div class="flex gap-2">
                    <span class="badge variant-filled-warning animate-pulse"
                        >Testing Percentage</span>
                    {#if test_direct_download}
                        <span class="badge variant-filled-secondary"
                            >Direct Link</span>
                    {/if}
                </div>
            </header>

            <p class="text-sm italic opacity-80">
                Use this file to verify the <strong>percentage counter</strong>
                and <strong>loading spinner</strong>. This file is ~100MB+,
                which should provide ample time to observe the progress state.
            </p>

            {#if large_file_obj}
                <div
                    class="rounded-container border-primary-500/20 flex flex-col items-center justify-between gap-4 border bg-black/20 p-4 md:flex-row">
                    <div class="flex items-center gap-4">
                        <div class="bg-primary-500/20 rounded-lg p-3">
                            <Lucide.FileArchive size={32} />
                        </div>
                        <div>
                            <h3 class="text-lg font-bold">
                                {large_file_obj.filename}
                            </h3>
                            <p class="font-mono text-xs opacity-50">
                                ID: {LARGE_FILE_ID}
                            </p>
                        </div>
                    </div>

                    <div class="w-full md:w-auto">
                        <AE_Comp_Hosted_Files_Download_Button
                            hosted_file_id={LARGE_FILE_ID}
                            hosted_file_obj={large_file_obj}
                            show_direct_download={test_direct_download}
                            variant="filled"
                            color="primary"
                            classes="w-full md:min-w-64 py-4" />
                    </div>
                </div>
            {/if}
        </div>

        <div
            class="card variant-soft-surface space-y-4 border border-gray-500 p-6 shadow-lg">
            <h2 class="h2">Style & Variant Trials</h2>

            {#if loading}
                <div class="flex items-center justify-center gap-2 py-10">
                    <Lucide.LoaderCircle class="animate-spin" />
                    <span>Loading test metadata gallery...</span>
                </div>
            {:else}
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    {#each hosted_files as file (file.id)}
                        <div class="card variant-soft-secondary space-y-4 p-4">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="font-bold">{file.filename}</h3>
                                    <p class="font-mono text-xs opacity-60">
                                        ID: {file.id}
                                    </p>
                                </div>
                                <span
                                    class="badge variant-filled-primary uppercase"
                                    >{file.extension}</span>
                            </div>

                            <div
                                class="grid grid-cols-1 gap-4 pt-2 sm:grid-cols-2">
                                <div class="space-y-1">
                                    <p
                                        class="text-[10px] font-bold uppercase opacity-50">
                                        Variant: Tonal
                                    </p>
                                    <AE_Comp_Hosted_Files_Download_Button
                                        hosted_file_id={file.id}
                                        hosted_file_obj={file}
                                        show_direct_download={test_direct_download}
                                        variant="tonal"
                                        color="primary"
                                        classes="w-full" />
                                </div>

                                <div class="space-y-1">
                                    <p
                                        class="text-[10px] font-bold uppercase opacity-50">
                                        Variant: Filled
                                    </p>
                                    <AE_Comp_Hosted_Files_Download_Button
                                        hosted_file_id={file.id}
                                        hosted_file_obj={file}
                                        show_direct_download={test_direct_download}
                                        variant="filled"
                                        color="secondary"
                                        classes="w-full" />
                                </div>

                                <div class="space-y-1">
                                    <p
                                        class="text-[10px] font-bold uppercase opacity-50">
                                        Variant: Outline
                                    </p>
                                    <AE_Comp_Hosted_Files_Download_Button
                                        hosted_file_id={file.id}
                                        hosted_file_obj={file}
                                        show_direct_download={test_direct_download}
                                        variant="outline"
                                        color="tertiary"
                                        classes="w-full" />
                                </div>

                                <div class="space-y-1">
                                    <p
                                        class="text-[10px] font-bold uppercase opacity-50">
                                        Variant: Ghost
                                    </p>
                                    <AE_Comp_Hosted_Files_Download_Button
                                        hosted_file_id={file.id}
                                        hosted_file_obj={file}
                                        show_direct_download={test_direct_download}
                                        variant="ghost"
                                        color="surface"
                                        classes="w-full" />
                                </div>
                            </div>

                            <div class="border-surface-500/20 border-t pt-2">
                                <p
                                    class="text-[10px] font-bold uppercase opacity-50">
                                    Custom Label Snippet:
                                </p>
                                <AE_Comp_Hosted_Files_Download_Button
                                    hosted_file_id={file.id}
                                    hosted_file_obj={file}
                                    show_direct_download={test_direct_download}
                                    variant="tonal"
                                    color="success"
                                    classes="w-full mt-1">
                                    {#snippet label()}
                                        <Lucide.FileArchive
                                            size={16}
                                            class="mr-2" />
                                        <span>Download Source</span>
                                    {/snippet}
                                </AE_Comp_Hosted_Files_Download_Button>
                            </div>
                        </div>
                    {/each}
                </div>
            {/if}
        </div>

        <div
            class="card variant-soft-warning border-warning-500 border p-6 shadow-lg">
            <h3
                class="h3 text-warning-700 dark:text-warning-500 flex items-center gap-2 font-bold">
                <Lucide.TriangleAlert size={20} /> Edge Case: Missing Metadata
            </h3>
            <p class="mt-2 text-sm opacity-80">
                Testing the component when <code>hosted_file_id</code> or
                <code>hosted_file_obj</code> is missing.
            </p>
            <div class="mt-4 flex gap-4">
                <AE_Comp_Hosted_Files_Download_Button
                    hosted_file_id={null}
                    hosted_file_obj={null} />
            </div>
        </div>
    </div>
</div>
