// ============================================================
//   LayoutSealed — "Sourcing is a number you can't open" 🔥
//   (kills Pillar 3)
//   There is no Sourcing tab and no list of sourced people.
//   Where sourcing used to be, there's a single living counter:
//   "AI is working 27." You cannot click into it. Sourced
//   candidates only appear on the page once they've replied and
//   crossed into "needs you."
//
//   Aimed dead at the call confusion: no browsable sourcing
//   surface means no backwards-icon, no "do I need to go in there."
//   The instinct to click in ("let me SEE who you're texting")
//   is exactly what the seal denies.
// ============================================================
const { color: SLC } = window.FF;

function LayoutSealed({ candidates, selectedId, onSelect }) {
  const [bump, setBump] = React.useState(false);

  // Crossed over = needs a human now. Everything else stays sealed.
  const surfaced = candidates.filter(c =>
    c.unread || c.justLanded ||
    (c.stage === 'engaged' && /interested|shift|\$|still|confirmed|copilot|scheduled/i.test(c.lastMsg || ''))
  );
  const working = candidates.length - surfaced.length;

  const poke = () => { setBump(true); setTimeout(() => setBump(false), 360); };

  return (
    <React.Fragment>
      {/* The sealed counter — looks clickable, refuses to open */}
      <div style={{ padding:'16px 18px 8px' }}>
        <button onClick={poke} style={{
          width:'100%', textAlign:'left', cursor:'not-allowed',
          padding:'14px 16px', borderRadius:12,
          background: SLC.copilot[50], border:`1px solid ${SLC.copilot[500]}33`,
          display:'flex', alignItems:'center', gap:13,
          transform: bump ? 'translateX(0)' : 'none',
          animation: bump ? 'sealed-shake .36s' : 'none',
        }}>
          <style>{`@keyframes sealed-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}`}</style>
          <span style={{
            width:40, height:40, borderRadius:10, flex:'none',
            background: SLC.gradient?.copilotBg || 'linear-gradient(270deg,#ae35f7,#5f30d1)',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
          }}>
            <span className="ai-dot" style={{ width:9, height:9 }}/>
          </span>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:15, fontWeight:800, color: SLC.copilot[800] }}>
              AI is working {working} candidates
            </div>
            <div style={{ fontSize:12, color: SLC.copilot[700] }}>
              Sourcing · contacting · screening — nothing for you here yet
            </div>
          </div>
          <span style={{ fontSize:16, color: SLC.copilot[600], flex:'none' }}>🔒</span>
        </button>
        <div style={{
          fontSize:11, color: bump ? SLC.critical[700] : SLC.shade[700],
          marginTop:7, paddingLeft:4, transition:'color .2s', lineHeight:1.4,
        }}>
          {bump
            ? "You can't open this. They'll appear below the moment one is ready for you."
            : 'You\u2019ll see these people only when they reply and need a human.'}
        </div>
      </div>

      {/* What actually surfaced */}
      <div style={{ padding:'10px 20px 6px', display:'flex', alignItems:'baseline', gap:8 }}>
        <span style={{ fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color: SLC.shade[700] }}>Ready for you</span>
        <span style={{ fontSize:12, color: SLC.shade[600], fontVariantNumeric:'tabular-nums' }}>{surfaced.length}</span>
      </div>

      <div style={{ flex:1, overflow:'auto', borderTop:`1px solid ${SLC.tint[80]}` }}>
        {!surfaced.length ? (
          <div style={{ padding:'40px 20px', textAlign:'center', color: SLC.shade[700], fontSize:13 }}>
            Nobody's ready yet. The AI will surface people as they cross over.
          </div>
        ) : surfaced.map(c => (
          <div key={c.id} onClick={() => onSelect?.(c.id)} style={{
            position:'relative', padding:'13px 20px 13px 16px',
            borderBottom:`1px solid ${SLC.tint[80]}`, cursor:'pointer',
            background: c.id === selectedId ? SLC.highlight[50] + '66' : '#fff',
            display:'flex', alignItems:'center', gap:11,
          }}>
            {c.id === selectedId && <div style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background: SLC.highlight[500] }}/>}
            <span style={{
              width:32, height:32, borderRadius:'50%', background: SLC.tint[60],
              color: SLC.shade[820], display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:12, fontWeight:700, flex:'none',
            }}>{c.name.split(' ').map(s => s[0]).slice(0, 2).join('')}</span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:1 }}>
                <span style={{ fontSize:14, fontWeight:700, color: SLC.shade[880], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</span>
                <span style={{ fontSize:10.5, color: SLC.primary[700], fontWeight:700, flex:'none' }}>★{c.score}</span>
              </div>
              <div style={{ fontSize:12.5, color: SLC.shade[820], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                {c.lastMsg || c.role}
              </div>
            </div>
            <span style={{
              fontSize:10.5, fontWeight:700, padding:'2px 8px', borderRadius:9999, flex:'none',
              background: SLC.primary[50], color: SLC.primary[800],
            }}>Ready</span>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { LayoutSealed });