type ThemeMode = "light" | "dark";

const STORAGE_KEY = "signals-theme";

const themes: Record<ThemeMode, { background: string; surface: string }> = {
  light: {
    background: "#f3f6fb",
    surface: "#ffffff"
  },
  dark: {
    background: "#0f172a",
    surface: "#162033"
  }
};

export const useTheme = () => {
  const theme = useState<ThemeMode>("theme-mode", () => "light");
  const initialized = useState("theme-initialized", () => false);

  const applyTheme = (nextTheme: ThemeMode) => {
    if (!process.client) {
      return;
    }

    theme.value = nextTheme;

    const root = document.documentElement;
    root.dataset.theme = nextTheme;
    root.style.colorScheme = nextTheme;
    root.classList.toggle("app-dark", nextTheme === "dark");

    localStorage.setItem(STORAGE_KEY, nextTheme);

    const themeMeta = document.querySelector('meta[name="theme-color"]');
    const themeColor = themes[nextTheme].surface;

    if (themeMeta) {
      themeMeta.setAttribute("content", themeColor);
    }

    document.body.style.backgroundColor = themes[nextTheme].background;
  };

  const initializeTheme = () => {
    if (!process.client || initialized.value) {
      return;
    }

    const storedTheme = localStorage.getItem(STORAGE_KEY);
    const nextTheme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "light";

    applyTheme(nextTheme);
    initialized.value = true;
  };

  const toggleTheme = () => {
    applyTheme(theme.value === "dark" ? "light" : "dark");
  };

  return {
    theme: readonly(theme),
    initializeTheme,
    applyTheme,
    toggleTheme
  };
};