"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 { parseUiPrefs } from "@/lib/preferences/ui-prefs";
import { usePreferencesStore } from "@/stores/preferences/preferences-provider";

/**
 * Loads admin Appearance prefs once and applies them for the signed-in backend user.
 */
export function DashboardUiPrefsHydrator({ userId }: { 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 (!userId) return;
    let cancelled = false;

    async function load() {
      try {
        const response = await fetch("/dashboard/settings/appearance/ui-prefs", {
          method: "GET",
          credentials: "same-origin",
          headers: { Accept: "application/json" },
          cache: "no-store",
        });
        const data = (await response.json().catch(() => null)) as
          | { status?: string; uiPrefs?: unknown }
          | null;
        if (cancelled || !response.ok || !data || data.status === "error") return;

        const prefs: PreferenceValueMap = parseUiPrefs(data.uiPrefs);
        const key = `${userId}:${JSON.stringify(prefs)}`;
        if (appliedKey.current === key) return;
        appliedKey.current = key;

        applyUiPrefsLocally(prefs);
        setThemeMode(prefs.theme_mode);
        setThemePreset(prefs.theme_preset);
        setFont(prefs.font);
        setContentLayout(prefs.content_layout);
        setNavbarStyle(prefs.navbar_style);
        setSidebarVariant(prefs.sidebar_variant);
        setSidebarCollapsible(prefs.sidebar_collapsible);
        void syncPreferenceCookies(prefs);
      } catch {
        // Keep cookie/boot defaults if the prefs endpoint is unavailable.
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, [
    userId,
    setThemeMode,
    setThemePreset,
    setFont,
    setContentLayout,
    setNavbarStyle,
    setSidebarVariant,
    setSidebarCollapsible,
  ]);

  return null;
}