// Minimal hash-based router compatible with our usage of react-router-dom
const { useState: rUseState, useEffect: rUseEffect, createContext: rCreateContext, useContext: rUseContext } = React;

const RouterCtx = rCreateContext({ pathname: '/' });

function getHashPath() {
  const h = window.location.hash;
  if (!h || h === '#') return '/';
  return h.startsWith('#') ? h.slice(1) : h;
}

function HashRouter({ children }) {
  const [pathname, setPathname] = rUseState(getHashPath());
  rUseEffect(() => {
    if (!window.location.hash) window.location.hash = '#/';
    const onHash = () => setPathname(getHashPath());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return React.createElement(RouterCtx.Provider, { value: { pathname } }, children);
}

function useLocation() {
  return rUseContext(RouterCtx);
}

// Path matching: support exact, dynamic ":param", and wildcard "*"
function matchPath(routePath, pathname) {
  if (routePath === '*') return { params: {} };
  if (routePath === pathname) return { params: {} };
  const rp = routePath.split('/').filter(Boolean);
  const pp = pathname.split('/').filter(Boolean);
  if (rp.length !== pp.length) return null;
  const params = {};
  for (let i = 0; i < rp.length; i++) {
    if (rp[i].startsWith(':')) params[rp[i].slice(1)] = pp[i];
    else if (rp[i] !== pp[i]) return null;
  }
  return { params };
}

function Routes({ children }) {
  const { pathname } = useLocation();
  const routes = React.Children.toArray(children);
  // Try exact matches first, then wildcards
  let matched = null;
  for (const r of routes) {
    if (!r || !r.props || r.props.path === '*') continue;
    if (matchPath(r.props.path, pathname)) { matched = r; break; }
  }
  if (!matched) {
    matched = routes.find(r => r && r.props && r.props.path === '*') || null;
  }
  return matched ? matched.props.element : null;
}

function Route() { return null; } // sentinel, processed by Routes

function navigate(to) {
  if (typeof to !== 'string') return;
  if (to.startsWith('#')) window.location.hash = to;
  else window.location.hash = '#' + to;
}

function Link({ to, className, children, onClick, ...rest }) {
  const href = '#' + (to.startsWith('/') ? to : '/' + to);
  const handle = (e) => {
    if (onClick) onClick(e);
    // Default anchor behavior with hash will update location.hash and trigger hashchange
  };
  return React.createElement('a', { href, className, onClick: handle, ...rest }, children);
}

function NavLink({ to, className, children, ...rest }) {
  const { pathname } = useLocation();
  const isActive = pathname === to || (to !== '/' && pathname.startsWith(to));
  const resolvedClass = typeof className === 'function' ? className({ isActive }) : className;
  const href = '#' + (to.startsWith('/') ? to : '/' + to);
  const renderedChildren = typeof children === 'function' ? children({ isActive }) : children;
  return React.createElement('a', { href, className: resolvedClass, ...rest }, renderedChildren);
}

window.ReactRouterDOM = { HashRouter, Routes, Route, Link, NavLink, useLocation, navigate };