import { type Component, type JSX, onMount, onCleanup, createSignal, Show } from "solid-js";
import { pb } from "@/lib/pocketbase";
import { initStore } from "@/store";

interface EmbedAuthWrapperProps {
    children: JSX.Element;
}

export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
    const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);

    const handleMessage = (event: MessageEvent) => {
        // You might want to add origin validation here if you know the sibling app domains
        // if (event.origin !== "https://sibling-app.com") return;

        const { data } = event;
        if (data?.type === "TASGRID_AUTH" && data.token) {
            console.log("Received TasGrid auth payload via postMessage");

            // Hydrate PocketBase auth store
            pb.authStore.save(data.token, data.user || null);

            // Re-initialize store with new auth context
            initStore().then(() => {
                setIsHydrated(true);
            });
        }
    };

    onMount(() => {
        window.addEventListener("message", handleMessage);
    });

    onCleanup(() => {
        window.removeEventListener("message", handleMessage);
    });

    return (
        <Show
            when={isHydrated()}
            fallback={
                <div class="flex flex-col items-center justify-center h-full space-y-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                    <p class="text-sm text-muted-foreground">Waiting for authentication...</p>
                </div>
            }
        >
            {props.children}
        </Show>
    );
};