import * as React from 'react'

import { DesignSystemPreview } from '@/features/design-system/DesignSystemPreview'
import { SolutionCreatePage } from '@/features/solutions/SolutionCreatePage'
import { SolutionListPage } from '@/features/solutions/SolutionListPage'
import { AuditLogPage } from '@/features/system/AuditLogPage'
import { SystemMenusPage } from '@/features/system/SystemMenusPage'
import { SystemRolesPage } from '@/features/system/SystemRolesPage'
import { SystemUserGroupsPage } from '@/features/system/SystemUserGroupsPage'
import { SystemUsersPage } from '@/features/system/SystemUsersPage'
import { TicketCreatePage } from '@/features/tickets/TicketCreatePage'
import { TicketDetailPage } from '@/features/tickets/TicketDetailPage'
import { TicketListPage } from '@/features/tickets/TicketListPage'
import { WorkbenchPage } from '@/features/workbench/WorkbenchPage'

function getRoute() {
  return window.location.hash.replace(/^#/, '') || '/'
}

export function Router() {
  const [route, setRoute] = React.useState(getRoute)

  React.useEffect(() => {
    const handleHashChange = () => setRoute(getRoute())
    window.addEventListener('hashchange', handleHashChange)
    return () => window.removeEventListener('hashchange', handleHashChange)
  }, [])

  if (route === '/design-system') {
    return <DesignSystemPreview />
  }

  if (route === '/audit') {
    return <AuditLogPage />
  }

  if (route === '/system/users') {
    return <SystemUsersPage />
  }

  if (route === '/system/user-groups') {
    return <SystemUserGroupsPage />
  }

  if (route === '/system/roles') {
    return <SystemRolesPage />
  }

  if (route === '/system/menus') {
    return <SystemMenusPage />
  }

  if (route === '/') {
    return <WorkbenchPage />
  }

  if (route === '/solutions') {
    return <SolutionListPage />
  }

  if (route.startsWith('/solutions/new')) {
    return <SolutionCreatePage />
  }

  if (route === '/tickets') {
    return <TicketListPage />
  }

  if (route === '/tickets/new') {
    return <TicketCreatePage />
  }

  const ticketMatch = route.match(/^\/tickets\/(\d+)$/)
  if (ticketMatch) {
    return <TicketDetailPage ticketId={Number(ticketMatch[1])} />
  }

  return <WorkbenchPage />
}