"use client";

import { useTheme } from "next-themes";
import { useEffect } from "react";

export function ThemeColorManager() {
  const { theme, systemTheme } = useTheme();

  useEffect(() => {
    const updateThemeColor = () => {
      const currentTheme = theme === "system" ? systemTheme : theme;
      const meta = document.querySelector('meta[name="theme-color"]');

      if (!meta) {
        const newMeta = document.createElement("meta");
        newMeta.name = "theme-color";
        document.head.appendChild(newMeta);
      }

      const themeColor =
        currentTheme === "dark"
          ? "hsl(30 15% 8%)" // 深色模式背景色
          : "hsl(0 0% 98%)"; // 浅色模式背景色

      document
        .querySelector('meta[name="theme-color"]')
        ?.setAttribute("content", themeColor);
    };

    // Update on mount and theme change
    updateThemeColor();

    // Listen for system theme changes
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", updateThemeColor);

    return () => mediaQuery.removeEventListener("change", updateThemeColor);
  }, [theme, systemTheme]);

  return null;
}