import { useNavigate } from 'react-router-dom'
import Header from '../components/layout/Header'
import styles from './EmergencyFirePage.module.css'
import emergencyBellImg from '../assets/emergency-bell.png'
import redEllipseBg from '../assets/red-ellipse-bg.svg'
import arrowIcon from '../assets/arrow-up-right.svg'

// Mock data - 추후 API 연동
const emergencyData = {
  type: '비상 : 화재',
  shelter: {
    name: '물류동 4층 옥상'
  },
  stats: {
    total: 4597,
    remaining: 2087,
    evacuated: 2345
  },
  shelters: [
    { id: 1, name: '휴게동 테니스장', count: 1569 },
    { id: 2, name: '구내식당', count: 352 }
  ],
  notEvacuated: [
    { building: 'A동', count: 1435 },
    { building: 'B동', count: 356 },
    { building: 'C동', count: 7 },
    { building: 'D동', count: 156 },
    { building: 'E동', count: 0 }
  ]
}

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

  const handleTagging = () => {
    // 인원태깅 기능 구현
    console.log('인원태깅 클릭')
  }

  const handleShelterClick = () => {
    // 대피자 목록 페이지로 이동
    navigate('/emergency-fire/evacuee-list')
  }

  const handleNotEvacuatedClick = () => {
    // 미대피자 목록 페이지로 이동
    navigate('/emergency-fire/non-evacuee-list')
  }

  return (
    <div className={styles.container}>
      {/* Background red ellipse blur effect */}
      <div className={styles.bgRedEllipse}>
        <img src={redEllipseBg} alt="" />
      </div>

      {/* Background emergency bell image */}
      <div className={styles.bgBellWrapper}>
        <img src={emergencyBellImg} alt="" className={styles.bgBellImage} />
      </div>

      {/* Header */}
      <Header showBackButton showMenu title={emergencyData.type} />

      {/* 담당 대피소 카드 */}
      <div className={styles.shelterAssignCard}>
        <span className={styles.shelterLabel}>담당 대피소</span>
        <span className={styles.shelterName}>{emergencyData.shelter.name}</span>
        <button className={styles.taggingButton} onClick={handleTagging}>
          인원태깅
        </button>
      </div>

      {/* 통계 정보 */}
      <div className={styles.statsContainer}>
        <div className={styles.statItem}>
          <span className={styles.statLabel}>총원</span>
          <span className={styles.statValue}>{emergencyData.stats.total.toLocaleString()}</span>
        </div>
        <div className={styles.statItem}>
          <span className={styles.statLabel}>건물내 잔류</span>
          <span className={styles.statValue}>{emergencyData.stats.remaining.toLocaleString()}</span>
        </div>
        <div className={styles.statItem}>
          <span className={styles.statLabel}>퇴실(대피소)</span>
          <span className={styles.statValue}>{emergencyData.stats.evacuated.toLocaleString()}</span>
        </div>
      </div>

      {/* 대피소 카드 목록 */}
      <div className={styles.cardList}>
        {emergencyData.shelters.map((shelter) => (
          <button
            key={shelter.id}
            className={styles.shelterCard}
            onClick={() => handleShelterClick()}
          >
            <div className={styles.shelterCardHeader}>
              <span className={styles.shelterCardName}>{shelter.name}</span>
              <ArrowIcon />
            </div>
            <div className={styles.shelterCardCount}>
              <PersonIcon />
              <span className={styles.shelterCardValue}>{shelter.count.toLocaleString()}</span>
            </div>
          </button>
        ))}

        {/* 미대피자 목록 카드 */}
        <button className={styles.notEvacuatedCard} onClick={handleNotEvacuatedClick}>
          <div className={styles.notEvacuatedHeader}>
            <span className={styles.notEvacuatedTitle}>미대피자 목록</span>
            <ArrowIcon />
          </div>
          <div className={styles.notEvacuatedGrid}>
            {emergencyData.notEvacuated.map((item, index) => (
              <div key={index} className={styles.notEvacuatedItem}>
                <span className={styles.notEvacuatedBuilding}>{item.building}</span>
                <span className={styles.notEvacuatedCount}>{item.count.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </button>
      </div>
    </div>
  )
}

function PersonIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6 6C7.38071 6 8.5 4.88071 8.5 3.5C8.5 2.11929 7.38071 1 6 1C4.61929 1 3.5 2.11929 3.5 3.5C3.5 4.88071 4.61929 6 6 6Z" fill="white"/>
      <path d="M6 7C3.23858 7 1 9.23858 1 12H11C11 9.23858 8.76142 7 6 7Z" fill="white"/>
    </svg>
  )
}

function ArrowIcon() {
  return (
    <img
      src={arrowIcon}
      alt=""
      width="30"
      height="30"
      style={{ transform: 'scaleY(-1)' }}
    />
  )
}

