import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '../components/layout/Header'
import styles from './MyInfoPage.module.css'

export default function MyInfoPage() {
  const navigate = useNavigate()
  const [currentPassword, setCurrentPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [errors, setErrors] = useState<{
    currentPassword?: string
    newPassword?: string
    confirmPassword?: string
  }>({})

  const handleSubmit = () => {
    const newErrors: typeof errors = {}

    // Validate current password
    if (!currentPassword) {
      newErrors.currentPassword = '암호가 일치하지 않습니다.'
    }

    // Validate new password length
    if (newPassword.length < 9) {
      newErrors.newPassword = '최소 아홉글자 이상을 입력해야 합니다.'
    }

    // Validate password match
    if (newPassword !== confirmPassword) {
      newErrors.confirmPassword = '암호가 일치하지 않습니다.'
    }

    setErrors(newErrors)

    if (Object.keys(newErrors).length === 0) {
      // Success - navigate back or show success message
      alert('비밀번호가 변경되었습니다.')
      navigate(-1)
    }
  }

  return (
    <div className={styles.container}>
      {/* Background blur effect */}
      <div className={styles.bgWrapper} />

      {/* Header */}
      <Header showMenu showBackButton logoPosition="center" />

      {/* Title Section */}
      <section className={styles.titleSection}>
        <h1 className={styles.pageTitle}>내 정보 설정</h1>
        <p className={styles.userId}>ID: admin0705</p>
      </section>

      {/* Form Area */}
      <section className={styles.formArea}>
        {/* Current Password */}
        <div className={styles.inputGroup}>
          <label className={styles.inputLabel}>현재 암호를 입력해주세요</label>
          <div className={styles.inputWrapper}>
            <input
              type={showCurrentPassword ? 'text' : 'password'}
              className={styles.input}
              placeholder="암호를 입력해주세요"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
            />
            <button
              type="button"
              className={styles.eyeButton}
              onClick={() => setShowCurrentPassword(!showCurrentPassword)}
              aria-label={showCurrentPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
            >
              <EyeIcon />
            </button>
          </div>
          {errors.currentPassword && (
            <p className={styles.errorMessage}>{errors.currentPassword}</p>
          )}
        </div>

        {/* New Password */}
        <div className={styles.inputGroup}>
          <label className={styles.inputLabel}>새로운 암호를 입력해주세요</label>
          <div className={styles.inputWrapper}>
            <input
              type={showNewPassword ? 'text' : 'password'}
              className={styles.input}
              placeholder="암호를 입력해주세요"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
            <button
              type="button"
              className={styles.eyeButton}
              onClick={() => setShowNewPassword(!showNewPassword)}
              aria-label={showNewPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
            >
              <EyeIcon />
            </button>
          </div>
          <div className={styles.inputWrapper}>
            <input
              type={showConfirmPassword ? 'text' : 'password'}
              className={styles.input}
              placeholder="암호를 입력해주세요"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
            <button
              type="button"
              className={styles.eyeButton}
              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              aria-label={showConfirmPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
            >
              <EyeIcon />
            </button>
          </div>
          {(errors.newPassword || errors.confirmPassword) && (
            <div className={styles.errorMessages}>
              {errors.confirmPassword && (
                <p className={styles.errorMessage}>{errors.confirmPassword}</p>
              )}
              {errors.newPassword && (
                <p className={styles.errorMessage}>{errors.newPassword}</p>
              )}
            </div>
          )}
        </div>
      </section>

      {/* Password Requirements */}
      <div className={styles.requirements}>
        <p>영대문자(A~Z, 26개), 영소문자(a~z, 26개),</p>
        <p>숫자(0~9, 10개) 및 특수문자(32개) 중 3종류</p>
        <p>이상으로 구성하여 최소 9자 이상으로 입력합니다.</p>
      </div>

      {/* Submit Button */}
      <div className={styles.buttonArea}>
        <button className={styles.submitButton} onClick={handleSubmit}>
          확인
        </button>
      </div>
    </div>
  )
}

function EyeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 4.375C3.75 4.375 1.25 10 1.25 10C1.25 10 3.75 15.625 10 15.625C16.25 15.625 18.75 10 18.75 10C18.75 10 16.25 4.375 10 4.375Z" stroke="#D1D9FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" stroke="#D1D9FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  )
}
