// ============================================================
// WASIED · Main app - router orchestration
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hireStatus": "available"
}/*EDITMODE-END*/;

function NotFound() {
  return (
    <MarketingShell>
      <div style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 40 }}>
        <div style={{ fontSize: 96, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-display)', marginBottom: 8 }}>404</div>
        <div style={{ fontSize: 16, color: 'var(--fg-3)', marginBottom: 28 }}>Cette page n'existe pas - ou plus.</div>
        <Button variant="primary" href="#/" icon="arrowLeft">Retour à l'accueil</Button>
      </div>
    </MarketingShell>
  );
}

function ResolveRoute() {
  const { path } = useRouter();

  // Wildcard matches
  const profileMatch = matchRoute('/u/:handle', path);
  const portfolioMatch = matchRoute('/portfolio/:id', path);
  const blogMatch = matchRoute('/blog/:slug', path);
  const formationMatch = matchRoute('/formations/:slug', path);
  const addonMatch = matchRoute('/addons/:slug', path);
  const legalMatch = matchRoute('/legal/:slug', path);
  const appServerMatch = matchRoute('/app/hosting/:id', path);
  const appOrderMatch = matchRoute('/app/orders/:id', path);
  const appCourseMatch = matchRoute('/app/formations/:slug', path);
  const appSupportMatch = matchRoute('/app/support/:id', path);

  // Routing table
  if (path === '/' || path === '') return <HomePage hireStatus={window.__hireStatus || 'available'}/>;

  if (path === '/agents') return <AgentsLanding/>;
  if (path === '/app/agents') return <AppAgentsRoot/>;

  // Marketing landings
  if (path === '/hosting') return <HostingLanding/>;
  if (path === '/orders') return <OrdersLanding/>;
  if (path === '/formations') return <FormationsLanding/>;
  if (path === '/addons') return <AddonsLanding/>;
  if (addonMatch) return <AddonDetail slug={addonMatch.slug}/>;

  // Marketing content
  if (path === '/pricing') return <PricingPage/>;
  if (path === '/portfolio') return <PortfolioPage/>;
  if (portfolioMatch) return <CaseStudyPage id={portfolioMatch.id}/>;
  if (path === '/about') return <AboutPage/>;
  if (path === '/contact') return <ContactPage/>;
  if (path === '/press') return <PressPage/>;
  if (path === '/status') return <StatusPage/>;
  if (legalMatch) return <LegalPage slug={legalMatch.slug}/>;

  // Auth & public profiles
  if (path === '/login') return <LoginPage/>;
  if (profileMatch) return <PublicProfilePage handle={profileMatch.handle}/>;

  // Checkout / Quote (public funnels)
  if (path === '/checkout') return <CheckoutHosting/>;
  if (path === '/quote') return <QuoteOrders/>;

  // App (authed)
  if (path === '/app') return <AppDashboardHome/>;
  if (path === '/app/hosting') return <AppHostingList/>;
  if (appServerMatch) return <AppHostingServer id={appServerMatch.id}/>;
  if (path === '/app/addons') return <AppAddonsList/>;
  if (path === '/app/orders') return <AppOrdersList/>;
  if (appOrderMatch) return <AppOrderDetail id={appOrderMatch.id}/>;
  if (path === '/app/formations') return <AppFormationsList/>;
  if (appCourseMatch) return <AppCoursePlayer slug={appCourseMatch.slug}/>;
  if (path === '/app/billing') return <AppBillingPage/>;
  if (path === '/app/support') return <AppSupportList/>;
  if (appSupportMatch) return <AppSupportThread id={appSupportMatch.id}/>;
  if (path === '/app/settings') return <AppSettingsPage/>;
  if (path === '/app/affiliate') return <AppAffiliatePage/>;

  // Admin
  if (path === '/admin') return <AdminOverview/>;
  if (path === '/admin/orders') return <AdminOrdersKanban/>;
  if (path === '/admin/users') return <AdminUsersPage/>;
  if (path === '/admin/content') return <AdminContentPage/>;
  if (path === '/admin/logs') return <AdminLogsPage/>;
  if (path === '/admin/billing') return <AdminBillingPage/>;

  return <NotFound/>;
}

function App() {
  const cms = useCMS();
  const hireStatus = cms.site.hireStatus || 'available';
  React.useEffect(() => { window.__hireStatus = hireStatus; }, [hireStatus]);

  return (
    <RouterProvider>
      <ResolveRoute key={hireStatus}/>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Disponibilité Maxime"/>
        <TweakRadio label="Statut Hire Me" value={hireStatus}
          options={['available', 'limited', 'busy']}
          onChange={(v) => setCMS(s => { s.site.hireStatus = v; return s; })}/>
        <div style={{ marginTop: 12, padding: 12, background: 'rgba(143,168,255,0.06)', border: '1px solid var(--border-1)', borderRadius: 8, fontSize: 11, color: 'var(--fg-3)', lineHeight: 1.5 }}>
          Le statut s'affiche dans la top-bar et sur les CTAs. Réglable aussi depuis Admin → Contenu → Réglages du site.
        </div>
      </TweaksPanel>
    </RouterProvider>
  );
}

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