import { useEffect, useState } from "react";
import { ConfigProvider, theme } from "antd";
import AppRoutes from "./routes";
import { getOpenPlatformConfig } from "./api";
import {useThemeStore} from "./store/themeStore";
import type { SysPlatformConfig } from "./types";

export default function App() {
  const [config, setConfig] = useState<SysPlatformConfig | null>(null);
  const { colorPrimary, themeMode, initTheme } = useThemeStore();
  useEffect(() => {
    initTheme();
    const fetchConfig = async () => {
      try {
        const data = await getOpenPlatformConfig();
        setConfig(data);
        if (data.projectName) {
          document.title = data.projectName;
        }
        if (data.iconUrl) {
          let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
          if (!link) {
            link = document.createElement('link');
            link.rel = 'icon';
            document.getElementsByTagName('head')[0].appendChild(link);
          }
          link.href = data.iconUrl;
        }
        // Save to sessionStorage for other components
        sessionStorage.setItem("platformConfig", JSON.stringify(data));
      } catch (e) {
        console.error("Failed to load platform config", e);
      }
    };
    fetchConfig();
  }, [initTheme]);

  return (
      <ConfigProvider
          theme={{
            algorithm: themeMode === 'tech' ? theme.darkAlgorithm : theme.defaultAlgorithm,
            token: {
              colorPrimary: colorPrimary,
              borderRadius: 10,
              colorBgLayout: 'transparent',
            },
            components: {
              Card: {
                borderRadiusLG: 16
              }
            }
          }}
      >
        <AppRoutes />
      </ConfigProvider>
  );
}