"use client";

import { createContext, useContext } from "react";

import { footerNav, mainNav, siteConfig } from "@/lib/constants/site";
import type { CmsNavigationItem, CmsSiteSettings } from "@/lib/cms/types";

export type SiteData = {
  settings: CmsSiteSettings;
  mainNav: CmsNavigationItem[];
  footerNav: CmsNavigationItem[];
};

const SiteDataContext = createContext<SiteData | null>(null);

/** Used when header/footer render outside `(site)` layout (e.g. dashboard). */
const STATIC_SITE_DATA: SiteData = {
  settings: {
    name: siteConfig.name,
    tagline: siteConfig.tagline,
    description: siteConfig.description,
    url: siteConfig.url,
    email: siteConfig.email,
    phone: siteConfig.phone,
    promoBanner: siteConfig.promoBanner,
    social: { ...siteConfig.social },
    theme: { primaryAccent: "#c9a227", heroOverlayOpacity: 0.55 },
    heroBackgroundImage: "",
    aboutHeroImage: "",
  },
  mainNav: mainNav.map((item, i) => ({
    id: `static-${i}`,
    location: "main" as const,
    label: item.label,
    href: item.href,
    hint: "hint" in item ? item.hint : undefined,
    position: i,
    enabled: true,
  })),
  footerNav: footerNav.map((item, i) => ({
    id: `static-f-${i}`,
    location: "footer" as const,
    label: item.label,
    href: item.href,
    position: i,
    enabled: true,
  })),
};

export function SiteDataProvider({ data, children }: { data: SiteData; children: React.ReactNode }) {
  return <SiteDataContext.Provider value={data}>{children}</SiteDataContext.Provider>;
}

export function useSiteData(): SiteData {
  return useContext(SiteDataContext) ?? STATIC_SITE_DATA;
}

export function useSiteSettings() {
  return useSiteData().settings;
}

export function useMainNav() {
  return useSiteData().mainNav;
}

export function useFooterNav() {
  return useSiteData().footerNav;
}