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'

// 宏观: 顶栏 3 tab (经济文章 / 经济数据 / 策略研究), 默认 经济数据
// /macro         → 重定向到 /macro/data
// /macro/data    → 经济数据 (默认)
// /macro/strategy→ 策略研究
// /macro/articles→ 经济文章
// /macro/articles/:slug → 文章详情
const TABS = [
  { 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/articles')) return 'articles'
  if (pathname.startsWith('/macro/strategy')) return 'strategy'
  return 'data'
}

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 === '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>
  )
}