/* MaiAgent Partner Portal — App root & router */

const App = () => {
  const { t, lang, setLang } = useT();
  const [current, setCurrent] = React.useState(() => {
    const hash = window.location.hash.slice(1);
    return hash || 'dashboard';
  });
  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const [dealForm, setDealForm] = React.useState(false);
  const [activeDeal, setActiveDeal] = React.useState(null);

  React.useEffect(() => {
    window.location.hash = current;
    document.documentElement.lang = lang === 'zh' ? 'zh-Hant' : 'en';
  }, [current, lang]);

  // listen for hash nav
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.slice(1);
      if (h && h !== current) setCurrent(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [current]);

  const screenLabel = ({
    dashboard: '01 Dashboard',
    deals: '02 Deal Registration',
    customers: '03 My Customers',
    onboarding: '04 Onboarding Journey',
    training: '05 Training & Certification',
    video_hub:        '06 Video Learning Hub',
    customer_success: '03b Customer Success',
    proposal_assistant: '08 AI Proposal Agent',
    roadmap: '09 Product Roadmap',
    compliance: '10 Compliance Library',
    materials: '06 Sales Materials',
    cases: '07 Case Studies',
    events: '08 Events & Training',
    pricing:       '11 Pricing',
    calculator:    '11b Credit Estimator',
    orders:        '12 Orders & Licenses',
    members:       '11 Team Members',
    tickets:       '12 Support Tickets',
    notifications: '13 Notifications',
  })[current];

  return (
    <div className="app" data-screen-label={screenLabel}>
      {sidebarOpen && <div className="sidebar-backdrop" onClick={() => setSidebarOpen(false)} />}
      <Sidebar
        current={current}
        onNav={setCurrent}
        t={t}
        lang={lang}
        isOpen={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
      />
      <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <Topbar
          current={current}
          t={t}
          lang={lang}
          setLang={setLang}
          onMenu={() => setSidebarOpen(true)}
          onOpenNoti={() => setCurrent('notifications')}
        />
        <main style={{ flex: 1, minWidth: 0 }}>
          {current === 'dashboard' && <Dashboard t={t} lang={lang} onNav={setCurrent} onOpenDeal={setActiveDeal} onOpenForm={() => setDealForm(true)} />}
          {current === 'deals' && <DealsPage t={t} lang={lang} onOpenDeal={setActiveDeal} onOpenForm={() => setDealForm(true)} />}
          {current === 'customers' && <CustomersPage t={t} lang={lang} />}
          {current === 'onboarding' && <OnboardingPage t={t} lang={lang} onNav={setCurrent} />}
          {current === 'training' && <TrainingPage t={t} lang={lang} onNav={setCurrent} />}
          {current === 'video_hub'        && <VideoHubPage          t={t} lang={lang} />}
          {current === 'customer_success'   && <CustomerSuccessPage    t={t} lang={lang} />}
          {current === 'proposal_assistant' && <ProposalAssistantPage  t={t} lang={lang} />}
          {current === 'roadmap'            && <RoadmapPage            t={t} lang={lang} />}
          {current === 'compliance'         && <CompliancePage         t={t} lang={lang} />}
          {current === 'materials' && <MaterialsPage t={t} lang={lang} />}
          {current === 'cases' && <CasesPage t={t} lang={lang} />}
          {current === 'events' && <EventsPage t={t} lang={lang} />}
          {current === 'pricing'        && <PricingPage        t={t} lang={lang} />}
          {current === 'calculator'     && <CalculatorPage     t={t} lang={lang} />}
          {current === 'orders'        && <OrdersPage        t={t} lang={lang} />}
          {current === 'members'       && <MembersPage       t={t} lang={lang} />}
          {current === 'tickets'       && <TicketsPage       t={t} lang={lang} />}
          {current === 'notifications' && <NotificationsPage t={t} lang={lang} />}
        </main>
      </div>
      {dealForm && <DealForm t={t} lang={lang} onClose={() => setDealForm(false)} />}
      {activeDeal && <DealDetail deal={activeDeal} t={t} lang={lang} onClose={() => setActiveDeal(null)} />}
    </div>
  );
};

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