import { useEffect, useRef } from 'react'
import { Link, useNavigate } from 'react-router-dom'

/** CI `user/password_set_success.php` — success modal then redirect to login. */
export function PasswordSetSuccessPage() {
  const navigate = useNavigate()
  const modalRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
    const el = modalRef.current
    const B = (
      window as unknown as {
        bootstrap?: { Modal: { getOrCreateInstance: (n: HTMLElement) => { show: () => void } } }
      }
    ).bootstrap
    if (el && B?.Modal) {
      B.Modal.getOrCreateInstance(el).show()
    }
    const t = window.setTimeout(() => {
      navigate('/login', { replace: true })
    }, 5000)
    return () => window.clearTimeout(t)
  }, [navigate])

  return (
    <div className="registration-form container mt-5 mb-5 text-center">
      <div
        className="modal fade"
        id="successModal"
        tabIndex={-1}
        ref={modalRef}
        aria-labelledby="successModalLabel"
        aria-hidden="true"
      >
        <div className="text-center mb-4">
          <Link to="/">
            <img
              src="/alrahma_logo.png"
              alt=""
              style={{ width: 180, height: 120, objectFit: 'contain' }}
              onError={(ev) => {
                ;(ev.target as HTMLImageElement).style.display = 'none'
              }}
            />
          </Link>
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content border-success shadow">
              <div className="modal-header bg-success text-white">
                <h5 className="modal-title w-100 text-center" id="successModalLabel">
                  Success
                </h5>
              </div>
              <div className="modal-body">
                <h4 className="mb-3">Password Set Successfully!</h4>
                <p className="mb-0">You will be redirected to the login page shortly.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p className="text-muted small">
        <Link to="/login">Go to login now</Link>
      </p>
    </div>
  )
}