import { BuildFooter } from './BuildFooter'
import { NavLink, Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
import { SourceButton, ThemeToggle } from '@shared/ui'
import { Compare } from './pages/Compare'
import { Line } from './pages/Line'
import { Overview } from './pages/Overview'

function LineRoute() {
  const { id } = useParams()
  return <Line key={id} />
}

export function App() {
  const location = useLocation()
  const ipv6 = location.pathname.endsWith('~ipv6') || new URLSearchParams(location.search).get('ip_version') === 'ipv6'
  const familyQuery = ipv6 ? '?ip_version=ipv6' : ''
  return (
    <>
      <header className="topbar">
        <div className="inner">
          <nav className="topnav">
            <NavLink to={`/${familyQuery}`} end className={({ isActive }) => (isActive ? 'active' : '')}>
              总览
            </NavLink>
            <NavLink to={`/compare${familyQuery}`} className={({ isActive }) => (isActive ? 'active' : '')}>
              对比
            </NavLink>
            <a href="/admin/">管理</a>
          </nav>
          <SourceButton variant="status" />
          <ThemeToggle />
        </div>
      </header>
      <Routes>
        <Route path="/" element={<Overview />} />
        <Route path="/line/:id" element={<LineRoute />} />
        <Route path="/compare" element={<Compare />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
      <footer className="site-foot">
        国家和运营商由 <a href="https://ip.007995.xyz/" target="_blank" rel="noreferrer">ip.007995.xyz</a> 查询
        <BuildFooter />
      </footer>
    </>
  )
}