'use client';

import * as React from 'react';

import * as DialogPrimitive from '@radix-ui/react-dialog';
import { useTranslations } from 'next-intl';
import { IoClose } from 'react-icons/io5';

import { cn } from '@/lib/utils';

interface ModalActionButton {
  icon: React.ReactNode;
  onClick: () => void;
  ariaLabel?: string;
  title?: string;
}

interface ModalProps {
  children: React.ReactNode;
  onClose: () => void;
  isOpen?: boolean;
  title?: string;
  subtitle?: string;
  actionButton?: ModalActionButton;
  actionElement?: React.ReactNode;
  disableOutsideClick?: boolean;
  disableEscape?: boolean;
  className?: string;
  overlayClassName?: string;
  contentRef?: React.RefObject<HTMLDivElement>;
  closeLabel?: string;
}

const Modal: React.FC<ModalProps> = ({
  children,
  onClose,
  isOpen = true,
  title,
  subtitle,
  actionButton,
  actionElement,
  disableOutsideClick = false,
  disableEscape = false,
  className = '',
  overlayClassName = '',
  contentRef,
  closeLabel,
}) => {
  const tCommon = useTranslations('common');
  const resolvedCloseLabel = closeLabel ?? tCommon('close');

  return (
    <DialogPrimitive.Root open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay
          className={cn(
            'fixed inset-0 z-[1000] bg-black/80 backdrop-blur-md',
            overlayClassName
          )}
        />
        <DialogPrimitive.Content
          ref={contentRef}
          aria-describedby={undefined}
          onInteractOutside={disableOutsideClick ? (e) => e.preventDefault() : undefined}
          onEscapeKeyDown={disableEscape ? (e) => e.preventDefault() : undefined}
          className={cn(
            'fixed left-[50%] top-[50%] z-[1000] flex flex-col max-h-[95vh] max-w-[90vw] translate-x-[-50%] translate-y-[-50%] bg-white shadow-2xl outline-none',
            className
          )}
        >
          {!title && (
            <DialogPrimitive.Title className="sr-only">{resolvedCloseLabel}</DialogPrimitive.Title>
          )}

          {(title || subtitle) && (
            <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between flex-shrink-0">
              <div className="flex flex-col">
                {title && (
                  <DialogPrimitive.Title className="text-base lg:text-xl font-bold text-mma-blue">
                    {title}
                  </DialogPrimitive.Title>
                )}
                {subtitle && (
                  <DialogPrimitive.Description className="text-sm lg:text-base text-gray-600 font-semibold mt-1">
                    {subtitle}
                  </DialogPrimitive.Description>
                )}
              </div>
              <div className="flex items-center gap-3 lg:gap-5 flex-shrink-0">
                {actionElement}
                {!actionElement && actionButton && (
                  <button
                    onClick={actionButton.onClick}
                    className="text-mma-blue hover:text-mma-yellow transition-colors"
                    aria-label={actionButton.ariaLabel}
                    title={actionButton.title}
                  >
                    {actionButton.icon}
                  </button>
                )}
                <DialogPrimitive.Close
                  aria-label={resolvedCloseLabel}
                  className="text-mma-blue hover:text-mma-yellow transition"
                >
                  <IoClose size={30} />
                </DialogPrimitive.Close>
              </div>
            </div>
          )}

          <div className="flex-1 overflow-y-auto">{children}</div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
};

export default Modal;