// ============================================================
//   LayoutAutoRank — "No board" 🔥  (kills Pillar 2)
//   No status columns. No New/Engaged/Review. No drag, no
//   "mark as reviewed." One self-sorting list, ordered by who
//   the AI thinks you should look at next — and you physically
//   cannot refile or reorder anyone.
//
//   Disentangle thesis at its most violent: tracking is ripped
//   out of the human's hands. Only attention remains.
// ============================================================
const { color: ARC } = window.FF;

function ar_rank(c) {
  if (c.unread || c.justLanded) return 0;
  if (c.stage === 'new') return 1;
  if (c.stage === 'engaged') {
    const m = (c.lastMsg || '').toLowerCase();
    if (/interested|shift|\$|still|confirmed|copilot|scheduled/.test(m)) return 1;
    if (/awaiting|reminder|screening/.test(m)) return 3;
    return 2;
  }
  if (c.stage === 'sourcing') return 4;
  return 3;
}
function ar_reason(c) {
  if (c.unread || c.justLanded) return 'Just replied — look now';
  if (c.stage === 'new') return 'New application, strong match';
  if (c.stage === 'engaged') {
    const m = (c.lastMsg || '').toLowerCase();
    if (/interested|shift|\$|still|confirmed/.test(m)) return 'Said they\u2019re interested';
    if (/scheduled|copilot/.test(m)) return 'Interview in motion';
    if (/awaiting|reminder|screening/.test(m)) return 'Waiting on them — low priority';
    return 'In conversation';
  }
  if (c.stage === 'sourcing') return 'AI still working — you don\u2019t need this yet';
  return '';
}

function LayoutAutoRank({ candidates, selectedId, onSelect }) {
  const ranked = [...candidates].sort((a, b) => ar_rank(a) - ar_rank(b) || b.score - a.score);

  return (
    <React.Fragment>
      <div style={{ padding:'14px 20px 10px' }}>
        <div style={{ fontSize:15, fontWeight:800, color: ARC.shade[880], letterSpacing:'-.01em' }}>Ranked for you</div>
        <div style={{ fontSize:12.5, color: ARC.shade[820], marginTop:2, lineHeight:1.45 }}>
          The AI decides who's next. There are no statuses to manage and no way to reorder this list.
        </div>
        {/* the locked affordance — the punch */}
        <div style={{
          marginTop:10, display:'inline-flex', alignItems:'center', gap:7,
          padding:'5px 11px', borderRadius:9999,
          background: ARC.tint[40], border:`1px solid ${ARC.tint[100]}`,
          color: ARC.shade[700], fontSize:11.5, fontWeight:600, cursor:'not-allowed',
        }}>
          <span style={{ fontSize:12 }}>🔒</span> Sorting locked · managed by FactoryFix
        </div>
      </div>

      <div style={{ flex:1, overflow:'auto', borderTop:`1px solid ${ARC.tint[80]}` }}>
        {ranked.map((c, i) => {
          const muted = ar_rank(c) >= 4;
          return (
            <div key={c.id} onClick={() => onSelect?.(c.id)} style={{
              position:'relative', padding:'12px 18px 12px 14px',
              borderBottom:`1px solid ${ARC.tint[80]}`, cursor:'pointer',
              background: c.id === selectedId ? ARC.highlight[50] + '66' : '#fff',
              display:'flex', alignItems:'center', gap:12, opacity: muted ? .5 : 1,
            }}>
              {c.id === selectedId && <div style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background: ARC.highlight[500] }}/>}

              {/* rank number — assigned, not chosen */}
              <span style={{
                width:24, textAlign:'center', flex:'none',
                fontFamily:'ui-monospace,SFMono-Regular,monospace', fontSize:13, fontWeight:700,
                color: i < 3 ? ARC.shade[880] : ARC.shade[600], fontVariantNumeric:'tabular-nums',
              }}>{i + 1}</span>

              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:1 }}>
                  <span style={{ fontSize:14, fontWeight:700, color: ARC.shade[880], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</span>
                  <span style={{ fontSize:10.5, color: ARC.primary[700], fontWeight:700, flex:'none' }}>★{c.score}</span>
                </div>
                <div style={{ fontSize:12, color: ARC.shade[820], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                  <span style={{ fontStyle:'italic', color: ARC.shade[700] }}>{ar_reason(c)}</span>
                </div>
              </div>

              {/* the dead control — where "move to stage" used to be */}
              <button onClick={e => { e.stopPropagation(); }} title="You can't refile candidates. The AI manages order." style={{
                width:28, height:28, borderRadius:6, flex:'none',
                background:'transparent', border:`1px solid ${ARC.tint[80]}`,
                color: ARC.tint[200], cursor:'not-allowed', fontSize:14, lineHeight:1,
              }}>⠿</button>
            </div>
          );
        })}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { LayoutAutoRank });