import { useEffect, useState } from 'react'
import './app.css'
import { logout } from './api'
import { Login } from './pages/Login'
import { Endpoints } from './pages/Endpoints'
import { Tasks } from './pages/Tasks'
import { TaskDetail } from './pages/TaskDetail'

type Route =
  | { name: 'login' }
  | { name: 'tasks' }
  | { name: 'endpoints' }
  | { name: 'task'; id: number }
  | { name: 'notfound' }

function parseRoute(hash: string): Route {
  const path = hash.replace(/^#/, '') || '/'
  if (path === '/login') return { name: 'login' }
  if (path === '/') return { name: 'tasks' }
  if (path === '/endpoints') return { name: 'endpoints' }
  const m = path.match(/^\/tasks\/(\d+)$/)
  if (m) return { name: 'task', id: Number(m[1]) }
  return { name: 'notfound' }
}

function useHashRoute(): Route {
  const [hash, setHash] = useState(location.hash)
  useEffect(() => {
    const onChange = () => setHash(location.hash)
    window.addEventListener('hashchange', onChange)
    return () => window.removeEventListener('hashchange', onChange)
  }, [])
  return parseRoute(hash)
}

function App() {
  const route = useHashRoute()

  if (route.name === 'login') {
    return <Login onSuccess={() => (location.hash = '#/')} />
  }

  function handleLogout() {
    logout()
      .catch(() => {})
      .finally(() => (location.hash = '#/login'))
  }

  return (
    <div className="shell">
      <header className="topbar">
        <div className="brand">
          <span className="bracket">[</span>IMAP<span className="dim">/COPIER</span>
          <span className="bracket">]</span>
        </div>
        <nav className="topnav">
          <a href="#/" className={route.name === 'tasks' || route.name === 'task' ? 'active' : ''}>
            Tasks
          </a>
          <a href="#/endpoints" className={route.name === 'endpoints' ? 'active' : ''}>
            Endpoints
          </a>
        </nav>
        <div className="session-indicator">
          <span className="pulse-dot" /> session active
        </div>
        <button className="btn btn-ghost" onClick={handleLogout}>
          Logout
        </button>
      </header>
      <main className="main">
        {route.name === 'tasks' && <Tasks />}
        {route.name === 'endpoints' && <Endpoints />}
        {route.name === 'task' && <TaskDetail id={route.id} />}
        {route.name === 'notfound' && (
          <div className="panel">
            <p>Unknown route.</p>
            <a className="crumb" href="#/">
              ← back to tasks
            </a>
          </div>
        )}
      </main>
    </div>
  )
}

export default App