import * as React from "react";

export interface AlertDialogProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  children?: React.ReactNode;
}

export interface AlertDialogTriggerProps {
  children?: React.ReactNode;
  asChild?: boolean;
}

export interface AlertDialogContentProps {
  children?: React.ReactNode;
}

export interface AlertDialogHeaderProps {
  children?: React.ReactNode;
}

export interface AlertDialogFooterProps {
  children?: React.ReactNode;
}

export interface AlertDialogTitleProps {
  children?: React.ReactNode;
}

export interface AlertDialogDescriptionProps {
  children?: React.ReactNode;
}

export interface AlertDialogActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
}

export interface AlertDialogCancelProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
}

const AlertDialogContext = React.createContext<{
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}>({});

export function AlertDialog({ open, onOpenChange, children }: AlertDialogProps): React.JSX.Element {
  const contextValue: { open?: boolean; onOpenChange?: (open: boolean) => void } = {};
  if (open !== undefined) {
    contextValue.open = open;
  }
  if (onOpenChange !== undefined) {
    contextValue.onOpenChange = onOpenChange;
  }

  return <AlertDialogContext.Provider value={contextValue}>{children}</AlertDialogContext.Provider>;
}

export function AlertDialogTrigger({
  children,
  asChild,
}: AlertDialogTriggerProps): React.JSX.Element {
  const { onOpenChange } = React.useContext(AlertDialogContext);

  if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      onClick: () => onOpenChange?.(true),
    } as React.HTMLAttributes<HTMLElement>);
  }

  return <div onClick={() => onOpenChange?.(true)}>{children}</div>;
}

export function AlertDialogContent({
  children,
}: AlertDialogContentProps): React.JSX.Element | null {
  const { open, onOpenChange } = React.useContext(AlertDialogContext);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="fixed inset-0 bg-black/50" onClick={() => onOpenChange?.(false)} />
      <div className="relative z-50 w-full max-w-lg rounded-lg bg-white p-6 shadow-lg">
        {children}
      </div>
    </div>
  );
}

export function AlertDialogHeader({ children }: AlertDialogHeaderProps): React.JSX.Element {
  return <div className="mb-4">{children}</div>;
}

export function AlertDialogFooter({ children }: AlertDialogFooterProps): React.JSX.Element {
  return <div className="mt-4 flex justify-end gap-2">{children}</div>;
}

export function AlertDialogTitle({ children }: AlertDialogTitleProps): React.JSX.Element {
  return <h2 className="text-lg font-semibold">{children}</h2>;
}

export function AlertDialogDescription({
  children,
}: AlertDialogDescriptionProps): React.JSX.Element {
  return <p className="text-sm text-gray-600">{children}</p>;
}

export function AlertDialogAction({
  children,
  ...props
}: AlertDialogActionProps): React.JSX.Element {
  return (
    <button
      className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
      {...props}
    >
      {children}
    </button>
  );
}

export function AlertDialogCancel({
  children,
  ...props
}: AlertDialogCancelProps): React.JSX.Element {
  const { onOpenChange } = React.useContext(AlertDialogContext);

  return (
    <button
      className="rounded-md border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100"
      onClick={() => onOpenChange?.(false)}
      {...props}
    >
      {children}
    </button>
  );
}
