/* Top-level app — hash router for the deployed site. */

const ROUTES = ['home', 'catalogue', 'article', 'signup', 'dashboard', 'admin', 'admin-content', 'admin-members'];

function getRouteFromHash() {
  const raw = (location.hash || '').replace(/^#\/?/, '').toLowerCase();
  return ROUTES.includes(raw) ? raw : 'home';
}

function DemoApp() {
  const [route, setRoute] = React.useState(getRouteFromHash);

  React.useEffect(() => {
    const onHash = () => setRoute(getRouteFromHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  React.useEffect(() => {
    window.__ome_navigate = (r) => {
      if (!ROUTES.includes(r)) r = 'home';
      if (location.hash !== `#/${r}`) {
        location.hash = `#/${r}`;
      } else {
        window.scrollTo({ top: 0, behavior: 'auto' });
      }
      window.scrollTo({ top: 0, behavior: 'auto' });
    };
    return () => { delete window.__ome_navigate; };
  }, []);

  let Screen = VariationA;
  if (route === 'catalogue')          Screen = ScreenSubCatalogue;
  else if (route === 'article')       Screen = ScreenArticle;
  else if (route === 'signup')        Screen = ScreenSignup;
  else if (route === 'dashboard')     Screen = ScreenDashboard;
  else if (route === 'admin')         Screen = ScreenAdmin;
  else if (route === 'admin-content') Screen = ScreenAdminContent;
  else if (route === 'admin-members') Screen = ScreenAdminMembers;

  const inAdmin = route.startsWith('admin');

  return (
    <LangProvider>
      <a className="skip-link" href="#main">Skip to content</a>
      <Screen />
      <DevAdminButton inAdmin={inAdmin} />
    </LangProvider>
  );
}

function DevAdminButton({ inAdmin }) {
  const style = {
    position: 'fixed',
    right: 16,
    bottom: 16,
    zIndex: 9999,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
    padding: '8px 12px',
    border: '1px solid rgba(15,23,42,0.18)',
    borderRadius: 999,
    background: 'rgba(15,23,42,0.88)',
    color: '#f8fafc',
    fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
    fontSize: 12,
    letterSpacing: 0.2,
    cursor: 'pointer',
    boxShadow: '0 6px 20px rgba(15,23,42,0.18)',
    backdropFilter: 'blur(4px)',
  };
  const dot = {
    width: 6, height: 6, borderRadius: '50%',
    background: inAdmin ? '#f59e0b' : '#34d399',
  };
  return (
    <button
      type="button"
      style={style}
      onClick={() => window.__ome_navigate(inAdmin ? 'home' : 'admin')}
      title={inAdmin ? 'Back to public home' : 'Open admin panel (dev)'}
      aria-label={inAdmin ? 'Back to public home' : 'Open admin panel'}
    >
      <span style={dot} />
      <span>dev</span>
      <span style={{ opacity: 0.6 }}>·</span>
      <span>{inAdmin ? '← home' : 'admin →'}</span>
    </button>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<DemoApp />);