// HelperMatch Admin — Phase B2: Assessments
// List (Draft / Pending sign-off / Signed), detail drawer with sign-off flow

const SKILL_PRESETS = [
  'Newborn care', 'Toddler care', 'School-age care', 'Eldercare',
  'Cooking - Asian', 'Cooking - Chinese', 'Cooking - Western', 'Baking', 'Halal cooking',
  'Housekeeping', 'Deep cleaning', 'Laundry', 'Ironing',
  'English', 'Mandarin', 'Cantonese', 'Bahasa Indonesia',
  'Pet care', 'Driving',
];

const AssessmentsPageReal = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const toast = useToast();
  const [tab, setTab] = uS(() => {
    const m = window.location.hash.match(/status=([A-Z_]+)/);
    return m ? m[1] : 'PENDING_SIGNOFF';
  });
  const [q, setQ] = uS('');
  const [assessorFilter, setAssessorFilter] = uS('');
  const [tierFilter, setTierFilter] = uS('');
  const [sortBy, setSortBy] = uS('newest');
  const [openId, setOpenId] = uS(null);
  const [showNew, setShowNew] = uS(false);
  const [asms, setAsms] = uS(() => ADMIN.assessments.map(a => ({ ...a })));

  const tabs = [
    { key: 'PENDING_SIGNOFF', label: '待簽核' },
    { key: 'DRAFT',           label: '草稿' },
    { key: 'SIGNED',          label: '已簽核' },
    { key: 'ALL',             label: '全部' },
  ];
  const tabCount = (k) => k === 'ALL' ? asms.length : asms.filter(a => a.status === k).length;

  const assessors = uM(() => [...new Set(asms.map(a => a.assessor))], [asms]);

  const filtered = uM(() => {
    let list = asms;
    if (tab !== 'ALL') list = list.filter(a => a.status === tab);
    if (q) {
      const qL = q.toLowerCase();
      list = list.filter(a => {
        const cand = ADMIN.candidates.find(c => c.id === a.candidateId);
        return a.id.toLowerCase().includes(qL) || (cand && (cand.name.toLowerCase().includes(qL) || cand.id.toLowerCase().includes(qL)));
      });
    }
    if (assessorFilter) list = list.filter(a => a.assessor === assessorFilter);
    if (tierFilter) list = list.filter(a => a.tier === tierFilter);
    list = [...list];
    if (sortBy === 'newest') list.sort((a,b) => new Date(b.assessedAt) - new Date(a.assessedAt));
    if (sortBy === 'oldest') list.sort((a,b) => new Date(a.assessedAt) - new Date(b.assessedAt));
    if (sortBy === 'avgDesc') list.sort((a,b) => avgScore(b) - avgScore(a));
    return list;
  }, [asms, tab, q, assessorFilter, tierFilter, sortBy]);

  const openAsm = asms.find(a => a.id === openId);

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

  const createAsm = (data) => {
    const newId = 'asm_' + Math.floor(Math.random()*900 + 600);
    const newAsm = { id: newId, ...data, status: 'DRAFT', assessedAt: new Date(), signedAt: null, signedBy: null };
    setAsms(xs => [newAsm, ...xs]);
    ADMIN.auditLogs.unshift({ id:'log_'+Math.random().toString(36).slice(2,8), at:new Date(), actor:'Vincent Chen', action:'ASSESSMENT_CREATE', targetType:'Assessment', targetId:newId, diff:{ candidateId:data.candidateId, tier:data.tier }});
    toast('已建立評測草稿', 'success');
    setShowNew(false);
    setOpenId(newId);
  };

  return (
    <div className="a-page a-page-wide">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.assessments.title')}</h1>
          <p className="a-page-sub">{t('admin.assessments.subtitle')}</p>
        </div>
        <div className="a-page-header-actions">
          {/* CSV export — Super Admin only (data egress / privacy gate). */}
          {isSuperAdmin(user) && <button className="a-btn a-btn-default"><AIcon name="download" size={14}/> 匯出 CSV</button>}
          <button className="a-btn a-btn-primary" onClick={()=>setShowNew(true)}><AIcon name="plus" size={14}/> 新建評測</button>
        </div>
      </div>

      <div className="a-tabs">
        {tabs.map(t => (
          <button key={t.key} className={`a-tab ${tab===t.key?'active':''}`} onClick={()=>setTab(t.key)}>
            {t.label} <span className="a-tab-count">{tabCount(t.key)}</span>
          </button>
        ))}
      </div>

      <div className="a-card">
        <div className="a-table-toolbar">
          <div className="a-input-group" style={{width:260}}>
            <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:150}} value={assessorFilter} onChange={e=>setAssessorFilter(e.target.value)}>
            <option value="">所有評測員</option>
            {assessors.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
          <select className="a-select" style={{width:110}} value={tierFilter} onChange={e=>setTierFilter(e.target.value)}>
            <option value="">所有 Tier</option>
            <option value="A">Tier A</option><option value="B">Tier B</option>
            <option value="C">Tier C</option><option value="D">Tier D</option>
          </select>
          <select className="a-select" style={{width:140}} value={sortBy} onChange={e=>setSortBy(e.target.value)}>
            <option value="newest">最新 →</option>
            <option value="oldest">最久 →</option>
            <option value="avgDesc">平均分高 →</option>
          </select>
          <span className="ml-auto text-muted fs-13">共 {filtered.length} 筆</span>
        </div>

        <table className="a-table">
          <thead><tr>
            <th style={{width:110}}>評測 ID</th>
            <th>候選人</th>
            <th>評測員</th>
            <th>站點</th>
            <th>Tier</th>
            <th style={{width:110}}>平均分</th>
            <th>狀態</th>
            <th>評測時間</th>
            <th></th>
          </tr></thead>
          <tbody>
            {filtered.map(a => {
              const cand = ADMIN.candidates.find(c => c.id === a.candidateId);
              const avg = avgScore(a);
              return (
                <tr key={a.id} className="clickable" onClick={()=>setOpenId(a.id)}>
                  <td><Mono>{a.id}</Mono></td>
                  <td>{cand ? <CandidateCell c={cand} sub={cand.id}/> : <span className="text-faint">—</span>}</td>
                  <td className="fs-13">{a.assessor}</td>
                  <td className="fs-13 text-muted">{a.station}</td>
                  <td>{a.tier ? <Tier t={a.tier}/> : <span className="text-faint">—</span>}</td>
                  <td>
                    <div className="flex items-center gap-8">
                      <div className="a-progress" style={{width:60,height:5}}>
                        <div className="a-progress-bar" style={{width:(avg*10)+'%', background: avg >= 8 ? 'var(--a-success)' : avg >= 6 ? 'var(--a-primary)' : 'var(--a-warn)'}}/>
                      </div>
                      <span className="fw-600 tnum fs-13">{avg.toFixed(1)}</span>
                    </div>
                  </td>
                  <td><StatusBadge status={a.status}/></td>
                  <td className="text-muted">{FMT.rel(a.assessedAt)}</td>
                  <td><AIcon name="chevRight" size={13} className="text-faint"/></td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan={9}><AEmpty icon="clipboardCheck" title="沒有符合條件的評測" sub="調整篩選或建立新評測。"/></td></tr>}
          </tbody>
        </table>
      </div>

      {openAsm && <AssessmentDrawer a={openAsm} onClose={()=>setOpenId(null)} onUpdate={update}/>}
      {showNew && <NewAssessmentModal onClose={()=>setShowNew(false)} onCreate={createAsm}/>}
    </div>
  );
};

const avgScore = (a) => a.scores.length ? a.scores.reduce((s,x)=>s+x.score,0) / a.scores.length : 0;

// ===== Drawer =====
const AssessmentDrawer = ({ a, onClose, onUpdate }) => {
  const toast = useToast();
  const cand = ADMIN.candidates.find(c => c.id === a.candidateId);
  const videos = ADMIN.videos.filter(v => v.candidateId === a.candidateId && v.source === 'PLATFORM');
  const [showSign, setShowSign] = uS(false);
  const [showReturn, setShowReturn] = uS(false);
  const [editing, setEditing] = uS(false);
  const [draft, setDraft] = uS({ tier: a.tier, scores: [...a.scores], overallNote: a.overallNote });

  uE(() => { setDraft({ tier: a.tier, scores: [...a.scores], overallNote: a.overallNote }); setEditing(false); }, [a.id]);

  const dAvg = avgScore({ scores: draft.scores });

  const saveDraft = () => {
    onUpdate(a.id, { tier: draft.tier, scores: draft.scores, overallNote: draft.overallNote }, 'ASSESSMENT_EDIT',
      { tier: { before: a.tier, after: draft.tier } });
    toast('草稿已儲存', 'success');
    setEditing(false);
  };
  const submitForSignoff = () => {
    onUpdate(a.id, { status: 'PENDING_SIGNOFF', tier: draft.tier, scores: draft.scores, overallNote: draft.overallNote },
      'ASSESSMENT_SUBMIT', { status: { before: 'DRAFT', after: 'PENDING_SIGNOFF' } });
    toast('已送出簽核', 'success');
    setEditing(false);
    onClose();
  };

  return (
    <ADrawer open onClose={onClose} size="xl" title={
      <span style={{display:'flex',alignItems:'center',gap:10}}>
        <AIcon name="clipboardCheck" size={18}/>
        <span style={{fontSize:15,fontWeight:600}}>評測</span>
        <Mono>{a.id}</Mono>
        <StatusBadge status={a.status}/>
        {a.tier && <Tier t={a.tier}/>}
      </span>
    } footer={
      a.status === 'DRAFT' ? (
        <>
          {editing && <button className="a-btn a-btn-default" onClick={saveDraft}><AIcon name="save" size={13}/> 儲存草稿</button>}
          <div style={{flex:1}}/>
          <button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button>
          <button className="a-btn a-btn-primary" onClick={submitForSignoff}><AIcon name="send" size={13}/> 送出簽核</button>
        </>
      ) : a.status === 'PENDING_SIGNOFF' ? (
        <>
          <button className="a-btn a-btn-danger" onClick={()=>setShowReturn(true)}><AIcon name="xCircle" size={13}/> 退回修改</button>
          <div style={{flex:1}}/>
          <button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button>
          <button className="a-btn a-btn-success-solid" onClick={()=>setShowSign(true)}><AIcon name="check" size={13}/> 簽核通過</button>
        </>
      ) : (
        <>
          <div style={{flex:1}}/>
          <button className="a-btn a-btn-ghost" onClick={onClose}>關閉</button>
        </>
      )
    }>
      {/* Header block — candidate + meta */}
      <div className="a-card mb-16">
        <div className="a-card-body">
          <div className="grid-3">
            <div>
              <div className="text-muted fs-12 mb-6">候選人</div>
              {cand ? <CandidateCell c={cand}/> : <span className="text-faint">—</span>}
            </div>
            <div>
              <div className="text-muted fs-12 mb-6">評測員 / 站點</div>
              <div className="fw-600 fs-13">{a.assessor}</div>
              <div className="text-muted fs-12">{a.station}</div>
            </div>
            <div>
              <div className="text-muted fs-12 mb-6">評測時間</div>
              <div className="fw-600 fs-13">{FMT.iso(a.assessedAt)}</div>
              <div className="text-muted fs-12">{FMT.rel(a.assessedAt)}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Tier + average summary */}
      <div className="a-card mb-16">
        <div className="a-card-body" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
          <div>
            <div className="text-muted fs-12 mb-8">建議 Tier</div>
            {editing || a.status === 'DRAFT' ? (
              <div className="a-radio-pill-group">
                {['A','B','C','D'].map(t => (
                  <label key={t} className={`a-radio-pill ${draft.tier===t?'active':''}`}>
                    <input type="radio" name="tier" checked={draft.tier===t} onChange={()=>setDraft(d => ({...d, tier: t}))} style={{display:'none'}}/>
                    {t}
                  </label>
                ))}
              </div>
            ) : (
              a.tier ? <Tier t={a.tier}/> : <span className="text-faint">—</span>
            )}
          </div>
          <div>
            <div className="text-muted fs-12 mb-8">平均分</div>
            <div style={{display:'flex',alignItems:'baseline',gap:8}}>
              <span style={{fontSize:32,fontWeight:700,lineHeight:1,color:'var(--a-ink)',fontVariantNumeric:'tabular-nums'}}>{dAvg.toFixed(1)}</span>
              <span className="text-muted fs-13">/ 10</span>
              <span className="ml-auto text-muted fs-12">{draft.scores.length} 項技能</span>
            </div>
            <div className="a-progress mt-8" style={{height:6}}>
              <div className="a-progress-bar" style={{width:(dAvg*10)+'%', background: dAvg >= 8 ? 'var(--a-success)' : dAvg >= 6 ? 'var(--a-primary)' : 'var(--a-warn)'}}/>
            </div>
          </div>
        </div>
      </div>

      {/* Scores table */}
      <div className="a-card mb-16">
        <div className="a-card-header">
          <h3 className="a-card-title">技能評分</h3>
          {(a.status === 'DRAFT' || a.status === 'PENDING_SIGNOFF') && !editing && (
            <button className="a-btn a-btn-sm a-btn-default ml-auto" onClick={()=>setEditing(true)}><AIcon name="edit" size={12}/> 編輯</button>
          )}
        </div>
        <div className="a-card-body a-card-body-flush">
          <table className="a-table a-table-compact">
            <thead><tr><th>技能</th><th style={{width:180}}>分數</th><th>備註</th>{editing && <th style={{width:40}}></th>}</tr></thead>
            <tbody>
              {draft.scores.map((s, i) => (
                <tr key={i}>
                  <td className="fw-500" style={{color:'var(--a-ink)'}}>
                    {editing ? (
                      <input className="a-input a-input-sm" value={s.skill} onChange={e => {
                        const next = [...draft.scores]; next[i] = { ...s, skill: e.target.value };
                        setDraft(d => ({ ...d, scores: next }));
                      }}/>
                    ) : s.skill}
                  </td>
                  <td>
                    <div className="flex items-center gap-8">
                      {editing ? (
                        <input type="range" min={1} max={10} value={s.score} style={{flex:1}} onChange={e => {
                          const next = [...draft.scores]; next[i] = { ...s, score: +e.target.value };
                          setDraft(d => ({ ...d, scores: next }));
                        }}/>
                      ) : (
                        <div className="a-progress" style={{flex:1, height:5}}>
                          <div className="a-progress-bar" style={{width:(s.score*10)+'%', background: s.score >= 8 ? 'var(--a-success)' : s.score >= 6 ? 'var(--a-primary)' : 'var(--a-warn)'}}/>
                        </div>
                      )}
                      <span className="fw-600 tnum fs-13" style={{minWidth:24,textAlign:'right'}}>{s.score}</span>
                    </div>
                  </td>
                  <td>
                    {editing ? (
                      <input className="a-input a-input-sm" value={s.note || ''} placeholder="備註（可空白）" onChange={e => {
                        const next = [...draft.scores]; next[i] = { ...s, note: e.target.value };
                        setDraft(d => ({ ...d, scores: next }));
                      }}/>
                    ) : (s.note || <span className="text-faint">—</span>)}
                  </td>
                  {editing && (
                    <td>
                      <button className="a-icon-btn" onClick={() => setDraft(d => ({ ...d, scores: d.scores.filter((_,j) => j !== i) }))}>
                        <AIcon name="trash" size={13}/>
                      </button>
                    </td>
                  )}
                </tr>
              ))}
              {editing && (
                <tr>
                  <td colSpan={4} style={{padding:'8px 12px',background:'var(--a-paper-2)'}}>
                    <div className="flex flex-wrap gap-6">
                      <span className="fs-12 text-muted" style={{alignSelf:'center'}}>+ 新增：</span>
                      {SKILL_PRESETS.filter(p => !draft.scores.some(s => s.skill === p)).slice(0,10).map(p => (
                        <button key={p} className="a-btn a-btn-xs a-btn-default" onClick={() => setDraft(d => ({ ...d, scores: [...d.scores, { skill: p, score: 7, note: '' }] }))}>{p}</button>
                      ))}
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Overall note */}
      <div className="a-card mb-16">
        <div className="a-card-header"><h3 className="a-card-title">總評</h3></div>
        <div className="a-card-body">
          {editing ? (
            <textarea className="a-textarea" rows={3} value={draft.overallNote || ''} placeholder="整體印象、亮點、建議雇主類型…" onChange={e => setDraft(d => ({ ...d, overallNote: e.target.value }))}/>
          ) : (
            <div className="fs-13" style={{whiteSpace:'pre-wrap', lineHeight:1.65}}>{a.overallNote || <span className="text-faint">（未填寫）</span>}</div>
          )}
        </div>
      </div>

      {/* Platform videos link */}
      <div className="a-card mb-16">
        <div className="a-card-header">
          <h3 className="a-card-title">連結影片</h3>
          <span className="text-muted fs-12 ml-auto">{videos.length} 支平台影片</span>
        </div>
        <div className="a-card-body a-card-body-flush">
          {videos.length === 0 ? <AEmpty title="尚未上傳平台影片" sub="簽核後評測員可於影片頁上傳 PLATFORM 影片連結到此評測。"/> : (
            <table className="a-table a-table-compact">
              <thead><tr><th>Video ID</th><th>段落</th><th>時長</th><th>狀態</th><th>上傳時間</th></tr></thead>
              <tbody>
                {videos.map(v => (
                  <tr key={v.id}>
                    <td><Mono>{v.id}</Mono></td>
                    <td>{v.segment}</td>
                    <td className="tnum fs-13">{v.duration}</td>
                    <td><StatusBadge status={v.status}/></td>
                    <td className="text-muted fs-12">{FMT.rel(v.createdAt)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Sign-off status */}
      {a.signedAt && (
        <div className="a-card" style={{background:'var(--a-success-bg)', borderColor:'var(--a-success-line)'}}>
          <div className="a-card-body flex items-center gap-10">
            <AIcon name="checkCircle" size={18} style={{color:'var(--a-success)'}}/>
            <div>
              <div className="fw-600 fs-13" style={{color:'var(--a-success)'}}>已簽核</div>
              <div className="text-muted fs-12">{a.signedBy} · {FMT.iso(a.signedAt)}</div>
            </div>
          </div>
        </div>
      )}

      {showSign && (
        <AModal open onClose={()=>setShowSign(false)} title="簽核評測" icon={<span style={{color:'var(--a-success)'}}><AIcon name="checkCircle" size={20}/></span>}
          footer={<>
            <button className="a-btn a-btn-ghost" onClick={()=>setShowSign(false)}>取消</button>
            <button className="a-btn a-btn-success-solid" onClick={()=>{
              onUpdate(a.id, { status:'SIGNED', signedAt: new Date(), signedBy: (window.__currentAdminName || 'Vincent Chen'), tier: draft.tier },
                'ASSESSMENT_SIGN', { status:{before:'PENDING_SIGNOFF',after:'SIGNED'}, tier: draft.tier });
              // Also stamp the candidate's tier if not set
              const cIdx = ADMIN.candidates.findIndex(x => x.id === a.candidateId);
              if (cIdx >= 0 && !ADMIN.candidates[cIdx].tier) ADMIN.candidates[cIdx].tier = draft.tier;
              toast('評測已簽核', 'success'); setShowSign(false); onClose();
            }}>確認簽核</button>
          </>}>
          <p className="fs-14 mb-14">簽核後將以 <b>Tier {draft.tier}</b> 更新 {cand?.name} 的檔案，並發送站內通知給評測員。</p>
          <div style={{padding:12,background:'var(--a-info-bg)',borderRadius:6,border:'1px solid var(--a-info-line)'}} className="fs-13">
            <b>簽核後影響：</b>候選人可上架 (若目前 PENDING_REVIEW)、Referrer 的 Gate 1 判定生效、評測公開顯示於候選人檔案。
          </div>
        </AModal>
      )}
      {showReturn && (
        <ReturnModal open onClose={()=>setShowReturn(false)} onConfirm={(reason)=>{
          onUpdate(a.id, { status:'DRAFT' }, 'ASSESSMENT_RETURN', { status:{before:'PENDING_SIGNOFF',after:'DRAFT'}, reason });
          toast('已退回評測員修改', 'warn'); setShowReturn(false); onClose();
        }}/>
      )}
    </ADrawer>
  );
};

const ReturnModal = ({ open, onClose, onConfirm }) => {
  const [reason, setReason] = uS('');
  uE(() => { if (open) setReason(''); }, [open]);
  return (
    <AModal open={open} onClose={onClose} title="退回修改" icon={<span style={{color:'var(--a-warn)'}}><AIcon name="alert" size={20}/></span>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-warn-solid" disabled={!reason.trim()} onClick={()=>onConfirm(reason.trim())}>確認退回</button>
      </>}>
      <p className="fs-14 mb-14">退回後評測員會收到通知並可修改。狀態改為 <StatusBadge status="DRAFT"/>。</p>
      <label className="a-label">退回原因 *</label>
      <textarea className="a-textarea" rows={4} value={reason} onChange={e=>setReason(e.target.value)} placeholder="分數與觀察不一致、需補充某技能、總評太籠統…"/>
    </AModal>
  );
};

// ===== New assessment modal =====
const NewAssessmentModal = ({ onClose, onCreate }) => {
  const [candidateId, setCandidateId] = uS('');
  const [assessor, setAssessor] = uS('Vincent Tan');
  const [station, setStation] = uS('Surabaya');
  const [tier, setTier] = uS('B');
  const [scores, setScores] = uS([
    { skill: 'Cooking - Asian', score: 7, note: '' },
    { skill: 'Housekeeping', score: 7, note: '' },
    { skill: 'English', score: 6, note: '' },
  ]);
  const [overallNote, setOverallNote] = uS('');
  const [candQ, setCandQ] = uS('');

  const eligibleCands = ADMIN.candidates.filter(c =>
    (c.status === 'PENDING_REVIEW' || c.status === 'ACTIVE') &&
    !ADMIN.assessments.some(a => a.candidateId === c.id && a.status !== 'SIGNED')
  ).filter(c => !candQ || c.name.toLowerCase().includes(candQ.toLowerCase()) || c.id.includes(candQ));

  const selected = ADMIN.candidates.find(c => c.id === candidateId);

  return (
    <AModal open onClose={onClose} size="lg" title="新建評測" icon={<AIcon name="clipboardCheck" size={18}/>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-primary" disabled={!candidateId || !assessor || scores.length === 0}
          onClick={()=>onCreate({ candidateId, assessor, station, tier, scores, overallNote })}>
          建立草稿
        </button>
      </>}>
      <div className="fcol gap-16">
        <div>
          <label className="a-label">選擇候選人 *</label>
          {selected ? (
            <div className="flex items-center gap-10 p-10" style={{background:'var(--a-paper-2)',borderRadius:6,border:'1px solid var(--a-line)'}}>
              <CandidateCell c={selected}/>
              <button className="a-btn a-btn-sm a-btn-ghost ml-auto" onClick={()=>setCandidateId('')}>更換</button>
            </div>
          ) : (
            <>
              <input className="a-input" placeholder="搜尋候選人姓名或 ID…" value={candQ} onChange={e=>setCandQ(e.target.value)}/>
              <div style={{maxHeight:180,overflow:'auto',marginTop:8,border:'1px solid var(--a-line)',borderRadius:6}}>
                {eligibleCands.slice(0,20).map(c => (
                  <div key={c.id} className="flex items-center gap-10" style={{padding:'8px 12px',borderBottom:'1px solid var(--a-line-soft)',cursor:'pointer'}}
                    onClick={()=>{ setCandidateId(c.id); setCandQ(''); }}>
                    <CandidateCell c={c}/>
                    <StatusBadge status={c.status}/>
                  </div>
                ))}
                {eligibleCands.length === 0 && <div className="p-16 text-center text-muted fs-13">沒有符合的候選人（需為待審核或已上架、且無進行中評測）</div>}
              </div>
            </>
          )}
        </div>

        <div className="grid-3">
          <div>
            <label className="a-label">評測員 *</label>
            <select className="a-select" value={assessor} onChange={e=>setAssessor(e.target.value)}>
              <option>Vincent Tan</option><option>Anita Wijaya</option><option>Budi Pranoto</option>
            </select>
          </div>
          <div>
            <label className="a-label">站點</label>
            <select className="a-select" value={station} onChange={e=>setStation(e.target.value)}>
              <option>Surabaya</option><option>Jakarta</option><option>Cebu</option>
            </select>
          </div>
          <div>
            <label className="a-label">建議 Tier</label>
            <div className="a-radio-pill-group">
              {['A','B','C','D'].map(t => (
                <label key={t} className={`a-radio-pill ${tier===t?'active':''}`}>
                  <input type="radio" checked={tier===t} onChange={()=>setTier(t)} style={{display:'none'}}/>{t}
                </label>
              ))}
            </div>
          </div>
        </div>

        <div>
          <div className="flex items-center mb-8">
            <label className="a-label" style={{margin:0}}>技能評分 *</label>
            <span className="ml-auto text-muted fs-12">{scores.length} 項</span>
          </div>
          <div className="fcol gap-6">
            {scores.map((s,i) => (
              <div key={i} className="flex items-center gap-8">
                <input className="a-input a-input-sm" style={{width:180}} value={s.skill} onChange={e => {
                  const n=[...scores]; n[i]={...s, skill:e.target.value}; setScores(n);
                }}/>
                <input type="range" min={1} max={10} value={s.score} style={{flex:1}} onChange={e => {
                  const n=[...scores]; n[i]={...s, score:+e.target.value}; setScores(n);
                }}/>
                <span className="fw-600 tnum fs-13" style={{minWidth:24,textAlign:'right'}}>{s.score}</span>
                <input className="a-input a-input-sm" style={{flex:1}} placeholder="備註" value={s.note} onChange={e => {
                  const n=[...scores]; n[i]={...s, note:e.target.value}; setScores(n);
                }}/>
                <button className="a-icon-btn" onClick={()=>setScores(scores.filter((_,j)=>j!==i))}><AIcon name="trash" size={13}/></button>
              </div>
            ))}
          </div>
          <div className="flex flex-wrap gap-6 mt-10">
            <span className="fs-12 text-muted" style={{alignSelf:'center'}}>+ 新增：</span>
            {SKILL_PRESETS.filter(p => !scores.some(s => s.skill === p)).slice(0,8).map(p => (
              <button key={p} className="a-btn a-btn-xs a-btn-default" onClick={()=>setScores([...scores, { skill: p, score: 7, note: '' }])}>{p}</button>
            ))}
          </div>
        </div>

        <div>
          <label className="a-label">總評</label>
          <textarea className="a-textarea" rows={2} value={overallNote} onChange={e=>setOverallNote(e.target.value)} placeholder="整體印象、亮點、建議雇主類型（可之後補）"/>
        </div>
      </div>
    </AModal>
  );
};

Object.assign(window, { AssessmentsPageReal });