// HelperMatch Admin — App entry: routes and auth gate
const App = () => {
  const { user } = useAuth();
  const { route, navigate } = useRoute();

  if (!user) return <LoginPage/>;

  // Route → page + crumbs
  const pageFor = () => {
    const p = route.path;
    const map = {
      dashboard:    { page: <Dashboard/>,         crumbs: [{label:'Admin'},{label:'Dashboard', current:true}] },
      candidates:   { page: <CandidatesPage/>,    crumbs: [{label:'Admin'},{label:'People'},{label:'候選人', current:true}] },
      employers:    { page: <EmployersPage/>,     crumbs: [{label:'Admin'},{label:'People'},{label:'雇主', current:true}] },
      jobs:         { page: <JobsPage/>,          crumbs: [{label:'Admin'},{label:'People'},{label:'職缺', current:true}] },
      assessments:  { page: <AssessmentsPage/>,   crumbs: [{label:'Admin'},{label:'People'},{label:'評測', current:true}] },
      videos:       { page: <VideosPage/>,        crumbs: [{label:'Admin'},{label:'People'},{label:'影片', current:true}] },
      subscriptions:{ page: <SubscriptionsPage/>, crumbs: [{label:'Admin'},{label:'Revenue'},{label:'訂閱', current:true}] },
      plans:        { page: <PlansPage/>,         crumbs: [{label:'Admin'},{label:'Revenue'},{label:'方案', current:true}] },
      articles:     { page: (user.role === 'SUPER_ADMIN' || user.role === 'OPS_MANAGER') ? <ArticlesPage/> : <NoAccessPage area="文章"/>, crumbs: [{label:'Admin'},{label:'Content'},{label:'文章', current:true}] },
      referrals:    { page: <ReferralsPage/>,     crumbs: [{label:'Admin'},{label:'Growth'},{label:'Referrals', current:true}] },
      payouts:      { page: isSuperAdmin(user) ? <PayoutsPage/> : <NoAccessPage area="獎金發放"/>, crumbs: [{label:'Admin'},{label:'Growth'},{label:'獎金發放', current:true}] },
      messages:     { page: <MessagesPage/>,      crumbs: [{label:'Admin'},{label:'Messaging'},{label:'訊息中心', current:true}] },
      templates:    { page: (user.role === 'SUPER_ADMIN' || user.role === 'OPS_MANAGER') ? <TemplatesPage/> : <NoAccessPage area="訊息模板"/>, crumbs: [{label:'Admin'},{label:'Messaging'},{label:'訊息模板', current:true}] },
      audit:        { page: <AuditPage/>,         crumbs: [{label:'Admin'},{label:'System'},{label:'操作紀錄', current:true}] },
      settings:     { page: <SettingsPage/>,      crumbs: [{label:'Admin'},{label:'System'},{label:'設定', current:true}] },
    };
    return map[p] || map.dashboard;
  };

  const { page, crumbs } = pageFor();

  // Wire crumbs to navigation:
  //  - First crumb (Admin) → dashboard
  //  - Group crumbs (People / Revenue / etc.) → first child page in that group
  //  - Current page crumb stays as text (no onClick)
  // Without this, intermediate group crumbs were rendered as plain <span>
  // and felt broken — clicking them did nothing.
  const GROUP_DEFAULT_ROUTE = {
    'People':    'candidates',
    'Revenue':   'subscriptions',
    'Content':   'articles',
    'Growth':    'referrals',
    'Messaging': 'messages',
    'System':    'audit',
  };
  const crumbsLinked = crumbs.map((c, i) => {
    if (c.current) return c;
    if (i === 0) return { ...c, onClick: () => navigate('/dashboard') };
    const target = GROUP_DEFAULT_ROUTE[c.label];
    if (target) return { ...c, onClick: () => navigate('/' + target) };
    return c;
  });

  return (
    <div className="a-shell">
      <Sidebar/>
      <div className="a-main">
        <Header crumbs={crumbsLinked}/>
        <div style={{flex:1,minHeight:0,overflow:'auto'}}>
          {page}
        </div>
      </div>
    </div>
  );
};

// Shown when a non-super-admin lands on a super-admin-only route
const NoAccessPage = ({ area }) => (
  <div className="a-page">
    <div style={{maxWidth:520,margin:'80px auto',textAlign:'center',padding:'40px 24px',border:'1px dashed var(--a-line-strong)',borderRadius:12,background:'var(--a-paper-2)'}}>
      <div style={{fontSize:40,marginBottom:14}}>🔒</div>
      <h2 style={{fontSize:20,fontWeight:700,margin:'0 0 10px',color:'var(--a-ink)'}}>需要 Super Admin 權限</h2>
      <p className="fs-13 text-muted" style={{margin:0,lineHeight:1.6}}>
        <b>{area}</b> 涉及金流 / 高風險操作，僅限超級管理員使用。<br/>
        如需協助請聯繫 Vincent。
      </p>
    </div>
  </div>
);

// Mount
const root = ReactDOM.createRoot(document.getElementById('admin-root'));
root.render(
  <AuthProvider>
    <RouteProvider>
      <ToastProvider>
        <App/>
      </ToastProvider>
    </RouteProvider>
  </AuthProvider>
);