import { useNavigate } from 'react-router-dom'
import Header from '../components/layout/Header'
import styles from './EmergencyAlertPage.module.css'
import emergencyBellImg from '../assets/emergency-bell.png'

// Mock data - 추후 API 연동
const alertData = {
  timestamp: '2025-11-18 13:01:24',
  type: '비상 : 화재',
  title: '비상알림',
  description: '생산동 2층 유류화재 발생',
  shelter: '물류동 4층 옥상',
  evacuated: 2345,
  total: 4597
}

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

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

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

      {/* Header */}
      <Header showBackButton showMenu />

      {/* Alert Popup */}
      <div className={styles.popup}>
        {/* Background image */}
        <img src={emergencyBellImg} alt="" className={styles.popupBgImage} />

        {/* Content */}
        <div className={styles.popupContent}>
          {/* Top row: timestamp and type */}
          <div className={styles.topRow}>
            <span className={styles.timestamp}>{alertData.timestamp}</span>
            <span className={styles.alertType}>{alertData.type}</span>
          </div>

          {/* Main alert info */}
          <div className={styles.mainInfo}>
            <h1 className={styles.title}>{alertData.title}</h1>
            <p className={styles.description}>{alertData.description}</p>
          </div>
        </div>

        {/* Shelter info card */}
        <div className={styles.shelterCard}>
          <div className={styles.shelterTag}>담당 대피소</div>
          <div className={styles.shelterLocation}>{alertData.shelter}</div>
          <div className={styles.evacuationStats}>
            <span className={styles.evacuatedCount}>{alertData.evacuated.toLocaleString()}</span>
            <span className={styles.statsDivider}>/</span>
            <span className={styles.totalCount}>{alertData.total.toLocaleString()}</span>
          </div>
        </div>

        {/* Confirm button */}
        <button className={styles.confirmButton} onClick={handleConfirm}>
          확인
        </button>
      </div>
    </div>
  )
}
