import { createContext, useContext, useState, type ReactNode } from "react";

import { ManualInvoiceDialog } from "@/components/factures/ManualInvoiceDialog";

/**
 * Provider + hook pour piloter la modale "Saisie manuelle" depuis n'importe
 * où dans l'app authentifiée. Évite de plumber un onClick à travers les
 * couches de layout, et garde une seule instance de la modale rendue à la
 * racine (= un seul réseau de portals Radix).
 *
 * Usage :
 *   <ManualInvoiceProvider>
 *     <App />          // ← le bouton "+ Saisir" appelle useManualInvoice()
 *   </ManualInvoiceProvider>
 */
type Ctx = {
  open: () => void;
  close: () => void;
  isOpen: boolean;
};

const ManualInvoiceContext = createContext<Ctx | null>(null);

export function ManualInvoiceProvider({ children }: { children: ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <ManualInvoiceContext.Provider
      value={{
        isOpen,
        open: () => setIsOpen(true),
        close: () => setIsOpen(false),
      }}
    >
      {children}
      <ManualInvoiceDialog open={isOpen} onOpenChange={setIsOpen} />
    </ManualInvoiceContext.Provider>
  );
}

export function useManualInvoice(): Ctx {
  const ctx = useContext(ManualInvoiceContext);
  if (!ctx) {
    throw new Error(
      "useManualInvoice doit être utilisé dans un <ManualInvoiceProvider>",
    );
  }
  return ctx;
}
