import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import type { PropsWithChildren } from 'react';
import { ClientAreaModal } from './ClientAreaModal';

/*
 * Provider da modal/overlay "Área do cliente". Expõe `useClientArea().open()` e
 * intercepta cliques em `href="#area-cliente"` (rodapé). No header desktop o
 * botão abre o mega menu; no mobile o hambúrguer chama `open()` direto.
 */
interface ClientAreaContext {
    open: () => void;
}

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

export function useClientArea(): ClientAreaContext {
    const ctx = useContext(Ctx);
    if (!ctx) throw new Error('useClientArea precisa estar dentro de <ClientAreaProvider>');
    return ctx;
}

export function ClientAreaProvider({ children }: PropsWithChildren) {
    const [aberto, setAberto] = useState(false);
    const open = useCallback(() => setAberto(true), []);
    const close = useCallback(() => setAberto(false), []);

    useEffect(() => {
        const onClick = (e: MouseEvent) => {
            const target = e.target as Element | null;
            const link = target?.closest?.('a[href="#area-cliente"], a[href$="/#area-cliente"]');
            if (!link) return;
            e.preventDefault();
            e.stopPropagation();
            open();
        };
        document.addEventListener('click', onClick, true);
        return () => document.removeEventListener('click', onClick, true);
    }, [open]);

    return (
        <Ctx.Provider value={{ open }}>
            {children}
            {aberto && <ClientAreaModal onClose={close} />}
        </Ctx.Provider>
    );
}