// HelperMatch Admin — Phase B4.5: Employers (with integrated subscription history)

const EmployersPageReal = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const toast = useToast();
  const [q, setQ] = uS('');
  const [marketFilter, setMarketFilter] = uS('');
  const [planFilter, setPlanFilter] = uS('');
  const [statusFilter, setStatusFilter] = uS('');
  const [sortBy, setSortBy] = uS('recentActive');
  const [openId, setOpenId] = uS(null);
  const [emps, setEmps] = uS(() => ADMIN.employers.map(e => ({ ...e })));

  // KPIs
  const kpi = uM(() => {
    const active = emps.filter(e => e.status === 'ACTIVE').length;
    const paying = emps.filter(e => e.subscription !== 'free' && e.status === 'ACTIVE').length;
    const newThisWeek = emps.filter(e => new Date(e.createdAt) > new Date(ADMIN.now.getTime() - 7*86400000)).length;
    const suspended = emps.filter(e => e.status === 'SUSPENDED').length;
    return { active, paying, newThisWeek, suspended };
  }, [emps]);

  const filtered = uM(() => {
    let list = emps;
    if (q) {
      const qL = q.toLowerCase();
      list = list.filter(e => e.name.toLowerCase().includes(qL) || e.email.toLowerCase().includes(qL) || e.id.toLowerCase().includes(qL));
    }
    if (marketFilter) list = list.filter(e => e.homeMarket === marketFilter);
    if (planFilter) list = list.filter(e => e.subscription === planFilter);
    if (statusFilter) list = list.filter(e => e.status === statusFilter);
    list = [...list];
    if (sortBy === 'recentActive') list.sort((a,b) => new Date(b.lastLogin) - new Date(a.lastLogin));
    if (sortBy === 'newest') list.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt));
    if (sortBy === 'oldest') list.sort((a,b) => new Date(a.createdAt) - new Date(b.createdAt));
    return list;
  }, [emps, q, marketFilter, planFilter, statusFilter, sortBy]);

  const openEmp = emps.find(e => e.id === openId);

  const update = (id, patch, logAction, logDiff) => {
    setEmps(xs => xs.map(e => e.id === id ? { ...e, ...patch } : e));
    if (logAction) {
      ADMIN.auditLogs.unshift({
        id: 'log_' + Math.random().toString(36).slice(2,8),
        at: new Date(), actor: 'Vincent Chen', action: logAction,
        targetType: 'Employer', targetId: id, diff: logDiff || {}
      });
    }
  };

  // Helpers
  const subsForEmp = (id) => ADMIN.subs.filter(s => s.empId === id);
  const activeSubForEmp = (id) => ADMIN.subs.find(s => s.empId === id && s.status === 'ACTIVE');
  const threadsForEmp = (id) => ADMIN.threads.filter(t => t.empId === id);
  const jobsForEmp = (id) => ADMIN.jobs.filter(j => j.empId === id);

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title"><AIcon name="employer"/> {t('admin.employers.title')}</h1>
          <p className="a-page-sub">{t('admin.employers.subtitle')}</p>
        </div>
        {/* CSV export — Super Admin only (data egress / privacy gate). */}
        {isSuperAdmin(user) && (
          <button className="a-btn a-btn-default">
            <AIcon name="download" size={14}/> {t('admin.common.exportCsv')}
          </button>
        )}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:12,marginBottom:20}}>
        <KpiTile label="Active 雇主" value={kpi.active} icon="employer"/>
        <KpiTile label="付費訂閱中" value={kpi.paying} icon="card" tone="success"/>
        <KpiTile label="7 日內新註冊" value={kpi.newThisWeek} icon="plus" tone="info"/>
        <KpiTile label="已停權" value={kpi.suspended} icon="x" tone={kpi.suspended > 0 ? 'danger' : 'neutral'}/>
      </div>

      {/* Filters */}
      <div className="a-table-toolbar" style={{marginBottom:12}}>
        <div className="a-input-group" style={{width:280}}>
          <div className="a-input-group-prefix"><AIcon name="search" size={14}/></div>
          <input className="a-input" placeholder="姓名 / email / ID" value={q} onChange={e => setQ(e.target.value)}/>
        </div>
        <select className="a-select" style={{width:130}} value={marketFilter} onChange={e => setMarketFilter(e.target.value)}>
          <option value="">所有市場</option>
          {ADMIN.markets.map(m => <option key={m.code} value={m.code}>{m.nameZh}</option>)}
        </select>
        <select className="a-select" style={{width:130}} value={planFilter} onChange={e => setPlanFilter(e.target.value)}>
          <option value="">所有方案</option>
          <option value="free">Basic</option>
          <option value="standard">Standard</option>
          <option value="premium">Premium</option>
        </select>
        <select className="a-select" style={{width:120}} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="">所有狀態</option>
          <option value="ACTIVE">Active</option>
          <option value="SUSPENDED">Suspended</option>
        </select>
        <select className="a-select" style={{width:160}} value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="recentActive">最近活躍</option>
          <option value="newest">最近註冊</option>
          <option value="oldest">最早註冊</option>
        </select>
        <span className="ml-auto text-muted fs-13">共 {filtered.length} 筆</span>
      </div>

      {/* Card list — replaces a 9-column table that crammed the multi-job
          reality into a single "互動" cell. Each card shows the employer
          summary (top) + a strip of all their job posts (bottom) so the
          admin can scan multi-job employers at a glance without opening
          the drawer. Click anywhere on the card → drawer; click a job
          chip → drawer opens on the Jobs tab.
          See PRODUCTION_TODO.md for the broader employer-management gaps. */}
      {filtered.length === 0 ? (
        <AEmpty icon="employer" label="沒有符合條件的雇主"/>
      ) : (
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          {filtered.map(e => {
            const activeSub = activeSubForEmp(e.id);
            const daysLeft = activeSub ? FMT.daysUntil(activeSub.endAt) : null;
            const threadCount = threadsForEmp(e.id).length;
            const jobs = jobsForEmp(e.id);
            const market = ADMIN.markets.find(m => m.code === e.homeMarket);
            return (
              <div
                key={e.id}
                className="a-card clickable"
                onClick={() => setOpenId(e.id)}
                style={{cursor:'pointer', overflow:'hidden'}}
              >
                {/* Top: employer summary row */}
                <div style={{padding:'16px 18px', display:'flex', alignItems:'center', gap:14}}>
                  <div style={{
                    width:42, height:42, borderRadius:'50%',
                    background:'var(--a-primary)', color:'#fff',
                    display:'grid', placeItems:'center', fontWeight:600, fontSize:15, flexShrink:0,
                  }}>{e.name.charAt(0)}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="flex items-center" style={{marginBottom:4, gap:14, flexWrap:'wrap'}}>
                      <span style={{fontWeight:600, fontSize:14.5}}>{e.name}</span>
                      <PlanBadge plan={e.subscription}/>
                      {/* StatusBadge only shown for non-Active states (suspended) — Active
                          is the default and doesn't need a "listed" badge cluttering
                          the header. */}
                      {e.status !== 'ACTIVE' && <StatusBadge status={e.status}/>}
                    </div>
                    <div className="text-muted fs-12 flex items-center" style={{gap:10, flexWrap:'wrap'}}>
                      <span>{e.email}</span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span><Flag code={e.homeMarket}/> {market ? market.nameZh : e.homeMarket}</span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span><Mono>{e.id}</Mono></span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span>家庭規模 {e.familySize}</span>
                    </div>
                  </div>
                  {/* Right meta — subscription days left + last login + chat count */}
                  <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4, flexShrink:0, minWidth:140}}>
                    {activeSub ? (
                      <div className="fs-12" style={{
                        color: daysLeft < 0 ? 'var(--a-danger)' : daysLeft <= 3 ? 'var(--a-warn)' : 'var(--a-ink-soft)',
                        fontWeight: daysLeft <= 3 ? 600 : 400,
                      }}>
                        {daysLeft < 0 ? '訂閱已過期' : `訂閱剩 ${daysLeft} 天`}
                      </div>
                    ) : (
                      <div className="fs-12 text-muted">未訂閱</div>
                    )}
                    <div className="fs-12 text-muted">最近登入 {FMT.rel(e.lastLogin)}</div>
                    {threadCount > 0 && (
                      <div className="fs-12 text-muted flex items-center gap-1"><AIcon name="chat" size={11}/> {threadCount} 對話</div>
                    )}
                  </div>
                  <button
                    className="a-icon-btn"
                    onClick={ev => { ev.stopPropagation(); setOpenId(e.id); }}
                    style={{flexShrink:0}}
                  >
                    <AIcon name="chevronRight" size={14}/>
                  </button>
                </div>

                {/* Bottom: jobs strip — all of this employer's job posts as
                    compact chips. The whole point of this redesign:
                    multi-job employers are now visible at the list level. */}
                <div style={{
                  padding:'12px 18px',
                  borderTop:'1px solid var(--a-line)',
                  background:'var(--a-paper-2)',
                  display:'flex', alignItems:'center', gap:10, flexWrap:'wrap',
                }}>
                  <span className="fs-12 text-muted" style={{fontWeight:600, flexShrink:0}}>
                    <AIcon name="briefcase" size={11}/> 職缺 {jobs.length}
                  </span>
                  {jobs.length === 0 ? (
                    <span className="fs-12 text-faint">尚未發布任何職缺</span>
                  ) : (
                    jobs.map(j => (
                      <button
                        key={j.id}
                        onClick={ev => { ev.stopPropagation(); setOpenId(e.id); /* drawer opens; user can switch to Jobs tab */ }}
                        title={j.title}
                        style={{
                          display:'inline-flex', alignItems:'center', gap:8,
                          padding:'5px 10px', maxWidth:280,
                          background:'#fff', border:'1px solid var(--a-line)', borderRadius:99,
                          fontSize:12, cursor:'pointer',
                          color:'var(--a-ink)',
                        }}
                      >
                        <span style={{
                          width:6, height:6, borderRadius:99,
                          background:
                            j.status === 'ACTIVE' ? 'var(--a-success, #10B981)' :
                            j.status === 'PENDING_REVIEW' || j.status === 'DRAFT' ? 'var(--a-warn, #F59E0B)' :
                            'var(--a-line-strong, #9CA3AF)',
                          flexShrink:0,
                        }}/>
                        <span style={{whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', maxWidth:180}}>{j.title}</span>
                        <span className="text-muted" style={{fontSize:11, flexShrink:0}}>· {j.applicants} 人</span>
                      </button>
                    ))
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {openEmp && (
        <EmployerDrawer emp={openEmp} onClose={() => setOpenId(null)} onUpdate={update}/>
      )}
    </div>
  );
};

// ============================================================
// EMPLOYER DRAWER
// ============================================================
const EmployerDrawer = ({ emp, onClose, onUpdate }) => {
  const toast = useToast();
  const [tab, setTab] = uS('overview');
  const [showSuspend, setShowSuspend] = uS(false);
  const [showBackfill, setShowBackfill] = uS(false);

  const subs = ADMIN.subs.filter(s => s.empId === emp.id).sort((a,b) => new Date(b.startAt) - new Date(a.startAt));
  const activeSub = subs.find(s => s.status === 'ACTIVE');
  const threads = ADMIN.threads.filter(t => t.empId === emp.id);
  const jobs = ADMIN.jobs.filter(j => j.empId === emp.id);
  const auditForEmp = ADMIN.auditLogs.filter(l =>
    (l.targetType === 'Employer' && l.targetId === emp.id) ||
    (l.targetType === 'Subscription' && subs.some(s => s.id === l.targetId))
  );

  const tabs = [
    { key: 'overview',      label: '概覽',    icon: 'dashboard' },
    { key: 'subscriptions', label: '訂閱',    icon: 'card',     count: subs.length },
    { key: 'jobs',          label: '職缺',    icon: 'briefcase',count: jobs.length },
    { key: 'activity',      label: '互動',    icon: 'chat',     count: threads.length },
    { key: 'audit',         label: '操作紀錄', icon: 'history',  count: auditForEmp.length },
  ];

  return (
    <ADrawer open onClose={onClose} size="xl" title={
      <div className="flex items-center" style={{gap:12}}>
        <div style={{
          width:36,height:36,borderRadius:'50%',
          background:'var(--a-primary)',color:'#fff',
          display:'grid',placeItems:'center',fontWeight:600,fontSize:14,
        }}>{emp.name.charAt(0)}</div>
        <div style={{minWidth:0}}>
          <div style={{fontSize:15,fontWeight:600}}>{emp.name}</div>
          <div className="text-muted fs-12">{emp.email} · <Flag code={emp.homeMarket}/> · <Mono>{emp.id}</Mono></div>
        </div>
        {/* Plan + suspended status (Active is default and not surfaced — see
            employers list card for the same treatment). */}
        <PlanBadge plan={emp.subscription} style={{marginLeft:8}}/>
        {emp.status !== 'ACTIVE' && <StatusBadge status={emp.status}/>}
      </div>
    }>
      {/* Tabs */}
      <div className="a-tabs" style={{marginBottom:16}}>
        {tabs.map(t => (
          <div key={t.key} className={'a-tab ' + (tab === t.key ? 'active' : '')} onClick={() => setTab(t.key)}>
            <AIcon name={t.icon} size={13}/> {t.label}
            {t.count > 0 && <span className="a-tab-count">{t.count}</span>}
          </div>
        ))}
      </div>

      {tab === 'overview' && <EmpOverview emp={emp} activeSub={activeSub} threads={threads} jobs={jobs} onSuspend={() => setShowSuspend(true)} onBackfill={() => setShowBackfill(true)} onUpdate={onUpdate}/>}
      {tab === 'subscriptions' && <EmpSubs emp={emp} subs={subs} onBackfill={() => setShowBackfill(true)}/>}
      {tab === 'jobs' && <EmpJobs emp={emp} jobs={jobs}/>}
      {tab === 'activity' && <EmpActivity emp={emp} threads={threads}/>}
      {tab === 'audit' && <EmpAudit logs={auditForEmp}/>}

      {showSuspend && (
        <AModal open onClose={() => setShowSuspend(false)} title={<>{emp.status === 'SUSPENDED' ? '解除停權' : '停權'} <Mono>{emp.id}</Mono></>} footer={
          <SuspendFooter emp={emp} onClose={() => setShowSuspend(false)} onConfirm={(reason) => {
            const next = emp.status === 'ACTIVE' ? 'SUSPENDED' : 'ACTIVE';
            onUpdate(emp.id, { status: next, suspendReason: next === 'SUSPENDED' ? reason : null },
              next === 'SUSPENDED' ? 'EMPLOYER_SUSPEND' : 'EMPLOYER_UNSUSPEND',
              { status: { before: emp.status, after: next }, reason });
            toast.push({ kind: 'success', msg: next === 'SUSPENDED' ? '雇主已停權' : '雇主已復權' });
            setShowSuspend(false);
          }}/>
        }>
          <SuspendBody emp={emp}/>
        </AModal>
      )}

      {showBackfill && (
        <ManualBackfillModal presetEmpId={emp.id} onClose={() => setShowBackfill(false)} onCreate={(data) => {
          const newId = 'sub_' + Math.floor(Math.random()*900 + 9100);
          ADMIN.subs.unshift({
            id: newId, empId: data.empId, plan: data.plan, amount: data.amount,
            startAt: data.startAt, endAt: data.endAt, status: 'ACTIVE',
            stripeSession: 'manual_backfill_' + Math.random().toString(36).slice(2,8),
            manualNote: data.note,
          });
          ADMIN.auditLogs.unshift({
            id: 'log_' + Math.random().toString(36).slice(2,8),
            at: new Date(), actor: 'Vincent Chen', action: 'SUBSCRIPTION_MANUAL_CREATE',
            targetType: 'Subscription', targetId: newId,
            diff: { plan: data.plan, amount: data.amount, empId: data.empId, note: data.note }
          });
          // Reflect on employer
          onUpdate(emp.id, { subscription: data.plan });
          toast.push({ kind: 'success', msg: '已建立手動補單 ' + newId });
          setShowBackfill(false);
        }}/>
      )}
    </ADrawer>
  );
};

// ============================================================
// TABS — OVERVIEW
// ============================================================
const EmpOverview = ({ emp, activeSub, threads, jobs, onSuspend, onBackfill, onUpdate }) => {
  const toast = useToast();
  return (
    <div>
      {/* Contact info */}
      <div className="a-card" style={{marginBottom:16}}>
        <div className="a-card-header">
          <h3 className="a-card-title"><AIcon name="employer" size={14}/> 帳戶資訊</h3>
        </div>
        <div className="a-card-body">
          <dl style={{margin:0,display:'grid',gridTemplateColumns:'120px 1fr 120px 1fr',gap:'10px 14px',fontSize:13,minWidth:0}}>
            <dt className="text-muted">姓名</dt>
            <dd style={{margin:0,fontWeight:500,minWidth:0,overflow:'hidden',textOverflow:'ellipsis'}}>{emp.name}</dd>
            <dt className="text-muted">市場</dt>
            <dd style={{margin:0,minWidth:0}}><Flag code={emp.homeMarket}/> {ADMIN.markets.find(m => m.code === emp.homeMarket)?.nameZh}</dd>

            <dt className="text-muted">Email</dt>
            <dd style={{margin:0,minWidth:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
              <span style={{overflow:'hidden',textOverflow:'ellipsis'}}>{emp.email}</span>
              <button className="a-btn a-btn-ghost a-btn-xs" style={{marginLeft:4}}
                      onClick={() => { navigator.clipboard.writeText(emp.email); toast.push({kind:'success',msg:'已複製'}); }}>
                <AIcon name="copy" size={10}/>
              </button>
            </dd>
            <dt className="text-muted">家庭規模</dt>
            <dd style={{margin:0,minWidth:0}}>{emp.familySize} 人</dd>

            <dt className="text-muted">Employer ID</dt>
            <dd style={{margin:0,minWidth:0}}><Mono>{emp.id}</Mono></dd>
            <dt className="text-muted">註冊時間</dt>
            <dd style={{margin:0,minWidth:0}}>{FMT.iso(emp.createdAt)}</dd>

            <dt className="text-muted">最近登入</dt>
            <dd style={{margin:0,minWidth:0}}>{FMT.rel(emp.lastLogin)}</dd>
            <dt className="text-muted">方案</dt>
            <dd style={{margin:0,minWidth:0}}><PlanBadge plan={emp.subscription}/></dd>
          </dl>
        </div>
      </div>

      {/* Active subscription summary */}
      {activeSub ? (
        <div className="a-card" style={{marginBottom:16}}>
          <div className="a-card-header">
            <h3 className="a-card-title"><AIcon name="card" size={14}/> 目前訂閱</h3>
            <span className="ml-auto"><PlanBadge plan={activeSub.plan}/></span>
          </div>
          <div className="a-card-body">
            <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:14}}>
              <Stat label="起始" value={FMT.iso(activeSub.startAt).slice(0,10)}/>
              <Stat label="到期" value={FMT.iso(activeSub.endAt).slice(0,10)}/>
              <Stat label="剩餘" value={(() => {
                const d = FMT.daysUntil(activeSub.endAt);
                return d < 0 ? '已過期' : d + ' 天';
              })()} tone={(() => {
                const d = FMT.daysUntil(activeSub.endAt);
                return d < 0 ? 'danger' : d <= 3 ? 'warn' : 'success';
              })()}/>
              <Stat label="金額" value={'NT$' + (activeSub.amount/100).toLocaleString()} mono/>
            </div>
            {activeSub.manualNote && (
              <div style={{marginTop:12,padding:10,background:'#FEF3C7',border:'1px solid #FCD34D',borderRadius:6,color:'#713F12',fontSize:12.5}}>
                <strong><AIcon name="wrench" size={11}/> 手動補單：</strong>{activeSub.manualNote}
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="a-card" style={{marginBottom:16,padding:14,display:'flex',alignItems:'center',gap:12}}>
          <AIcon name="card" size={20} style={{color:'var(--a-ink-muted)'}}/>
          <div style={{flex:1}}>
            <div style={{fontWeight:500,fontSize:13.5}}>目前沒有進行中的訂閱</div>
            <div className="text-muted fs-12">雇主無法瀏覽候選人完整資料、發起聯絡。</div>
          </div>
          <button className="a-btn a-btn-default a-btn-sm" onClick={onBackfill}>
            <AIcon name="plus" size={12}/> 手動補單
          </button>
        </div>
      )}

      {/* Activity summary */}
      <div className="a-card" style={{marginBottom:16}}>
        <div className="a-card-header">
          <h3 className="a-card-title"><AIcon name="chart" size={14}/> 活動摘要</h3>
        </div>
        <div className="a-card-body">
          <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:14}}>
            <Stat label="訂閱歷史" value={ADMIN.subs.filter(s => s.empId === emp.id).length + ' 次'} icon="card"/>
            <Stat label="訊息 thread" value={threads.length + (threads.some(t => t.flagged) ? ' ⚠' : '')} icon="chat" tone={threads.some(t => t.flagged) ? 'warn' : 'neutral'}/>
            <Stat label="發佈職缺" value={jobs.filter(j => j.status === 'ACTIVE').length + ' / ' + jobs.length} icon="briefcase"/>
            <Stat label="最近活動" value={FMT.rel(emp.lastLogin)} icon="clock"/>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div style={{display:'flex',gap:8,padding:'12px 0',borderTop:'1px solid var(--a-line)',justifyContent:'flex-end'}}>
        <button className="a-btn a-btn-default" onClick={onBackfill}>
          <AIcon name="plus" size={14}/> 手動補單
        </button>
        <button className={'a-btn ' + (emp.status === 'SUSPENDED' ? 'a-btn-primary' : 'a-btn-danger')} onClick={onSuspend}>
          {emp.status === 'SUSPENDED' ? (<><AIcon name="check" size={14}/> 解除停權</>) : (<><AIcon name="x" size={14}/> 停權</>)}
        </button>
      </div>
    </div>
  );
};

const Stat = ({ label, value, tone = 'neutral', mono = false, icon }) => {
  const color = { neutral:'var(--a-ink)', success:'var(--a-success)', warn:'var(--a-warn)', danger:'var(--a-danger)', info:'var(--a-info)' }[tone];
  return (
    <div>
      <div className="text-muted fs-12 flex items-center gap-1">
        {icon && <AIcon name={icon} size={11}/>} {label}
      </div>
      <div style={{fontWeight:600,marginTop:3,color,fontFamily:mono?'var(--a-mono)':'inherit'}}>{value}</div>
    </div>
  );
};

// ============================================================
// TABS — SUBSCRIPTIONS
// ============================================================
const EmpSubs = ({ emp, subs, onBackfill }) => {
  const toast = useToast();
  const [openSubId, setOpenSubId] = uS(null);

  if (subs.length === 0) {
    return (
      <div className="a-card" style={{padding:48,textAlign:'center'}}>
        <AIcon name="card" size={32} style={{color:'var(--a-ink-muted)',marginBottom:8}}/>
        <div style={{fontWeight:500,marginBottom:6}}>此雇主沒有訂閱紀錄</div>
        <div className="text-muted fs-13" style={{marginBottom:14}}>若雇主已實際付款但 Stripe 連線失敗，可手動建立訂閱記錄</div>
        <button className="a-btn a-btn-primary a-btn-sm" onClick={onBackfill}>
          <AIcon name="plus" size={12}/> 手動補單
        </button>
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-center" style={{marginBottom:10}}>
        <div style={{fontSize:13.5,fontWeight:600}}>訂閱歷史（{subs.length} 筆）</div>
        <button className="a-btn a-btn-default a-btn-sm" style={{marginLeft:'auto'}} onClick={onBackfill}>
          <AIcon name="plus" size={12}/> 手動補單
        </button>
      </div>

      {/* Timeline view */}
      <div style={{position:'relative',paddingLeft:24}}>
        <div style={{position:'absolute',left:7,top:10,bottom:10,width:2,background:'var(--a-line)'}}/>
        {subs.map((s, i) => {
          const daysLeft = FMT.daysUntil(s.endAt);
          return (
            <div key={s.id} style={{position:'relative',marginBottom:14}}>
              <div style={{
                position:'absolute',left:-20,top:10,width:14,height:14,borderRadius:'50%',
                background:'var(--a-paper)',border:'2px solid ' + (
                  s.status === 'ACTIVE' ? 'var(--a-success)' :
                  s.status === 'CANCELLED' ? 'var(--a-danger)' : 'var(--a-ink-muted)'
                ),
              }}/>
              <div className="a-card" style={{padding:14,cursor:'pointer'}} onClick={() => setOpenSubId(s.id)}>
                <div className="flex items-center gap-2" style={{marginBottom:6}}>
                  <Mono style={{fontWeight:600}}>{s.id}</Mono>
                  <PlanBadge plan={s.plan}/>
                  <StatusBadge status={s.status}/>
                  {s.manualNote && (
                    <span style={{display:'inline-flex',alignItems:'center',gap:3,color:'var(--a-warn)',fontSize:11,fontWeight:500}}>
                      <AIcon name="wrench" size={10}/> 手動
                    </span>
                  )}
                  <span className="ml-auto" style={{fontFamily:'var(--a-mono)',fontWeight:600}}>
                    NT${(s.amount/100).toLocaleString()}
                  </span>
                </div>
                <div className="flex items-center" style={{fontSize:12.5,color:'var(--a-ink-soft)',gap:14}}>
                  <span><AIcon name="clock" size={11}/> {FMT.iso(s.startAt).slice(0,10)} → {FMT.iso(s.endAt).slice(0,10)}</span>
                  {s.status === 'ACTIVE' && (
                    <span style={{
                      fontWeight:500,
                      color: daysLeft < 0 ? 'var(--a-danger)' : daysLeft <= 3 ? 'var(--a-warn)' : 'var(--a-success)',
                    }}>
                      {daysLeft < 0 ? '已過期 ' + Math.abs(daysLeft) + ' 天' : '剩 ' + daysLeft + ' 天'}
                    </span>
                  )}
                  {!s.manualNote && <span><AIcon name="card" size={11}/> <Mono>{s.stripeSession.slice(0,16)}...</Mono></span>}
                </div>
                {s.manualNote && (
                  <div style={{marginTop:8,padding:'6px 8px',background:'#FEF3C7',borderRadius:4,fontSize:12,color:'#713F12'}}>
                    {s.manualNote}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {openSubId && (
        <SubscriptionDrawer sub={ADMIN.subs.find(s => s.id === openSubId)} onClose={() => setOpenSubId(null)}
          onUpdate={(id, patch, action, diff) => {
            const idx = ADMIN.subs.findIndex(s => s.id === id);
            if (idx >= 0) Object.assign(ADMIN.subs[idx], patch);
            if (action) {
              ADMIN.auditLogs.unshift({
                id: 'log_' + Math.random().toString(36).slice(2,8),
                at: new Date(), actor: 'Vincent Chen', action,
                targetType: 'Subscription', targetId: id, diff: diff || {},
              });
            }
            toast.push({ kind: 'success', msg: '已更新' });
          }}/>
      )}
    </div>
  );
};

// ============================================================
// TABS — ACTIVITY
// ============================================================
const EmpActivity = ({ emp, threads }) => (
  <div>
    {/* Threads */}
    <div className="a-card">
      <div className="a-card-header">
        <h3 className="a-card-title"><AIcon name="chat" size={14}/> 訊息 thread ({threads.length})</h3>
      </div>
      {threads.length === 0 ? (
        <div style={{padding:24,textAlign:'center',color:'var(--a-ink-muted)',fontSize:13}}>尚無訊息往來</div>
      ) : (
        <div>
          {threads.map(t => {
            const cand = ADMIN.candidates.find(c => c.id === t.candidateId);
            return (
              <div key={t.id} style={{padding:'10px 14px',borderTop:'1px solid var(--a-line)',display:'flex',alignItems:'center',gap:10}}>
                {t.flagged && <AIcon name="warning" size={14} style={{color:'var(--a-danger)'}}/>}
                <div style={{flex:1}}>
                  <div className="flex items-center gap-2" style={{fontSize:13}}>
                    <span style={{fontWeight:500}}>{cand?.name || '?'}</span>
                    {cand && <><Flag code={cand.nationality}/> <Tier t={cand.tier}/></>}
                    <Mono>{t.id}</Mono>
                    {t.flagged && <span style={{fontSize:11,color:'var(--a-danger)',fontWeight:500}}>⚠ 已標記</span>}
                  </div>
                  <div className="text-muted fs-12" style={{marginTop:2}}>
                    {t.msgCount} 則訊息 · 最後 {FMT.rel(t.lastAt)}
                  </div>
                </div>
                <button className="a-btn a-btn-ghost a-btn-sm">
                  <AIcon name="external" size={12}/> 檢視
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  </div>
);

// ============================================================
// TABS — JOBS (dedicated)
// ============================================================
const EmpJobs = ({ emp, jobs }) => {
  const toast = useToast();
  const [openJob, setOpenJob] = uS(null);
  const active  = jobs.filter(j => j.status === 'ACTIVE');
  const pending = jobs.filter(j => j.status === 'PENDING_REVIEW' || j.status === 'DRAFT');
  const closed  = jobs.filter(j => j.status === 'CLOSED' || j.status === 'EXPIRED');

  const fmtSalary = (j) => {
    if (j.salaryMode === 'tbd') return 'To be discussed';
    if (j.salaryMin && j.salaryMax) {
      const cur = j.salaryCurrency || 'NT$';
      return `${cur}${Number(j.salaryMin).toLocaleString()} – ${cur}${Number(j.salaryMax).toLocaleString()}/mo`;
    }
    return j.salaryText || '—';
  };

  const JobRow = ({ j }) => (
    <div style={{padding:'14px 16px',borderTop:'1px solid var(--a-line)',display:'flex',alignItems:'center',gap:12,cursor:'pointer'}}
         onClick={()=>setOpenJob(j)}
         onMouseEnter={e=>e.currentTarget.style.background='var(--a-paper-2)'}
         onMouseLeave={e=>e.currentTarget.style.background=''}>
      <div style={{flex:1,minWidth:0}}>
        <div className="flex items-center" style={{fontSize:13.5,fontWeight:600,marginBottom:4,gap:10}}>
          <span style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',maxWidth:360}}>{j.title}</span>
          {/* StatusBadge only for non-ACTIVE jobs — Active is implicit
              since these rows live under the "上架中" section header. */}
          {j.status !== 'ACTIVE' && <StatusBadge status={j.status}/>}
          <Mono>{j.id}</Mono>
        </div>
        <div className="text-muted fs-12 flex items-center" style={{gap:10,flexWrap:'wrap'}}>
          <span><Flag code={j.market}/> {j.city}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span>{j.position || j.jobType || '—'} · {j.type || 'Live-in'}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span className="fw-500" style={{color:'var(--a-ink-soft)'}}>{fmtSalary(j)}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span><AIcon name="user" size={10}/> {j.applicants} 人應徵</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span>{FMT.rel(j.createdAt)}</span>
        </div>
      </div>
      <div style={{display:'flex',gap:6,flexShrink:0}}>
        <button className="a-btn a-btn-ghost a-btn-sm" onClick={(e)=>{e.stopPropagation();setOpenJob(j);}}>
          <AIcon name="eye" size={11}/> 檢視
        </button>
      </div>
    </div>
  );

  const Section = ({ title, list, tone, empty }) => (
    <div className="a-card" style={{marginBottom:14}}>
      <div className="a-card-header">
        <h3 className="a-card-title">
          <AIcon name={tone==='warn'?'warning':tone==='closed'?'archive':'briefcase'} size={14}/> {title}
          <span className="text-muted fs-12" style={{marginLeft:8,fontWeight:400}}>({list.length})</span>
        </h3>
      </div>
      {list.length === 0
        ? <div style={{padding:22,textAlign:'center',color:'var(--a-ink-muted)',fontSize:12.5}}>{empty}</div>
        : <div>{list.map(j => <JobRow key={j.id} j={j}/>)}</div>}
    </div>
  );

  return (
    <div>
      {pending.length > 0 && <Section title="待審核" list={pending} tone="warn" empty="無待審核"/>}
      <Section title="上架中" list={active} empty="此雇主目前沒有上架中的職缺"/>
      {closed.length > 0 && <Section title="已下架 / 過期" list={closed} tone="closed" empty="—"/>}
      {openJob && (
        <JobDetailModal job={openJob} emp={emp} onClose={()=>setOpenJob(null)}
          onApprove={()=>{ openJob.status='ACTIVE'; toast.push({kind:'success',msg:'已核准並上架 ' + openJob.id}); setOpenJob(null); }}
          onReject={()=>{ openJob.status='DRAFT'; toast.push({kind:'warn',msg:'已退回待雇主修改'}); setOpenJob(null); }}
          onClose2={()=>{ openJob.status='CLOSED'; toast.push({kind:'warn',msg:'已強制下架 ' + openJob.id}); setOpenJob(null); }}/>
      )}
    </div>
  );
};

// Job detail modal — mirrors the front-end Post-a-Job form structure
// (Frontend/pages-forms.jsx CreateProfilePage). When the form schema changes
// over there, this view should be updated to match. Current alignment:
//   Step 1 Basics      → title, position, jobType, location, startDate,
//                        flexibility, household
//   Step 2 Requirements → languages, mainSkills, cookingCuisines, otherSkills
//   Step 3 Preferences  → gender, contract, nationality, religion, education,
//                        age range, exp years   (private — sorts candidates)
//   Step 3 Offerings    → salary, day off, accommodation
//                        (public — shown to helpers on the job page)
//   Step 4 About        → description rich text
const JobDetailModal = ({ job, emp, onClose, onApprove, onReject, onClose2 }) => {
  const pending = job.status === 'PENDING_REVIEW' || job.status === 'DRAFT';
  const t = (window.i18n && window.i18n.t) ? window.i18n.t : (k) => k;

  // ----- Salary display (prefers new salaryMin/Max/Currency, falls back to legacy salaryText) -----
  const fmtSalary = (j) => {
    if (j.salaryMode === 'tbd') return 'To be discussed';
    if (j.salaryMin && j.salaryMax) {
      const cur = j.salaryCurrency || 'NT$';
      return `${cur}${Number(j.salaryMin).toLocaleString()} – ${cur}${Number(j.salaryMax).toLocaleString()} / mo`;
    }
    return j.salaryText || '—';
  };

  // ----- Flexibility — start-date wiggle room, mapped to a humanised label
  // from the front-end i18n enum (fix / 2w / 1m / 2m / 3m). -----
  const fmtFlexibility = (val) => {
    if (!val) return '—';
    const label = t('forms.enum.flexibility.' + val);
    return label !== ('forms.enum.flexibility.' + val) ? label : val;
  };

  const fmtDayOff = (val) => {
    if (!val) return '—';
    const label = t('forms.enum.dayOff.' + val);
    return label !== ('forms.enum.dayOff.' + val) ? label : val;
  };

  const fmtAccommodation = (val) => {
    if (!val || val === 'Dont mention') return val === 'Dont mention' ? '—（不指定）' : '—';
    const label = t('forms.enum.jobAccommodation.' + val);
    return label !== ('forms.enum.jobAccommodation.' + val) ? label : val;
  };

  // ----- Household summary from new schema, fallback to legacy familySize -----
  const householdText = (() => {
    if (job.familyAdults == null && job.familyKids == null) return job.familySize || '—';
    const parts = [];
    parts.push(`${job.familyAdults || 0} adult${(job.familyAdults || 0) === 1 ? '' : 's'}`);
    if (job.familyKids > 0) parts.push(`${job.familyKids} kid${job.familyKids === 1 ? '' : 's'}${job.kidsAges ? ` (ages ${job.kidsAges})` : ''}`);
    if (job.hasElderly) parts.push('elderly at home');
    if (job.hasPets) parts.push(`pets${job.petsDetail ? ` (${job.petsDetail})` : ''}`);
    return parts.join(' · ');
  })();

  // ----- Taxonomy lookup (front-end SKILL_TAXONOMY) -----
  const tax = window.SKILL_TAXONOMY;
  const lookupLabels = (kind, ids) => {
    if (!ids || !ids.length) return [];
    if (!tax || !tax[kind]) return ids;
    return ids.map(id => {
      const hit = tax[kind].find(x => x.id === id);
      return hit ? (hit.flag ? `${hit.flag} ${hit.label}` : hit.label) : id;
    });
  };
  const langLabels = lookupLabels('languages', job.reqLanguages);
  const mainLabels = lookupLabels('mainSkills', job.reqMainSkills);
  const cookLabels = lookupLabels('cookingSkills', job.reqCookingSkills);
  const otherLabels = lookupLabels('otherSkills', job.reqOtherSkills);

  // Shared helpers
  const Chips = ({ items, tone = 'neutral' }) => (
    <div className="flex gap-4" style={{flexWrap:'wrap'}}>
      {items && items.length > 0
        ? items.map((x,i) => <span key={i} className={`a-badge a-badge-${tone}`}>{x}</span>)
        : <span className="text-faint fs-12">—</span>}
    </div>
  );
  const ChipGroup = ({ label, items, tone, required }) => (
    <div>
      <div className="fs-11 fw-600 text-muted mb-6" style={{letterSpacing:'0.05em',textTransform:'uppercase'}}>
        {label}{required && <span style={{color:'var(--a-danger)',marginLeft:4}}>*</span>}
      </div>
      <Chips items={items} tone={tone}/>
    </div>
  );

  // ----- Pref display (new schema, fallback to Any) -----
  const ageRange = job.prefAgeRange ? `${job.prefAgeRange[0]} – ${job.prefAgeRange[1]} yrs` : (job.reqAgeRange || '—');
  const expRange = job.prefExpYears ? `${job.prefExpYears[0]} – ${job.prefExpYears[1]} yrs` : (job.reqExperience || '—');

  return (
    <AModal open onClose={onClose} size="lg" title={
      <span style={{display:'flex',alignItems:'center',gap:10}}>
        <AIcon name="briefcase" size={18}/>
        <span>職缺詳情</span>
        <Mono>{job.id}</Mono>
        <StatusBadge status={job.status}/>
      </span>
    } footer={
      pending ? (
        <>
          <button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button>
          <button className="a-btn a-btn-danger" onClick={onReject}><AIcon name="xCircle" size={12}/> 退回待修改</button>
          <div style={{flex:1}}/>
          <button className="a-btn a-btn-success-solid" onClick={onApprove}><AIcon name="check" size={12}/> 核准並上架</button>
        </>
      ) : job.status === 'ACTIVE' ? (
        <>
          <button className="a-btn a-btn-danger" onClick={onClose2}><AIcon name="archive" size={12}/> 強制下架</button>
          <div style={{flex:1}}/>
          <button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button>
        </>
      ) : (
        <><div style={{flex:1}}/><button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button></>
      )
    }>
      {/* Top summary */}
      <div style={{padding:'14px 16px',background:'var(--a-paper-2)',borderRadius:8,marginBottom:16}}>
        <h2 style={{fontSize:17,fontWeight:700,letterSpacing:'-0.01em',marginBottom:8}}>{job.title}</h2>
        <div className="flex items-center" style={{gap:10,flexWrap:'wrap',fontSize:13}}>
          <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Flag code={job.market}/> {job.city}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span>{job.position || job.jobType}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span>{job.type || job.jobType || 'Live-in'}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span className="fw-600">{fmtSalary(job)}</span>
          <span style={{color:'var(--a-line-strong)'}}>·</span>
          <span className="text-muted">{job.applicants} 人應徵 · {FMT.rel(job.createdAt)}</span>
        </div>
      </div>

      {/* Step 1 — Basics. Mirrors Post-a-Job step 0 (Frontend/pages-forms.jsx).
          Salary moved to "Offerings" below — front-end groups it with the
          other public offer fields (day off, accommodation). */}
      <div className="a-card" style={{marginBottom:14}}>
        <div className="a-card-header"><h3 className="a-card-title">① 基本資訊（Basics）</h3></div>
        <div className="a-card-body">
          <dl style={{margin:0,display:'grid',gridTemplateColumns:'110px 1fr 110px 1fr',gap:'10px 14px',fontSize:13}}>
            <dt className="text-muted">發佈雇主</dt>
            <dd style={{margin:0}}>{emp.name} <Mono>{emp.id}</Mono></dd>
            <dt className="text-muted">Position</dt>
            <dd style={{margin:0}}>{job.position || job.jobType || '—'}</dd>

            <dt className="text-muted">Job type</dt>
            <dd style={{margin:0}}>{job.type || '—'}</dd>
            <dt className="text-muted">Location</dt>
            <dd style={{margin:0}}>{job.city}, {job.market}</dd>

            <dt className="text-muted">Start date</dt>
            <dd style={{margin:0}}>{job.startDate || '—'}</dd>
            <dt className="text-muted">Flexibility</dt>
            <dd style={{margin:0}}>{fmtFlexibility(job.flexibility)}</dd>

            <dt className="text-muted">Household</dt>
            <dd style={{margin:0, gridColumn: 'span 3'}}>{householdText}</dd>
          </dl>
        </div>
      </div>

      {/* Step 2 — Requirements */}
      <div className="a-card" style={{marginBottom:14}}>
        <div className="a-card-header"><h3 className="a-card-title">② 條件要求（Requirements）</h3></div>
        <div className="a-card-body">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'18px 24px'}}>
            <ChipGroup label="Languages" items={langLabels} tone="primary" required/>
            <ChipGroup label="Main skills" items={mainLabels} tone="success" required/>
            <ChipGroup label="Cooking cuisines" items={cookLabels} tone="neutral"/>
            <ChipGroup label="Other skills" items={otherLabels} tone="neutral"/>
          </div>
        </div>
      </div>

      {/* Step 3 — Preferences + Offerings. Front-end form merges these into a
          single step ("Preferences / Offerings") with two visual subsections.
          Mirroring the same split here keeps admin / helper-page mental
          models in sync. */}
      <div className="a-card" style={{marginBottom:14}}>
        <div className="a-card-header"><h3 className="a-card-title">③ 偏好條件 / 提供條件（Preferences / Offerings）</h3></div>
        <div className="a-card-body">
          {/* Preferences (private — sorts candidates, not shown to helpers) */}
          <div style={{marginBottom:18}}>
            <div className="fs-12 fw-700 text-muted mb-10" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>
              偏好（Preferences · 私人，不顯示給 helper）
            </div>
            <dl style={{margin:'0 0 12px',display:'grid',gridTemplateColumns:'110px 1fr 110px 1fr',gap:'10px 14px',fontSize:13}}>
              <dt className="text-muted">Gender</dt>
              <dd style={{margin:0}}>{job.prefGender || 'Any'}</dd>
              <dt className="text-muted">Contract</dt>
              <dd style={{margin:0}}>{job.prefContractStatus || 'Any'}</dd>

              <dt className="text-muted">Religion</dt>
              <dd style={{margin:0}}>{job.prefReligion || 'Any'}</dd>
              <dt className="text-muted">Education</dt>
              <dd style={{margin:0}}>{job.prefEducation || 'Any'}</dd>

              <dt className="text-muted">Age range</dt>
              <dd style={{margin:0}}>{ageRange}</dd>
              <dt className="text-muted">Experience</dt>
              <dd style={{margin:0}}>{expRange}</dd>
            </dl>
            <ChipGroup label="Preferred nationality" items={job.prefNationalities || job.nationalities} tone="neutral"/>
          </div>

          <hr style={{border:0,borderTop:'1px solid var(--a-line)',margin:'14px 0'}}/>

          {/* Offerings (public — surfaces on the job detail page) */}
          <div>
            <div className="fs-12 fw-700 text-muted mb-10" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>
              提供條件（Offerings · 公開，顯示在職缺頁面）
            </div>
            <dl style={{margin:0,display:'grid',gridTemplateColumns:'110px 1fr 110px 1fr',gap:'10px 14px',fontSize:13}}>
              <dt className="text-muted">Salary</dt>
              <dd style={{margin:0}}>{fmtSalary(job)}</dd>
              <dt className="text-muted">Day off</dt>
              <dd style={{margin:0}}>{fmtDayOff(job.jobDayOff)}</dd>

              <dt className="text-muted">Accommodation</dt>
              <dd style={{margin:0,gridColumn:'span 3'}}>{fmtAccommodation(job.jobAccommodation)}</dd>
            </dl>
          </div>
        </div>
      </div>

      {/* Step 4 — Description (rich HTML from Post-a-Job "About" editor) */}
      <div className="a-card">
        <div className="a-card-header"><h3 className="a-card-title">④ 職缺說明（About the job）</h3></div>
        <div className="a-card-body">
          {job.description ? (
            <div
              className="a-rich-content"
              style={{fontSize:13.5,lineHeight:1.65,color:'var(--a-ink)'}}
              dangerouslySetInnerHTML={{__html: job.description}}
            />
          ) : (
            <span className="text-faint">未提供說明</span>
          )}
        </div>
      </div>
    </AModal>
  );
};

// ============================================================
// TABS — AUDIT
// ============================================================
const EmpAudit = ({ logs }) => {
  if (!logs || logs.length === 0) {
    return (
      <div className="a-card">
        <AEmpty icon="history" title="沒有操作紀錄" desc="對此雇主的所有操作（停權、補單、編輯）會顯示在此"/>
      </div>
    );
  }
  return (
    <div className="a-card">
      <div className="a-card-header">
        <h3 className="a-card-title"><AIcon name="history" size={14}/> 操作紀錄（{logs.length}）</h3>
      </div>
      <div className="a-card-body a-card-body-flush" style={{overflowX:'auto'}}>
        <table className="a-table a-table-compact" style={{margin:0,width:'100%'}}>
          <thead><tr>
            <th style={{width:140}}>時間</th>
            <th style={{width:160}}>動作</th>
            <th style={{width:130}}>對象</th>
            <th>變更</th>
            <th style={{width:110}}>操作者</th>
          </tr></thead>
          <tbody>
            {logs.map(l => (
              <tr key={l.id}>
                <td className="fs-12 text-muted" style={{whiteSpace:'nowrap'}}>{FMT.iso(l.at)}</td>
                <td><span className="a-badge a-badge-neutral fs-11">{l.action.replace(/_/g,' ')}</span></td>
                <td className="fs-12"><Mono>{l.targetId}</Mono></td>
                <td style={{fontSize:12.5}}>
                  {Object.entries(l.diff || {}).slice(0, 3).map(([k, v]) => (
                    <div key={k} style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:360}}>
                      <strong>{k}</strong>: {typeof v === 'object' && v && 'before' in v
                        ? <><span style={{textDecoration:'line-through',color:'var(--a-ink-muted)'}}>{String(v.before)}</span> → {String(v.after)}</>
                        : String(v)}
                    </div>
                  ))}
                </td>
                <td className="fs-12">{l.actor}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ============================================================
// SUSPEND MODAL
// ============================================================
const SuspendBody = ({ emp }) => emp.status === 'SUSPENDED' ? (
  <div style={{padding:12,background:'var(--a-primary-50)',border:'1px solid var(--a-primary-line)',borderRadius:6,fontSize:13}}>
    <strong>解除停權後</strong>，此雇主將能重新登入、續訂、聯絡候選人。
    {emp.suspendReason && (<div style={{marginTop:6,fontSize:12,color:'var(--a-ink-muted)'}}>原停權原因：{emp.suspendReason}</div>)}
  </div>
) : (
  <div style={{padding:12,background:'#FEF2F2',border:'1px solid #FECACA',borderRadius:6,fontSize:13,color:'#991B1B',marginBottom:12}}>
    <strong>⚠ 停權後將立即執行：</strong>
    <ul style={{margin:'6px 0 0',paddingLeft:18,color:'#7F1D1D',fontSize:12.5,lineHeight:1.7}}>
      <li>此帳戶無法登入；瀏覽器 session 立即失效</li>
      <li>所有進行中的候選人聯絡將被暫停</li>
      <li>訂閱狀態不變（手動退款請另外操作）</li>
    </ul>
  </div>
);

const SuspendFooter = ({ emp, onClose, onConfirm }) => {
  const [reason, setReason] = uS(emp.status === 'SUSPENDED' ? '已核實，解除停權' : '');
  const presets = emp.status === 'SUSPENDED' ? [] : ['付款爭議未解決','違反社群守則','雇主投訴多次','疑似詐欺','其他'];
  return (
    <div style={{width:'100%'}}>
      {emp.status !== 'SUSPENDED' && (
        <>
          <label className="text-muted fs-12" style={{display:'block',marginBottom:4}}>停權原因 *</label>
          <div style={{display:'flex',gap:4,flexWrap:'wrap',marginBottom:6}}>
            {presets.map(p => (
              <button key={p} className={'a-btn a-btn-xs ' + (reason === p ? 'a-btn-primary' : 'a-btn-default')}
                      onClick={() => setReason(p)}>{p}</button>
            ))}
          </div>
          <textarea className="a-textarea" value={reason} onChange={e => setReason(e.target.value)}
                    placeholder="詳細描述…" style={{minHeight:52,marginBottom:10}}/>
        </>
      )}
      <div className="flex gap-2" style={{justifyContent:'flex-end'}}>
        <button className="a-btn a-btn-default" onClick={onClose}>取消</button>
        <button className={'a-btn ' + (emp.status === 'SUSPENDED' ? 'a-btn-primary' : 'a-btn-danger-solid')}
                disabled={emp.status === 'ACTIVE' && !reason.trim()}
                onClick={() => onConfirm(reason.trim())}>
          {emp.status === 'SUSPENDED' ? '確認解除' : '確認停權'}
        </button>
      </div>
    </div>
  );
};

Object.assign(window, {
  EmployersPageReal, EmployerDrawer, SuspendBody, SuspendFooter,
  // JobDetailModal is exposed so admin-jobs.jsx can render the same job
  // detail view from the platform-wide jobs management page (same
  // schema-aligned layout, same approve / reject / close actions).
  JobDetailModal,
});