import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './EvacueeListPage.module.css'
import closeIcon from '../assets/close-icon.svg'

// Mock data - 추후 API 연동
const categories = ['구내식당', '휴게동', '주차장', '옥상']

const evacueeData: Record<string, { count: number; list: { tagId: string; datetime: string }[] }> = {
  '구내식당': {
    count: 352,
    list: Array(16).fill(null).map((_, i) => ({
      tagId: `MK${String(100 + i).padStart(4, '0')}`,
      datetime: '2025-12-23 15:00:23'
    }))
  },
  '휴게동': {
    count: 128,
    list: Array(10).fill(null).map((_, i) => ({
      tagId: `MK${String(200 + i).padStart(4, '0')}`,
      datetime: '2025-12-23 14:30:15'
    }))
  },
  '주차장': {
    count: 45,
    list: Array(5).fill(null).map((_, i) => ({
      tagId: `MK${String(300 + i).padStart(4, '0')}`,
      datetime: '2025-12-23 14:15:00'
    }))
  },
  '옥상': {
    count: 67,
    list: Array(8).fill(null).map((_, i) => ({
      tagId: `MK${String(400 + i).padStart(4, '0')}`,
      datetime: '2025-12-23 13:45:30'
    }))
  }
}

export default function EvacueeListPage() {
  const navigate = useNavigate()
  const [selectedCategory, setSelectedCategory] = useState(categories[0])

  const currentData = evacueeData[selectedCategory]

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

  return (
    <div className={styles.container}>
      {/* 닫기 버튼 */}
      <button className={styles.closeButton} onClick={handleClose}>
        <img src={closeIcon} alt="닫기" />
      </button>

      {/* 제목 */}
      <div className={styles.titleSection}>
        <h1 className={styles.title}>대피자 목록</h1>
      </div>

      {/* 로그 컨텐츠 */}
      <div className={styles.logContent}>
        {/* 카테고리 탭 */}
        <div className={styles.categoryTabs}>
          {categories.map((category) => (
            <button
              key={category}
              className={`${styles.categoryTab} ${selectedCategory === category ? styles.active : ''}`}
              onClick={() => setSelectedCategory(category)}
            >
              {category}
            </button>
          ))}
        </div>

        {/* 대피소 정보 */}
        <div className={styles.shelterInfo}>
          <span className={styles.shelterTitle}>
            대피소: {selectedCategory} ({currentData.count})
          </span>
        </div>

        {/* 검색결과 테이블 */}
        <div className={styles.resultTable}>
          {/* 테이블 헤더 */}
          <div className={styles.tableHeader}>
            <span className={styles.headerCell}>TagID</span>
            <span className={styles.headerCell}>확인 일시</span>
          </div>

          {/* 테이블 바디 */}
          <div className={styles.tableBody}>
            {currentData.list.map((item, index) => (
              <div key={index} className={styles.tableRow}>
                <span className={styles.tableCell}>{item.tagId}</span>
                <span className={styles.tableCell}>{item.datetime}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
