import { useNavigate } from 'react-router-dom'
import Header from '../components/layout/Header'
import styles from './TagBatteryPage.module.css'
import highBatteryIcon from '../assets/battery_high.svg'
import lowBatteryIcon from '../assets/battery_low.svg'

// 배터리 데이터 (추후 API 연동)
const batteryData = {
  high: { count: 1686, percentage: 61 },
  low: { count: 1316, percentage: 39 }
}

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

  return (
    <div className={styles.container}>
      {/* Background blur effect - Figma Ellipse 2327 */}
      <div className={styles.bgWrapper} />

      {/* Header */}
      <Header showMenu showBackButton logoPosition="center" />

      {/* Title */}
      <section className={styles.titleSection}>
        <h1 className={styles.pageTitle}>태그 배터리</h1>
      </section>

      {/* Battery Cards */}
      <section className={styles.cardsSection}>
        {/* High Battery Card */}
        <div className={styles.batteryCard}>
          <div className={styles.cardContent}>
            <div className={styles.cardLeft}>
              <BatteryIcon level="high" />
              <div className={styles.cardInfo}>
                <span className={styles.batteryLabel}>High Battery</span>
                <span className={styles.batteryCount}>{batteryData.high.count.toLocaleString()}개</span>
              </div>
            </div>
            <span className={styles.batteryPercentage}>{batteryData.high.percentage}%</span>
          </div>
          <div className={styles.cardDivider} />
          <button className={styles.listButton} onClick={() => navigate('/tag-battery/high')}>
            <span className={styles.listButtonText}>리스트보기</span>
            <ChevronIcon />
          </button>
        </div>

        {/* Low Battery Card */}
        <div className={styles.batteryCard}>
          <div className={styles.cardContent}>
            <div className={styles.cardLeft}>
              <BatteryIcon level="low" />
              <div className={styles.cardInfo}>
                <span className={styles.batteryLabel}>Low Battery</span>
                <span className={styles.batteryCount}>{batteryData.low.count.toLocaleString()}개</span>
              </div>
            </div>
            <span className={styles.batteryPercentage}>{batteryData.low.percentage}%</span>
          </div>
          <div className={styles.cardDivider} />
          <button className={styles.listButton} onClick={() => navigate('/tag-battery/low')}>
            <span className={styles.listButtonText}>리스트보기</span>
            <ChevronIcon />
          </button>
        </div>
      </section>
    </div>
  )
}

function BatteryIcon({ level }: { level: 'high' | 'low' }) {
  return (
    <img
      src={level === 'high' ? highBatteryIcon : lowBatteryIcon}
      alt={`${level} battery`}
      style={{ width: 24, height: 39 }}
    />
  )
}

function ChevronIcon() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 7L17 14L10 21" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  )
}
