import { useNavigate } from 'react-router-dom'
import Logo from '../common/Logo'
import styles from './SideMenu.module.css'

interface SideMenuProps {
  isOpen: boolean
  onClose: () => void
}

export default function SideMenu({ isOpen, onClose }: SideMenuProps) {
  const navigate = useNavigate()

  const handleNavigate = (path: string) => {
    navigate(path)
    onClose()
  }

  if (!isOpen) return null

  return (
    <>
      <div className={styles.overlay} onClick={onClose} />
      <aside className={styles.menu}>
        {/* Header */}
        <header className={styles.header}>
          <Logo variant="dark" />
          <button className={styles.closeButton} onClick={onClose} aria-label="메뉴 닫기">
            <CloseIcon />
          </button>
        </header>

        {/* Navigation */}
        <nav className={styles.nav}>
          {/* 대시보드 */}
          <div className={styles.dashboardItem} onClick={() => handleNavigate('/dashboard')}>
            <span className={styles.dashboardText}>대시보드</span>
            <ChevronIcon />
          </div>

          <div className={styles.divider} />

          {/* 출입기록 검색 */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>출입기록 검색</h3>
            <div className={styles.menuItems}>
              <button className={styles.menuItem} onClick={() => handleNavigate('/facility-status')}>
                시설별 현황
              </button>
            </div>
          </div>

          {/* 비상대응 관리 */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>비상대응 관리</h3>
            <div className={styles.menuItemsGrid}>
              <button className={styles.menuItem} onClick={() => handleNavigate('/emergency-alert')}>
                비상경보 발생
              </button>
              <button className={styles.menuItem} onClick={() => handleNavigate('/emergency-fire')}>
                대피소 현황
              </button>
              <button className={styles.menuItem} onClick={() => handleNavigate('/qr-scan')}>
                인원태깅
              </button>
            </div>
          </div>

          {/* 태그설정 */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>태그설정</h3>
            <div className={styles.menuItems}>
              <button className={styles.menuItem} onClick={() => handleNavigate('/tag-battery')}>
                태그 배터리
              </button>
            </div>
          </div>

          <div className={styles.sectionDivider} />

          {/* 관리자설정 */}
          <div className={styles.section}>
            <h3 className={styles.sectionTitle}>관리자설정</h3>
            <div className={styles.menuItems}>
              <button className={styles.menuItem} onClick={() => handleNavigate('/my-info')}>
                내 정보 설정
              </button>
            </div>
          </div>
        </nav>
      </aside>
    </>
  )
}

function CloseIcon() {
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M28 12L12 28" stroke="black" strokeWidth="2" strokeLinecap="round"/>
      <path d="M12 12L28 28" stroke="black" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  )
}

function ChevronIcon() {
  return (
    <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1 1L7 7L1 13" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  )
}
