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

import { SiteSelectionProvider, useSiteSelection } from './context/SiteSelectionContext'
import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'

// Lazy route komponenty — initial bundle nese jen layout; stránky se dotahují per route.
const Dashboard = lazy(() =>
  import('./pages/Dashboard').then((m) => ({ default: m.Dashboard })),
)
const Economics = lazy(() => import('./pages/Economics'))
const EnergyFlows = lazy(() => import('./pages/EnergyFlows'))
const ForecastVsActual = lazy(() => import('./pages/ForecastVsActual'))
const Logs = lazy(() => import('./pages/Logs').then((m) => ({ default: m.Logs })))
const Planning = lazy(() => import('./pages/Planning'))
const SiteConfiguration = lazy(() => import('./pages/SiteConfiguration'))
const Settings = lazy(() => import('./pages/Settings').then((m) => ({ default: m.Settings })))

function RouteFallback() {
  return (
    <div className="flex min-h-[40vh] items-center justify-center" role="status" aria-label="Načítání stránky">
      <div className="h-8 w-8 animate-spin rounded-full border-2 border-slate-700 border-t-slate-300" />
    </div>
  )
}

function SiteCombo() {
  const { sites, selectedSiteId, setSelectedSiteId, ready, error } = useSiteSelection()

  if (!ready) {
    return (
      <span className="ml-auto text-xs text-slate-500" aria-live="polite">
        Lokality…
      </span>
    )
  }

  if (error != null || sites.length === 0) {
    return (
      <span className="ml-auto max-w-[12rem] truncate text-xs text-amber-500/90" title={error ?? undefined}>
        {error ?? 'Žádná lokalita'}
      </span>
    )
  }

  return (
    <label className="ml-auto flex min-w-0 items-center gap-2 text-sm text-slate-400">
      <span className="hidden shrink-0 sm:inline">Lokalita</span>
      <select
        className="max-w-[11rem] cursor-pointer truncate rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-slate-200 sm:max-w-[14rem]"
        value={selectedSiteId ?? ''}
        onChange={(e) => {
          const v = Number.parseInt(e.target.value, 10)
          if (Number.isFinite(v)) setSelectedSiteId(v)
        }}
        aria-label="Vybrat lokalitu"
      >
        {sites.map((s) => (
          <option key={s.id} value={s.id}>
            {s.code} — {s.name}
          </option>
        ))}
      </select>
    </label>
  )
}

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 gap-y-2 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="/forecast-vs-actual" className={tabClass}>
            Srovnání
          </NavLink>
          <NavLink to="/economics" className={tabClass}>
            Ekonomika
          </NavLink>
          <NavLink to="/energy-flows" className={tabClass}>
            Toky
          </NavLink>
          <NavLink to="/site-config" className={tabClass}>
            Konfigurace
          </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>
          <SiteCombo />
        </div>
      </nav>
      <Suspense fallback={<RouteFallback />}>
        <Outlet />
      </Suspense>
      <Toaster richColors position="top-right" theme="dark" />
    </div>
  )
}

export default function App() {
  return (
    <SiteSelectionProvider>
      <Routes>
        <Route element={<AppLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="planning" element={<Planning />} />
          <Route path="forecast-vs-actual" element={<ForecastVsActual />} />
          <Route path="economics" element={<Economics />} />
          <Route path="energy-flows" element={<EnergyFlows />} />
          <Route path="site-config" element={<SiteConfiguration />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route
          path="logs"
          element={
            <Suspense fallback={<RouteFallback />}>
              <Logs />
            </Suspense>
          }
        />
      </Routes>
    </SiteSelectionProvider>
  )
}
