import { ReactNode, useEffect } from "react";
import { useSiteSettingsRead } from "../hooks/useSiteSettings";

type BrandingState = {
  logoUrl: string;
  faviconUrl: string;
  primary: string;
  secondary: string;
  accent: string;
  bg: string;
  fontHeading: string;
  fontBody: string;
  headingScale: number;
};

type GeneralState = {
  siteName: string;
  tagline: string;
  description: string;
  seoTitle: string;
  seoDescription: string;
  seoKeywords: string;
  ogImage: string;
};

const BRANDING_DEFAULTS: BrandingState = {
  logoUrl: "/logo.svg",
  faviconUrl: "/favicon.ico",
  primary: "#0b6e3e",
  secondary: "#063019",
  accent: "#f5c400",
  bg: "#03120a",
  fontHeading: "Inter",
  fontBody: "Inter",
  headingScale: 100,
};

const GENERAL_DEFAULTS: GeneralState = {
  siteName: "DoItEasy",
  tagline: "Dedicated With Confidence.",
  description: "Enterprise-grade cloud, hosting, and managed IT solutions.",
  seoTitle: "DoItEasy - Cloud & Hosting Solutions",
  seoDescription: "Dedicated servers, VPS, managed IT, and cloud hosting.",
  seoKeywords: "cloud, hosting, vps, dedicated servers, managed it",
  ogImage: "",
};

export function SiteSettingsProvider({ children }: { children: ReactNode }) {
  const branding = useSiteSettingsRead<BrandingState>("branding", BRANDING_DEFAULTS);
  const general = useSiteSettingsRead<GeneralState>("general", GENERAL_DEFAULTS);

  // Apply CSS variables for branding
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--brand-primary", branding.primary);
    root.style.setProperty("--brand-secondary", branding.secondary);
    root.style.setProperty("--brand-accent", branding.accent);
    root.style.setProperty("--brand-bg", branding.bg);
    root.style.setProperty("--brand-font-heading", branding.fontHeading);
    root.style.setProperty("--brand-font-body", branding.fontBody);
    root.style.setProperty("--brand-heading-scale", String(branding.headingScale / 100));
  }, [branding]);

  // Apply favicon
  useEffect(() => {
    if (!branding.faviconUrl) return;
    let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null;
    if (!link) {
      link = document.createElement("link");
      link.rel = "icon";
      document.head.appendChild(link);
    }
    link.href = branding.faviconUrl;
  }, [branding.faviconUrl]);

  // Apply document title + meta description + OG tags
  useEffect(() => {
    if (general.seoTitle) document.title = general.seoTitle;
    else if (general.siteName) document.title = general.siteName;

    const setMeta = (name: string, content: string, isProperty = false) => {
      if (!content) return;
      const attr = isProperty ? "property" : "name";
      let el = document.querySelector(`meta[${attr}="${name}"]`) as HTMLMetaElement | null;
      if (!el) {
        el = document.createElement("meta");
        el.setAttribute(attr, name);
        document.head.appendChild(el);
      }
      el.content = content;
    };
    setMeta("description", general.seoDescription);
    setMeta("keywords", general.seoKeywords);
    setMeta("og:title", general.seoTitle || general.siteName, true);
    setMeta("og:description", general.seoDescription, true);
    if (general.ogImage) setMeta("og:image", general.ogImage, true);
  }, [general]);

  return <>{children}</>;
}