import { useNavigate } from 'react-router-dom'
import styles from './QRScanPage.module.css'
import qrIllustrationImg from '../assets/qr-illustration.png'

export default function QRScanPage() {
  const navigate = useNavigate()

  const handleCancel = () => {
    navigate(-1)
  }

  const handleConfirm = () => {
    // QR 스캔 완료 페이지로 이동
    navigate('/qr-scan/complete', { state: { tagId: 'TF-003' } })
  }

  const handleClose = () => {
    navigate(-1)
  }

  return (
    <div className={styles.container}>
      {/* Background blur effects */}
      <div className={styles.bgBlurTop} />
      <div className={styles.bgBlurLeft} />

      {/* Popup container */}
      <div className={styles.popup} />

      {/* Close button */}
      <button className={styles.closeButton} onClick={handleClose} aria-label="닫기">
        <CloseIcon />
      </button>

      {/* Title */}
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>
          QR코드를<br />
          인식시켜 주세요
        </h1>
      </div>

      {/* Pulse Animation */}
      <div className={styles.pulseContainer}>
        <div className={styles.pulseRing} />
        <div className={styles.pulseRing} style={{ animationDelay: '1s' }} />
        <div className={styles.pulseRing} style={{ animationDelay: '2s' }} />
      </div>

      {/* QR Phone Illustration */}
      <div className={styles.illustrationContainer}>
        <img
          src={qrIllustrationImg}
          alt="QR 코드 스캔"
          className={styles.illustration}
        />
      </div>

      {/* Bottom buttons */}
      <div className={styles.buttonContainer}>
        <button className={styles.cancelButton} onClick={handleCancel}>
          취소
        </button>
        <button className={styles.confirmButton} onClick={handleConfirm}>
          확인
        </button>
      </div>
    </div>
  )
}

function CloseIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 6L6 18M6 6L18 18" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  )
}
