/* global React, ReactDOM,
   Header, Footer,
   HomePage, ProjectsPage, ProjectDetailPage,
   ServicesPage, LabPage, ContactPage */

function App() {
  const [location, setLocation] = React.useState(readHashRoute);
  const route = location.route;
  const projectId = location.projectId;

  const navigate = (r) => {
    setHashForRoute(r);
  };

  const openProject = (id) => {
    const project = (window.XILROS_DATA.projects || []).find(p => p.id === id || p.slug === id);
    setHashForProject(project ? (project.slug || project.id) : id);
  };

  React.useEffect(() => {
    const syncRoute = () => {
      setLocation(readHashRoute());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', syncRoute);
    return () => window.removeEventListener('hashchange', syncRoute);
  }, []);

  let page;
  if (route === 'home')            page = <HomePage onNav={navigate} onOpenProject={openProject} />;
  else if (route === 'projects')   page = <ProjectsPage onOpenProject={openProject} />;
  else if (route === 'project-detail') page = <ProjectDetailPage projectId={projectId} onNav={navigate} />;
  else if (route === 'services')   page = <ServicesPage />;
  else if (route === 'lab')        page = <LabPage />;
  else if (route === 'contact')    page = <ContactPage />;
  else                             page = <HomePage onNav={navigate} onOpenProject={openProject} />;

  const navRoute = route === 'project-detail' ? 'projects' : route;

  return (
    <div data-screen-label={routeLabel(route)}>
      <Header route={navRoute} onNav={navigate} />
      {page}
      <Footer onNav={navigate} />
    </div>
  );
}

function readHashRoute() {
  const hash = (window.location.hash || '').replace(/^#\/?/, '');
  const parts = hash.split('/').filter(Boolean);
  const top = parts[0] || 'home';

  if (top === 'projects' && parts[1]) {
    return { route: 'project-detail', projectId: parts[1] };
  }
  if (['home', 'projects', 'services', 'lab', 'contact'].includes(top)) {
    return { route: top, projectId: null };
  }
  return { route: 'home', projectId: null };
}

function setHashForRoute(route) {
  const paths = {
    home: '#/',
    projects: '#/projects',
    services: '#/services',
    lab: '#/lab',
    contact: '#/contact',
  };
  setHash(paths[route] || '#/');
}

function setHashForProject(slug) {
  setHash(`#/projects/${slug}`);
}

function setHash(nextHash) {
  if (window.location.hash === nextHash) {
    setLocationFromCurrentHash();
  } else {
    window.location.hash = nextHash;
  }
}

function setLocationFromCurrentHash() {
  window.dispatchEvent(new Event('hashchange'));
}

function routeLabel(r) {
  const labels = {
    'home': '01 Home',
    'projects': '02 Projects',
    'project-detail': '03 Project Detail',
    'services': '04 Services',
    'lab': '05 Lab',
    'contact': '06 Contact',
  };
  return labels[r] || r;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);