import { useState } from 'react'
import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
import { Badge, NavBar } from 'antd-mobile'
import SwipeTabs from '../components/SwipeTabs.jsx'
import DataView from './macro/DataView.jsx'
import StrategyView from './macro/StrategyView.jsx'
import ArticlesView from './macro/ArticlesView.jsx'
import ArticleDetail from './macro/ArticleDetail.jsx'
import OilPage from './macro/OilPage.jsx'
import AlertsView from './macro/AlertsView.jsx'
import NewsView from './macro/NewsView.jsx'
import NewsDetail from './news/NewsDetail.jsx'

// 宏观: 顶栏 6 tab, 默认 油价
// /macro           → 显示 oil tab (本组件 activeFromPath 决定)
// /macro/oil       → 油价
// /macro/data      → 经济数据
// /macro/strategy  → 策略研究
// /macro/articles  → 经济文章
// /macro/alerts    → 报警   (V0.2: 原「首页」tab 合并进来)
// /macro/news      → 新闻   (V0.2: 原「首页」tab 合并进来)
// 详情: /macro/data/:name · /macro/strategy/:name · /macro/articles/:slug · /macro/news/:id
const TABS = [
  { key: 'oil',      label: '油价',     path: '/macro/oil' },
  { key: 'data',     label: '经济数据', path: '/macro/data' },
  { key: 'strategy', label: '策略研究', path: '/macro/strategy' },
  { key: 'articles', label: '经济文章', path: '/macro/articles' },
  { key: 'alerts',   label: '报警',     path: '/macro/alerts' },
  { key: 'news',     label: '新闻',     path: '/macro/news' },
]

function activeFromPath(pathname) {
  if (pathname.startsWith('/macro/oil')) return 'oil'
  if (pathname.startsWith('/macro/articles')) return 'articles'
  if (pathname.startsWith('/macro/strategy')) return 'strategy'
  if (pathname.startsWith('/macro/data')) return 'data'
  if (pathname.startsWith('/macro/alerts')) return 'alerts'
  if (pathname.startsWith('/macro/news')) return 'news'
  // 父路由 /macro 走 Tab 列表第一个 (油价)
  return 'oil'
}

export default function MacroPage() {
  const location = useLocation()
  const navigate = useNavigate()
  const active = activeFromPath(location.pathname)
  // 报警角标: 由 AlertsView 回传总数
  const [alertCount, setAlertCount] = useState(0)

  const tabs = TABS.map((t) => ({
    key: t.key,
    label: t.key === 'alerts'
      ? <span className="tab-label">报警{alertCount > 0 && <Badge content={alertCount} />}</span>
      : t.label,
    render: () => {
      if (t.key === 'oil') return <OilPage />
      if (t.key === 'data') return <DataView />
      if (t.key === 'strategy') return <StrategyView />
      if (t.key === 'articles') return <ArticlesView />
      if (t.key === 'alerts') return <AlertsView onCount={setAlertCount} />
      if (t.key === 'news') return <NewsView />
      return null
    },
  }))

  function onChange(key) {
    const next = TABS.find((t) => t.key === key)
    if (next) navigate(next.path)
  }

  // 详情页单独走 React Router 渲染, 不参与滑屏
  if (location.pathname.match(/^\/macro\/(articles|data|strategy|news)\/[^/]+$/)) {
    return (
      <Routes>
        <Route path="data/:name" element={<DataView />} />
        <Route path="strategy/:name" element={<StrategyView />} />
        <Route path="articles/:slug" element={<ArticleDetail />} />
        <Route path="news/:id" element={<NewsDetail />} />
      </Routes>
    )
  }

  return (
    <div className="page-with-navbar">
      <NavBar back={null} />
      <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
    </div>
  )
}