"use client"

import { useLayoutEffect } from "react"
import { useQueryClient } from "@tanstack/react-query"
import { useDemoContactsStore } from "@/lib/demo/demo-contacts-store"
import { useSessionGuardStore } from "@/lib/auth/session-guard-store"

export const DEMO_CONTACTS_QUERY_ROOT = ["demo", "contacts"] as const

export function DemoContactsBootstrap() {
  const queryClient = useQueryClient()

  useLayoutEffect(() => {
    useSessionGuardStore.getState().clear()
    useDemoContactsStore.getState().reset()
    queryClient.removeQueries({ queryKey: DEMO_CONTACTS_QUERY_ROOT })
    return () => useDemoContactsStore.setState({ active: false, contacts: [] })
  }, [queryClient])

  return null
}