// ═══════════════════════════════════════════════════════════════
//  Root App - Router + Layout
// ═══════════════════════════════════════════════════════════════

function App() {
  const { currentUser } = window.useApp();
  const { route } = window.useRouter();

  // Check for treasurer signing / invitation tokens in URL
  const urlParams = new URLSearchParams(location.search);
  const signToken = urlParams.get('sign');
  const inviteToken = urlParams.get('invite');
  const observeToken = urlParams.get('observe');

  // Hidden analytics page — not linked anywhere, accessible via ?observe=1
  if (observeToken) {
    return <window.InsightsPage/>;
  }

  if (signToken) {
    return (
      <>
        <window.A11ySkipLink/>
        <window.TreasurerSignPage token={signToken}/>
        <window.A11yMenu/>
      </>
    );
  }

  if (inviteToken) {
    return (
      <>
        <window.A11ySkipLink/>
        <window.InvitationActivationPage token={inviteToken}/>
        <window.A11yMenu/>
      </>
    );
  }

  if (!currentUser) return (
    <>
      <window.A11ySkipLink/>
      <window.LandingPage/>
      <window.A11yMenu/>
    </>
  );

  // Audit users have their own dashboard
  const Dashboard = currentUser.role === 'audit' ? window.AuditDashboard
                  : currentUser.role === 'local' ? window.LocalDashboard
                  : window.AdminDashboard;

  let PageContent;
  switch (route.page) {
    case 'dashboard': PageContent = <Dashboard/>; break;
    case 'programs': PageContent = <window.ProgramsPage filter={route.params?.filter}/>; break;
    case 'new-activity': PageContent = <window.ActivityFormPage/>; break;
    case 'edit-activity': PageContent = <window.ActivityFormPage id={route.params?.id}/>; break;
    case 'activity-detail': PageContent = <window.ActivityDetailPage id={route.params?.id}/>; break;
    case 'approvals': PageContent = <window.ApprovalsPage/>; break;
    case 'authorities': PageContent = <window.AuthoritiesPage/>; break;
    case 'authority-detail': PageContent = <window.AuthorityDetailPage id={route.params?.id}/>; break;
    case 'payments': PageContent = <window.PaymentRequestsPage/>; break;
    case 'payments-old': PageContent = <window.PaymentsPageV2/>; break;
    case 'upload': PageContent = <window.UploadPage/>; break;
    case 'basket': PageContent = <window.BasketPageV2/>; break;
    case 'coordinators': PageContent = <window.CoordinatorsPageV2/>; break;
    case 'settings': PageContent = <window.SettingsPageV2/>; break;
    case 'audit': PageContent = <window.AuditDashboard/>; break;
    case 'calendar': PageContent = <window.CalendarPage/>; break;
    case 'route-planner': PageContent = <window.RoutePlannerPage/>; break;
    case 'community': PageContent = <window.CommunityPage/>; break;
    case 'stats': PageContent = <window.StatBuilderPage initial={route.params?.initial}/>; break;
    case 'resources': PageContent = <window.ResourcesPage/>; break;
    case 'accessibility-statement': PageContent = <window.AccessibilityStatementPage/>; break;
    case 'support': PageContent = <window.SupportPage/>; break;
    case 'my-account': PageContent = <window.MyAccountPage/>; break;
    default: PageContent = <Dashboard/>;
  }

  return (
    <window.SecurityProvider>
      <window.A11ySkipLink/>
      <window.AppLayout>{PageContent}</window.AppLayout>
      <window.A11yMenu/>
    </window.SecurityProvider>
  );
}

// ─── Root ───
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <window.ToastProvider>
    <window.AppStateProvider>
      <window.RouterProvider>
        <App/>
      </window.RouterProvider>
    </window.AppStateProvider>
  </window.ToastProvider>
);