import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useEffect } from "react";
import { getPublicSettings } from "@/lib/public-settings.functions";

export const THEMES = [
  { id: "ocean", label: "Ocean", swatch: ["#0A2540", "#00BFFF"] },
  { id: "emerald", label: "Emerald", swatch: ["#0F766E", "#5EEAD4"] },
  { id: "royal", label: "Royal", swatch: ["#4F46E5", "#C084FC"] },
  { id: "sunset", label: "Sunset", swatch: ["#DC2626", "#FBBF24"] },
  { id: "midnight", label: "Midnight", swatch: ["#0F172A", "#38BDF8"] },
  { id: "rose", label: "Rose", swatch: ["#E11D48", "#FDA4AF"] },
  { id: "opay", label: "OPay Lime", swatch: ["#0F766E", "#A3E635"] },
  { id: "charcoal", label: "Charcoal", swatch: ["#374151", "#F59E0B"] },
] as const;

export function ThemePalette() {
  const fetch = useServerFn(getPublicSettings);
  const { data } = useQuery({
    queryKey: ["public-settings"],
    queryFn: () => fetch(),
    staleTime: 60_000,
  });
  useEffect(() => {
    if (typeof document === "undefined") return;
    const t = data?.active_theme ?? "ocean";
    document.documentElement.setAttribute("data-theme", t);
  }, [data?.active_theme]);
  return null;
}