"use client";

import { useEffect } from "react";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { defaultSettings } from "@/lib/defaults";
import { defaultThemeColors } from "@/lib/theme-palettes";
import type { SiteSettings, SiteThemeColors } from "@/types/models";

function resolveThemeColors(settings: SiteSettings): SiteThemeColors {
  return {
    ...defaultThemeColors(),
    ...(settings.themeColors ?? {}),
  };
}

/** Firestore ayarlarındaki `themeColors` değerlerini `:root` CSS değişkenlerine yazar */
export function SiteTheme() {
  const { data } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );

  useEffect(() => {
    const tc = resolveThemeColors(data);
    const root = document.documentElement;
    root.style.setProperty("--navy", tc.navy);
    root.style.setProperty("--navy-soft", tc.navySoft);
    root.style.setProperty("--gold", tc.gold);
    root.style.setProperty("--gold-dark", tc.goldDark);
    root.style.setProperty("--page", tc.page);
    root.style.setProperty("--muted", tc.muted);
    root.style.setProperty("--line", tc.line);
  }, [data]);

  return null;
}