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

interface EmbedAuthWrapperProps {
    children: JSX.Element;
    skipAuth?: boolean;
}

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

    const handleMessage = (event: MessageEvent) => {
        if (props.skipAuth) return; // Don't process auth messages in skip mode
        const { data } = event;
        console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type);
        if (data?.type === "TASGRID_AUTH" && data.token) {
            console.log("[DEBUG] Received TasGrid auth payload, hydrating...");
            // Save triggers pb.authStore.onChange, which App.tsx is already listening to and calling initStore()
            pb.authStore.save(data.token, data.user || null);
            setIsHydrated(true);
        }
    };

    onMount(() => {
        console.log('[DEBUG] EmbedAuthWrapper mounted. Initial isHydrated:', isHydrated(), 'skipAuth:', props.skipAuth);
        window.addEventListener("message", handleMessage);
    });

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

    return (
        <Show
            when={isHydrated() || props.skipAuth}
            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>
    );
};