import { useLocation, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import TabIcon from './TabIcon.jsx'

// 底部 Tab 配置: key 既是路由前缀, 又是 icon 名
// 使用 antd-mobile TabBar: 自带 safe-area 处理, 仿原生 iOS/Android 风格
// V0.2: 打卡置最左并为默认 Tab; 原「首页」的报警/新闻并入「宏观」, 不再有首页 Tab
const TABS = [
  { key: '/checkin', name: 'checkin', label: '打卡' },
  { key: '/macro',   name: 'macro',   label: '宏观' },
  { key: '/monitor', name: 'monitor', label: '监控' },
  { key: '/me',      name: 'me',      label: '我' },
]

// 根据当前路径计算激活的 tab key (精确匹配 + 前缀匹配)
function activeKeyFromPath(pathname) {
  for (const t of TABS) {
    if (pathname === t.key || pathname.startsWith(t.key + '/')) {
      return t.key
    }
  }
  // 未知路径兜底到第一个 Tab (打卡)
  return TABS[0].key
}

// 移动端底部 Tab 导航: antd-mobile TabBar, 内置安全区
// 作用: 渲染底部 4 个 tab, 切换路由; 激活态根据当前 URL 计算
export default function BottomNav() {
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const activeKey = activeKeyFromPath(pathname)

  return (
    <TabBar
      activeKey={activeKey}
      safeArea
      className="app-tabbar"
      onChange={navigate}
    >
      {TABS.map((t) => (
        <TabBar.Item
          key={t.key}
          title={t.label}
          icon={(active) => <TabIcon name={t.name} active={active} />}
        />
      ))}
    </TabBar>
  )
}