"use client";

import { useEffect } from "react";
import { loadTheme, loadThemeFromServer, applyTheme } from "@/lib/stores/theme";

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // 1. localStorage 캐시에서 즉시 적용 (깜빡임 방지)
    const cached = loadTheme();
    applyTheme(cached);

    // 2. 서버에서 최신 테마 로드 → 캐시 업데이트 → 재적용
    loadThemeFromServer().then((server) => {
      applyTheme(server);
    });

    // localStorage 변경 감지 (다른 탭에서 변경 시)
    const handler = (e: StorageEvent) => {
      if (e.key === "nexus-theme") {
        const updated = loadTheme();
        applyTheme(updated);
      }
    };
    window.addEventListener("storage", handler);
    return () => window.removeEventListener("storage", handler);
  }, []);

  return <>{children}</>;
}
