"use client";

import { useEffect, useRef } from "react";

import {
  applyUiPrefsToStore,
  useUiPrefsStoreSetters,
} from "@/app/dashboard/_lib/ui-prefs-client";
import type { PreferenceValueMap } from "@/lib/preferences/preferences-config";

/**
 * Applies server-loaded uiPrefs (from guest/me) to cookies, DOM, and the preferences store
 * so theme/layout follow the account across devices after login/session hydrate.
 */
export function UiPrefsSessionHydrator({
  uiPrefs,
  userId,
}: {
  uiPrefs: PreferenceValueMap | null;
  userId?: number | null;
}) {
  const appliedKey = useRef<string | null>(null);
  const setters = useUiPrefsStoreSetters();

  useEffect(() => {
    if (!uiPrefs) return;

    // Key by user so switching accounts always re-applies even if prefs look identical.
    const key = `${userId ?? "anon"}:${JSON.stringify(uiPrefs)}`;
    if (appliedKey.current === key) return;
    appliedKey.current = key;

    applyUiPrefsToStore(uiPrefs, setters);
  }, [uiPrefs, userId, setters]);

  return null;
}