// Syndication · Partners — advertising / SEO / syndication partner onboarding.
// Inbound: parse a cold email OR pull submissions from the public Partner.html intake (localStorage).

const PARTNER_STAGES = ['New','Qualified','Proposal','Won','Declined'];
function partnerStageMeta(s){
  if(s==='Won')       return ['live','WON'];
  if(s==='Proposal')  return ['info','PROPOSAL'];
  if(s==='Qualified') return ['go','QUALIFIED'];
  if(s==='Declined')  return ['bad','DECLINED'];
  return ['warn','NEW'];
}
function typeMeta(t){
  if(/advert/i.test(t)) return ['info','ADVERTISER'];
  if(/seo|backlink/i.test(t)) return ['warn','SEO / BACKLINK'];
  if(/syndic/i.test(t)) return ['live','SYNDICATION'];
  return ['muted', t.toUpperCase()];
}

// crude but honest email parse — pulls org, intent, budget hints from raw text
function parseEmail(raw){
  const text=(raw||'').trim();
  const fromM = text.match(/from:\s*([^\n<]*<?[\w.+-]+@[\w.-]+>?)/i) || text.match(/([\w.+-]+@[\w.-]+)/);
  const from = fromM ? fromM[1].replace(/[<>]/g,'').trim() : 'unknown@sender';
  const email = (from.match(/[\w.+-]+@[\w.-]+/)||[from])[0];
  const domain = email.split('@')[1]||'';
  const org = domain ? domain.split('.')[0].replace(/^\w/,c=>c.toUpperCase()) : 'Unknown';
  const subjM = text.match(/subject:\s*([^\n]+)/i);
  const subject = subjM ? subjM[1].trim() : (text.split('\n').find(l=>l.trim().length>4)||'Inbound inquiry').slice(0,80);
  const budgetM = text.match(/\$[\d,]+(?:\s*(?:\/|per)\s*(?:mo|month|send|yr|year))?|\brev[- ]?share\b/i);
  const budget = budgetM ? budgetM[0] : '—';
  let type='Advertiser';
  if(/backlink|do-?follow|guest post|link|seo/i.test(text)) type='SEO / Backlink';
  else if(/republish|syndicat|dual[- ]publish|cross-?post/i.test(text)) type='Syndication';
  else if(/sponsor|advertis|campaign|promo|placement/i.test(text)) type='Advertiser';
  const intent = (text.replace(/from:.*|subject:.*/gi,'').replace(/\s+/g,' ').trim().slice(0,120)) || 'See email.';
  return { from:email, org, subject, budget, type, intent };
}

function loadInboundFromForm(){
  try{ return JSON.parse(localStorage.getItem('tuepac_partner_leads')||'[]'); }catch{ return []; }
}

function SyndPartners(){
  const [leads, setLeads] = React.useState(()=>{
    const seed = (window.PARTNER_LEADS||[]).map(x=>({...x}));
    const fromForm = loadInboundFromForm();
    return [...fromForm, ...seed];
  });
  const [filter, setFilter] = React.useState('All');
  const [raw, setRaw] = React.useState('');
  const [parsed, setParsed] = React.useState(null);

  // pick up any new public-form submissions on mount
  React.useEffect(()=>{
    const fromForm = loadInboundFromForm();
    if(fromForm.length){
      setLeads(prev=>{
        const ids=new Set(prev.map(l=>l.id));
        const add=fromForm.filter(l=>!ids.has(l.id));
        return add.length? [...add, ...prev] : prev;
      });
    }
  },[]);

  function doParse(){ if(raw.trim()) setParsed(parseEmail(raw)); }
  function fileLead(){
    const id='PL-'+(52+leads.length);
    setLeads([{ ...parsed, id, stage:'New', received:'just now', priority:'P2', src:'email' }, ...leads]);
    setParsed(null); setRaw('');
  }
  function advance(id){
    setLeads(leads.map(l=>{
      if(l.id!==id) return l;
      const next={ 'New':'Qualified','Qualified':'Proposal','Proposal':'Won' }[l.stage];
      return next? {...l,stage:next}:l;
    }));
  }
  function decline(id){ setLeads(leads.map(l=> l.id===id?{...l,stage:'Declined'}:l)); }

  const shown = leads.filter(l=> filter==='All' ? true : filter==='Open' ? !['Won','Declined'].includes(l.stage) : l.type.includes(filter));
  const byStage = Object.fromEntries(PARTNER_STAGES.map(s=>[s, leads.filter(l=>l.stage===s).length]));

  return (
    <div>
      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={String(leads.filter(l=>!['Won','Declined'].includes(l.stage)).length)} l="Open partner leads" d={`${byStage.New} new`} up={true}/>
        <Stat n={String(leads.filter(l=>l.type==='Advertiser').length)} l="Advertiser inquiries" d="paid media"/>
        <Stat n={String(leads.filter(l=>/seo/i.test(l.type)).length)} l="SEO / backlink offers" d="vet quality"/>
        <Stat n={String(leads.filter(l=>l.src==='form').length)} l="Via public intake" d="Partner page"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18,alignItems:'flex-start'}}>
        <Card title="Partner pipeline" meta={`${shown.length} shown`}
          actions={<Seg value={filter} onChange={setFilter} options={['All','Open','Advertiser','SEO','Syndication']}/>}>
          <div style={{display:'flex',flexDirection:'column'}}>
            {shown.map(l=>{
              const [sk,sl]=partnerStageMeta(l.stage);
              const [tk,tl]=typeMeta(l.type);
              const canAdvance=['New','Qualified','Proposal'].includes(l.stage);
              const nextLbl={'New':'Qualify','Qualified':'Send proposal','Proposal':'Mark won'}[l.stage];
              return (
                <div key={l.id} style={{padding:'12px 0',borderBottom:'1px solid var(--rule-line)'}}>
                  <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:12,alignItems:'flex-start'}}>
                    <div style={{minWidth:0}}>
                      <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap',marginBottom:4}}>
                        <span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em'}}>{l.id}</span>
                        <Pill k={tk}>{tl}</Pill>
                        {l.src==='form' && <Pill k="g">★ INTAKE FORM</Pill>}
                        <span className="mono num" style={{fontSize:10,color:'var(--green)',fontWeight:600}}>{l.budget}</span>
                      </div>
                      <div style={{fontSize:13,fontWeight:600}}>{l.org} <span className="mono" style={{fontSize:9.5,color:'var(--navy)',fontWeight:400}}>· {l.from}</span></div>
                      <div style={{fontSize:12,color:'var(--ink-2)',lineHeight:1.4,marginTop:3,textWrap:'pretty'}}>{l.subject}</div>
                      <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.02em',marginTop:4}}>{l.intent} · {l.received.toUpperCase()}</div>
                    </div>
                    <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:8}}>
                      <Pill k={sk}>{sl}</Pill>
                      {canAdvance && <div style={{display:'flex',gap:6}}>
                        <button className="btn gh s" onClick={()=>decline(l.id)}>Decline</button>
                        <button className="btn k s" onClick={()=>advance(l.id)}>{nextLbl} →</button>
                      </div>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <Card title="Parse an inbound email" meta="cold outreach → lead">
            <textarea value={raw} onChange={e=>setRaw(e.target.value)} placeholder={"Paste a partner's email here…\n\nFrom: growth@example.com\nSubject: Backlink partnership\nWe'd love 3 do-follow links/mo, budget $800/mo…"}
              style={{width:'100%',minHeight:96,padding:'8px 10px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:11.5,fontFamily:'var(--mono)',lineHeight:1.5,outline:'none',resize:'vertical'}}/>
            <button className="btn k" style={{width:'100%',marginTop:8}} onClick={doParse} disabled={!raw.trim()} >Parse email →</button>
            {parsed && (
              <div style={{marginTop:12,paddingTop:12,borderTop:'1px solid var(--rule-line)'}}>
                <div className="mono" style={{fontSize:9,letterSpacing:'.12em',color:'var(--mute)',marginBottom:8}}>PARSED</div>
                <div style={{display:'flex',flexDirection:'column',gap:5,fontSize:11.5}}>
                  <PRow k="Org" v={parsed.org}/><PRow k="From" v={parsed.from}/>
                  <PRow k="Type" v={parsed.type}/><PRow k="Budget" v={parsed.budget}/>
                  <PRow k="Subject" v={parsed.subject}/>
                </div>
                <button className="btn g" style={{width:'100%',marginTop:10}} onClick={fileLead}>File as partner lead →</button>
              </div>
            )}
          </Card>

          <Card title="Public entry point">
            <div style={{fontSize:12,color:'var(--ink-2)',lineHeight:1.5}}>Partners don't have to cold-email. The open intake page routes advertising, SEO, and syndication inquiries straight into this pipeline.</div>
            <a href="Partner.html" target="_blank" className="btn gh" style={{width:'100%',marginTop:12,textAlign:'center',textDecoration:'none'}}>Open Partner intake page ↗</a>
            <div className="mono" style={{fontSize:9,color:'var(--mute)',marginTop:8,letterSpacing:'.04em'}}>tuepac.com/partner</div>
          </Card>
        </div>
      </div>
    </div>
  );
}

function PRow({k,v}){
  return <div style={{display:'grid',gridTemplateColumns:'70px 1fr',gap:8}}><span className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.06em',textTransform:'uppercase'}}>{k}</span><span style={{fontWeight:500}}>{v}</span></div>;
}

window.SyndPartners = SyndPartners;