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

interface TagEntry {
  id: number
  tagId: string
  registeredAt: string
}

// Mock data - 추후 API 연동
const mockLowBatteryTags: TagEntry[] = [
  { id: 1, tagId: 'P001', registeredAt: '2025-11-24 15:26:35' },
  { id: 2, tagId: 'P005', registeredAt: '2025-11-24 15:26:35' },
  { id: 3, tagId: 'P006', registeredAt: '2025-11-24 15:30:00' },
  { id: 4, tagId: 'P006', registeredAt: '2025-11-24 15:30:00' },
  { id: 5, tagId: 'P008', registeredAt: '2025-11-24 15:40:25' },
  { id: 6, tagId: 'P009', registeredAt: '2025-11-25 10:30:00' },
  { id: 7, tagId: 'P010', registeredAt: '2025-11-26 09:15:45' },
  { id: 8, tagId: 'P011', registeredAt: '2025-11-24 15:55:30' },
  { id: 9, tagId: 'P012', registeredAt: '2025-11-24 16:00:45' },
  { id: 10, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 11, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 12, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 13, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 14, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 15, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
  { id: 16, tagId: 'P013', registeredAt: '2025-11-24 16:05:00' },
]

const mockHighBatteryTags: TagEntry[] = [
  { id: 1, tagId: 'H001', registeredAt: '2025-11-24 10:00:00' },
  { id: 2, tagId: 'H002', registeredAt: '2025-11-24 10:15:00' },
  { id: 3, tagId: 'H003', registeredAt: '2025-11-24 10:30:00' },
  { id: 4, tagId: 'H004', registeredAt: '2025-11-24 11:00:00' },
  { id: 5, tagId: 'H005', registeredAt: '2025-11-24 11:30:00' },
  { id: 6, tagId: 'H006', registeredAt: '2025-11-24 12:00:00' },
  { id: 7, tagId: 'H007', registeredAt: '2025-11-24 12:30:00' },
  { id: 8, tagId: 'H008', registeredAt: '2025-11-24 13:00:00' },
  { id: 9, tagId: 'H009', registeredAt: '2025-11-24 13:30:00' },
  { id: 10, tagId: 'H010', registeredAt: '2025-11-24 14:00:00' },
  { id: 11, tagId: 'H011', registeredAt: '2025-11-24 14:30:00' },
  { id: 12, tagId: 'H012', registeredAt: '2025-11-24 15:00:00' },
]

const pageConfig = {
  low: {
    title: 'Low Battery',
    description: '남은 전력이 25% 이하로\n배터리 교체 대상인 태그의 목록입니다',
    data: mockLowBatteryTags,
    totalCount: 1376,
  },
  high: {
    title: 'High Battery',
    description: '배터리의 남은 전력이 25% 를 초과하는\n태그의 목록입니다',
    data: mockHighBatteryTags,
    totalCount: 1376,
  },
}

export default function TagBatteryListPage() {
  const navigate = useNavigate()
  const { type } = useParams<{ type: 'low' | 'high' }>()

  const config = pageConfig[type as 'low' | 'high'] || pageConfig.low

  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}>
        {/* Title Section */}
        <div className={styles.titleSection}>
          <h1 className={styles.title}>{config.title}</h1>
          <p className={styles.description}>{config.description}</p>
        </div>

        {/* List Section */}
        <div className={styles.listSection}>
          {/* Total Count */}
          <div className={styles.countRow}>
            <span className={styles.totalCount}>총 {config.totalCount.toLocaleString()}개</span>
          </div>

          {/* Table */}
          <div className={styles.table}>
            {/* Header */}
            <div className={styles.tableHeader}>
              <span className={styles.headerTagId}>TagID</span>
              <span className={styles.headerDate}>등록일</span>
            </div>

            {/* Body */}
            <div className={styles.tableBody}>
              {config.data.map((entry) => (
                <div key={entry.id} className={styles.tableRow}>
                  <span className={styles.cellTagId}>{entry.tagId}</span>
                  <span className={styles.cellDate}>{entry.registeredAt}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
