import { NavLink } from 'react-router-dom'
import { Icon, type IconName } from '../lib/icons'

type NavItem = { to: string; icon: IconName; label: string }

const groups: { title: string; items: NavItem[] }[] = [
  {
    title: '관제',
    items: [
      { to: '/dashboard',  icon: 'dashboard', label: '대시보드' },
      { to: '/gateways',   icon: 'gateway',   label: '게이트웨이' },
      { to: '/signboards', icon: 'signboard', label: '간판 패널(ESB)' },
      { to: '/alarms',     icon: 'alarm',     label: '알람/장애' },
    ],
  },
  {
    title: '매장 · 조직',
    items: [
      { to: '/regions',      icon: 'region', label: '지역 관리' },
      { to: '/stores',       icon: 'store',  label: '매장 관리' },
      { to: '/store-groups', icon: 'group',  label: '매장 그룹' },
      { to: '/tenants',      icon: 'tenant', label: '테넌트' },
      { to: '/users',        icon: 'users',  label: '사용자 계정' },
    ],
  },
  {
    title: '간판 콘텐츠',
    items: [
      { to: '/templates',       icon: 'template',      label: '템플릿' },
      { to: '/sign-editor',     icon: 'editor',        label: '간판 이미지 에디터' },
      { to: '/template-groups', icon: 'templateGroup', label: '템플릿 그룹·배포' },
      { to: '/ad-schedules',    icon: 'ad',            label: '광고 스케줄' },
    ],
  },
  {
    title: '배포 · 운영',
    items: [
      { to: '/deploys',  icon: 'deploy',   label: '간판정보 배포' },
      { to: '/firmware', icon: 'firmware', label: '펌웨어 배포' },
      { to: '/backups',  icon: 'backup',   label: '백업/복구' },
    ],
  },
  {
    title: 'AI · 시스템',
    items: [
      { to: '/ai',          icon: 'ai',       label: 'AI 어시스턴트' },
      { to: '/ai-platform', icon: 'cpu',      label: 'AI 플랫폼 설정' },
      { to: '/audit',       icon: 'audit',    label: '감사 로그' },
      { to: '/settings',    icon: 'settings', 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">
        <Icon name="signboard" size={18} className="text-brand" />
        <span className="ml-2 text-brand font-bold text-sm tracking-wide">GUARDiA</span>
        <span className="ml-1.5 text-xs text-gray-400">Signage</span>
      </div>
      <nav className="flex-1 overflow-y-auto py-2">
        {groups.map(g => (
          <div key={g.title} className="mb-1">
            <div className="px-4 pt-3 pb-1 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">{g.title}</div>
            {g.items.map(({ to, icon, label }) => (
              <NavLink key={to} to={to}
                className={({ isActive }) =>
                  `flex items-center gap-3 px-4 py-2 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 name={icon} size={16} />{label}
              </NavLink>
            ))}
          </div>
        ))}
      </nav>
      <div className="p-4 border-t border-edge text-xs text-gray-500">e-SignBoard · v1.0</div>
    </aside>
  )
}
