'use client';

/**
 * The client half of hydration, and it is invisible: the server (`renderToStream`
 * from `@tmonier/effract/ssr`) embeds the settled state — serializable-atom
 * values and resolved query results — as one JSON `<script>` after the HTML, and
 * `mount` wraps every tree in {@link AutoSeed}, which finds that script and seeds
 * atoms and the query cache *before the first render reads them*. SSR therefore
 * hydrates with no mismatch and no refetch (#48, #49), and there is nothing to
 * call: no script (a fresh CSR, a non-SSR page) and it is a no-op.
 */
import { useRef, type ReactNode } from 'react';
import { hydrate } from '#infrastructure/reactivity-core.ts';
import {
  runtimeScopeOf,
  seedQuery,
  type SeededQuery,
} from '#infrastructure/react/suspensable-store.ts';
import { useEffractRuntime } from '#infrastructure/react/runtime.tsx';

/** The marker attribute of the state script `renderToStream` appends. */
export const STATE_SCRIPT_ATTRIBUTE = 'data-effract-state';

/** The payload `renderToStream` embeds and {@link AutoSeed} reads back. */
export interface EmbeddedState {
  /** Serializable-atom values by `serialKey` (a `dehydrate()` payload). */
  readonly atoms?: Record<string, unknown>;
  /** Server-resolved query results to seed into the mounting runtime's cache. */
  readonly queries?: ReadonlyArray<SeededQuery>;
}

/**
 * Parse each state script once; a malformed script throws (a real defect — the
 * payload is machine-written), it is never silently ignored.
 */
const parsedScripts = new WeakMap<Element, EmbeddedState>();
/**
 * Atoms are a module-global registry, so they are seeded once per script — a
 * second `mount` on the same page must not clobber values the user has changed
 * since the first seeded. Queries, by contrast, are per-runtime and re-seed for
 * each mount (into its own scope; an already-live key is left alone).
 */
const atomsSeeded = new WeakSet<Element>();

const embeddedState = (): { script: Element; state: EmbeddedState } | null => {
  if (typeof document === 'undefined') {
    return null; // server render, or a non-DOM client — nothing to seed
  }
  const script = document.querySelector(`script[${STATE_SCRIPT_ATTRIBUTE}]`);
  if (script === null || script.textContent === null || script.textContent === '') {
    return null; // fresh CSR — no server state
  }
  let state = parsedScripts.get(script);
  if (state === undefined) {
    state = JSON.parse(script.textContent) as EmbeddedState;
    parsedScripts.set(script, state);
  }
  return { script, state };
};

/**
 * Seed server state once, in render (synchronously, before children read it).
 * Ref-guarded so a re-render / StrictMode double-invoke does not re-seed and
 * clobber values the user has since changed.
 */
export const AutoSeed = ({ children }: { readonly children?: ReactNode }): ReactNode => {
  const runtime = useEffractRuntime();
  const seeded = useRef(false);
  if (!seeded.current) {
    seeded.current = true;
    const found = embeddedState();
    if (found !== null) {
      const { script, state } = found;
      if (state.atoms !== undefined && !atomsSeeded.has(script)) {
        atomsSeeded.add(script);
        hydrate(state.atoms);
      }
      if (state.queries !== undefined) {
        const runtimeScope = runtimeScopeOf(runtime);
        for (const query of state.queries) {
          seedQuery(runtimeScope, query.key, query.value, query.fetchedAt);
        }
      }
    }
  }
  return children;
};