// ============================================================
//   LayoutSourceFirst — the source-first STRAWMAN (#1)
//   Main nav becomes WHERE THEY CAME FROM:
//   Applied · AI Sourced · Imported · Re-engaged.
//   Status is demoted to a small secondary tag.
//
//   Built honestly (not sabotaged) so it loses on its own
//   merits: to answer "who needs me right now?" you have to
//   check four tabs. Origin-as-navigation fights the one
//   question users actually ask.
// ============================================================
const { color: SFC } = window.FF;

const SOURCES = [
  { key:'applied',   label:'Applied',     desc:'They came to us' },
  { key:'sourced',   label:'AI Sourced',  desc:'We found them' },
  { key:'imported',  label:'Imported',    desc:'Uploaded / ATS sync' },
  { key:'reactivated', label:'Reactivated', desc:'Past candidates, revived' },
  { key:'unknown',   label:'Unknown',     desc:'Origin not recorded' },
];

// Demoted status tag
const STATUS_TAG = {
  sourcing:{ label:'Sourcing',  c: SFC.copilot[700], bg: SFC.copilot[50] },
  new:     { label:'New',       c: SFC.inform[700],  bg: SFC.inform[50] },
  engaged: { label:'Engaged',   c: SFC.primary[800], bg: SFC.primary[50] },
};

function LayoutSourceFirst({ candidates, selectedId, onSelect }) {
  const [src, setSrc] = React.useState('applied');

  // Fabricate reactivated / imported / unknown from existing data so all tabs are real.
  const reactivatedIds = new Set(['c20', 'c22', 'c27']);
  const unknownIds = new Set(['c13', 'c25']);
  const bucket = c => {
    if (reactivatedIds.has(c.id)) return 'reactivated';
    if (unknownIds.has(c.id)) return 'unknown';
    return c.source; // applied | sourced
  };
  const counts = SOURCES.reduce((a, s) => {
    a[s.key] = candidates.filter(c => bucket(c) === s.key).length; return a;
  }, {});
  counts.imported = 0;

  const list = candidates.filter(c => bucket(c) === src);
  const active = SOURCES.find(s => s.key === src);

  return (
    <React.Fragment>
      {/* Source nav */}
      <div style={{
        padding:'12px 16px 10px', borderBottom:`1px solid ${SFC.tint[80]}`,
        display:'flex', gap:4, overflowX:'auto',
      }}>
        {SOURCES.map(s => {
          const on = s.key === src;
          return (
            <button key={s.key} onClick={() => setSrc(s.key)} style={{
              flex:'none', padding:'8px 13px', borderRadius:8, cursor:'pointer',
              background: on ? SFC.shade[880] : '#fff',
              border:`1px solid ${on ? SFC.shade[880] : SFC.tint[80]}`,
              color: on ? '#fff' : SFC.shade[820],
              fontSize:13, fontWeight: on ? 700 : 500,
              display:'inline-flex', alignItems:'center', gap:7,
            }}>
              {s.label}
              <span style={{
                fontSize:11, fontWeight:700, fontVariantNumeric:'tabular-nums',
                color: on ? '#fff' : SFC.shade[700],
              }}>{counts[s.key]}</span>
            </button>
          );
        })}
      </div>

      <div style={{ padding:'12px 20px 6px' }}>
        <div style={{ fontSize:15, fontWeight:800, color: SFC.shade[880] }}>{active.label}</div>
        <div style={{ fontSize:12, color: SFC.shade[700] }}>{active.desc}</div>
      </div>

      <div style={{ flex:1, overflow:'auto', borderTop:`1px solid ${SFC.tint[80]}` }}>
        {!list.length ? (
          <div style={{ padding:'40px 20px', textAlign:'center', color: SFC.shade[700], fontSize:13 }}>
            Nothing here.
          </div>
        ) : list.map(c => {
          const tag = STATUS_TAG[c.stage] || STATUS_TAG.engaged;
          const needs = c.unread || c.justLanded;
          return (
            <div key={c.id} onClick={() => onSelect?.(c.id)} style={{
              position:'relative', padding:'12px 20px 12px 16px',
              borderBottom:`1px solid ${SFC.tint[80]}`, cursor:'pointer',
              background: c.id === selectedId ? SFC.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: SFC.highlight[500] }}/>}
              <span style={{
                width:30, height:30, borderRadius:'50%', background: SFC.tint[60],
                color: SFC.shade[820], display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:11, 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 }}>
                  <span style={{ fontSize:14, fontWeight:700, color: SFC.shade[880], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</span>
                  <span style={{ fontSize:10.5, color: SFC.primary[700], fontWeight:700, flex:'none' }}>★{c.score}</span>
                </div>
                <div style={{ fontSize:12, color: SFC.shade[700], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.role} · {c.loc.split(',')[0]}</div>
              </div>
              {/* status demoted to a tiny secondary tag */}
              <span style={{
                fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:9999, flex:'none',
                background: tag.bg, color: tag.c,
              }}>{tag.label}</span>
              {needs && <span title="Needs you" style={{ width:8, height:8, borderRadius:'50%', background: SFC.primary[500], flex:'none' }}/>}
            </div>
          );
        })}
      </div>

      {/* The honest tell: the question users ask doesn't live in any one tab. */}
      <div style={{
        padding:'10px 18px', borderTop:`1px solid ${SFC.tint[80]}`,
        background: SFC.caution[50], fontSize:11.5, color: SFC.caution[700], lineHeight:1.45,
      }}>
        To find everyone who needs you right now, you'd check all four tabs. Origin isn't the question recruiters ask.
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { LayoutSourceFirst });