// HelperMatch Admin — Placeholder pages + Audit + Settings
const PlaceholderPage = ({ title, subtitle, icon, nextPhase, features = [] }) => {
  const { navigate } = useRoute();
  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{title}</h1>
          <p className="a-page-sub">{subtitle}</p>
        </div>
        <div className="a-page-header-actions">
          <span className="a-badge a-badge-primary"><AIcon name="clock" size={11}/> {nextPhase}</span>
        </div>
      </div>

      <div className="a-card">
        <div className="a-card-body" style={{padding:'56px 40px',textAlign:'center'}}>
          <div className="a-empty-ic" style={{width:56,height:56,borderRadius:14,background:'var(--a-primary-50)',color:'var(--a-primary)',margin:'0 auto 16px'}}>
            <AIcon name={icon} size={24}/>
          </div>
          <h2 style={{fontSize:18,fontWeight:600,margin:'0 0 6px',color:'var(--a-ink)'}}>{title} · Phase A 尚未實作</h2>
          <p className="text-muted fs-14" style={{maxWidth:540,margin:'0 auto 20px'}}>
            此模組將在 {nextPhase} 完成。
          </p>
          {features.length > 0 && (
            <div style={{maxWidth:520,margin:'0 auto 24px',textAlign:'left'}}>
              <div className="fs-12 fw-600 text-muted mb-10" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>預計功能</div>
              <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
                {features.map((f,i) => (
                  <li key={i} style={{display:'flex',gap:10,alignItems:'flex-start',padding:'9px 12px',background:'var(--a-paper-2)',borderRadius:6,border:'1px solid var(--a-line)'}}>
                    <span style={{color:'var(--a-primary)',marginTop:2}}><AIcon name="check" size={13}/></span>
                    <span className="fs-13" style={{color:'var(--a-ink-soft)'}}>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <button className="a-btn a-btn-default" onClick={()=>navigate('/dashboard')}><AIcon name="arrowLeft" size={13}/> 返回 Dashboard</button>
        </div>
      </div>
    </div>
  );
};

const CandidatesPage = () => {
  if (typeof CandidatesPageReal !== 'undefined') return <CandidatesPageReal/>;
  return <PlaceholderPage title="候選人" subtitle="審核、編輯、上架所有候選人" icon="users" nextPhase="Phase B1" features={[]}/>;
};
const EmployersPage = () => {
  if (typeof EmployersPageReal !== 'undefined') return <EmployersPageReal/>;
  return <PlaceholderPage title="雇主" subtitle="瀏覽、搜尋、停權雇主帳戶" icon="employer" nextPhase="Phase B4.5" features={[]}/>;
};
const JobsPage = () => {
  if (typeof JobsPageReal !== 'undefined') return <JobsPageReal/>;
  return <PlaceholderPage title="職缺" subtitle="管理站上所有雇主發佈的職缺" icon="briefcase" nextPhase="" features={[]}/>;
};
const AssessmentsPage = () => <AssessmentsPageReal/>;
const VideosPage = () => <VideosPageReal/>;
const SubscriptionsPage = () => <SubscriptionsPageReal/>;
const PlansPage = () => (typeof PlansPageReal !== 'undefined')
  ? <PlansPageReal/>
  : <PlaceholderPage title="方案" subtitle="每市場定價與功能開關" icon="briefcase" nextPhase="Phase B5"
      features={['每市場獨立方案定義','改價會記錄到稽核日誌','功能開關（影片查看、聯絡次數、比較功能）','啟用 / 停用方案']}/>;
const ArticlesPage = () => {
  if (typeof ArticlesPageReal !== 'undefined') return <ArticlesPageReal/>;
  return <PlaceholderPage title="文章" subtitle="部落格內容管理" icon="article" nextPhase="Phase B5" features={[]}/>;
};
const ReferralsPage = () => <ReferralsPageReal/>;
const PayoutsPage   = () => <PayoutsPageReal/>;

// ========================================================================
// HIGH-RISK actions — flagged with a visual marker and filterable
// ========================================================================
const HIGH_RISK_ACTIONS = new Set([
  'PAYOUT_MARK_PAID',
  'PAYOUT_MARK_FAILED',
  'PAYOUT_BATCH_EXPORT',
  'PAYOUT_BATCH_CREATE',
  'PLAN_PRICE_CHANGE',
  'REFERRAL_MANUAL_APPROVE',
  'REFERRAL_VOID',
  'CANDIDATE_SUSPEND',
  'EMPLOYER_SUSPEND',
  'VIEW_PAYOUT_ACCOUNT',
  'SUBSCRIPTION_MANUAL_CREATE',
  'ADMIN_USER_CREATE',
  'ADMIN_USER_ROLE_CHANGE',
  'ADMIN_USER_REMOVE',
]);

const AUDIT_CATEGORIES = {
  Candidate: '候選人',
  Employer:  '雇主',
  Assessment:'評測',
  CandidateVideo:'影片',
  Subscription: '訂閱',
  Plan: '方案',
  Referral: 'Referral',
  ReferralPayout: '獎金',
  PayoutBatch: '獎金批次',
  HelperPayoutMethod:'金流帳戶',
  Article: '文章',
  AdminUser: '管理員',
};

const AuditPage = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const [q, setQ] = uS('');
  const [cat, setCat] = uS('');
  const [riskOnly, setRiskOnly] = uS(false);
  const [actorFilter, setActorFilter] = uS('');
  const [opened, setOpened] = uS(null);

  const logs = uM(() => {
    let list = ADMIN.auditLogs;
    if (riskOnly) list = list.filter(l => HIGH_RISK_ACTIONS.has(l.action));
    if (cat) list = list.filter(l => l.targetType === cat);
    if (actorFilter) list = list.filter(l => l.actor === actorFilter);
    if (q) {
      const s = q.toLowerCase();
      list = list.filter(l => (l.actor+' '+l.action+' '+l.targetId).toLowerCase().includes(s));
    }
    return list;
  }, [q, cat, riskOnly, actorFilter]);

  const actors = uM(() => [...new Set(ADMIN.auditLogs.map(l => l.actor))].sort(), []);
  const riskCount = ADMIN.auditLogs.filter(l => HIGH_RISK_ACTIONS.has(l.action)).length;
  const opLog = opened ? ADMIN.auditLogs.find(l => l.id === opened) : null;

  return (
    <div className="a-page a-page-wide">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.audit.title')}</h1>
          <p className="a-page-sub">{t('admin.audit.subtitle')}</p>
        </div>
      </div>

      <div className="grid-4 mb-20">
        <div className="a-stat">
          <div className="a-stat-label">過去 7 天</div>
          <div className="a-stat-value">{ADMIN.auditLogs.filter(l => (ADMIN.now - l.at) < 7*86400000).length}</div>
          <div className="a-stat-delta">筆操作</div>
        </div>
        <div className="a-stat" style={{borderColor:'var(--a-danger-line)',background:'var(--a-danger-bg)'}}>
          <div className="a-stat-label" style={{color:'var(--a-danger)'}}><AIcon name="alert" size={13}/> 高風險操作</div>
          <div className="a-stat-value" style={{color:'var(--a-danger)'}}>{riskCount}</div>
          <div className="a-stat-delta" style={{color:'var(--a-danger)',opacity:0.8}}>金流 / 停權 / 改價</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">活躍操作員</div>
          <div className="a-stat-value">{actors.length}</div>
          <div className="a-stat-delta">名管理員</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">總紀錄</div>
          <div className="a-stat-value">{ADMIN.auditLogs.length}</div>
          <div className="a-stat-delta">含歷史</div>
        </div>
      </div>

      <div className="a-card">
        <div className="a-table-toolbar">
          <div className="a-input-group" style={{width:280}}>
            <span className="a-input-group-prefix"><AIcon name="search" size={14}/></span>
            <input className="a-input" placeholder="搜尋操作者 / 動作 / 目標 ID…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          <select className="a-select" style={{width:140}} value={cat} onChange={e=>setCat(e.target.value)}>
            <option value="">所有類型</option>
            {Object.entries(AUDIT_CATEGORIES).map(([k,v]) => <option key={k} value={k}>{v}</option>)}
          </select>
          <select className="a-select" style={{width:160}} value={actorFilter} onChange={e=>setActorFilter(e.target.value)}>
            <option value="">所有操作者</option>
            {actors.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
          <label className={`a-btn a-btn-sm ${riskOnly ? 'a-btn-danger' : 'a-btn-default'}`} style={{cursor:'pointer'}}>
            <input type="checkbox" checked={riskOnly} onChange={e=>setRiskOnly(e.target.checked)} style={{display:'none'}}/>
            <AIcon name="alert" size={13}/> 僅顯示高風險
          </label>
          <span className="ml-auto text-muted fs-13">顯示 {logs.length} / 共 {ADMIN.auditLogs.length} 筆</span>
        </div>
        <table className="a-table">
          <thead><tr>
            <th style={{width:36}}></th>
            <th style={{width:140}}>時間</th>
            <th style={{width:160}}>操作者</th>
            <th>動作</th>
            <th style={{width:110}}>目標類型</th>
            <th style={{width:170}}>目標 ID</th>
            <th>變更</th>
            <th style={{width:30}}></th>
          </tr></thead>
          <tbody>
            {logs.length === 0 && (
              <tr><td colSpan={8}><AEmpty title="無符合的紀錄" sub="試試調整篩選條件"/></td></tr>
            )}
            {logs.map(log => {
              const risk = HIGH_RISK_ACTIONS.has(log.action);
              return (
                <tr key={log.id} className="clickable" onClick={()=>setOpened(log.id)}
                  style={risk ? {background:'rgba(204,83,51,0.035)'} : {}}>
                  <td style={{textAlign:'center'}}>
                    {risk ? <span title="高風險操作" style={{display:'inline-flex',width:22,height:22,alignItems:'center',justifyContent:'center',borderRadius:'50%',background:'var(--a-danger-bg)',color:'var(--a-danger)'}}><AIcon name="alert" size={12}/></span> : <span className="text-faint">·</span>}
                  </td>
                  <td className="text-muted fs-12">{FMT.rel(log.at)}</td>
                  <td className="fw-600">{log.actor}</td>
                  <td><ActionPill action={log.action}/></td>
                  <td className="text-muted fs-12">{AUDIT_CATEGORIES[log.targetType] || log.targetType}</td>
                  <td><Mono>{log.targetId}</Mono></td>
                  <td>
                    {log.diff && Object.entries(log.diff).slice(0,2).map(([k,v]) => (
                      <span key={k} className="fs-12" style={{marginRight:10}}>
                        <span className="text-muted">{k}:</span>{' '}
                        {typeof v === 'object' && v !== null && v.before !== undefined
                          ? <><Mono className="text-muted">{String(v.before)}</Mono> → <Mono>{String(v.after)}</Mono></>
                          : <Mono>{typeof v === 'object' ? JSON.stringify(v) : String(v)}</Mono>}
                      </span>
                    ))}
                    {log.diff && Object.keys(log.diff).length > 2 && <span className="text-faint fs-12">+{Object.keys(log.diff).length-2}</span>}
                  </td>
                  <td><AIcon name="chevRight" size={13} className="text-faint"/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {opLog && <AuditDetailDrawer log={opLog} onClose={()=>setOpened(null)}/>}
    </div>
  );
};

const AuditDetailDrawer = ({ log, onClose }) => {
  const risk = HIGH_RISK_ACTIONS.has(log.action);
  return (
    <ADrawer open={true} onClose={onClose} size="md" title={
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        {risk && <span title="高風險操作" style={{display:'inline-flex',width:22,height:22,alignItems:'center',justifyContent:'center',borderRadius:'50%',background:'var(--a-danger-bg)',color:'var(--a-danger)'}}><AIcon name="alert" size={12}/></span>}
        <span>操作紀錄詳情</span>
        <Mono style={{fontSize:11,opacity:0.6}}>{log.id}</Mono>
      </div>
    }>
      {risk && (
        <div style={{padding:'10px 14px',background:'var(--a-danger-bg)',border:'1px solid var(--a-danger-line)',borderRadius:8,marginBottom:16,display:'flex',alignItems:'flex-start',gap:10}}>
          <AIcon name="alert" size={15} style={{color:'var(--a-danger)',marginTop:1}}/>
          <div className="fs-13" style={{color:'var(--a-danger)'}}>
            <b>高風險操作</b>：涉及金流、停權或改價。此類操作會永久保留稽核紀錄。
          </div>
        </div>
      )}
      <dl className="a-dl">
        <dt>動作</dt><dd><ActionPill action={log.action}/></dd>
        <dt>操作者</dt><dd className="fw-600">{log.actor}</dd>
        <dt>時間</dt><dd>{log.at.toLocaleString('zh-TW', { hour12:false })}<span className="text-muted fs-12" style={{marginLeft:8}}>（{FMT.rel(log.at)}）</span></dd>
        <dt>目標類型</dt><dd>{AUDIT_CATEGORIES[log.targetType] || log.targetType}</dd>
        <dt>目標 ID</dt><dd><Mono>{log.targetId}</Mono></dd>
      </dl>
      {log.diff && (
        <>
          <h3 className="fs-13 fw-600 mt-20 mb-10" style={{letterSpacing:'0.04em',textTransform:'uppercase',color:'var(--a-ink-muted)'}}>變更內容</h3>
          <div style={{padding:14,background:'var(--a-paper-2)',borderRadius:8,border:'1px solid var(--a-line)',fontSize:13,fontFamily:'ui-monospace,monospace',whiteSpace:'pre-wrap',wordBreak:'break-all'}}>
            {JSON.stringify(log.diff, null, 2)}
          </div>
        </>
      )}
    </ADrawer>
  );
};

// ========================================================================
// SETTINGS — personal info + (super admin) team management
// ========================================================================
const ROLE_OPTIONS = [
  { value:'SUPER_ADMIN',  label:'超級管理員',  hint:'可存取所有功能，包含獎金發放與團隊管理' },
  { value:'OPS_MANAGER',  label:'營運經理',    hint:'審核候選人、影片、訂閱、簽核評測；不可發放獎金與管理團隊' },
  { value:'ASSESSOR',     label:'一般',        hint:'建立評測、上傳評測影片、審核候選人' },
];

const SettingsPage = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const [team, setTeam] = uS(() => ADMIN_USERS.map(u => ({ ...u })));
  const [showNew, setShowNew] = uS(false);
  const [editingId, setEditingId] = uS(null);
  const [editingMember, setEditingMember] = uS(null);
  const [removing, setRemoving] = uS(null);
  const toast = useToast();
  const isSuper = isSuperAdmin(user);

  const addMember = (data) => {
    const id = 'adm_' + (Math.max(0, ...team.map(t => parseInt(t.id.slice(4)) || 0)) + 1);
    const initials = data.name.split(/\s+/).map(p => p[0]).join('').slice(0,2).toUpperCase();
    const roleLabel = ROLE_OPTIONS.find(r => r.value === data.role).label;
    const newMember = { id, name: data.name, email: data.email, role: data.role, roleLabel, initials, status:'ACTIVE', createdAt: new Date() };
    setTeam(xs => [...xs, newMember]);
    pushLog('ADMIN_USER_CREATE', 'AdminUser', id, { name: data.name, email: data.email, role: data.role });
    toast.success(`已新增 ${data.name}（${roleLabel}）·  邀請信已發出`);
    setShowNew(false);
  };

  const changeRole = (id, newRole) => {
    setTeam(xs => xs.map(t => {
      if (t.id !== id) return t;
      const roleLabel = ROLE_OPTIONS.find(r => r.value === newRole).label;
      pushLog('ADMIN_USER_ROLE_CHANGE', 'AdminUser', id, { role: { before: t.role, after: newRole } });
      return { ...t, role: newRole, roleLabel };
    }));
    toast.success('角色已更新');
    setEditingId(null);
  };

  const toggleStatus = (id) => {
    setTeam(xs => xs.map(t => {
      if (t.id !== id) return t;
      const next = t.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE';
      pushLog('ADMIN_USER_ROLE_CHANGE', 'AdminUser', id, { status: { before: t.status, after: next } });
      return { ...t, status: next };
    }));
    toast.success('已更新狀態');
  };

  const removeMember = (id) => {
    const m = team.find(t => t.id === id);
    setTeam(xs => xs.filter(t => t.id !== id));
    pushLog('ADMIN_USER_REMOVE', 'AdminUser', id, { name: m.name });
    toast.danger(`已移除 ${m.name}`);
    setRemoving(null);
  };

  const updateMember = (id, patch) => {
    setTeam(xs => xs.map(t => {
      if (t.id !== id) return t;
      const changes = {};
      if (patch.name && patch.name !== t.name) changes.name = { before: t.name, after: patch.name };
      if (patch.email && patch.email !== t.email) changes.email = { before: t.email, after: patch.email };
      if (patch.role && patch.role !== t.role) changes.role = { before: t.role, after: patch.role };
      if (Object.keys(changes).length === 0) return t;
      pushLog('ADMIN_USER_UPDATE', 'AdminUser', id, changes);
      const roleLabel = ROLE_OPTIONS.find(r => r.value === (patch.role || t.role)).label;
      const initials = (patch.name || t.name).split(/\s+/).map(p => p[0]).join('').slice(0,2).toUpperCase();
      return { ...t, ...patch, roleLabel, initials };
    }));
    toast.success('成員資料已更新');
    setEditingMember(null);
  };

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div><h1 className="a-page-title">{t('admin.settings.title')}</h1><p className="a-page-sub">{t('admin.settings.subtitle')}</p></div>
      </div>

      <div className={isSuper ? "grid-2 mb-20" : "mb-20"}>
        <div className="a-card">
          <div className="a-card-header"><h3 className="a-card-title">我的帳號</h3></div>
          <div className="a-card-body">
            <div className="flex items-center gap-14 mb-20">
              <div className="a-user-avatar" style={{width:52,height:52,fontSize:19}}>{user.initials}</div>
              <div>
                <div className="fs-17 fw-700">{user.name}</div>
                <div className="text-muted fs-13">{user.email}</div>
              </div>
            </div>
            <dl className="a-dl">
              <dt>角色</dt><dd>
                <span className="a-badge a-badge-primary">{user.roleLabel}</span>
                {isSuper && <span className="a-badge a-badge-neutral" style={{marginLeft:6}}>★ SUPER</span>}
              </dd>
              <dt>登入方式</dt><dd>Google Workspace · <Mono>{user.email.split('@')[1]}</Mono></dd>
              <dt>最後登入</dt><dd className="text-muted">剛剛 · 此裝置</dd>
              <dt>兩階段驗證</dt><dd><span className="a-badge a-badge-success"><AIcon name="checkCircle" size={11}/> 已啟用</span></dd>
            </dl>
            <div className="mt-16" style={{display:'flex',gap:8}}>
              <button className="a-btn a-btn-default a-btn-sm"><AIcon name="lock" size={13}/> 變更密碼</button>
              <button className="a-btn a-btn-default a-btn-sm"><AIcon name="logout" size={13}/> 登出其他裝置</button>
            </div>
          </div>
        </div>

        {isSuper && <div className="a-card">
          <div className="a-card-header"><h3 className="a-card-title">通知偏好</h3></div>
          <div className="a-card-body">
            <div className="fcol gap-12">
              {[
                { k:'候選人待審核', sub:'每日摘要（早上 9:00）', on:true },
                { k:'SELF 影片待審', sub:'累計 5 則時推送', on:true },
                { k:'評測待簽核', sub:'即時 Slack 通知', on:false },
                { k:'Referral 可發放', sub:'每週一 10:00', on:true },
                { k:'高風險操作警報', sub:'即時 email', on:true },
              ].map(p => (
                <label key={p.k} style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',border:'1px solid var(--a-line)',borderRadius:8,cursor:'pointer',background:'var(--a-paper)'}}>
                  <div style={{flex:1}}>
                    <div className="fs-13 fw-600">{p.k}</div>
                    <div className="fs-12 text-muted">{p.sub}</div>
                  </div>
                  <input type="checkbox" defaultChecked={p.on} style={{accentColor:'var(--a-primary)',width:16,height:16}}/>
                </label>
              ))}
            </div>
          </div>
        </div>}
      </div>

      {/* Team management — super admin only */}
      {isSuper && <div className="a-card">
        <div className="a-card-header">
          <h3 className="a-card-title">管理員團隊</h3>
          <span className="a-badge a-badge-neutral" style={{marginLeft:8}}>{team.length} 人</span>
          {!isSuper && <span className="a-badge a-badge-neutral" style={{marginLeft:8}}>🔒 檢視模式</span>}
          {isSuper && (
            <button className="a-btn a-btn-primary a-btn-sm ml-auto" onClick={()=>setShowNew(true)}>
              <AIcon name="plus" size={13}/> 新增成員
            </button>
          )}
        </div>
        {!isSuper && (
          <div className="a-card-body" style={{paddingBottom:0}}>
            <div style={{padding:'10px 14px',background:'var(--a-warn-bg)',border:'1px solid var(--a-warn-line)',borderRadius:8,display:'flex',alignItems:'flex-start',gap:10}}>
              <AIcon name="alert" size={15} style={{color:'var(--a-warn)',marginTop:1}}/>
              <div className="fs-13" style={{color:'var(--a-warn-text)'}}>
                僅 <b>Super Admin</b> 可新增、編輯或移除團隊成員。如有需要請聯繫 Vincent。
              </div>
            </div>
          </div>
        )}
        <div className="a-card-body a-card-body-flush">
          <table className="a-table">
            <thead><tr>
              <th>成員</th>
              <th style={{width:170}}>角色</th>
              <th style={{width:100}}>狀態</th>
              <th style={{width:160}}>加入時間</th>
              {isSuper && <th style={{width:100}}></th>}
            </tr></thead>
            <tbody>
              {team.map(m => (
                <tr key={m.id}>
                  <td>
                    <div className="flex items-center gap-10">
                      <div className="a-user-avatar" style={{width:30,height:30,fontSize:12}}>{m.initials}</div>
                      <div style={{minWidth:0}}>
                        <div className="fw-600">{m.name} {m.id === user.id && <span className="text-muted fw-500 fs-12">（你）</span>}</div>
                        <div className="text-muted fs-12"><Mono>{m.email}</Mono></div>
                      </div>
                    </div>
                  </td>
                  <td>
                    {isSuper && editingId === m.id ? (
                      <select className="a-select" style={{width:'100%'}} defaultValue={m.role} autoFocus
                        onBlur={()=>setEditingId(null)}
                        onChange={e=>changeRole(m.id, e.target.value)}>
                        {ROLE_OPTIONS.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
                      </select>
                    ) : (
                      <button
                        disabled={!isSuper || m.id === user.id}
                        onClick={()=>setEditingId(m.id)}
                        style={{background:'none',border:'none',padding:0,cursor:(isSuper && m.id !== user.id) ? 'pointer' : 'default',textAlign:'left'}}>
                        <span className={`a-badge ${m.role === 'SUPER_ADMIN' ? 'a-badge-primary' : 'a-badge-neutral'}`}>
                          {m.role === 'SUPER_ADMIN' && '★ '}{m.roleLabel}
                        </span>
                      </button>
                    )}
                  </td>
                  <td>
                    {m.status === 'ACTIVE'
                      ? <span className="a-badge a-badge-success">啟用中</span>
                      : <span className="a-badge a-badge-neutral">已停用</span>}
                  </td>
                  <td className="text-muted fs-12">{m.createdAt ? m.createdAt.toLocaleDateString('zh-TW') : '—'}</td>
                  {isSuper && (
                    <td>
                      {m.id === user.id ? <span className="text-faint fs-12">—</span> : (
                        <div style={{display:'flex',gap:4}}>
                          <button className="a-btn a-btn-ghost a-btn-sm" onClick={()=>setEditingMember(m)} title="編輯">
                            <AIcon name="edit" size={13}/>
                          </button>
                          <button className="a-btn a-btn-ghost a-btn-sm" onClick={()=>toggleStatus(m.id)} title={m.status === 'ACTIVE' ? '停用' : '啟用'}>
                            <AIcon name={m.status === 'ACTIVE' ? 'eyeOff' : 'eye'} size={13}/>
                          </button>
                          <button className="a-btn a-btn-ghost a-btn-sm" style={{color:'var(--a-danger)'}} onClick={()=>setRemoving(m.id)} title="移除">
                            <AIcon name="trash" size={13}/>
                          </button>
                        </div>
                      )}
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>}

      {showNew && <NewAdminModal onClose={()=>setShowNew(false)} onCreate={addMember} existingEmails={team.map(t=>t.email)}/>}
      {editingMember && <EditAdminModal member={editingMember} onClose={()=>setEditingMember(null)} onSave={(patch)=>updateMember(editingMember.id, patch)} existingEmails={team.filter(t=>t.id!==editingMember.id).map(t=>t.email)}/>}
      {removing && (
        <AModal open={true} onClose={()=>setRemoving(null)} title="移除團隊成員" icon={<span style={{color:'var(--a-danger)'}}><AIcon name="trash" size={18}/></span>}
          footer={<>
            <button className="a-btn a-btn-ghost" onClick={()=>setRemoving(null)}>取消</button>
            <button className="a-btn a-btn-danger-solid" onClick={()=>removeMember(removing)}>確認移除</button>
          </>}>
          <p className="fs-14 mb-12">確定要移除 <b>{team.find(t=>t.id===removing)?.name}</b>？</p>
          <p className="fs-13 text-muted">該帳號會立即無法登入。過去的操作紀錄會保留於稽核日誌中。</p>
        </AModal>
      )}
    </div>
  );
};

const NewAdminModal = ({ onClose, onCreate, existingEmails }) => {
  const [name, setName] = uS('');
  const [email, setEmail] = uS('');
  const [role, setRole] = uS('OPS_MANAGER');

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && !existingEmails.includes(email.toLowerCase());
  const canSubmit = name.trim().length >= 2 && emailOk;

  return (
    <AModal open={true} onClose={onClose} title="新增管理員" icon={<span style={{color:'var(--a-primary)'}}><AIcon name="plus" size={18}/></span>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-primary" disabled={!canSubmit} onClick={()=>onCreate({ name:name.trim(), email:email.trim().toLowerCase(), role })}>
          <AIcon name="mail" size={13}/> 發送邀請信
        </button>
      </>}>
      <p className="fs-13 text-muted mb-16">新增成員會收到 email 邀請，需在 7 天內點擊啟用連結才能登入。</p>

      <label className="a-label">姓名 *</label>
      <input className="a-input mb-14" value={name} onChange={e=>setName(e.target.value)} placeholder="例：Sarah Wu"/>

      <label className="a-label">公司 Email *</label>
      <input className="a-input mb-6" value={email} onChange={e=>setEmail(e.target.value.trim())} placeholder="you@helpermatch.co"/>
      {email && !emailOk && <div className="fs-12" style={{color:'var(--a-danger)',marginBottom:10}}>
        {existingEmails.includes(email.toLowerCase()) ? '此 email 已是管理員' : '請輸入有效的 email'}
      </div>}
      <div style={{height:8}}/>

      <label className="a-label">角色 *</label>
      <div className="fcol gap-6">
        {ROLE_OPTIONS.map(r => (
          <label key={r.value} style={{display:'flex',alignItems:'flex-start',gap:10,padding:'10px 12px',border:'1px solid '+(role===r.value?'var(--a-primary)':'var(--a-line)'),borderRadius:8,cursor:'pointer',background:role===r.value?'var(--a-primary-50)':'var(--a-paper)'}}>
            <input type="radio" name="role" checked={role===r.value} onChange={()=>setRole(r.value)} style={{accentColor:'var(--a-primary)',marginTop:2}}/>
            <div style={{flex:1}}>
              <div className="fs-13 fw-600">
                {r.value === 'SUPER_ADMIN' && <span style={{color:'var(--a-primary)',marginRight:4}}>★</span>}
                {r.label}
              </div>
              <div className="fs-12 text-muted mt-2">{r.hint}</div>
            </div>
          </label>
        ))}
      </div>
    </AModal>
  );
};

const EditAdminModal = ({ member, onClose, onSave, existingEmails }) => {
  const [name, setName] = uS(member.name);
  const [email, setEmail] = uS(member.email);
  const [role, setRole] = uS(member.role);

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && !existingEmails.includes(email.toLowerCase());
  const nameOk = name.trim().length >= 2;
  const hasChanges = name.trim() !== member.name || email.trim().toLowerCase() !== member.email || role !== member.role;
  const canSubmit = nameOk && emailOk && hasChanges;

  return (
    <AModal open={true} onClose={onClose} title={<>編輯管理員 · <Mono>{member.id}</Mono></>} icon={<span style={{color:'var(--a-primary)'}}><AIcon name="edit" size={18}/></span>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-primary" disabled={!canSubmit} onClick={()=>onSave({ name:name.trim(), email:email.trim().toLowerCase(), role })}>
          <AIcon name="check" size={13}/> 儲存變更
        </button>
      </>}>
      <div className="flex items-center gap-12 mb-16" style={{padding:'10px 12px',background:'var(--a-paper-2)',borderRadius:8}}>
        <div className="a-user-avatar" style={{width:40,height:40,fontSize:14}}>{member.initials}</div>
        <div>
          <div className="fs-13 fw-600">{member.name}</div>
          <div className="text-muted fs-12">加入於 {member.createdAt ? member.createdAt.toLocaleDateString('zh-TW') : '—'}</div>
        </div>
      </div>

      <label className="a-label">姓名 *</label>
      <input className="a-input mb-14" value={name} onChange={e=>setName(e.target.value)}/>

      <label className="a-label">公司 Email *</label>
      <input className="a-input mb-6" value={email} onChange={e=>setEmail(e.target.value.trim())}/>
      {email && !emailOk && <div className="fs-12" style={{color:'var(--a-danger)',marginBottom:10}}>
        {existingEmails.includes(email.toLowerCase()) ? '此 email 已是管理員' : '請輸入有效的 email'}
      </div>}
      <div style={{height:8}}/>

      <label className="a-label">角色 *</label>
      <div className="fcol gap-6">
        {ROLE_OPTIONS.map(r => (
          <label key={r.value} style={{display:'flex',alignItems:'flex-start',gap:10,padding:'10px 12px',border:'1px solid '+(role===r.value?'var(--a-primary)':'var(--a-line)'),borderRadius:8,cursor:'pointer',background:role===r.value?'var(--a-primary-50)':'var(--a-paper)'}}>
            <input type="radio" name="role" checked={role===r.value} onChange={()=>setRole(r.value)} style={{accentColor:'var(--a-primary)',marginTop:2}}/>
            <div style={{flex:1}}>
              <div className="fs-13 fw-600">
                {r.value === 'SUPER_ADMIN' && <span style={{color:'var(--a-primary)',marginRight:4}}>★</span>}
                {r.label}
              </div>
              <div className="fs-12 text-muted mt-2">{r.hint}</div>
            </div>
          </label>
        ))}
      </div>
    </AModal>
  );
};

Object.assign(window, {
  CandidatesPage, EmployersPage, AssessmentsPage, VideosPage,
  SubscriptionsPage, PlansPage, ArticlesPage,
  ReferralsPage, PayoutsPage,
  AuditPage, SettingsPage, PlaceholderPage,
  HIGH_RISK_ACTIONS, AUDIT_CATEGORIES, ROLE_OPTIONS,
});