import { useState } from 'react'
import { useNavigate, useLocation, Routes, Route, Navigate } from 'react-router-dom'
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'

// 宏观: 顶栏 4 tab (油价 / 经济数据 / 策略研究 / 经济文章), 默认 油价
// /macro           → 显示 oil tab (本组件 activeFromPath 决定)
// /macro/oil       → 油价 (新增)
// /macro/data      → 经济数据
// /macro/strategy  → 策略研究
// /macro/articles  → 经济文章
// /macro/articles/:slug → 文章详情
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' },
]

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'
  // 父路由 /macro 或 / 走 Tab 列表第一个 (油价)
  return 'oil'
}

export default function MacroPage() {
  const location = useLocation()
  const navigate = useNavigate()
  const active = activeFromPath(location.pathname)

  const tabs = TABS.map((t) => ({
    key: t.key,
    label: 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 />
      return null
    },
  }))

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

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

  return (
    <div>
      <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
    </div>
  )
}