"use client"

import React, {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
  type ReactNode,
} from "react"
import type { Language } from "@/components/dashboard/shared/LanguageTabs"
import {
  clearCmsPendingSlot,
  cmsPendingKey,
  createCmsPagePendingImages,
  setCmsPendingSlot,
  type CmsPagePendingImages,
  type CmsPendingSlotMeta,
} from "@/lib/media-manager/cms-page-pending"
import type { StagedImage } from "@/lib/media-manager/types"

export interface CmsPagePendingContextValue {
  pending: CmsPagePendingImages
  activeLanguage: Language
  registerStaged: (
    section: string,
    staged: StagedImage,
    meta: CmsPendingSlotMeta,
    index?: number,
    slot?: string
  ) => void
  clearStaged: (section: string, index?: number, slot?: string) => void
}

const CmsPagePendingContext = createContext<CmsPagePendingContextValue | null>(null)

export function CmsPagePendingProvider({
  activeLanguage,
  children,
}: {
  activeLanguage: Language
  children: ReactNode
}) {
  const pendingRef = useRef(createCmsPagePendingImages())

  const registerStaged = useCallback(
    (section: string, staged: StagedImage, meta: CmsPendingSlotMeta, index?: number, slot?: string) => {
      const key = cmsPendingKey(activeLanguage, section, index, slot)
      setCmsPendingSlot(pendingRef.current, key, staged, meta)
    },
    [activeLanguage]
  )

  const clearStaged = useCallback(
    (section: string, index?: number, slot?: string) => {
      const key = cmsPendingKey(activeLanguage, section, index, slot)
      clearCmsPendingSlot(pendingRef.current, key)
    },
    [activeLanguage]
  )

  const value = useMemo(
    () => ({
      pending: pendingRef.current,
      activeLanguage,
      registerStaged,
      clearStaged,
    }),
    [activeLanguage, registerStaged, clearStaged]
  )

  return <CmsPagePendingContext.Provider value={value}>{children}</CmsPagePendingContext.Provider>
}

export function useCmsPagePending(): CmsPagePendingContextValue {
  const ctx = useContext(CmsPagePendingContext)
  if (!ctx) {
    throw new Error("useCmsPagePending must be used within CmsPagePendingProvider")
  }
  return ctx
}

/** Access pending store from page form (commit on save, revoke on unmount). */
export function useCmsPagePendingRef(): CmsPagePendingImages {
  const ctx = useContext(CmsPagePendingContext)
  if (!ctx) {
    throw new Error("useCmsPagePendingRef must be used within CmsPagePendingProvider")
  }
  return ctx.pending
}