import * as React from 'react'

import { DesignSystemPreview } from '@/features/design-system/DesignSystemPreview'
import { KnowledgeBaseListPage } from '@/features/knowledge/KnowledgeBaseListPage'
import { KnowledgeItemEditorPage } from '@/features/knowledge/KnowledgeItemEditorPage'
import { KnowledgeSearchPage } from '@/features/knowledge/KnowledgeSearchPage'
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'
import { ModelProviderPage } from '@/features/modelhub/ModelProviderPage'
import { SkillListPage } from '@/features/skills/SkillListPage'
import { SkillDetailPage } from '@/features/skills/SkillDetailPage'
import { AgentListPage } from '@/features/agents/AgentListPage'
import { AgentDetailPage } from '@/features/agents/AgentDetailPage'
import { AgentRunListPage } from '@/features/agents/AgentRunListPage'
import { AgentRunDetailPage } from '@/features/agents/AgentRunDetailPage'

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 === '/modelhub/providers') {
    return <ModelProviderPage />
  }

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

  const skillMatch = route.match(/^\/skills\/(\d+)$/)
  if (skillMatch) {
    return <SkillDetailPage skillId={Number(skillMatch[1])} />
  }

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

  const agentMatch = route.match(/^\/agents\/(\d+)$/)
  if (agentMatch) {
    return <AgentDetailPage agentId={Number(agentMatch[1])} />
  }

  if (route === '/agent-runs') {
    return <AgentRunListPage />
  }

  const runMatch = route.match(/^\/agent-runs\/([0-9a-f-]+)$/i)
  if (runMatch) {
    return <AgentRunDetailPage publicId={runMatch[1]} />
  }

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

  if (route === '/knowledge/search') {
    return <KnowledgeSearchPage />
  }

  if (route === '/knowledge/items/new') {
    return <KnowledgeItemEditorPage />
  }

  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 />
}