import { useNavigate } from 'react-router-dom'
import { useAppDispatch } from '../store/hooks'
import { openTab } from '../store/slices/tabsSlice'

const LEFT_MODULES = [
  '销售管理', 'DCS系统', '产品管理', '生产运营', '生产执行', '模具管理',
  '采购管理', '材料库存', '成品库存', '外协管理', '物流管理', '质量管理',
  '财务管理', '成本管理(专)', '成本管理', '设备管理', '人事行政', 'OA系统',
  '基础设置', '系统设置',
]

type NavItem = string | { label: string; go?: string; star?: boolean }

const NAV_COLS: { title: string; items: NavItem[] }[] = [
  { title: '期初设置', items: ['客户期初', '供应商期初', '材料期初', '产品期初', '数据导入', '离线导出下载'] },
  { title: '用户管理', items: [{ label: '用户列表', go: 'userlist', star: true }, '系统权限', '系统权限稽查表', '权限组'] },
  { title: '系统参数', items: ['系统参数', '财务结账', '系统常量配置'] },
  { title: '计算方案', items: ['方案列表', '计算参数'] },
  { title: '日志', items: ['个性化模块', '操作日志', '异常清除KPI任务表', 'MYSQL监听器'] },
  { title: '开发平台', items: ['自定义开发范例', { label: '系统功能模块设置', star: true }, 'EBC流程清单', '功能模块界面设置', '增删改存业务处理'] },
  { title: 'API对接管理', items: ['调用第三方接口(TOKEN配置)', '调用第三方接口(接口定义)', '被第三方调用(生成token)', '数据同步', '被第三方调用(API定义)'] },
]

interface Props { onClose: () => void }

export default function NavOverlay({ onClose }: Props) {
  const navigate = useNavigate()
  const dispatch = useAppDispatch()

  function handleUserList() {
    dispatch(openTab({ id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }))
    navigate('/usr/users')
    onClose()
  }

  return (
    <div
      data-testid="nav-bg"
      onClick={onClose}
      style={{ position: 'absolute', inset: 0, background: 'var(--color-nav-overlay-bg)', zIndex: 20, color: '#cfd3da', display: 'flex' }}
    >
      <div onClick={e => e.stopPropagation()} style={{ display: 'flex', flex: 1 }}>
        {/* Left sidebar */}
        <div style={{ width: 200, background: '#2b3137', borderRight: '1px solid #1e2226', padding: '8px 0', overflowY: 'auto' }}>
          {LEFT_MODULES.map(mod => (
            <div
              key={mod}
              style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '11px 18px', fontSize: 14, cursor: 'pointer',
                color: mod === '系统设置' ? 'var(--color-tab-active)' : '#d3d6db',
                background: mod === '系统设置' ? '#34393f' : 'transparent',
              }}
            >
              {mod}
            </div>
          ))}
        </div>
        {/* Right grid */}
        <div style={{ flex: 1, padding: '30px 40px', display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '30px 40px', alignContent: 'start', overflowY: 'auto' }}>
          {NAV_COLS.map(col => (
            <div key={col.title}>
              <h3 style={{ fontSize: 15, color: '#e8eaee', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid #4a4f57', paddingBottom: 10 }}>
                {col.title}
              </h3>
              {col.items.map(item => {
                if (typeof item === 'string') {
                  return <div key={item} style={{ padding: '7px 0', color: '#cfd3da', fontSize: 14 }}>{item}</div>
                }
                return (
                  <div
                    key={item.label}
                    onClick={item.go === 'userlist' ? handleUserList : undefined}
                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 0', color: '#cfd3da', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
                  >
                    {item.label}
                    {item.star && <span style={{ color: '#f3b526' }}>★</span>}
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}