"use client";

import { useEffect } from "react";

export function FaviconUpdater() {
  useEffect(() => {
    // 从 API 获取最新的 favicon 设置
    fetch("/api/site-settings")
      .then((res) => res.json())
      .then((settings) => {
        if (settings.favicon) {
          const faviconUrl = settings.favicon;
          const timestamp = Date.now();
          const urlWithCache = `${faviconUrl}${faviconUrl.includes("?") ? "&" : "?"}v=${timestamp}`;

          // 移除所有旧的 favicon link 标签
          const oldLinks = document.querySelectorAll('link[rel*="icon"]');
          oldLinks.forEach((link) => link.remove());

          // 添加新的 favicon link 标签
          const link = document.createElement("link");
          link.rel = "icon";
          link.type = "image/x-icon";
          link.href = urlWithCache;
          document.head.appendChild(link);

          // 添加 Apple touch icon
          const appleLink = document.createElement("link");
          appleLink.rel = "apple-touch-icon";
          appleLink.href = urlWithCache;
          document.head.appendChild(appleLink);

          // 添加 shortcut icon
          const shortcutLink = document.createElement("link");
          shortcutLink.rel = "shortcut icon";
          shortcutLink.href = urlWithCache;
          document.head.appendChild(shortcutLink);
        }
      })
      .catch((error) => {
        console.error("[Favicon] Error updating favicon:", error);
      });
  }, []);

  return null;
}