"use client";

import { useEffect, useRef } from "react";

import { applyUiPrefsLocally } from "@/lib/preferences/apply-ui-prefs-locally";
import type { PreferenceValueMap } from "@/lib/preferences/preferences-config";
import { syncPreferenceCookies } from "@/lib/preferences/sync-preference-cookies";
import { usePreferencesStore } from "@/stores/preferences/preferences-provider";

/**
 * 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 setThemeMode = usePreferencesStore((s) => s.setThemeMode);
  const setThemePreset = usePreferencesStore((s) => s.setThemePreset);
  const setFont = usePreferencesStore((s) => s.setFont);
  const setContentLayout = usePreferencesStore((s) => s.setContentLayout);
  const setNavbarStyle = usePreferencesStore((s) => s.setNavbarStyle);
  const setSidebarVariant = usePreferencesStore((s) => s.setSidebarVariant);
  const setSidebarCollapsible = usePreferencesStore((s) => s.setSidebarCollapsible);

  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;

    applyUiPrefsLocally(uiPrefs);
    setThemeMode(uiPrefs.theme_mode);
    setThemePreset(uiPrefs.theme_preset);
    setFont(uiPrefs.font);
    setContentLayout(uiPrefs.content_layout);
    setNavbarStyle(uiPrefs.navbar_style);
    setSidebarVariant(uiPrefs.sidebar_variant);
    setSidebarCollapsible(uiPrefs.sidebar_collapsible);
    void syncPreferenceCookies(uiPrefs);
  }, [
    uiPrefs,
    userId,
    setThemeMode,
    setThemePreset,
    setFont,
    setContentLayout,
    setNavbarStyle,
    setSidebarVariant,
    setSidebarCollapsible,
  ]);

  return null;
}