import { useNavigate, useLocation } from 'react-router-dom'
import styles from './QRScanCompletePage.module.css'
import checkIcon from '../assets/check-icon.svg'

export default function QRScanCompletePage() {
  const navigate = useNavigate()
  const location = useLocation()
  const tagId = location.state?.tagId || 'TF-003'

  const handleFinish = () => {
    navigate('/dashboard')
  }

  const handleContinue = () => {
    navigate('/qr-scan')
  }

  const handleClose = () => {
    navigate('/dashboard')
  }

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

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

      {/* Title */}
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>태그 인식 완료</h1>
        <p className={styles.tagId}>TagID : {tagId}</p>
      </div>

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

        {/* Center Circle */}
        <div className={styles.centerCircle}>
          <img src={checkIcon} alt="완료" className={styles.checkIcon} />
          <span className={styles.completeText}>완료 되었습니다.</span>
        </div>
      </div>

      {/* Bottom buttons */}
      <div className={styles.buttonContainer}>
        <button className={styles.finishButton} onClick={handleFinish}>
          끝내기
        </button>
        <button className={styles.continueButton} onClick={handleContinue}>
          계속 태깅
        </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>
  )
}
