// Syndication · Republishing — dual-publish independent writers.
// Drop a link -> detect -> request permission -> agree terms -> live, with rev-share + backlinks.

const REPUB_STAGES = ['Detected','Permission requested','Agreed','Live','Declined'];
function repubStageMeta(s){
  if(s==='Live')                return ['live','LIVE'];
  if(s==='Agreed')              return ['info','AGREED'];
  if(s==='Permission requested')return ['warn','PERMISSION SENT'];
  if(s==='Declined')            return ['bad','DECLINED'];
  return ['muted','DETECTED'];
}
function detectSource(url){
  const u=(url||'').toLowerCase();
  if(u.includes('substack')) return 'Substack';
  if(u.includes('medium.com')) return 'Medium';
  if(u.includes('youtube')||u.includes('youtu.be')) return 'YouTube';
  if(u.includes('wordpress')||u.includes('.blog')) return 'Blog';
  return 'Blog';
}
function guessTitle(url){
  const m=(url||'').split('/').filter(Boolean).pop()||'';
  const t=m.replace(/[-_]+/g,' ').replace(/\.\w+$/,'').replace(/\?.*$/,'').trim();
  if(!t) return 'Untitled piece';
  return t.charAt(0).toUpperCase()+t.slice(1);
}
function guessHandle(url,source){
  const u=(url||'');
  const at=u.match(/@[\w.-]+/); if(at) return at[0];
  const host=(u.match(/^(?:https?:\/\/)?([^\/]+)/)||[])[1]||'';
  const sub=host.split('.')[0];
  return sub && sub!=='www' ? sub : source.toLowerCase();
}

function SyndRepublish(){
  const T = window.REPUB_DEFAULT_TERMS;
  const [items, setItems] = React.useState(()=> (window.REPUB_ITEMS||[]).map(x=>({...x})));
  const [url, setUrl] = React.useState('');
  const [detected, setDetected] = React.useState(null);

  function detect(){
    if(!url.trim()) return;
    const source = detectSource(url);
    setDetected({
      url:url.trim().replace(/^https?:\/\//,''),
      source, writer:'', handle:guessHandle(url,source), title:guessTitle(url),
      desk:'Business', city:'Charlotte', words:0,
      share:T.writerShare, canonical:T.canonical, backlink:T.backlink,
    });
  }
  function sendRequest(){
    const id='RP-'+(19+items.filter(i=>i.id.startsWith('RP-')).length);
    setItems([{ ...detected, id, stage:'Permission requested', views:'—', revenue:'—', paid:'—', contact:'emailed just now' }, ...items]);
    setDetected(null); setUrl('');
  }
  function advance(id){
    setItems(items.map(i=>{
      if(i.id!==id) return i;
      const next = { 'Detected':'Permission requested','Permission requested':'Agreed','Agreed':'Live' }[i.stage];
      return next ? {...i, stage:next, contact: next==='Live'?'published now':i.contact} : i;
    }));
  }

  const live = items.filter(i=>i.stage==='Live');
  const totalRev = live.reduce((s,i)=>s+(parseInt((i.revenue||'').replace(/[^0-9]/g,''))||0),0);

  return (
    <div>
      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={String(items.filter(i=>i.stage!=='Declined').length)} l="In dual-publish pipeline" d="across sources"/>
        <Stat n={String(live.length)} l="Republished · live" d="earning now" up={true}/>
        <Stat n={'$'+totalRev.toLocaleString()} l="Writer payouts · MTD" d={`${T.writerShare}% of piece revenue`}/>
        <Stat n={String(items.filter(i=>i.stage==='Permission requested').length)} l="Awaiting permission" d="follow up"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:18,alignItems:'flex-start'}}>
        {/* pipeline */}
        <Card title="Dual-publish pipeline" meta={`${items.length} pieces`}
          actions={<Seg value="All" onChange={()=>{}} options={['All','Live','Pending']}/>}>
          <div style={{display:'flex',flexDirection:'column'}}>
            {items.map(i=>{
              const [k,lbl]=repubStageMeta(i.stage);
              const canAdvance = i.stage==='Detected'||i.stage==='Permission requested'||i.stage==='Agreed';
              const nextLbl = {'Detected':'Request permission','Permission requested':'Mark agreed','Agreed':'Publish live'}[i.stage];
              return (
                <div key={i.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'}}>{i.id}</span>
                        <Pill k={i.source==='Substack'?'live':i.source==='Medium'?'info':'muted'}>{i.source.toUpperCase()}</Pill>
                        <span className="mono" style={{fontSize:9.5,color:'var(--ink-2)',letterSpacing:'.05em'}}>{i.desk.toUpperCase()} · {i.city.toUpperCase()}</span>
                      </div>
                      <div className="serif" style={{fontSize:14.5,fontWeight:700,lineHeight:1.2,textWrap:'pretty'}}>{i.title}</div>
                      <div className="mono" style={{fontSize:10,color:'var(--navy)',letterSpacing:'.02em',marginTop:4}}>{i.writer||'—'} · {i.handle} · <span style={{color:'var(--mute)'}}>{i.url}</span></div>
                      <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em',marginTop:4}}>
                        {i.share?`WRITER ${i.share}%`:'—'} · CANONICAL {String(i.canonical).toUpperCase()} · {i.views!=='—'?`${i.views} VIEWS · ${i.revenue}`:i.contact.toUpperCase()}
                      </div>
                    </div>
                    <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:8}}>
                      <Pill k={k}>{lbl}</Pill>
                      {canAdvance && <button className="btn gh s" onClick={()=>advance(i.id)}>{nextLbl} →</button>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* drop-link + terms */}
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <Card title="Drop a link" meta="dual-publish a writer">
            <div className="eyebrow" style={{marginBottom:6}}>PASTE ARTICLE URL</div>
            <div style={{display:'flex',gap:8}}>
              <input value={url} onChange={e=>setUrl(e.target.value)} placeholder="substack.com/p/… · medium.com/@… · blog url"
                style={{flex:1,padding:'8px 10px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:12,fontFamily:'var(--mono)',outline:'none'}}/>
              <button className="btn k" onClick={detect} disabled={!url.trim()} style={{opacity:url.trim()?1:.4}}>Detect</button>
            </div>

            {detected && (
              <div style={{marginTop:14,paddingTop:14,borderTop:'1px solid var(--rule-line)'}}>
                <div className="mono" style={{fontSize:9,letterSpacing:'.12em',color:'var(--mute)',marginBottom:8}}>DETECTED FROM URL · CONFIRM</div>
                <div style={{display:'flex',flexDirection:'column',gap:8}}>
                  <Field label="SOURCE" value={detected.source} onChange={v=>setDetected({...detected,source:v})}/>
                  <Field label="WRITER NAME" value={detected.writer} placeholder="who wrote it" onChange={v=>setDetected({...detected,writer:v})}/>
                  <Field label="HANDLE" value={detected.handle} onChange={v=>setDetected({...detected,handle:v})}/>
                  <Field label="TITLE" value={detected.title} onChange={v=>setDetected({...detected,title:v})}/>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                    <SelField label="DESK" value={detected.desk} opts={window.CVG_DESKS_LIST} onChange={v=>setDetected({...detected,desk:v})}/>
                    <SelField label="CITY" value={detected.city} opts={window.CVG_CITIES_LIST} onChange={v=>setDetected({...detected,city:v})}/>
                  </div>
                </div>
                <button className="btn g" style={{width:'100%',marginTop:12}} onClick={sendRequest} disabled={!detected.writer.trim()} >
                  Request republishing permission →
                </button>
                <div className="mono" style={{fontSize:9,color:'var(--mute)',marginTop:7,lineHeight:1.5,letterSpacing:'.02em'}}>
                  Sends a templated ask with the default terms below. Nothing publishes until the writer agrees.
                </div>
              </div>
            )}
          </Card>

          <Card title="Default deal terms" meta="editable per writer">
            <TermRow k="Model" v={T.model}/>
            <TermRow k="Writer share" v={`${T.writerShare}% of piece revenue`} tone="var(--green)"/>
            <TermRow k="Paid placements" v={`${T.placementSplit}/50 split`}/>
            <TermRow k="Canonical" v={T.canonical} tone="var(--gold-2)"/>
            <TermRow k="Backlink" v={T.backlink} tone="var(--navy)"/>
            <div className="mono" style={{fontSize:9.5,color:'var(--mute)',marginTop:10,lineHeight:1.55,letterSpacing:'.02em'}}>
              Industry-standard non-exclusive rev-share. Canonical set to TUEPAC for SEO authority; the writer gets a prominent do-follow backlink to their original in exchange.
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

function Field({label, value, onChange, placeholder}){
  return (
    <div>
      <div className="eyebrow" style={{marginBottom:3,fontSize:8.5}}>{label}</div>
      <input value={value} placeholder={placeholder} onChange={e=>onChange(e.target.value)}
        style={{width:'100%',padding:'6px 9px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:12,fontFamily:'var(--sans)',outline:'none'}}/>
    </div>
  );
}
function SelField({label, value, opts, onChange}){
  return (
    <div>
      <div className="eyebrow" style={{marginBottom:3,fontSize:8.5}}>{label}</div>
      <select value={value} onChange={e=>onChange(e.target.value)} style={{width:'100%',padding:'6px 9px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:12,fontFamily:'var(--sans)',outline:'none'}}>
        {(opts||[]).map(o=><option key={o}>{o}</option>)}
      </select>
    </div>
  );
}
function TermRow({k,v,tone}){
  return (
    <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:10,padding:'7px 0',borderBottom:'1px solid var(--rule-line)',alignItems:'center'}}>
      <span style={{fontSize:12,color:'var(--ink-2)'}}>{k}</span>
      <span className="mono" style={{fontSize:11,fontWeight:600,color:tone||'var(--ink)',letterSpacing:'.02em'}}>{v}</span>
    </div>
  );
}

window.CVG_DESKS_LIST = ['Civic','Business','Politics','Sports','Education','Culture','Health','Housing','Legal'];
window.CVG_CITIES_LIST = ['Charlotte','Raleigh','Durham','Greensboro','Winston-Salem','Fayetteville','Wilmington','Statewide'];
window.SyndRepublish = SyndRepublish;