import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from 'react';
import { X, ChevronLeft, Maximize2, Minimize2 } from 'lucide-react';

// Modal em PILHA (estilo navegação iOS): páginas deslizam da direita, com botão voltar.
// Desktop abre pequeno + ícone maximizar (tela cheia). Mobile = tela cheia direto.
// Cada página é um componente que carrega o PRÓPRIO mínimo (carregamento progressivo).

export interface StackPage {
  title: string;
  render: () => ReactNode;
}

interface StackCtx {
  push: (p: StackPage) => void;
  pop: () => void;
  close: () => void;
}
const Ctx = createContext<StackCtx | null>(null);
export const useStackModal = (): StackCtx => {
  const c = useContext(Ctx);
  if (!c) throw new Error('useStackModal deve ser usado dentro de <StackModal>');
  return c;
};

export const StackModal: React.FC<{ isOpen: boolean; onClose: () => void; root: StackPage }> = ({ isOpen, onClose, root }) => {
  const [stack, setStack] = useState<StackPage[]>([root]);
  const [fullscreen, setFullscreen] = useState(false);
  const panelRef = useRef<HTMLDivElement>(null);

  // Reabriu → reinicia a pilha. (Use também key={...} no pai p/ forçar remount por entidade.)
  useEffect(() => { if (isOpen) setStack([root]); /* eslint-disable-line */ }, [isOpen]);

  // Não trancar: ESC fecha; clicar FORA do painel fecha (o overlay deixa o clique passar
  // pra agenda, então clicar em outro slot/evento fecha este e abre o novo).
  useEffect(() => {
    if (!isOpen) return;
    const onDown = (e: PointerEvent) => {
      if (panelRef.current && !panelRef.current.contains(e.target as Node)) onClose();
    };
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('pointerdown', onDown, true);
    window.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('pointerdown', onDown, true); window.removeEventListener('keydown', onKey); };
  }, [isOpen, onClose]);

  const push = useCallback((p: StackPage) => setStack(s => [...s, p]), []);
  const pop = useCallback(() => setStack(s => (s.length > 1 ? s.slice(0, -1) : s)), []);
  const close = useCallback(() => onClose(), [onClose]);

  if (!isOpen) return null;
  const current = stack[stack.length - 1];
  const canBack = stack.length > 1;

  return (
    <div className={`fixed inset-0 bg-black/0 z-[70] pointer-events-none flex items-end sm:items-center justify-center ${fullscreen ? '' : 'sm:p-4'}`}>
      <div
        ref={panelRef}
        className={`pointer-events-auto bg-white shadow-2xl flex flex-col overflow-hidden transition-all duration-300 w-full ${
          fullscreen
            ? 'h-full rounded-none'
            : 'max-h-[90vh] rounded-t-2xl sm:w-[440px] sm:max-w-[95vw] sm:h-auto sm:max-h-[88vh] sm:rounded-3xl'
        }`}
      >
        <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-100 shrink-0">
          {canBack ? (
            <button onClick={pop} className="p-1.5 -ml-1 hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
              <ChevronLeft size={20} />
            </button>
          ) : (
            <span className="w-2" />
          )}
          <h3 className="font-black text-sm uppercase text-gray-800 truncate flex-1">{current.title}</h3>
          <button
            onClick={() => setFullscreen(f => !f)}
            className="inline-flex p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors"
            title={fullscreen ? 'Restaurar' : 'Tela cheia'}
          >
            {fullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
          </button>
          <button onClick={close} className="p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
            <X size={18} />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto custom-scrollbar">
          <Ctx.Provider value={{ push, pop, close }}>
            <div key={stack.length} className="animate-in slide-in-from-right-4 fade-in duration-200 p-4 sm:p-5">
              {current.render()}
            </div>
          </Ctx.Provider>
        </div>
      </div>
    </div>
  );
};