"use client";
/**
 * settingsContext.tsx
 * Global React context that provides parsed AppSettings + pages
 * fetched from /general_setting and /get_pages APIs.
 * Wrap your app with <SettingsProvider> once in providers.tsx.
 */

import { createContext, useContext, useMemo } from "react";
import {
  useGeneralSettings,
  usePages,
  useGetSocialLinks,
} from "@/hooks/useApi";
import { parseSettings, DEFAULT_SETTINGS, AppSettings } from "@/lib/settings";
import { IMAGES } from "@/branding";
import type { GeneralSettingItem } from "@/types";

/* ─── Page link type ─────────────────────────────────────────────────────────── */
export interface AppPage {
  title: string;
  url: string;
  icon?: string;
}
export interface SocialLink {
  id: number;
  name: string;
  image: string;
  url: string;
  status: number;
  created_at: string;
  updated_at: string;
}

/* ─── Context shape ──────────────────────────────────────────────────────────── */
interface SettingsContextValue {
  settings: AppSettings;
  pages: AppPage[];
  socialLinks: SocialLink[];
  /** Resolved app icon/logo — API `website_logo` setting, falling back to the bundled logo. */
  appIcon: string;
  isLoading: boolean;
}

const SettingsContext = createContext<SettingsContextValue>({
  settings: DEFAULT_SETTINGS,
  pages: [],
  socialLinks: [],
  appIcon: IMAGES.appLogo,
  isLoading: true,
});

/* ─── Provider ───────────────────────────────────────────────────────────────── */
export function SettingsProvider({ children }: { children: React.ReactNode }) {
  const { data: settingsData, isLoading: loadingSettings } =
    useGeneralSettings();
  const { data: pagesData, isLoading: loadingPages } = usePages();
  const { data: socialLinksData } = useGetSocialLinks();

  const settings = useMemo(() => {
    const items = settingsData?.result ?? [];
    return items.length
      ? parseSettings(items as GeneralSettingItem[])
      : DEFAULT_SETTINGS;
  }, [settingsData]);

  const pages: AppPage[] = useMemo(() => {
    return (pagesData?.result as AppPage[] | undefined) ?? [];
  }, [pagesData]);

  const socialLinks: SocialLink[] = useMemo(() => {
    return (socialLinksData?.result as SocialLink[] | undefined) ?? [];
  }, [socialLinksData]);

  const appIcon = settings.websiteLogo || IMAGES.appLogo;

  const ctxValue = useMemo(
    () => ({
      settings,
      pages,
      socialLinks,
      appIcon,
      isLoading: loadingSettings || loadingPages,
    }),
    [settings, pages, socialLinks, appIcon, loadingSettings, loadingPages],
  );

  return (
    <SettingsContext.Provider value={ctxValue}>
      {children}
    </SettingsContext.Provider>
  );
}

/* ─── Hook ───────────────────────────────────────────────────────────────────── */
export function useAppSettings() {
  return useContext(SettingsContext);
}