import styles from './DashboardPage.module.css'
import Header from '../components/layout/Header'
import BuildingCard from '../components/dashboard/BuildingCard'
import BatteryHealthCard from '../components/dashboard/BatteryHealthCard'

// 건물 데이터 (추후 API 연동)
const buildings = [
  { id: 1, name: '물류동', workers: 1107, anchorNormal: 6, anchorBroken: 0 },
  { id: 2, name: '생산동', workers: 1107, anchorNormal: 12, anchorBroken: 3 },
  { id: 3, name: '관리동', workers: 1107, anchorNormal: 2, anchorBroken: 3 },
  { id: 4, name: '위험물', workers: 117, anchorNormal: 12, anchorBroken: 0 },
  { id: 5, name: '휴게동', workers: 1107, anchorNormal: 120, anchorBroken: 1 },
  { id: 6, name: '식당', workers: 25, anchorNormal: 6, anchorBroken: 0 },
]

export default function DashboardPage() {
  return (
    <div className={styles.container}>
      {/* Background blur effect */}
      <div className={styles.bgBlur} />

      {/* Header */}
      <Header showMenu logoPosition="left" />

      {/* 전체 현황 섹션 */}
      <section className={styles.statusSection}>
        <h2 className={styles.sectionTitle}>전체 현황</h2>
        <div className={styles.statusMetrics}>
          <div className={styles.metric}>
            <span className={styles.metricLabel}>등록된 작업자</span>
            <span className={styles.metricValue}>4,597</span>
          </div>
          <div className={styles.metric}>
            <span className={styles.metricLabel}>단지내 재실자</span>
            <span className={styles.metricValue}>4,487</span>
          </div>
          <div className={styles.metric}>
            <span className={styles.metricLabel}>미입실</span>
            <span className={styles.metricValue}>110</span>
          </div>
        </div>
      </section>

      {/* 건물 선택 섹션 */}
      <section className={styles.buildingSection}>
        <div className={styles.buildingSectionHeader}>
          <span className={styles.buildingSectionTitle}>건물을 선택해주세요.</span>
          <ChevronIcon />
        </div>
        <div className={styles.buildingGrid}>
          {buildings.map((building) => (
            <BuildingCard
              key={building.id}
              name={building.name}
              workers={building.workers}
              anchorNormal={building.anchorNormal}
              anchorBroken={building.anchorBroken}
            />
          ))}
        </div>
      </section>

      {/* 배터리 헬스 체크 섹션 */}
      <section className={styles.batterySection}>
        <div className={styles.batterySectionHeader}>
          <span className={styles.batterySectionTitle}>배터리 헬스 체크</span>
          <ChevronIcon />
        </div>
        <div className={styles.batteryGrid}>
          <BatteryHealthCard level="high" value={4490} />
          <BatteryHealthCard level="low" value={104} />
        </div>
      </section>
    </div>
  )
}

function ChevronIcon() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'rotate(-90deg)' }}>
      <path d="M20.1481 11L14.5 17L8.85189 11" stroke="white" strokeWidth="1.5"/>
    </svg>
  )
}