// HelperMatch Admin — Jobs management page (People → Jobs)
//
// Cross-employer view of every job posted on the platform. Sits next to
// Candidates / Employers in the People group; readable by everyone (no role
// gate). Clicking a row opens window.JobDetailModal — the same component
// the Employer drawer uses, so the schema-aligned single-job view stays in
// one place.
//
// See PRODUCTION_TODO.md → P0 #6 (Apply triggers thread + applicant tracking)
// for what hooks here once the backend lands.

const JobsPageReal = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const toast = useToast();
  const { route } = useRoute();
  const [q, setQ] = uS('');
  const [statusFilter, setStatusFilter]     = uS(() => {
    // Allow deep-link to a specific status via #/jobs?status=PENDING_REVIEW
    const m = (window.location.hash.match(/status=([A-Z_]+)/));
    return m ? m[1] : '';
  });
  const [marketFilter, setMarketFilter]     = uS('');
  const [typeFilter, setTypeFilter]         = uS('');
  const [sortBy, setSortBy]                 = uS('newest');
  const [openJob, setOpenJob]               = uS(null);

  const empById = (id) => ADMIN.employers.find(e => e.id === id);

  // KPI tiles — quick-glance health of the jobs board.
  const kpi = uM(() => {
    const active   = ADMIN.jobs.filter(j => j.status === 'ACTIVE').length;
    const pending  = ADMIN.jobs.filter(j => j.status === 'PENDING_REVIEW' || j.status === 'DRAFT').length;
    const newWeek  = ADMIN.jobs.filter(j => new Date(j.createdAt) > new Date(ADMIN.now.getTime() - 7*86400000)).length;
    const totalAppl = ADMIN.jobs.reduce((s, j) => s + (j.applicants || 0), 0);
    return { active, pending, newWeek, totalAppl };
  }, []);

  const filtered = uM(() => {
    let list = [...ADMIN.jobs];
    if (q) {
      const qL = q.toLowerCase();
      list = list.filter(j => {
        const emp = empById(j.empId);
        return (
          (j.title || '').toLowerCase().includes(qL) ||
          (j.id || '').toLowerCase().includes(qL) ||
          (emp && emp.name.toLowerCase().includes(qL))
        );
      });
    }
    if (statusFilter) list = list.filter(j => j.status === statusFilter);
    if (marketFilter) list = list.filter(j => j.market === marketFilter);
    if (typeFilter)   list = list.filter(j => j.type === typeFilter);
    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));
    if (sortBy === 'mostApplicants') list.sort((a,b) => (b.applicants || 0) - (a.applicants || 0));
    return list;
  }, [q, statusFilter, marketFilter, typeFilter, sortBy]);

  // Salary formatter — same logic as JobDetailModal so admins see consistent
  // copy across surfaces. Prefers new schema (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 || '—';
  };

  const STATUS_LABEL = {
    PENDING_REVIEW: '待審核',
    DRAFT: '草稿',
    ACTIVE: '上架中',
    CLOSED: '已下架',
    EXPIRED: '已過期',
  };

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title"><AIcon name="briefcase"/> 職缺管理</h1>
          <p className="a-page-sub">站上所有雇主發佈的職缺，可審核、強制下架或匯出。</p>
        </div>
        {/* CSV export — Super Admin only (data egress / privacy gate). */}
        {isSuperAdmin(user) && (
          <button className="a-btn a-btn-default" onClick={() => toast.push({kind:'info', msg:'匯出 CSV（mock）'})}>
            <AIcon name="download" size={14}/> {t('admin.common.exportCsv')}
          </button>
        )}
      </div>

      {/* KPIs */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginBottom:20}}>
        <KpiTile label="上架中"     value={kpi.active}    icon="briefcase" tone="success"/>
        <KpiTile label="待審核"     value={kpi.pending}   icon="clock"     tone={kpi.pending > 0 ? 'warn' : 'neutral'}/>
        <KpiTile label="7 日內新發佈" value={kpi.newWeek}   icon="plus"      tone="info"/>
        <KpiTile label="累積應徵人次" value={kpi.totalAppl} icon="users"/>
      </div>

      {/* Filters */}
      <div className="a-table-toolbar" style={{marginBottom:12}}>
        <div className="a-input-group" style={{width:300}}>
          <div className="a-input-group-prefix"><AIcon name="search" size={14}/></div>
          <input className="a-input" placeholder="職缺標題 / 雇主姓名 / 職缺 ID" value={q} onChange={e => setQ(e.target.value)}/>
        </div>
        <select className="a-select" style={{width:140}} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="">所有狀態</option>
          <option value="PENDING_REVIEW">待審核</option>
          <option value="DRAFT">草稿</option>
          <option value="ACTIVE">上架中</option>
          <option value="CLOSED">已下架</option>
          <option value="EXPIRED">已過期</option>
        </select>
        <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:140}} value={typeFilter} onChange={e => setTypeFilter(e.target.value)}>
          <option value="">所有工作型態</option>
          <option value="Live-in">Live-in</option>
          <option value="Live-out">Live-out</option>
          <option value="Temporary">Temporary</option>
        </select>
        <select className="a-select" style={{width:170}} value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="newest">最新發佈</option>
          <option value="oldest">最早發佈</option>
          <option value="mostApplicants">應徵人數最多</option>
        </select>
        <span className="ml-auto text-muted fs-13">共 {filtered.length} 筆</span>
      </div>

      {/* Card list — same row treatment as the Employers page redesign so
          admins see a consistent People-group layout. */}
      {filtered.length === 0 ? (
        <AEmpty icon="briefcase" label="沒有符合條件的職缺"/>
      ) : (
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          {filtered.map(j => {
            const emp = empById(j.empId);
            const market = ADMIN.markets.find(m => m.code === j.market);
            return (
              <div
                key={j.id}
                className="a-card clickable"
                onClick={() => setOpenJob(j)}
                style={{cursor:'pointer', overflow:'hidden'}}
              >
                {/* Top: title + meta */}
                <div style={{padding:'16px 18px', display:'flex', alignItems:'flex-start', gap:14}}>
                  <div style={{
                    width:42, height:42, borderRadius:10,
                    background:'var(--a-primary-bg, #FBE2D5)', color:'var(--a-primary, #B85A2C)',
                    display:'grid', placeItems:'center', flexShrink:0,
                  }}>
                    <AIcon name="briefcase" size={18}/>
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="flex items-center" style={{marginBottom:5, gap:10, flexWrap:'wrap'}}>
                      <span style={{fontWeight:600, fontSize:14.5, overflow:'hidden', textOverflow:'ellipsis', maxWidth:520, whiteSpace:'nowrap'}}>{j.title}</span>
                      {/* Status badge — only for non-active states (parity
                          with employer card / job row). */}
                      {j.status !== 'ACTIVE' && <StatusBadge status={j.status}/>}
                      <Mono style={{fontSize:11}}>{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}{market ? ` · ${market.nameZh}` : ''}</span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span>{j.position || j.jobType || '—'}</span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span>{j.type || '—'}</span>
                      <span style={{color:'var(--a-line-strong)'}}>·</span>
                      <span className="fw-500" style={{color:'var(--a-ink-soft)'}}>{fmtSalary(j)}</span>
                    </div>
                  </div>
                  {/* Right meta — applicants + posted date */}
                  <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4, flexShrink:0, minWidth:120}}>
                    <div className="fs-13 fw-600" style={{color:'var(--a-ink)'}}>
                      <AIcon name="users" size={12}/> {j.applicants || 0} 人應徵
                    </div>
                    <div className="fs-12 text-muted">{FMT.rel(j.createdAt)}</div>
                  </div>
                  <button
                    className="a-icon-btn"
                    onClick={ev => { ev.stopPropagation(); setOpenJob(j); }}
                    style={{flexShrink:0}}
                  >
                    <AIcon name="chevronRight" size={14}/>
                  </button>
                </div>

                {/* Bottom: employer attribution strip — clarifies who posted
                    this job (admins often need to jump from a job to the
                    employer who posted it). */}
                <div style={{
                  padding:'10px 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="employer" size={11}/> 發佈雇主
                  </span>
                  {emp ? (
                    <button
                      onClick={ev => { ev.stopPropagation(); window.location.hash = '#/employers'; }}
                      title={`前往雇主管理：${emp.name}`}
                      style={{
                        display:'inline-flex', alignItems:'center', gap:8,
                        padding:'4px 10px',
                        background:'#fff', border:'1px solid var(--a-line)', borderRadius:99,
                        fontSize:12, cursor:'pointer', color:'var(--a-ink)',
                      }}
                    >
                      <span style={{
                        width:18, height:18, borderRadius:'50%',
                        background:'var(--a-primary)', color:'#fff',
                        display:'grid', placeItems:'center', fontWeight:600, fontSize:10, flexShrink:0,
                      }}>{emp.name.charAt(0)}</span>
                      <span style={{whiteSpace:'nowrap'}}>{emp.name}</span>
                      <Mono style={{fontSize:10.5}}>{emp.id}</Mono>
                      <PlanBadge plan={emp.subscription}/>
                    </button>
                  ) : (
                    <span className="fs-12 text-faint">未知雇主 ({j.empId})</span>
                  )}
                  <span className="ml-auto fs-12 text-muted">
                    Status: <span className="fw-500" style={{color:'var(--a-ink)'}}>{STATUS_LABEL[j.status] || j.status}</span>
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Drawer-style detail — reuses the same component the Employer drawer
          renders so admins see identical schema regardless of entry point. */}
      {openJob && window.JobDetailModal && (() => {
        const emp = empById(openJob.empId) || { id: openJob.empId, name: '—', subscription: 'free' };
        const Modal = window.JobDetailModal;
        return (
          <Modal
            job={openJob}
            emp={emp}
            onClose={() => setOpenJob(null)}
            onApprove={() => {
              openJob.status = 'ACTIVE';
              ADMIN.auditLogs.unshift({
                id: 'log_' + Math.random().toString(36).slice(2,8),
                at: new Date(), actor: (window.__currentAdminName || 'System'),
                action: 'JOB_APPROVE', targetType: 'Job', targetId: openJob.id,
                diff: { status: { before: 'PENDING_REVIEW', after: 'ACTIVE' } },
              });
              toast.push({kind:'success', msg:'已核准並上架 ' + openJob.id});
              setOpenJob(null);
            }}
            onReject={() => {
              openJob.status = 'DRAFT';
              ADMIN.auditLogs.unshift({
                id: 'log_' + Math.random().toString(36).slice(2,8),
                at: new Date(), actor: (window.__currentAdminName || 'System'),
                action: 'JOB_REJECT', targetType: 'Job', targetId: openJob.id,
                diff: { status: { before: 'PENDING_REVIEW', after: 'DRAFT' } },
              });
              toast.push({kind:'warn', msg:'已退回待雇主修改'});
              setOpenJob(null);
            }}
            onClose2={() => {
              const before = openJob.status;
              openJob.status = 'CLOSED';
              ADMIN.auditLogs.unshift({
                id: 'log_' + Math.random().toString(36).slice(2,8),
                at: new Date(), actor: (window.__currentAdminName || 'System'),
                action: 'JOB_FORCE_CLOSE', targetType: 'Job', targetId: openJob.id,
                diff: { status: { before, after: 'CLOSED' } },
              });
              toast.push({kind:'warn', msg:'已強制下架 ' + openJob.id});
              setOpenJob(null);
            }}
          />
        );
      })()}
    </div>
  );
};

Object.assign(window, { JobsPageReal });