<script lang="ts">
    import { onMount } from "svelte";
    import { ipfsService } from "../services/ipfs.service";

    let initialized = false;
    let initializing = true;
    let error: string | null = null;
    let mockMode = false;

    onMount(async () => {
        try {
            initializing = true;
            initialized = await ipfsService.initialize();
            console.log("IPFS initialization status:", initialized);

            // Even if initialization returns true, check if IPFS is actually initialized
            if (!ipfsService.isInitialized()) {
                console.warn(
                    "IPFS service reports success but is not fully initialized",
                );
                mockMode = true;
            }
        } catch (err: any) {
            error = err.message || "Unknown error during IPFS initialization";
            console.error("Failed to initialize IPFS:", err);
            mockMode = true;
        } finally {
            initializing = false;
        }
    });
</script>

{#if initializing}
    <div
        class="fixed top-0 left-0 right-0 bg-black/70 text-white py-2 px-4 z-50 flex justify-center"
    >
        <div class="flex items-center gap-2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="animate-spin"
            >
                <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
            </svg>
            <span>Initializing IPFS...</span>
        </div>
    </div>
{:else if error}
    <div
        class="fixed top-0 left-0 right-0 bg-red-600/90 text-white py-2 px-4 z-50 flex justify-center"
    >
        <div class="flex items-center gap-2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            <span
                >IPFS initialization issue: {error} - Running in demo mode</span
            >
        </div>
    </div>
{:else if mockMode}
    <div
        class="fixed top-0 left-0 right-0 bg-amber-500/90 text-white py-2 px-4 z-50 flex justify-center"
    >
        <div class="flex items-center gap-2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <path
                    d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
                ></path>
                <line x1="12" y1="9" x2="12" y2="13"></line>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            <span>IPFS running in demo mode with mock functionality</span>
        </div>
    </div>
{/if}

<slot />
