import { computed, ref } from "vue";
import { useSettingsStore } from "@/stores/settingsStore";
import { ThemeMode } from "@/types";
import { darkTheme } from "naive-ui";

export type Platform = "windows" | "macos" | "linux" | "ios" | "android" | "web";

export function useTheme() {
  const settingsStore = useSettingsStore();
  const platform = ref<Platform>("web");

  const themeMode = computed(() => settingsStore.settings.theme);
  const systemPrefersDark = computed(() => {
    if (typeof window !== "undefined" && window.matchMedia) {
      return window.matchMedia("(prefers-color-scheme: dark)").matches;
    }
    return false;
  });

  const isDark = computed(() => {
    if (themeMode.value === ThemeMode.System) {
      return systemPrefersDark.value;
    }
    return themeMode.value === ThemeMode.Dark;
  });

  const naiveTheme = computed(() => isDark.value ? darkTheme : null);

  const currentTheme = computed(() => {
    return isDark.value ? "dark" : "light";
  });

  const setTheme = async (mode: ThemeMode) => {
    await settingsStore.setTheme(mode);
    updateThemeClass();
  };

  const toggleTheme = async () => {
    const current = themeMode.value;
    if (current === ThemeMode.Light) {
      await setTheme(ThemeMode.Dark);
    } else if (current === ThemeMode.Dark) {
      await setTheme(ThemeMode.System);
    } else {
      await setTheme(ThemeMode.Light);
    }
  };

  const toggleLightDark = async () => {
    if (themeMode.value === ThemeMode.System) {
      await setTheme(systemPrefersDark.value ? ThemeMode.Light : ThemeMode.Dark);
    } else {
      await setTheme(themeMode.value === ThemeMode.Light ? ThemeMode.Dark : ThemeMode.Light);
    }
  };

  const themeClasses = computed(() => {
    return currentTheme.value;
  });

  const getThemeClass = (lightClass: string, darkClass: string) => {
    return isDark.value ? darkClass : lightClass;
  };

  const themeIcon = computed(() => {
    switch (themeMode.value) {
      case ThemeMode.Light:
        return "sunny";
      case ThemeMode.Dark:
        return "moon";
      case ThemeMode.System:
        return "desktop";
      default:
        return "desktop";
    }
  });

  const themeLabel = computed(() => {
    switch (themeMode.value) {
      case ThemeMode.Light:
        return "Light";
      case ThemeMode.Dark:
        return "Dark";
      case ThemeMode.System:
        return "System";
      default:
        return "System";
    }
  });

  const updateThemeClass = () => {
    const htmlEl = document.documentElement;
    if (isDark.value) {
      htmlEl.classList.add("dark");
    } else {
      htmlEl.classList.remove("dark");
    }
    htmlEl.setAttribute("data-theme", currentTheme.value);
  };

  const detectPlatform = () => {
    const userAgent = navigator.userAgent.toLowerCase();
    
    if (userAgent.includes("win")) {
      platform.value = "windows";
    } else if (userAgent.includes("mac")) {
      platform.value = "macos";
    } else if (userAgent.includes("linux")) {
      platform.value = "linux";
    } else if (userAgent.includes("android")) {
      platform.value = "android";
    } else if (userAgent.includes("iphone") || userAgent.includes("ipad")) {
      platform.value = "ios";
    } else {
      platform.value = "web";
    }

    document.documentElement.setAttribute("data-platform", platform.value);
  };

  const initTheme = async () => {
    await settingsStore.loadSettings();
    detectPlatform();
    updateThemeClass();
    
    if (window.matchMedia) {
      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
        if (themeMode.value === ThemeMode.System) {
          updateThemeClass();
        }
      });
    }
  };

  return {
    themeMode,
    isDark,
    currentTheme,
    systemPrefersDark,
    themeClasses,
    themeIcon,
    themeLabel,
    platform,
    setTheme,
    toggleTheme,
    toggleLightDark,
    getThemeClass,
    initTheme,
    naiveTheme
  };
}
