'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Monitor, Settings2, Gauge, Wrench, Recycle, Layers, FolderTree, Smartphone } from 'lucide-react'

const menuGroups = [
  { title: '设备', items: [
    { path: '/devices', label: '设备列表', icon: Monitor },
    { path: '/models', label: '设备型号管理', icon: Settings2 },
  ]},
  { title: '物料', items: [
    { path: '/materials', label: '物料列表', icon: Gauge },
    { path: '/materials/manage', label: '物料管理', icon: Layers },
    { path: '/materials/categories', label: '分类管理', icon: FolderTree },
  ] },
  { title: '软件', items: [
    { path: '/app-versions', label: 'APP版本管理', icon: Smartphone },
  ]},
  { title: '维修', items: [
    { path: '/repair', label: '维修工单', icon: Wrench },
    { path: '/scrap', label: '报废回收', icon: Recycle },
  ]},
]

export function Sidebar() {
  const pathname = usePathname()
  const isActive = (path: string) =>
    path === '/' ? pathname === '/' : pathname === path || (pathname.startsWith(path + '/') && path !== '/materials')

  return (
    <aside className="w-[200px] h-screen flex-shrink-0 overflow-y-auto" style={{ backgroundColor: '#fff', borderRight: '1px solid #e8e8e8' }}>
      <div className="px-4 py-4" style={{ borderBottom: '1px solid #f0f0f0' }}>
        <div className="text-lg font-semibold" style={{ color: '#4a7c59' }}>Geomative</div>
      </div>
      <Link href="/" className="flex items-center gap-2 px-4 py-3 text-sm transition-colors"
        style={{ color: isActive('/') ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: isActive('/') ? '#eef5f0' : 'transparent', borderLeft: isActive('/') ? '3px solid #4a7c59' : '3px solid transparent', fontWeight: isActive('/') ? 600 : 400 }}>
        首页
      </Link>
      {menuGroups.map(group => (
        <div key={group.title}>
          <div className="px-4 py-2.5 text-xs font-semibold uppercase tracking-wider" style={{ color: 'rgba(0,0,0,0.35)' }}>{group.title}</div>
          {group.items.map(item => {
            const Icon = item.icon
            return (
              <Link key={item.path} href={item.path} className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
                style={{ color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: isActive(item.path) ? '#eef5f0' : 'transparent', borderLeft: isActive(item.path) ? '3px solid #4a7c59' : '3px solid transparent', fontWeight: isActive(item.path) ? 600 : 400 }}>
                <Icon size={16} style={{ color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.35)' }} />
                {item.label}
              </Link>
            )
          })}
        </div>
      ))}
    </aside>
  )
}
