import React, { createContext, useContext, useState } from 'react';
import { Modal } from './Modal';
import { Slot } from './Slot';

type DialogContextType = {
  open: boolean;
  setOpen: (open: boolean) => void;
};

const DialogContext = createContext<DialogContextType | undefined>(undefined);

export const DialogRoot = ({ open, onOpenChange, children, defaultOpen }: { open?: boolean, onOpenChange?: (open: boolean) => void, children: React.ReactNode, defaultOpen?: boolean }) => {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen || false);
  const isControlled = open !== undefined;
  const currentOpen = isControlled ? open : uncontrolledOpen;
  
  const handleOpenChange = (newOpen: boolean) => {
    if (!isControlled) setUncontrolledOpen(newOpen);
    if (onOpenChange) onOpenChange(newOpen);
  };

  return (
    <DialogContext.Provider value={{ open: currentOpen, setOpen: handleOpenChange }}>
      {children}
    </DialogContext.Provider>
  );
};

export const DialogTrigger = React.forwardRef<HTMLElement, any>(({ asChild, onClick, ...props }, ref) => {
  const context = useContext(DialogContext);
  const Comp = asChild ? Slot : "button";
  return <Comp ref={ref as any} onClick={(e: any) => { context?.setOpen(true); onClick?.(e); }} {...props} />;
});

export const DialogContent = React.forwardRef<HTMLDivElement, any>(({ children, className, ...props }, ref) => {
  const context = useContext(DialogContext);
  return (
    <Modal isOpen={!!context?.open} onClose={() => context?.setOpen(false)}>
      <div ref={ref} className={className} {...props}>
        {children}
      </div>
    </Modal>
  );
});

export const DialogHeader = ({ className = '', ...props }: any) => <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`} {...props} />;
export const DialogFooter = ({ className = '', ...props }: any) => <div className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`} {...props} />;
export const DialogTitle = React.forwardRef<HTMLHeadingElement, any>(({ className = '', ...props }, ref) => <h2 ref={ref} className={`text-lg font-semibold leading-none tracking-tight ${className}`} {...props} />);
export const DialogDescription = React.forwardRef<HTMLParagraphElement, any>(({ className = '', ...props }, ref) => <p ref={ref} className={`text-sm text-text-muted ${className}`} {...props} />);
export const DialogClose = React.forwardRef<HTMLElement, any>(({ asChild, onClick, ...props }, ref) => {
  const context = useContext(DialogContext);
  const Comp = asChild ? Slot : "button";
  return <Comp ref={ref as any} onClick={(e: any) => { context?.setOpen(false); onClick?.(e); }} {...props} />;
});

// We also provide a dummy Portal and Overlay because standard Shadcn uses them in wrappers
export const DialogPortal = ({ children }: any) => <>{children}</>;
export const DialogOverlay = React.forwardRef<HTMLDivElement, any>(({ className, ...props }, ref) => <div ref={ref} className="hidden" {...props} />);