// Onboarding — contact drop-in, classification, campaign assignment, sequence tracking.

function Onboarding({setRoute}){
  const c = window.CONTACTS;
  const [tab, setTab] = React.useState('All');
  const [sel, setSel] = React.useState(c[1].id); // a creator in onboarding
  const it = c.find(x=>x.id===sel);

  const filt = tab==='All' ? c : tab==='New' ? c.filter(x=>x.stage==='New') : tab==='Invited' ? c.filter(x=>['Invited','Opened','Responded'].includes(x.stage)) : tab==='Onboarding' ? c.filter(x=>x.stage==='Onboarding') : c.filter(x=>x.stage==='Active');

  return (
    <AdminShell route="onb" setRoute={setRoute} title="Onboarding · contact drop-in" breadcrumb="OUTREACH · CAMPAIGNS"
      actions={<>
        <button className="btn gh">Upload CSV</button>
        <button className="btn k">Sequence templates</button>
        <button className="btn g">+ Drop-in contact</button>
      </>}>

      {/* DROP-IN BOX */}
      <Card title="Quick drop-in" meta="paste email · URL · social handle · publisher name"
        actions={<button className="btn k s">Classify →</button>} style={{marginBottom:18}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr auto auto auto',gap:10,alignItems:'center'}}>
          <input placeholder="editor@thecharlottepost.com  ·  thecharlottepost.com  ·  @cpcharlotte" style={{border:'1px solid var(--rule-line)',padding:'10px 12px',background:'var(--bg)',outline:'none',fontSize:13.5,fontFamily:'var(--mono)',letterSpacing:'.02em'}}/>
          <Pill k="info">PUBLISHER · LIKELY</Pill>
          <Pill k="warn">CHARLOTTE · LIKELY</Pill>
          <Pill k="live">P1 · MISSION ALIGNED</Pill>
        </div>
        <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.1em',marginTop:8}}>AUTO-CLASSIFICATION RUNS ON PASTE · ⌘K FOR GLOBAL SEARCH</div>
      </Card>

      {/* TOP STATS */}
      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={c.length} l="Contacts · pipeline" d="+12 wk" up={true}/>
        <Stat n={c.filter(x=>x.stage==='Invited'||x.stage==='Opened'||x.stage==='Responded').length} l="In sequence" d="68% open rate · 22% reply"/>
        <Stat n={c.filter(x=>x.stage==='Onboarding').length} l="Onboarding · today" d="2 from drop-in"/>
        <Stat n={c.filter(x=>x.priority==='P1').length} l="P1 priority" d="3 publishers · 1 creator"/>
      </div>

      {/* MASTER + DETAIL */}
      <div style={{display:'grid',gridTemplateColumns:'1.4fr 1.2fr',gap:18,alignItems:'flex-start'}}>

        <Card title="Pipeline" meta={`${filt.length}`}
          actions={<Seg value={tab} onChange={setTab} options={['All','New','Invited','Onboarding','Active']}/>}>
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>NAME · ORG</th><th>TYPE</th><th>CITY</th><th>STAGE</th><th>CAMPAIGN</th><th className="r">FIT</th></tr></thead>
            <tbody>
              {filt.map(x=>(
                <tr key={x.id} className={x.id===sel?'sel':''} onClick={()=>setSel(x.id)}>
                  <td>
                    <div style={{fontSize:12.5,fontWeight:600}}>{x.name}</div>
                    <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{x.org.toUpperCase()}</div>
                  </td>
                  <td><Pill k={x.type==='Publisher'?'live':x.type==='Creator'?'info':x.type==='Business'?'live':x.type==='Civic'?'warn':x.type==='Institution'?'info':'muted'}>{x.type.toUpperCase()}</Pill></td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.city}</td>
                  <td><Pill k={x.stage==='Active'?'live':x.stage==='Onboarding'?'info':x.stage==='Responded'?'go':x.stage==='Invited'||x.stage==='Opened'?'warn':x.stage==='Nurture'?'muted':'muted'}>{x.stage}</Pill></td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em',color:'var(--ink-2)'}}>{x.campaign}</td>
                  <td className="r"><Score n={x.score}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        {/* CONTACT DETAIL */}
        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Card title={it.name} meta={it.org}
            actions={<>
              <button className="btn gh s">Skip</button>
              <button className="btn k s">Send invite →</button>
            </>}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:14}}>
              <KVMini2 l="Type"     v={it.type}/>
              <KVMini2 l="Priority" v={it.priority}/>
              <KVMini2 l="City"     v={it.city}/>
              <KVMini2 l="Stage"    v={it.stage}/>
              <KVMini2 l="Email"    v={it.email}/>
              <KVMini2 l="Campaign" v={it.campaign}/>
            </div>

            <div className="eyebrow">SIGNAL · WHY THIS CONTACT MATTERS</div>
            <div style={{fontSize:13,marginTop:6,padding:'10px 12px',background:'var(--canvas)',border:'1px solid var(--rule-line)',lineHeight:1.45}}>{it.signal}</div>

            <div style={{height:1,background:'var(--rule-line)',margin:'14px 0'}}></div>

            <div className="eyebrow" style={{marginBottom:8}}>ENRICHMENT · {it.enr.toUpperCase()}</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'4px 14px'}}>
              {[
                ['Name', it.name, 'ok'],
                ['Org', it.org, 'ok'],
                ['Role', it.type, 'ok'],
                ['Website', it.org.toLowerCase().replace(/\s/g,'')+'.com', 'ok'],
                ['City / state', `${it.city}, NC`, 'ok'],
                ['Social handles', '2 found', 'ok'],
                ['Media kit', it.enr==='enriched'?'present':'missing', it.enr==='enriched'?'ok':'warn'],
                ['Audience metrics', it.type==='Creator'||it.type==='Publisher'?'auto-pulled':'manual', 'ok'],
                ['Mission category', 'auto-classified', 'ok'],
                ['Brand safety', 'cleared', 'ok'],
              ].map(([k,v,c])=>(
                <div key={k} style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:8,padding:'4px 0',alignItems:'baseline'}}>
                  <span style={{color:c==='ok'?'var(--green)':'var(--gold-2)',fontSize:11}}>{c==='ok'?'✓':'!'}</span>
                  <span style={{fontSize:11.5}}><span style={{color:'var(--mute)'}}>{k}:</span> <b>{v}</b></span>
                </div>
              ))}
            </div>
          </Card>

          {/* CAMPAIGN SEQUENCE */}
          <Card title={`Sequence · ${it.campaign}`} meta={`${it.stage} · day ${it.stage==='New'?0:it.stage==='Invited'?2:it.stage==='Responded'?5:it.stage==='Onboarding'?9:14}`}>
            <div style={{display:'flex',flexDirection:'column',gap:0}}>
              {[
                ['Day 0','New','Drop-in classified · campaign auto-selected','done'],
                ['Day 1','Enriched','Background sweep complete · operator approves','done'],
                ['Day 2','Invited','First email sent · personalized template T-PUB-01','done'],
                ['Day 4','Opened','Open detected · 2 link clicks tracked',it.stage==='Opened'||it.stage==='Responded'||it.stage==='Onboarding'||it.stage==='Active'?'done':'queued'],
                ['Day 5','Responded','Reply received · routes to inbox',it.stage==='Responded'||it.stage==='Onboarding'||it.stage==='Active'?'done':'queued'],
                ['Day 6','Onboarding','Claim page link sent · rights tier selected',it.stage==='Onboarding'||it.stage==='Active'?'done':'queued'],
                ['Day 9','Onboarding','Logo / RSS / media kit uploaded',it.stage==='Onboarding'||it.stage==='Active'?'done':'queued'],
                ['Day 12','Admin review','Operator approves profile',it.stage==='Active'?'done':'queued'],
                ['Day 14','Active','Goes live in directory + spotlight rotation',it.stage==='Active'?'done':'queued'],
              ].map(([d,s,n,c],i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'48px 80px 1fr auto',gap:10,padding:'7px 0',borderBottom:i===8?'none':'1px solid var(--rule-line)',alignItems:'center',opacity:c==='done'?1:0.55}}>
                  <span className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.04em'}}>{d}</span>
                  <span className="mono" style={{fontSize:10,letterSpacing:'.06em',color:c==='done'?'var(--green)':'var(--mute)'}}>{s.toUpperCase()}</span>
                  <span style={{fontSize:11.5}}>{n}</span>
                  <span style={{width:14,height:14,display:'flex',alignItems:'center',justifyContent:'center',color:c==='done'?'var(--green)':'var(--mute)',fontSize:13}}>{c==='done'?'✓':'○'}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>

      {/* CAMPAIGNS LEDGER */}
      <Card title="Onboarding campaigns" meta="8 running"
        actions={<button className="btn gh s">+ New campaign</button>}
        style={{marginTop:18}}>
        <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
          <thead><tr><th>CAMPAIGN</th><th>TARGET</th><th className="r">IN SEQUENCE</th><th className="r">OPEN</th><th className="r">REPLY</th><th className="r">CONV</th><th>OWNER</th></tr></thead>
          <tbody>
            {[
              ['Join Publisher Network', 'Publishers',   42, '68%', '24%', '14%', 'MW'],
              ['Join Creator Network',   'Podcasts · YT', 31, '74%', '31%', '18%', 'RO'],
              ['Claim profile',          'Businesses',    88, '52%', '21%', '38%', 'DS'],
              ['Advertising partner',    'SMBs · institutions', 24, '64%', '28%', '12%', 'DS'],
              ['Event collaboration',    'Civic + faith', 18, '70%', '32%', '22%', 'CR'],
              ['Legacy preservation',    'Heirs / owners',  6, '50%', '34%', '17%', 'MW'],
              ['Media kit request',      'Publishers',    14, '78%', '42%', '36%', 'DS'],
              ['Intelligence subscription', 'Institutions', 9, '60%', '22%', '11%', 'JP'],
            ].map((r,i)=>(
              <tr key={i}>
                <td style={{fontSize:12.5,fontWeight:600}}>{r[0]}</td>
                <td className="mono" style={{fontSize:10.5,color:'var(--ink-2)',letterSpacing:'.04em'}}>{r[1]}</td>
                <td className="r num">{r[2]}</td>
                <td className="r num" style={{color:'var(--navy)',fontWeight:600}}>{r[3]}</td>
                <td className="r num" style={{color:'var(--gold-2)',fontWeight:600}}>{r[4]}</td>
                <td className="r num" style={{color:'var(--green)',fontWeight:700}}>{r[5]}</td>
                <td><span className="mono" style={{fontSize:10,color:'var(--navy)',letterSpacing:'.08em',fontWeight:600}}>{r[6]}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </AdminShell>
  );
}

function KVMini2({l,v}){
  return <div style={{padding:'4px 0'}}><div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.14em',textTransform:'uppercase'}}>{l}</div><div style={{fontSize:12,marginTop:2,fontWeight:500}}>{v}</div></div>;
}

window.Onboarding = Onboarding;