// HelperMatch Admin — Shell (login, sidebar, router, header)
const { useState: uS, useEffect: uE, useMemo: uM, Fragment: AF, createContext: cCtx, useContext: uCtx } = React;

// ---------- Route store ----------
const RouteCtx = cCtx(null);
const useRoute = () => uCtx(RouteCtx);

// Parse "#/candidates/cnd_1001" → { path: 'candidates', id: 'cnd_1001' }
const parseHash = () => {
  const raw = (window.location.hash || '#/dashboard').replace(/^#\/?/, '');
  const parts = raw.split('/').filter(Boolean);
  return { path: parts[0] || 'dashboard', sub: parts[1] || null, sub2: parts[2] || null };
};

const RouteProvider = ({ children }) => {
  const [route, setRoute] = uS(parseHash());
  uE(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = (path) => { window.location.hash = '#/' + (path.startsWith('/') ? path.slice(1) : path); };
  return <RouteCtx.Provider value={{ route, navigate }}>{children}</RouteCtx.Provider>;
};

// ---------- Auth (mock) ----------
const AuthCtx = cCtx(null);
const useAuth = () => uCtx(AuthCtx);

const ADMIN_USERS = [
  { id:'adm_1', email:'vincent@helpermatch.co', name:'Vincent Chen', role:'SUPER_ADMIN',  roleLabel:'超級管理員', initials:'VC', status:'ACTIVE', createdAt: new Date('2024-03-10') },
  { id:'adm_2', email:'emma@helpermatch.co',    name:'Emma Lin',     role:'OPS_MANAGER',  roleLabel:'營運經理',   initials:'EL', status:'ACTIVE', createdAt: new Date('2024-06-22') },
  { id:'adm_4', email:'anita@helpermatch.co',   name:'Anita Wijaya', role:'ASSESSOR',     roleLabel:'一般',       initials:'AW', status:'ACTIVE', createdAt: new Date('2024-11-05') },
  { id:'adm_5', email:'raj@helpermatch.co',     name:'Raj Kumar',    role:'ASSESSOR',     roleLabel:'一般',       initials:'RK', status:'ACTIVE', createdAt: new Date('2025-02-14') },
];

// Permission checks — SUPER_ADMIN can access everything; others have restrictions.
const isSuperAdmin = (user) => user && user.role === 'SUPER_ADMIN';
const canAccess = (user, area) => {
  if (!user) return false;
  if (isSuperAdmin(user)) return true;
  // Non-super areas blocked for all other roles:
  const superOnly = new Set(['payouts', 'settings_team', 'high_risk', 'plans_edit']);
  if (superOnly.has(area)) return false;
  return true;
};

const AuthProvider = ({ children }) => {
  const [user, setUser] = uS(() => {
    try {
      const u = JSON.parse(localStorage.getItem('hm_admin_user'));
      if (u) window.__currentAdminName = u.name;
      return u;
    } catch { return null; }
  });
  const login = (email, pw) => {
    const u = ADMIN_USERS.find(x => x.email.toLowerCase() === email.toLowerCase());
    if (!u) return { ok:false, err:'找不到此帳號' };
    if (pw !== 'admin') return { ok:false, err:'密碼錯誤' };
    localStorage.setItem('hm_admin_user', JSON.stringify(u));
    window.__currentAdminName = u.name;
    setUser(u);
    return { ok:true };
  };
  const logout = () => { localStorage.removeItem('hm_admin_user'); setUser(null); window.location.hash = '#/'; };
  return <AuthCtx.Provider value={{ user, login, logout }}>{children}</AuthCtx.Provider>;
};

// ---------- Login page ----------
const LoginPage = () => {
  const { login } = useAuth();
  const toast = useToast();
  const [email, setEmail] = uS('vincent@helpermatch.co');
  const [pw, setPw] = uS('admin');
  const [err, setErr] = uS(null);
  const [showPw, setShowPw] = uS(false);
  const submit = (e) => {
    e?.preventDefault();
    const r = login(email, pw);
    if (!r.ok) { setErr(r.err); return; }
    toast('歡迎回來', 'success');
    window.location.hash = '#/dashboard';
  };
  return (
    <div className="a-login">
      <div className="a-login-left">
        <div className="a-login-logo">
          <div className="a-sidebar-logo-mark" style={{width:32,height:32,fontSize:14}}>H</div>
          HelperMatch
        </div>
        <div style={{margin:'auto 0'}}>
          <div style={{fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:'rgba(255,255,255,0.5)',marginBottom:10}}>INTERNAL · ADMIN CONSOLE</div>
          <h1 style={{fontSize:42,lineHeight:1.1,margin:'0 0 18px',fontWeight:700,letterSpacing:'-0.02em'}}>
            Run the trust layer<br/>of the helper market.
          </h1>
          <p style={{color:'rgba(255,255,255,0.72)',fontSize:15,lineHeight:1.55,maxWidth:460,margin:0}}>
            審核候選人、簽核評測、管理訂閱、發放 Referral 獎金——所有需要人為判斷的環節，都在這裡一次處理完。
          </p>
          <div style={{marginTop:40,paddingTop:24,borderTop:'1px solid rgba(255,255,255,0.12)',display:'flex',gap:28}}>
            {[
              {k:'候選人', v:(ADMIN.candidates.filter(c=>c.status==='PENDING_REVIEW').length), sub:'待審核'},
              {k:'Referrals', v:(ADMIN.referrals.filter(r=>r.status==='PAYABLE').length), sub:'可發放'},
              {k:'SELF 影片', v:(ADMIN.videos.filter(v=>v.moderationStatus==='PENDING').length), sub:'待審核'},
            ].map(s => (
              <div key={s.k}>
                <div style={{fontSize:28,fontWeight:700,letterSpacing:'-0.02em'}}>{s.v}</div>
                <div style={{fontSize:12,color:'rgba(255,255,255,0.5)',marginTop:2}}>{s.k} · {s.sub}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{fontSize:12,color:'rgba(255,255,255,0.4)'}}>© 2026 HelperMatch · 限授權員工使用</div>
      </div>
      <div className="a-login-right">
        <form className="a-login-card" onSubmit={submit}>
          <h2 style={{fontSize:22,fontWeight:700,letterSpacing:'-0.01em',margin:'0 0 6px'}}>登入管理後台</h2>
          <p className="text-muted fs-13" style={{margin:'0 0 22px'}}>使用公司 Google Workspace 帳號登入。</p>

          <div className="mb-14">
            <label className="a-label">電子郵件</label>
            <div className="a-input-group">
              <span className="a-input-group-prefix"><AIcon name="mail" size={15}/></span>
              <input className="a-input" type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@helpermatch.co" required />
            </div>
          </div>
          <div className="mb-14">
            <label className="a-label">密碼</label>
            <div className="a-input-group">
              <span className="a-input-group-prefix"><AIcon name="lock" size={15}/></span>
              <input className="a-input" type={showPw ? 'text' : 'password'} value={pw} onChange={e=>setPw(e.target.value)} required />
              <button type="button" className="a-input-group-suffix" onClick={()=>setShowPw(s=>!s)} style={{border:'none',cursor:'pointer',background:'var(--a-paper-2)'}}>
                <AIcon name={showPw ? 'eyeOff' : 'eye'} size={15}/>
              </button>
            </div>
          </div>
          <label className="a-check mb-20"><input type="checkbox" defaultChecked/> 記住此裝置 30 天</label>

          {err && <div className="a-badge a-badge-danger mb-14" style={{padding:'8px 12px'}}><AIcon name="alert" size={13}/> {err}</div>}

          <button type="submit" className="a-btn a-btn-primary a-btn-lg a-btn-block">登入 <AIcon name="arrowRight" size={15}/></button>

          <div style={{marginTop:24,padding:14,background:'var(--a-paper-2)',borderRadius:8,border:'1px dashed var(--a-line-strong)'}}>
            <div className="fs-12 fw-600 mb-8 text-muted" style={{letterSpacing:'0.04em',textTransform:'uppercase'}}>DEMO 帳號</div>
            <div className="fcol gap-6 fs-12">
              {ADMIN_USERS.map(u => (
                <button key={u.id} type="button"
                  onClick={()=>{ setEmail(u.email); setPw('admin'); }}
                  style={{display:'flex',alignItems:'center',gap:9,padding:'6px 8px',border:'1px solid var(--a-line)',background:'var(--a-paper)',borderRadius:5,cursor:'pointer',textAlign:'left'}}>
                  <div className="a-user-avatar" style={{width:24,height:24,fontSize:10}}>{u.initials}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="fw-600" style={{color:'var(--a-ink)'}}>{u.name} <span className="text-muted fw-500">· {u.roleLabel}</span></div>
                    <div className="text-muted fs-11">{u.email}</div>
                  </div>
                  <AIcon name="arrowRight" size={12} className="text-faint"/>
                </button>
              ))}
              <div className="text-muted fs-11" style={{marginTop:2}}>全部密碼：<Mono>admin</Mono></div>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

// ---------- Sidebar ----------
// Nav items reference i18n keys (group/label). Fallback strings shown if keys missing.
const NAV = [
  { group: 'overview', items: [
    { key: 'dashboard', i18n: 'dashboard', icon: 'dashboard' },
  ]},
  { group: 'people', items: [
    { key: 'candidates',  i18n: 'candidates',  icon: 'users', badge: () => ADMIN.candidates.filter(c=>c.status==='PENDING_REVIEW').length },
    { key: 'employers',   i18n: 'employers',   icon: 'employer' },
    { key: 'jobs',        i18n: 'jobs',        icon: 'briefcase', badge: () => ADMIN.jobs.filter(j=>j.status==='PENDING_REVIEW').length },
    { key: 'assessments', i18n: 'assessments', icon: 'clipboardCheck', badge: () => ADMIN.assessments.filter(a=>a.status==='PENDING_SIGNOFF').length },
    { key: 'videos',      i18n: 'videos',      icon: 'video', badge: () => ADMIN.videos.filter(v=>v.moderationStatus==='PENDING').length },
  ]},
  { group: 'growth', items: [
    { key: 'referrals', i18n: 'referrals', icon: 'gift' },
    { key: 'payouts',   i18n: 'payouts',   icon: 'wallet', requireSuperAdmin: true },
  ]},
  { group: 'revenue', items: [
    { key: 'subscriptions', i18n: 'subscriptions', icon: 'card' },
    { key: 'plans',         i18n: 'plans',         icon: 'briefcase' },
  ]},
  { group: 'messaging', items: [
    { key: 'messages',  i18n: 'messages',  icon: 'mail' },
    { key: 'templates', i18n: 'templates', icon: 'article', requireOpsOrAbove: true },
  ]},
  { group: 'content', items: [
    { key: 'articles', i18n: 'articles', icon: 'article', requireOpsOrAbove: true },
  ]},
  { group: 'audit', items: [
    { key: 'audit',    i18n: 'auditLogs', icon: 'history' },
    { key: 'settings', i18n: 'settings',  icon: 'settings' },
  ]},
];

const Sidebar = () => {
  const { route, navigate } = useRoute();
  const { user } = useAuth();
  const { t } = useI18n();
  return (
    <aside className="a-sidebar">
      <div className="a-sidebar-logo">
        <div className="a-sidebar-logo-mark">H</div>
        {t('admin.brand')}
        <span style={{marginLeft:'auto',fontSize:10,fontWeight:600,padding:'2px 6px',borderRadius:4,background:'rgba(232,133,106,0.2)',color:'#FFB697',letterSpacing:'0.05em'}}>{t('admin.adminLabel')}</span>
      </div>
      {NAV.map(g => {
        const visibleItems = g.items.filter(it => {
          if (it.requireSuperAdmin && !isSuperAdmin(user)) return false;
          if (it.requireOpsOrAbove && user.role !== 'SUPER_ADMIN' && user.role !== 'OPS_MANAGER') return false;
          return true;
        });
        if (visibleItems.length === 0) return null;
        return (
          <div key={g.group}>
            <div className="a-nav-group">{t('admin.groups.' + g.group)}</div>
            {visibleItems.map(it => {
              const active = route.path === it.key;
              const badge = it.badge ? it.badge() : 0;
              return (
                <button key={it.key} className={`a-nav-item ${active ? 'active' : ''}`} onClick={() => navigate('/' + it.key)}>
                  <AIcon name={it.icon} size={16}/>
                  <span>{t('admin.menu.' + it.i18n)}</span>
                  {it.requireSuperAdmin && <span title="Super Admin only" style={{marginLeft:4,fontSize:9,fontWeight:600,color:'#FFB697',letterSpacing:'0.04em'}}>★</span>}
                  {badge > 0 && <span className="a-nav-badge">{badge}</span>}
                </button>
              );
            })}
          </div>
        );
      })}
    </aside>
  );
};

// ---------- Header ----------
const Header = ({ crumbs }) => {
  const { user, logout } = useAuth();
  const { t } = useI18n();
  const [menu, setMenu] = uS(false);
  return (
    <header className="a-header">
      <nav className="a-crumb">
        {(crumbs || []).map((c, i) => (
          <AF key={i}>
            {c.onClick ? <button onClick={c.onClick}>{c.label}</button> : (c.current ? <span className="a-crumb-cur">{c.label}</span> : <span>{c.label}</span>)}
            {i < crumbs.length - 1 && <AIcon name="chevRight" size={13} className="text-faint"/>}
          </AF>
        ))}
      </nav>
      <div className="a-header-spacer"/>

      <div className="a-env-pill">STAGING · apac-1</div>

      <LangSwitcher variant="compact" />

      <button className="a-icon-btn" title={t('admin.header.notifications')}><AIcon name="bell" size={16}/></button>

      <div style={{position:'relative'}}>
        <div className="a-user-chip" onClick={()=>setMenu(m=>!m)}>
          <div className="a-user-avatar">{user.initials}</div>
          <div className="a-user-chip-text">
            <div className="fw-600">{user.name}</div>
            <div className="role">
              {t('roles.' + user.role)}
              {isSuperAdmin(user) && <span style={{marginLeft:5,fontSize:9,fontWeight:700,padding:'1px 4px',borderRadius:3,background:'rgba(232,133,106,0.15)',color:'var(--a-primary)',letterSpacing:'0.04em'}}>SUPER</span>}
            </div>
          </div>
          <AIcon name="chevDown" size={13} className="text-muted"/>
        </div>
        {menu && (
          <>
            <div style={{position:'fixed',inset:0,zIndex:40}} onClick={()=>setMenu(false)}/>
            <div style={{position:'absolute',right:0,top:'calc(100% + 6px)',background:'var(--a-paper)',border:'1px solid var(--a-line)',borderRadius:8,boxShadow:'var(--a-shadow-lg)',minWidth:220,padding:5,zIndex:50}}>
              <div style={{padding:'8px 10px',borderBottom:'1px solid var(--a-line)',marginBottom:4}}>
                <div className="fw-600 fs-13">{user.name}</div>
                <div className="text-muted fs-12">{user.email}</div>
              </div>
              <button className="a-nav-item" style={{color:'var(--a-ink-soft)'}} onClick={()=>{ setMenu(false); window.location.hash='#/settings'; }}>
                <AIcon name="settings" size={15}/> {t('admin.menu.settings')}
              </button>
              <button className="a-nav-item" style={{color:'var(--a-ink-soft)'}} onClick={()=>{ setMenu(false); window.open('HelperMatch.html', '_blank'); }}>
                <AIcon name="external" size={15}/> <span>{t('nav.home')}</span>
              </button>
              <div style={{height:1,background:'var(--a-line)',margin:'4px 0'}}/>
              <button className="a-nav-item" style={{color:'var(--a-danger)'}} onClick={logout}>
                <AIcon name="logout" size={15}/> {t('common.logout')}
              </button>
            </div>
          </>
        )}
      </div>
    </header>
  );
};

// Fix sidebar nav-item colors (dark bg)
const _sidebarItemOverride = () => {
  // In this file we accidentally reused .a-nav-item for the user-menu items which have LIGHT bg.
  // Override via inline style in JSX above (already done for menu). No-op here.
};

Object.assign(window, {
  RouteProvider, useRoute, AuthProvider, useAuth, ADMIN_USERS,
  isSuperAdmin, canAccess,
  LoginPage, Sidebar, Header,
});