import { NavLink } from 'react-router-dom'
import {
  LayoutDashboard, Store, FileText, RefreshCw,
  Bell, Cpu, ClipboardList, Zap, Users, Package, Building2, Brain,
  Link2, ListOrdered, NotebookPen, CalendarDays, Mail, BarChart3,
  ScrollText, Settings, Smartphone
} from 'lucide-react'

const nav = [
  { to: '/dashboard',   icon: LayoutDashboard, label: '대시보드' },
  { to: '/stores',      icon: Store,            label: '매장 관리' },
  { to: '/templates',   icon: FileText,         label: 'ESL 템플릿' },
  { to: '/pos-cvt',     icon: RefreshCw,        label: 'POS 가격변환' },
  { to: '/tag-binding', icon: Link2,            label: '태그 바인딩' },
  { to: '/update-queue',icon: ListOrdered,      label: '업데이트 큐' },
  { to: '/alarms',      icon: Bell,             label: '알람 관리' },
  { to: '/hcore',       icon: Cpu,              label: 'HCore 장치' },
  { to: '/works',       icon: ClipboardList,    label: '작업 이력' },
  { to: '/firmware',    icon: Zap,              label: '펌웨어' },
  { to: '/products',    icon: Package,          label: '상품/가격' },
  { to: '/users',       icon: Users,            label: '사용자' },
  { to: '/tenants',     icon: Building2,        label: '테넌트 관리' },
  { to: '/audit',       icon: ScrollText,       label: '감사 로그' },
  { to: '/settings',    icon: Settings,         label: '시스템 설정' },
  { to: '/ai',          icon: Brain,            label: 'AI 분석' },
  { to: '/worklogs',    icon: NotebookPen,      label: '업무일지' },
  { to: '/schedules',   icon: CalendarDays,     label: '일정 관리' },
  { to: '/messages',    icon: Mail,             label: '쪽지' },
  { to: '/work-stats',  icon: BarChart3,        label: '업무 통계' },
  { to: '/mobile-app',  icon: Smartphone,       label: '모바일 앱 설치' },
]

export default function Sidebar() {
  return (
    <aside className="w-56 bg-panel flex flex-col border-r border-edge flex-shrink-0">
      <div className="h-14 flex items-center px-4 border-b border-edge">
        <span className="text-brand font-bold text-sm tracking-wide">ESN</span>
        <span className="ml-2 text-xs text-gray-400">ESL 통합 관리</span>
      </div>
      <nav className="flex-1 overflow-y-auto py-3">
        {nav.map(({ to, icon: Icon, label }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              `flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
                isActive
                  ? 'bg-brand/15 text-brand border-r-2 border-brand'
                  : 'text-gray-400 hover:text-white hover:bg-edge/50'
              }`
            }
          >
            <Icon size={16} />
            {label}
          </NavLink>
        ))}
      </nav>
      <div className="p-4 border-t border-edge text-xs text-gray-500">
        zioinfo-esn v1.0
      </div>
    </aside>
  )
}