import { Toaster } from 'sonner'
import { NavLink, Outlet, Route, Routes } from 'react-router-dom'

import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'
import { Dashboard } from './pages/Dashboard'
import { Logs } from './pages/Logs'
import Planning from './pages/Planning'
import { Settings } from './pages/Settings'

function AppLayout() {
  const logErrors = useWsLogErrorCount(true)

  const tabClass = ({ isActive }: { isActive: boolean }) =>
    `rounded-lg px-3 py-2 text-sm font-medium transition ${
      isActive ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-900 hover:text-slate-200'
    }`

  return (
    <div className="min-h-screen bg-slate-950">
      <nav className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-1 px-4 py-2 md:px-8">
          <NavLink to="/" end className={tabClass}>
            Přehled
          </NavLink>
          <NavLink to="/planning" className={tabClass}>
            Plánování
          </NavLink>
          <NavLink to="/settings" className={tabClass}>
            Nastavení
          </NavLink>
          <a
            href="/logs"
            target="_blank"
            rel="noopener noreferrer"
            className="relative rounded-lg px-3 py-2 text-sm font-medium text-slate-400 transition hover:bg-slate-900 hover:text-slate-200"
          >
            Logy
            {logErrors > 0 ? (
              <span className="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-600 px-1 text-[10px] font-bold text-white">
                {logErrors > 99 ? '99+' : logErrors}
              </span>
            ) : null}
          </a>
        </div>
      </nav>
      <Outlet />
      <Toaster richColors position="top-right" theme="dark" />
    </div>
  )
}

export default function App() {
  return (
    <Routes>
      <Route element={<AppLayout />}>
        <Route index element={<Dashboard />} />
        <Route path="planning" element={<Planning />} />
        <Route path="settings" element={<Settings />} />
      </Route>
      <Route path="logs" element={<Logs />} />
    </Routes>
  )
}