import styles from './pass.module.scss'
import { useForm } from '@inertiajs/react'
import { useState } from 'react'
import PageIntro from '../../PageIntro'
import { router } from '@inertiajs/react'
import { motion, AnimatePresence } from 'framer-motion'

const ChangePassword = () => {
  const { data, setData, post, processing, reset } = useForm({
    current_password: '',
    new_password: '',
    new_password_confirm: '',
  })

  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [showLogoutModal, setShowLogoutModal] = useState(false)

  const handleShowPasswordToggle = () => setShowPassword(!showPassword)
  const handleShowConfirmPasswordToggle = () => setShowConfirmPassword(!showConfirmPassword)

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    post(route("profile.changePassword"), {
      onSuccess: () => {
        reset('current_password', 'new_password', 'new_password_confirm')
        setShowLogoutModal(true)
      },
      onError: (errors) => console.error(errors),
    })
  }

  const handleLogout = () => router.post(route('logout'))

  return (
    <div className={styles['change__password']}>
      <PageIntro
        title="Change Your Password"
        description="Feel your security is compromised? Update your password today."
      />

      <form onSubmit={handleSubmit}>
        {/* Current Password */}
        <div style={{ paddingBottom: '.2rem' }}>
          <label htmlFor="current_password">Current password *</label>
          <input
            type="password"
            placeholder="Enter your current password"
            value={data.current_password}
            onChange={(e) => setData('current_password', e.target.value)}
          />
        </div>

        {/* New Password */}
        <div style={{ paddingBottom: '.2rem' }}>
          <label htmlFor="new_password">New password *</label>
          <div className={styles['change__password--password']}>
            <input
              type={!showPassword ? 'password' : 'text'}
              placeholder="New password"
              value={data.new_password}
              onChange={(e) => setData('new_password', e.target.value)}
            />
            <span onClick={handleShowPasswordToggle}>{showPassword ? 'hide' : 'show'}</span>
          </div>
        </div>

        {/* Confirm Password */}
        <div style={{ paddingBottom: '.2rem' }}>
          <label htmlFor="new_password_confirm">Confirm password *</label>
          <div className={styles['change__password--password']}>
            <input
              type={!showConfirmPassword ? 'password' : 'text'}
              placeholder="Confirm password"
              value={data.new_password_confirm}
              onChange={(e) => setData('new_password_confirm', e.target.value)}
            />
            <span onClick={handleShowConfirmPasswordToggle}>{showConfirmPassword ? 'hide' : 'show'}</span>
          </div>
        </div>

        <button type="submit" disabled={processing}>
          {processing ? 'Updating...' : 'Change Password'}
        </button>
      </form>

      {/* Logout Modal */}
      <AnimatePresence>
        {showLogoutModal && (
          <motion.div
            className={styles.logoutModalBackdrop}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div
              className={styles.logoutModal}
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.8, opacity: 0 }}
              transition={{ duration: 0.25, ease: 'easeInOut' }}
            >
              <h3>Password changed successfully!</h3>
              <p>Do you want to log out now and login with your new password?</p>
              <div className={styles.actions}>
                <button
                  onClick={() => setShowLogoutModal(false)}
                  className={styles.cancelBtn}
                >
                  Not Now
                </button>
                <button onClick={handleLogout} className={styles.logoutBtn}>
                  Log Out
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default ChangePassword