"use client";

import React from "react";
import Modal from "@/app/components/Modal/Modal";
import { useDispatch, useSelector } from "react-redux";
import { clearAddedUser } from "@/app/redux/auth/authSlice";
import { AppDispatch } from "@/app/redux/types";
import { useRouter } from "next/navigation";
import { selectAddedUser } from "@/app/redux/auth/selectors";
import { setShowNewUserModal } from "@/app/redux/ui/uiSlice";
import "./NewUser.scss";

const NewUser: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const router = useRouter();
  const user = useSelector(selectAddedUser);

  const handleClose = () => {
    dispatch(clearAddedUser());
    dispatch(setShowNewUserModal(false));
    // Refresh data after closing to update lists without racing rehydrate
    router.refresh();
  };

  return (
    <Modal open={true} onClose={handleClose} title="New user Details">
      <div className="new-user__content">
        <div className="new-user__row">
          <label className="new-user__label">Email</label>
          <div className="new-user__value">{user?.email}</div>
        </div>
        <div className="new-user__row">
          <label className="new-user__label">Temporary Password</label>
          <div className="new-user__value">
            <code>{user?.password}</code>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default NewUser;