// ============================================================
//   LayoutIntent — intent-first pipeline (#5)
//   Kill source language entirely. Organize by TEMPERATURE:
//   Cold · Warming up · Interested · Ready for review.
//   Source appears only in the detail, never in nav.
//
//   The bet: customers don't care where someone came from —
//   they care how warm the person is. Source was always just
//   a clumsy proxy for intent. This is the credible opposite
//   of the source-first strawman.
// ============================================================
const { color: IC } = window.FF;

const TEMPS = [
  { key:'cold',       label:'Cold',           hint:'Contacted, no engagement yet',   dot:'#94A3B8',     tint: IC.tint[40],    fg: IC.shade[820] },
  { key:'warming',    label:'Warming up',      hint:'Some back-and-forth happening',  dot: IC.inform[500],tint: IC.inform[50], fg: IC.inform[700] },
  { key:'interested', label:'Interested',      hint:'Said yes — wants to talk',       dot: IC.caution[500],tint: IC.caution[50],fg: IC.caution[700] },
  { key:'ready',      label:'Ready for review',hint:'Hot — needs your decision now',  dot: IC.primary[500],tint: IC.primary[50],fg: IC.primary[800] },
];

function temperature(c) {
  if (c.unread || c.justLanded) return 'ready';
  if (c.stage === 'sourcing') return 'cold';
  if (c.stage === 'new') return 'interested'; // they applied = warm by default
  const m = (c.lastMsg || '').toLowerCase();
  if (/interested|shift|\$|still|confirmed|copilot|scheduled|replied/.test(m)) return 'interested';
  if (/awaiting|reminder|screening questions/.test(m)) return 'warming';
  return 'warming';
}

function LayoutIntent({ candidates, selectedId, onSelect }) {
  const [temp, setTemp] = React.useState('ready');
  const decorated = candidates.map(c => ({ ...c, _t: temperature(c) }));
  const counts = TEMPS.reduce((a, t) => { a[t.key] = decorated.filter(c => c._t === t.key).length; return a; }, {});
  const list = decorated.filter(c => c._t === temp);
  const T = TEMPS.find(t => t.key === temp);

  return (
    <React.Fragment>
      {/* Temperature nav — a heat ramp */}
      <div style={{ padding:'14px 18px 10px', display:'flex', gap:6, overflowX:'auto', borderBottom:`1px solid ${IC.tint[80]}` }}>
        {TEMPS.map(t => {
          const on = t.key === temp;
          return (
            <button key={t.key} onClick={() => setTemp(t.key)} style={{
              flex:'none', display:'inline-flex', alignItems:'center', gap:7,
              padding:'7px 12px 7px 10px', borderRadius:9999, cursor:'pointer',
              background: on ? t.tint : 'transparent',
              border:`1px solid ${on ? t.dot : IC.tint[80]}`,
              fontSize:13, fontWeight: on ? 700 : 500,
              color: on ? t.fg : IC.shade[820], whiteSpace:'nowrap',
            }}>
              <span style={{ width:8, height:8, borderRadius:'50%', background: t.dot, opacity: on ? 1 : .5 }}/>
              {t.label}
              <span style={{ fontWeight:700, fontVariantNumeric:'tabular-nums' }}>{counts[t.key]}</span>
            </button>
          );
        })}
      </div>

      <div style={{ padding:'14px 20px 8px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color: T.fg, marginBottom:2 }}>{T.label}</div>
        <div style={{ fontSize:13, color: IC.shade[820] }}>{T.hint}</div>
      </div>

      <div style={{ flex:1, overflow:'auto', borderTop:`1px solid ${IC.tint[80]}` }}>
        {!list.length ? (
          <div style={{ padding:'40px 20px', textAlign:'center', color: IC.shade[700], fontSize:13 }}>No one at this temperature.</div>
        ) : list.map(c => (
          <div key={c.id} onClick={() => onSelect?.(c.id)} style={{
            position:'relative', padding:'13px 20px 13px 16px',
            borderBottom:`1px solid ${IC.tint[80]}`, cursor:'pointer',
            background: c.id === selectedId ? IC.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: IC.highlight[500] }}/>}
            <span style={{ width:9, height:9, borderRadius:'50%', background: T.dot, flex:'none' }}/>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:1 }}>
                <span style={{ fontSize:14, fontWeight:700, color: IC.shade[880], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</span>
                <span style={{ fontSize:10.5, color: IC.primary[700], fontWeight:700, flex:'none' }}>★{c.score}</span>
              </div>
              <div style={{ fontSize:12, color: IC.shade[820], whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                {c.lastMsg || `${c.role}`}
                {/* source demoted to a faint trailing whisper */}
                <span style={{ color: IC.shade[600] }}> · {c.source === 'applied' ? 'applied' : 'sourced'}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { LayoutIntent });