import React, { Suspense, lazy } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

// One SPA, served from every *.amerc.ai docroot; pick the app by hostname.
const host = window.location.hostname;
const DocsApp = lazy(() => import('./DocsApp.jsx'));
const PmApp = lazy(() => import('./PmApp.jsx'));
const Scene2DApp = lazy(() => import('./Scene2D.jsx'));

let App = Scene2DApp;
if (host.startsWith('docs.')) { App = DocsApp; document.title = 'Docs · amerc'; }
else if (host.startsWith('pm.')) { App = PmApp; document.title = 'PM · amerc'; }

// Preload the tavern's canvas tiles on the main domain so the scene paints as
// soon as the app mounts — they download in parallel with the JS chunk instead
// of only after TavernGame runs. Not needed on docs/pm.
if (App === Scene2DApp) {
  // Preload the painted tavern hero so the scene paints as soon as the app mounts.
  for (const n of ['bg', 'orc', 'elf', 'dwarf']) {
    const im = new Image(); im.src = `/scene2d/painted/${n}.webp`;
  }
  // Expose amerc to AI agents as WebMCP tools (no-op where unsupported).
  import('./webmcp.js').then((m) => m.registerAmercTools()).catch(() => {});
}

// Catch render errors so a single bad component can't blank the whole app.
class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div className="eb">
          <div className="eb-card">
            <span className="eb-gem" aria-hidden="true" />
            <h1>Something went off-script.</h1>
            <p>The tavern hit an unexpected snag. A reload usually sorts it out.</p>
            <div className="eb-actions">
              <button type="button" onClick={() => window.location.reload()}>Reload</button>
              <a href="https://amerc.ai/#/status">System status</a>
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

const Loading = () => (
  <div className="app-loading">
    <span className="app-loading-gem" aria-hidden="true" />
    <span className="app-loading-word">amerc</span>
  </div>
);

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <Suspense fallback={<Loading />}>
        <App />
      </Suspense>
    </ErrorBoundary>
  </React.StrictMode>,
);

// Progressive Web App: register the service worker on production amerc.ai hosts only
// (skip the Vite dev server so HMR keeps working).
if ('serviceWorker' in navigator && host.endsWith('amerc.ai')) {
  window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js').catch(() => {}); });
}
