import { useState, useEffect, useCallback } from 'react'
import type { NavTab } from '@/components/layout/app-sidebar'

const VALID_TABS: NavTab[] = [
  'overview',
  'connections',
  'routes',
  'topology',
  'interfaces',
  'settings',
]

function getTabFromHash(hash: string): NavTab {
  const cleanHash = hash.replace(/^#\/?/, '').trim().toLowerCase()
  if (!cleanHash || cleanHash === '') {
    return 'overview'
  }
  // 向后兼容旧的 dashboard hash
  if (cleanHash === 'dashboard') {
    return 'overview'
  }
  const matchingTab = VALID_TABS.find((tab) => tab === cleanHash)
  return matchingTab || 'overview'
}

export function useHashRoute() {
  const [currentTab, setCurrentTabState] = useState<NavTab>(() =>
    getTabFromHash(window.location.hash)
  )

  useEffect(() => {
    const handleHashChange = () => {
      const newTab = getTabFromHash(window.location.hash)
      setCurrentTabState(newTab)
    }

    // If current hash is empty, initialize with #/overview
    if (!window.location.hash || window.location.hash === '#' || window.location.hash === '#/') {
      window.location.hash = '#/overview'
    } else if (window.location.hash === '#/dashboard') {
      window.location.hash = '#/overview'
    }

    window.addEventListener('hashchange', handleHashChange)
    return () => {
      window.removeEventListener('hashchange', handleHashChange)
    }
  }, [])

  const navigate = useCallback((tab: NavTab) => {
    window.location.hash = `#/${tab}`
    setCurrentTabState(tab)
  }, [])

  return {
    currentTab,
    navigate,
  }
}