(function () {
  const { AppContextProvider, useApp, layout: AppLayout, pages } = window.__SHAPE__;

  function CurrentPage() {
    const { activeTab } = useApp();
    const map = {
      home:     pages.HomePage,
      publish:  pages.PublishPage,
      messages: pages.MessagesPage,
      me:       pages.MePage,
    };
    const Page = map[activeTab] || pages.HomePage;
    return <Page />;
  }

  function DetailRoute() {
    const { route } = useApp();
    if (!route.name) return null;
    if (route.name === 'providerDetail') {
      const Comp = pages.ProviderDetailPage;
      return <Comp providerId={route.params.providerId}/>;
    }
    if (route.name === 'chat') {
      const Comp = pages.ChatPage;
      return <Comp convId={route.params.convId}/>;
    }
    if (route.name === 'authApply') {
      const Comp = pages.AuthApplyPage;
      return <Comp />;
    }
    return null;
  }

  function App() {
    return (
      <AppContextProvider>
        <AppLayout detailContent={<DetailRoute />}>
          <CurrentPage />
        </AppLayout>
      </AppContextProvider>
    );
  }

  window.__SHAPE__.App = App;
})();