import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
import { useAppDispatch } from '@/store'
import { openTab } from '@/store/tabs'

const navSide = [
  { ico: 'sales', label: '销售管理' }, { ico: 'dcs', label: 'DCS系统' }, { ico: 'prod', label: '产品管理' },
  { ico: 'ops', label: '生产运营' }, { ico: 'exec', label: '生产执行' }, { ico: 'mold', label: '模具管理' },
  { ico: 'cart', label: '采购管理' }, { ico: 'mat', label: '材料库存' }, { ico: 'fg', label: '成品库存' },
  { ico: 'out', label: '外协管理' }, { ico: 'logi', label: '物流管理' }, { ico: 'qa', label: '质量管理' },
  { ico: 'fin', label: '财务管理' }, { ico: 'cost1', label: '成本管理(专)' }, { ico: 'cost2', label: '成本管理' },
  { ico: 'eq', label: '设备管理' }, { ico: 'hr', label: '人事行政' }, { ico: 'oa', label: 'OA系统' },
  { ico: 'base', label: '基础设置' }, { ico: 'sys', label: '系统设置', active: true },
]

const sideIco: Record<string, string> = {
  sales: 'M3 7l3 10h12l3-10M5 7l1-3h12l1 3M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  dcs: 'M12 2l9 5-9 5-9-5z M3 12l9 5 9-5 M3 17l9 5 9-5',
  prod: 'M3 7l9-5 9 5v10l-9 5-9-5z',
  ops: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z',
  exec: 'M5 4h14v16H5z M5 9h14 M9 4v5',
  mold: 'M4 7h16v10H4z M8 7v10 M16 7v10',
  cart: 'M5 5h2l3 11h10l2-8H8 M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  mat: 'M4 21V8l8-5 8 5v13z M9 21v-7h6v7',
  fg: 'M3 21V9l9-6 9 6v12z',
  out: 'M12 12c2 0 4-1 4-4s-2-4-4-4-4 1-4 4 2 4 4 4z M4 21c0-4 4-7 8-7s8 3 8 7',
  logi: 'M3 7h11v9H3z M14 10h5l3 3v3h-8z M7 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  qa: 'M12 2l8 4v6c0 5-4 8-8 10-4-2-8-5-8-10V6z M9 12l2 2 4-4',
  fin: 'M12 2v20 M7 6h10 M7 10h10',
  cost1: 'M4 20V8 M9 20V4 M14 20v-8 M19 20v-6 M2 20h20',
  cost2: 'M4 20V8 M9 20V4 M14 20v-8 M19 20v-6 M2 20h20',
  eq: 'M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M19 12a7 7 0 0 0-.5-2.5l1.5-1.5-2-2-1.5 1.5A7 7 0 0 0 14 7l-.5-2h-3l-.5 2A7 7 0 0 0 7.5 7.5L6 6 4 8l1.5 1.5A7 7 0 0 0 5 12',
  hr: 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M2 21c0-4 3-7 7-7s7 3 7 7 M17 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M22 21c0-3-2-5-5-5',
  oa: 'M3 7h18v12H3z M3 11h18 M8 7V4h8v3',
  base: 'M4 6h16 M4 12h16 M4 18h16 M8 6v12 M14 6v12',
  sys: 'M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M19 12a7 7 0 0 0-.5-2.5l1.5-1.5-2-2-1.5 1.5A7 7 0 0 0 14 7l-.5-2h-3l-.5 2A7 7 0 0 0 7.5 7.5L6 6 4 8l1.5 1.5A7 7 0 0 0 5 12',
}

interface NavLink {
  label: string
  star?: boolean
  go?: 'userlist'
}

const navCols: { title: string; items: (string | NavLink)[] }[] = [
  { title: '期初设置', items: ['客户期初', '供应商期初', '材料期初', '产品期初', '数据导入', '离线导出下载'] },
  { title: '用户管理', items: [{ label: '用户列表', star: true, go: 'userlist' }, '系统权限', '系统权限稽查表', '权限组'] },
  { 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()

  const handleClick = (it: string | NavLink) => {
    if (typeof it !== 'string' && it.go === 'userlist') {
      dispatch(openTab({ key: 'userlist', title: '用户列表', path: '/users' }))
      navigate('/users')
      onClose()
    } else {
      const label = typeof it === 'string' ? it : it.label
      message.info(`${label} - 未实现`)
    }
  }

  return (
    <div className="nav-overlay">
      <div className="side">
        {navSide.map(s => (
          <div key={s.label} className={`si ${s.active ? 'active' : ''}`}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}>
              <path d={sideIco[s.ico] || ''} />
            </svg>
            {s.label}
          </div>
        ))}
      </div>
      <div className="grid">
        {navCols.map(c => (
          <div key={c.title} className="col">
            <h3>{c.title}</h3>
            {c.items.map((it, i) => {
              const label = typeof it === 'string' ? it : it.label
              const star = typeof it !== 'string' && it.star
              return (
                <a key={i} onClick={() => handleClick(it)}>
                  {label}
                  {star && <span className="star">★</span>}
                </a>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )
}