"use client";

import type React from "react";

import Modal from "../../components/ui/Modal";
import { useModal } from "./ModalContext";
import { MODAL_REGISTRY } from "./ModalRegistery";

const USER_ACTION_MODAL = {
  maxWidth: "max-w-[452px]",
  showCloseButton: false,
};

type ModalConfig = {
  maxWidth: string;
  showCloseButton: boolean;
  className?: string;
};
const USER_EMAIL_MODAL = {
  maxWidth: "max-w-[460px]",
  showCloseButton: true,
};

const USER_EMAIL_MODAL_WIDTH = {
  maxWidth: "max-w-[420px] ",
  className:"pt-10!",
  showCloseButton: false,
};
const MODAL_CONFIG: Record<string, ModalConfig> = {
  BUY_CREDITS: {
    maxWidth: "max-w-[565px]",
    className: "px-5 py-10 md:p-10",
    showCloseButton: false,
  },
  THANK_YOU_PAYMENT: {
    maxWidth: "max-w-[488px]",
    showCloseButton: false,
  },
  PACKAGE_FORM: {
    maxWidth: "max-w-[565px]",
    showCloseButton: true,
  },
  DELETE_USER: USER_ACTION_MODAL,
  DEACTIVATE_USER: USER_ACTION_MODAL,
  UPDATE_EMAIL_CONFIRMATION: USER_EMAIL_MODAL,
  ENTER_NEW_MAIL: USER_EMAIL_MODAL,
  NEW_EMAIL_VERIFICATION: USER_EMAIL_MODAL,
  EMAIL_UPDATED: USER_ACTION_MODAL,

  RESET_PASSWORD:USER_EMAIL_MODAL_WIDTH,
  PASSWORD_UPDATED:USER_EMAIL_MODAL_WIDTH,
  CHECK_EMAIL_FOR_PASSWORD_RESET:USER_EMAIL_MODAL_WIDTH,
  FORGOT_PASSWORD: USER_EMAIL_MODAL_WIDTH,
  LOGOUT:USER_EMAIL_MODAL_WIDTH,
  CHECK_EMAIL_FOR_VERIFICATION:USER_EMAIL_MODAL_WIDTH,
} as const;

export default function ModalRenderer() {
  const { modal } = useModal();

  if (!modal.type) return null;

  const Component = MODAL_REGISTRY[
    modal.type as keyof typeof MODAL_REGISTRY
  ] as React.ComponentType<any>;

  const config = MODAL_CONFIG[modal.type as keyof typeof MODAL_CONFIG];

  return (
    <Modal
      maxWidth={config?.maxWidth}
      className={config?.className}
      showCloseButton={config?.showCloseButton}
    >
      <Component {...(modal.props as any)} />
    </Modal>
  );
}