"use client";

import { createContext, useContext, useState, useCallback, useEffect } from "react";

interface PageHeaderState {
  title: string;
  subtitle?: string;
}

interface PageHeaderContextValue {
  header: PageHeaderState | null;
  setHeader: (header: PageHeaderState) => void;
  clearHeader: () => void;
}

const PageHeaderContext = createContext<PageHeaderContextValue | null>(null);

export function PageHeaderProvider({ children }: { children: React.ReactNode }) {
  const [header, setHeaderState] = useState<PageHeaderState | null>(null);

  const setHeader = useCallback((h: PageHeaderState) => setHeaderState(h), []);
  const clearHeader = useCallback(() => setHeaderState(null), []);

  return (
    <PageHeaderContext.Provider value={{ header, setHeader, clearHeader }}>
      {children}
    </PageHeaderContext.Provider>
  );
}

export function usePageHeader(title: string, subtitle?: string) {
  const ctx = useContext(PageHeaderContext);
  if (!ctx) throw new Error("usePageHeader must be used within PageHeaderProvider");

  useEffect(() => {
    ctx.setHeader({ title, subtitle });
    return () => ctx.clearHeader();
  }, [title, subtitle, ctx.setHeader, ctx.clearHeader]);
}

export function usePageHeaderValue() {
  const ctx = useContext(PageHeaderContext);
  if (!ctx) throw new Error("usePageHeaderValue must be used within PageHeaderProvider");
  return ctx.header;
}