import { useNavigate, useParams } from 'react-router-dom'
import styles from './AccessLogPage.module.css'

interface LogEntry {
  id: number
  type: 'IN' | 'OUT'
  tagId: string
  time: string
}

// Mock data - 추후 API 연동
const mockLogs: LogEntry[] = [
  { id: 1, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
  { id: 2, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
  { id: 3, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
  { id: 4, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
  { id: 5, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
  { id: 6, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
  { id: 7, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
  { id: 8, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
  { id: 9, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
  { id: 10, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
  { id: 11, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
  { id: 12, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
  { id: 13, type: 'IN', tagId: 'MK0104', time: '2025-12-01 16:45:10' },
  { id: 14, type: 'IN', tagId: 'MK0104', time: '2025-12-01 16:45:10' },
  { id: 15, type: 'OUT', tagId: 'MK0105', time: '2025-12-01 17:00:55' },
  { id: 16, type: 'IN', tagId: 'MK0106', time: '2025-12-01 17:30:30' },
  { id: 17, type: 'IN', tagId: 'MK0106', time: '2025-12-01 17:30:30' },
]

export default function AccessLogPage() {
  const navigate = useNavigate()
  const { locationName } = useParams<{ locationName: string }>()

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

  return (
    <div className={styles.container}>
      {/* Close Button */}
      <button className={styles.closeButton} onClick={handleClose} aria-label="닫기">
        <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="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>

      {/* Content */}
      <div className={styles.content}>
        <h1 className={styles.title}>{locationName || '옥상출입구'} 출입로그</h1>

        <div className={styles.logTable}>
          {/* Table Header */}
          <div className={styles.tableHeader}>
            <span className={styles.colAccess}>출입</span>
            <span className={styles.colTagId}>TagID</span>
            <span className={styles.colTime}>시간</span>
          </div>

          {/* Table Body */}
          <div className={styles.tableBody}>
            {mockLogs.map((log) => (
              <div key={log.id} className={styles.tableRow}>
                <span className={styles.colAccess}>{log.type}</span>
                <span className={styles.colTagId}>{log.tagId}</span>
                <span className={styles.colTime}>{log.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}