// ============================================================
//   LayoutCampaign — Tom Ultra-Simple
//   The atom: person-in-a-campaign.
//   The page IS the campaign. Audience → Contacted → Replied →
//   Qualified → Review. Two lanes only: Working (in flight) and
//   Review (ready for human). Attempts visible on every row.
//   This is the SourceWhale-shaped bet.
// ============================================================
const { color: CMC } = window.FF;

const FUNNEL = [
  { k: 'audience',  label: 'Audience',    n: 148, desc: 'Profiles in pool' },
  { k: 'contacted', label: 'Contacted',   n: 23 },
  { k: 'replied',   label: 'Replied',     n: 9  },
  { k: 'qualified', label: 'Qualified',   n: 5  },
  { k: 'review',    label: 'Review',      n: 2  },
];

function LayoutCampaign({ candidates, selectedId, onSelect }) {
  const [lane, setLane] = React.useState('working');
  // Working = anything the campaign is still actively touching.
  // Review = anything kicked up to humans.
  const isWorking = c => ['sourcing', 'new'].includes(c.stage)
    || (c.stage === 'engaged' && !c.unread && !c.justLanded);
  const isReview  = c => c.stage === 'review'
    || ((c.stage === 'new' || c.stage === 'engaged') && (c.unread || c.justLanded));

  const working = candidates.filter(isWorking);
  const review  = candidates.filter(isReview);
  const list = lane === 'working' ? working : review;

  return (
    <React.Fragment>
      <FunnelRibbon/>
      <LaneSwitch
        lane={lane} setLane={setLane}
        workingN={working.length} reviewN={review.length}
      />
      <div style={{ flex: 1, overflow: 'auto', borderTop: `1px solid ${CMC.tint[80]}` }}>
        {list.map(c => (
          <CampaignRow key={c.id} c={c}
            selected={c.id === selectedId} onSelect={onSelect}/>
        ))}
        {!list.length && (
          <div style={{ padding: '40px 20px', textAlign: 'center', color: CMC.shade[700], fontSize: 13 }}>
            No one in this lane right now.
          </div>
        )}
      </div>
    </React.Fragment>
  );
}

function FunnelRibbon() {
  return (
    <div style={{ padding: '16px 20px 14px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: `repeat(${FUNNEL.length},1fr)`,
        background: CMC.tint[20], border: `1px solid ${CMC.tint[80]}`,
        borderRadius: 10, overflow: 'hidden',
      }}>
        {FUNNEL.map((f, i) => (
          <div key={f.k} style={{
            padding: '10px 8px 10px 14px', position: 'relative',
            borderRight: i < FUNNEL.length - 1 ? `1px solid ${CMC.tint[80]}` : 'none',
          }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: CMC.shade[880], lineHeight: 1.1, fontVariantNumeric: 'tabular-nums' }}>{f.n}</div>
            <div style={{ fontSize: 10.5, color: CMC.shade[700], marginTop: 2, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.05em' }}>{f.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function LaneSwitch({ lane, setLane, workingN, reviewN }) {
  const tab = (k, label, n, hint, color) => {
    const on = lane === k;
    return (
      <button onClick={() => setLane(k)} style={{
        flex: 1, padding: '12px 14px', textAlign: 'left',
        background: on ? '#fff' : 'transparent',
        border: on ? `1px solid ${color}` : '1px solid transparent',
        borderRadius: 10, cursor: 'pointer',
        boxShadow: on ? '0 1px 3px rgba(13,10,44,.08)' : 'none',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
          <span style={{ fontSize: 14, fontWeight: 700, color: on ? color : CMC.shade[820] }}>{label}</span>
          <span style={{ fontSize: 16, fontWeight: 800, color: on ? color : CMC.shade[700], fontVariantNumeric: 'tabular-nums' }}>{n}</span>
        </div>
        <div style={{ fontSize: 11, color: CMC.shade[700] }}>{hint}</div>
      </button>
    );
  };
  return (
    <div style={{ padding: '0 20px 8px' }}>
      <div style={{
        display: 'flex', gap: 4, background: CMC.tint[20],
        border: `1px solid ${CMC.tint[80]}`, borderRadius: 12, padding: 4,
      }}>
        {tab('working', 'In progress', workingN, 'AI is working these candidates',  CMC.copilot[700])}
        {tab('review',  'Review',  reviewN,  'Ready for a human to look',   CMC.primary[700])}
      </div>
    </div>
  );
}

function CampaignRow({ c, selected, onSelect }) {
  return (
    <div onClick={() => onSelect?.(c.id)} style={{
      position: 'relative', padding: '12px 20px 12px 16px',
      borderBottom: `1px solid ${CMC.tint[80]}`, cursor: 'pointer',
      background: selected ? CMC.highlight[50] + '66' : '#fff',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      {selected && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: CMC.highlight[500] }}/>}
      <input type="checkbox" style={{ width: 14, height: 14, accentColor: CMC.highlight[500] }} onClick={e => e.stopPropagation()}/>

      {/* Avatar circle */}
      <div style={{
        width: 32, height: 32, borderRadius: '50%', background: CMC.tint[60],
        color: CMC.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('')}</div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700, color: CMC.shade[880], whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</h3>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 5px 1px 3px',
            background: CMC.primary[500], color: '#fff', fontSize: 10, fontWeight: 700, borderRadius: 3, flex: 'none',
          }}>★{c.score}</span>
        </div>
        <div style={{ fontSize: 12, color: CMC.shade[700], whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {c.role} · {c.loc}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LayoutCampaign });