/* ============ Лиды / проспектинг (нативный паттерн портала) ============ */

function Leads({openTrace, notify, search}){
  const [countryF,setCountryF]=useState('all');
  const [selected,setSelected]=useState(null);
  const rows=SW_SALES.leads.filter(l=>{
    if(countryF!=='all' && l.country!==countryF) return false;
    const q=(search||'').trim().toLowerCase();
    if(q && !(l.company.toLowerCase().includes(q)||(l.contact||'').toLowerCase().includes(q))) return false;
    return true;
  }).sort((a,b)=>b.icp-a.icp);

  return (
    <div className="content fade-in">
      <PageHead title="Лиды" sub={`${SW_SALES.leads.length} компаний в воронке · ICP-скоринг · приоритет Узбекистан`}/>

      <div style={{marginBottom:16}}>
        <AnnotationStrip agent="Проспектинг" summary={`построил список ${SW_SALES.leads.length} компаний с регулярным контейнеропотоком · ${SW_SALES.leads.filter(l=>l.country==='UZ').length} из Узбекистана`} confidence={88} artifactsCount={3} traceId="TR-2026-08870" onWhy={openTrace}/>
      </div>

      <div className="chips" style={{marginBottom:16}}>
        <button className={'chip'+(countryF==='all'?' active':'')} onClick={()=>setCountryF('all')}>Все <span style={{opacity:.6}}>{SW_SALES.leads.length}</span></button>
        <button className={'chip'+(countryF==='UZ'?' active':'')} onClick={()=>setCountryF('UZ')}>Узбекистан <span style={{opacity:.6}}>{SW_SALES.leads.filter(l=>l.country==='UZ').length}</span></button>
        <button className={'chip'+(countryF==='KZ'?' active':'')} onClick={()=>setCountryF('KZ')}>Казахстан <span style={{opacity:.6}}>{SW_SALES.leads.filter(l=>l.country==='KZ').length}</span></button>
      </div>

      <div className="card" style={{padding:'8px 10px'}}>
        <table className="tbl">
          <thead><tr><th>Компания</th><th>Страна · отрасль</th><th>Контакт</th><th className="num">TEU/мес</th><th>ICP</th><th>Статус</th></tr></thead>
          <tbody>
            {rows.map(l=>(
              <tr key={l.id} onClick={()=>setSelected(l)}>
                <td><div style={{fontSize:14}}>{l.company}</div><div className="mono t-mut">{l.id}</div></td>
                <td><span className="pill pill-gray" style={{marginRight:6}}>{l.country}</span><span style={{fontSize:14}}>{l.industry}</span></td>
                <td><div style={{fontSize:14}}>{l.contact}</div><div className="t-mut">{l.role}</div></td>
                <td className="num t-strong">{l.estTeuPerMonth}</td>
                <td><ConfidencePill value={l.icp}/></td>
                <td><span className={'pill '+(l.status==='qualified'?'pill-teal':l.status==='new'?'pill-blue':'pill-gray')}><span className="pdot"></span>{l.status==='qualified'?'квалифицирован':l.status==='new'?'новый':l.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {selected && <LeadDrawer lead={selected} onClose={()=>setSelected(null)} openTrace={openTrace} notify={notify}/>}
    </div>
  );
}

function LeadDrawer({lead, onClose, openTrace, notify}){
  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer wide" onClick={e=>e.stopPropagation()}>
        <div className="drawer-head">
          <div style={{flex:1}}>
            <div className="row" style={{gap:10,marginBottom:8}}>
              <ConfidencePill value={lead.icp}/>
              <span className="pill pill-gray"><span className="pdot"></span>{lead.country} · {lead.industry}</span>
            </div>
            <div style={{fontFamily:'var(--display)',fontWeight:700,fontSize:25,letterSpacing:'-.6px'}}>{lead.company}</div>
            <div className="muted" style={{marginTop:4}}><span className="mono">{lead.id}</span> · {lead.contact} · {lead.role}</div>
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body">
          <div style={{marginBottom:18}}>
            <AnnotationStrip agent="Проспектинг" summary={`обогатил из ${lead.enrichmentSource} · оценка ${lead.estTeuPerMonth} TEU/мес`} confidence={lead.icp} artifactsCount={3} traceId={lead.traceId} onWhy={openTrace}/>
          </div>
          <div className="def-row"><span className="k">Страна</span><span className="v">{lead.country}</span></div>
          <div className="def-row"><span className="k">Отрасль</span><span className="v">{lead.industry}</span></div>
          <div className="def-row"><span className="k">Контейнеропоток (оценка)</span><span className="v">~{lead.estTeuPerMonth} TEU/мес</span></div>
          <div className="def-row"><span className="k">ICP-скор</span><span className="v">{lead.icp}%</span></div>
          <div className="def-row"><span className="k">Контактное лицо</span><span className="v">{lead.contact} · {lead.role}</span></div>
          <div className="def-row"><span className="k">Обогащён</span><span className="v mono">{SW_SALES.dstr(lead.enrichedAt)}</span></div>
          <div className="def-row"><span className="k">Источники данных</span><span className="v">{lead.enrichmentSource}</span></div>

          <div className="row" style={{gap:12,marginTop:22}}>
            <button className="btn btn-dark btn-block" onClick={()=>{notify('Лид добавлен в воронку'); onClose();}}><Icon name="plus" size={16}/>Добавить в воронку</button>
            <button className="btn btn-light btn-block"><Icon name="send" size={16}/>Связаться</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Leads = Leads;