// add-song-writers.jsx — writer/publisher/admin cards for the Add Song modal.
// Loaded BEFORE globals.jsx so the components are available when the modal renders.

const { WriterTypeahead, PublisherTypeahead, IPIInput, ProfileDiffWarning, SharesField, TerritoriesField } = window;

const ROLES_WRITER = (window.refWriterRoleLabels && window.refWriterRoleLabels()) ||
  ['Composer','Composer/Author','Author','Arranger','Adaptor','Translator','Sub-Arranger','Sub-Author','Income Participant'];
const ROLES_PUB    = (window.refPublisherRoleLabels && window.refPublisherRoleLabels()) ||
  ['Original Publisher','Sub-Publisher','Administrator','Acquirer','Income Participant','Substituted Publisher'];
// Pulled live from the central Societies directory (Directory → Societies tab)
const PROS         = [...(window.SOC_WRITER || ['ASCAP','BMI','SESAC','PRS','GEMA','SACEM','SOCAN','APRA','JASRAC']), '—'];

function L({ children, req }) {
  return (
    <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:4}}>
      {children}{req && <span style={{color:'#c0392b',marginLeft:2}}>*</span>}
    </div>
  );
}
function Cb({ checked, onChange, children }) {
  return (
    <label style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:11,color:'var(--ink-2)',cursor:'pointer',userSelect:'none'}}>
      <input type="checkbox" checked={!!checked} onChange={e=>onChange(e.target.checked)}/>
      {children}
    </label>
  );
}

function WriterCard({ w, idx, total, setWriter, removeWriter, addPub, setPub, removePub, addAdmin, setAdmin, removeAdmin }) {
  const [open, setOpen] = React.useState(true);
  const writerTotal = +w.share||0;
  const pubsUsed = (w.pubs||[]).reduce((s,p)=>s+(+p.share||0),0);
  const pubsRemain = writerTotal - pubsUsed;
  const pubsOver = pubsUsed > writerTotal;

  React.useEffect(()=>{
    if (w.unknown) {
      (w.pubs||[]).forEach((p, pi) => { if (!p.unknown) setPub(idx, pi, {unknown:true}); });
    }
  }, [w.unknown]);

  const summaryName = w.unknown
    ? <span className="ff-mono upper" style={{letterSpacing:'.08em',color:'var(--ink-3)'}}>WRITER UNKNOWN</span>
    : (w.name || <em style={{color:'var(--ink-3)'}}>(unnamed writer)</em>);

  return (
    <div style={{marginBottom:12,border:'1px solid var(--rule)',background:'var(--bg)'}}>
      <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 12px',borderBottom: open?'1px solid var(--rule-soft)':'none',background:'var(--bg-2)'}}>
        <button type="button" onClick={()=>setOpen(o=>!o)} className="ff-mono"
          style={{background:'transparent',border:0,cursor:'pointer',color:'var(--ink-3)',fontSize:11,padding:0,width:14,textAlign:'left'}}>
          {open?'▾':'▸'}
        </button>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',alignItems:'baseline',gap:8,minWidth:0}}>
            <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)'}}>WRITER {idx+1}</span>
            <span style={{fontSize:13,fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{summaryName}</span>
            <span className="ff-mono" style={{fontSize:10,color:'var(--ink-3)'}}>· {w.role||'—'}</span>
          </div>
          <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:2}}>
            Share <strong style={{color:'var(--ink-2)'}}>{w.share||0}%</strong>
            {w.splitShares && <span> · P {w.perfShare||0} · M {w.mechShare||0} · S {w.syncShare||0}</span>}
            {(w.territories||[]).length>0 && <span> · {(w.territories||[]).join(', ')}</span>}
            {(w.pubs||[]).length>0 && <span> · {(w.pubs||[]).length} pub{(w.pubs||[]).length>1?'s':''} ({pubsUsed}%)</span>}
          </div>
        </div>
        <button type="button" onClick={()=>removeWriter(idx)} disabled={total<=1}
          title="Remove writer"
          style={{background:'transparent',border:0,cursor:total<=1?'default':'pointer',color:total<=1?'var(--ink-4)':'var(--ink-3)',fontSize:16,padding:'2px 6px'}}>×</button>
      </div>

      {open && (
        <div style={{padding:'12px 14px'}}>
          <div style={{marginBottom:10}}>
            <Cb checked={w.unknown} onChange={v=>setWriter(idx,{unknown:v})}>Writer Unknown</Cb>
          </div>

          {!w.unknown && (
            <React.Fragment>
              <div style={{display:'grid',gridTemplateColumns:'1fr 110px 130px',gap:10,marginBottom:10}}>
                <div>
                  <L req>SONGWRITER</L>
                  <WriterTypeahead value={w.name} aid={w._id}
                    onSelect={(patch)=>setWriter(idx,{
                      name: patch.name ?? w.name,
                      pro:  patch.pro  ?? w.pro,
                      cae:  patch.ipi  ?? w.cae,
                      _id:  '_id' in patch ? patch._id : w._id,
                    })}/>
                </div>
                <div>
                  <L req>PRO</L>
                  <select value={w.pro} onChange={e=>setWriter(idx,{pro:e.target.value})} className="ff-mono"
                    style={{width:'100%',padding:'6px 8px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box',color: w.pro?'var(--ink)':'var(--ink-3)'}}>
                    <option value="">— select —</option>
                    {PROS.map(p=><option key={p}>{p}</option>)}
                  </select>
                </div>
                <div>
                  <L>IPI</L>
                  <IPIInput value={w.cae} onChange={(v)=>setWriter(idx,{cae:v})}/>
                </div>
              </div>

              <ProfileDiffWarning kind="writer" aid={w._id}
                current={{pro:w.pro, ipi:w.cae}}
                onClearLink={(opts)=>{ if (!opts.kept) setWriter(idx,{_id:null}); else setWriter(idx,{}); }}/>
            </React.Fragment>
          )}

          <div style={{marginBottom:10}}>
            <L req>WRITER ROLE</L>
            <select value={w.role} onChange={e=>setWriter(idx,{role:e.target.value})} className="ff-mono"
              style={{width:'100%',padding:'6px 8px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box'}}>
              {ROLES_WRITER.map(r=><option key={r}>{r}</option>)}
            </select>
          </div>

          <div style={{marginBottom:10}}>
            <L>OWNERSHIP SHARE</L>
            <SharesField value={w} onChange={(patch)=>setWriter(idx,patch)} max={100}/>
          </div>

          {!w.unknown && (
            <React.Fragment>
              <div style={{marginBottom:10}}>
                <L req>TERRITORY</L>
                <TerritoriesField value={w.territories} onChange={(t)=>setWriter(idx,{territories:t})}/>
              </div>

              <div style={{display:'flex',gap:18,flexWrap:'wrap',marginBottom:6}}>
                <Cb checked={w.workForHire} onChange={v=>setWriter(idx,{workForHire:v})}>Work for Hire</Cb>
                <Cb checked={w.reversionary} onChange={v=>setWriter(idx,{reversionary:v})}>Reversionary</Cb>
                <Cb checked={w.firstRecRefusal} onChange={v=>setWriter(idx,{firstRecRefusal:v})}>First Recording Refusal</Cb>
              </div>
            </React.Fragment>
          )}

          {writerTotal>0 && !w.unknown && (
            <div className="ff-mono" style={{display:'flex',alignItems:'center',gap:10,marginTop:14,paddingTop:10,borderTop:'1px solid var(--rule-soft)'}}>
              <span className="upper" style={{fontSize:8,letterSpacing:'.12em',color:'var(--ink-3)',whiteSpace:'nowrap'}}>
                OF {(w.unknown?'WRITER':(w.name||'WRITER')).toUpperCase()}'S {writerTotal}%
              </span>
              <div style={{flex:1,height:5,background:'var(--bg-2)',border:'1px solid var(--rule)',display:'flex',overflow:'hidden'}}>
                <div style={{width:`${Math.min(100,(pubsUsed/writerTotal)*100)}%`,background:pubsOver?'#c0392b':'var(--accent)'}}/>
              </div>
              <span style={{fontSize:10,color:pubsOver?'#c0392b':'var(--ink-2)',whiteSpace:'nowrap'}}>
                {pubsOver ? `publishers claim ${pubsUsed}% — over by ${pubsUsed-writerTotal}%`
                  : pubsRemain>0 ? `${pubsUsed}% to publishers · ${pubsRemain}% kept by writer`
                  : `${writerTotal}% fully assigned to publishers`}
              </span>
            </div>
          )}

          {!w.unknown && (() => {
            const hasOpaque = (w.pubs||[]).some(p=>p.unknown||p.selfPub);
            return (
              <div style={{marginTop:12,paddingTop:12,borderTop:'1px solid var(--rule-soft)'}}>
                <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:8}}>PUBLISHERS</div>
                {(w.pubs||[]).map((p,pi)=>(
                  <PubCard key={pi} p={p} pi={pi} wIdx={idx} pubsOver={pubsOver}
                    forceUnknown={w.unknown}
                    setPub={setPub} removePub={removePub}
                    addAdmin={addAdmin} setAdmin={setAdmin} removeAdmin={removeAdmin}/>
                ))}
                {!hasOpaque && (
                  <button type="button" onClick={()=>addPub(idx)} className="ff-mono upper"
                    style={{display:'inline-flex',alignItems:'center',gap:6,marginTop:4,padding:'5px 10px',fontSize:9,letterSpacing:'.08em',
                      background:'transparent',color:'var(--ink-3)',border:'1px dashed var(--rule)',cursor:'pointer'}}>
                    <Ic.Plus width={10} height={10}/> Add publisher
                  </button>
                )}
              </div>
            );
          })()}
        </div>
      )}
    </div>
  );
}

function PubCard({ p, pi, wIdx, forceUnknown, pubsOver, setPub, removePub, addAdmin, setAdmin, removeAdmin }) {
  const [open, setOpen] = React.useState(true);
  const pubTotal = +p.share||0;
  const adminUsed = (p.admins||[]).reduce((s,a)=>s+(+a.share||0),0);
  const adminRemain = pubTotal - adminUsed;
  const adminOver = adminUsed > pubTotal;

  React.useEffect(()=>{
    if (p.unknown) {
      (p.admins||[]).forEach((a, ai) => { if (!a.unknown) setAdmin(wIdx, pi, ai, {unknown:true}); });
    }
  }, [p.unknown]);

  const isHidden = p.unknown || p.selfPub;
  const summary = p.unknown
    ? <span className="ff-mono upper" style={{letterSpacing:'.08em',color:'var(--ink-3)'}}>PUBLISHER UNKNOWN</span>
    : p.selfPub
      ? <span className="ff-mono upper" style={{letterSpacing:'.08em',color:'var(--ink-3)'}}>SELF-PUBLISHED</span>
      : (p.name || <em style={{color:'var(--ink-3)'}}>(unnamed publisher)</em>);

  return (
    <div style={{marginTop:6,marginBottom:8,paddingLeft:12,borderLeft:'2px solid var(--rule)'}}>
      <div style={{display:'flex',alignItems:'center',gap:10,padding:'6px 8px',background:'var(--bg-2)',border:'1px solid var(--rule)'}}>
        <button type="button" onClick={()=>setOpen(o=>!o)} className="ff-mono"
          style={{background:'transparent',border:0,cursor:'pointer',color:'var(--ink-3)',fontSize:10,padding:0,width:12,textAlign:'left'}}>
          {open?'▾':'▸'}
        </button>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',alignItems:'baseline',gap:6,minWidth:0}}>
            <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)'}}>PUB {pi+1}</span>
            <span style={{fontSize:12,fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{summary}</span>
            <span className="ff-mono" style={{fontSize:9,color:'var(--ink-3)'}}>· {p.role||'—'}</span>
          </div>
          <div className="ff-mono" style={{fontSize:9,color:'var(--ink-3)',marginTop:1}}>
            Share <strong style={{color:'var(--ink-2)'}}>{pubTotal}%</strong>
            {p.controlled && <span> · CTRL</span>}
            {(p.admins||[]).length>0 && <span> · {(p.admins||[]).length} admin{(p.admins||[]).length>1?'s':''}</span>}
          </div>
        </div>
        <button type="button" onClick={()=>removePub(wIdx, pi)} title="Remove publisher"
          style={{background:'transparent',border:0,cursor:'pointer',color:'var(--ink-3)',fontSize:14,padding:'0 4px'}}>×</button>
      </div>

      {open && (
        <div style={{padding:'10px 8px 0'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:14,flexWrap:'wrap',marginBottom:10}}>
            <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
              <Cb checked={p.selfPub} onChange={v=>setPub(wIdx,pi,{selfPub:v, ...(v?{unknown:false}:{})})}>Self-Published</Cb>
              <Cb checked={p.unknown} onChange={v=>setPub(wIdx,pi,{unknown:v, ...(v?{selfPub:false}:{})})}>Unknown</Cb>
            </div>
            <Cb checked={p.controlled} onChange={v=>setPub(wIdx,pi,{controlled:v})}>Controlled</Cb>
          </div>

          {!isHidden && (
            <React.Fragment>
              <div style={{display:'grid',gridTemplateColumns:'1fr 110px 130px',gap:10,marginBottom:10}}>
                <div>
                  <L req>PUBLISHER NAME</L>
                  <PublisherTypeahead value={p.name} aid={p._pubId} onSelect={(patch)=>setPub(wIdx,pi,{
                    name: patch.pub ?? patch.name ?? p.name,
                    pro:  patch.pubPro ?? patch.pro ?? p.pro,
                    ipi:  patch.pubIpi ?? patch.ipi ?? p.ipi,
                    _pubId: '_pubId' in patch ? patch._pubId : p._pubId,
                  })}/>
                </div>
                <div>
                  <L req>PRO</L>
                  <select value={p.pro} onChange={e=>setPub(wIdx,pi,{pro:e.target.value})} className="ff-mono"
                    style={{width:'100%',padding:'6px 8px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box',color: p.pro?'var(--ink)':'var(--ink-3)'}}>
                    <option value="">— select —</option>
                    {PROS.map(x=><option key={x}>{x}</option>)}
                  </select>
                </div>
                <div>
                  <L req>IPI</L>
                  <IPIInput value={p.ipi} onChange={(v)=>setPub(wIdx,pi,{ipi:v})}/>
                </div>
              </div>

              <ProfileDiffWarning kind="publisher" aid={p._pubId}
                current={{pro:p.pro, ipi:p.ipi}}
                onClearLink={(opts)=>{ if (!opts.kept) setPub(wIdx,pi,{_pubId:null}); else setPub(wIdx,pi,{}); }}/>
            </React.Fragment>
          )}

          <div style={{marginBottom:10}}>
            <L req>PUBLISHER ROLE</L>
            <select value={p.role} onChange={e=>setPub(wIdx,pi,{role:e.target.value})} className="ff-mono"
              style={{width:'100%',padding:'6px 8px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box'}}>
              {ROLES_PUB.map(r=><option key={r}>{r}</option>)}
            </select>
          </div>

          <div style={{marginBottom:10}}>
            <L>OWNERSHIP SHARE</L>
            <SharesField value={p} onChange={(patch)=>setPub(wIdx,pi,patch)} max={100} error={pubsOver}/>
          </div>

          {!isHidden && (
            <React.Fragment>
              <div style={{marginBottom:10}}>
                <L req>TERRITORY</L>
                <TerritoriesField value={p.territories} onChange={(t)=>setPub(wIdx,pi,{territories:t})}/>
              </div>

              <div style={{marginBottom:6}}>
                <Cb checked={p.firstRecRefusal} onChange={v=>setPub(wIdx,pi,{firstRecRefusal:v})}>First Recording Refusal</Cb>
              </div>
            </React.Fragment>
          )}

          {pubTotal>0 && !isHidden && (p.admins||[]).length>0 && (
            <div className="ff-mono" style={{display:'flex',alignItems:'center',gap:10,marginTop:10,paddingTop:8,borderTop:'1px solid var(--rule-soft)'}}>
              <span className="upper" style={{fontSize:8,letterSpacing:'.12em',color:'var(--ink-3)',whiteSpace:'nowrap'}}>
                OF {(p.unknown?'PUBLISHER':(p.name||'PUBLISHER')).toUpperCase()}'S {pubTotal}%
              </span>
              <div style={{flex:1,height:5,background:'var(--bg)',border:'1px solid var(--rule)',display:'flex',overflow:'hidden'}}>
                <div style={{width:`${Math.min(100,(adminUsed/pubTotal)*100)}%`,background:adminOver?'#c0392b':'var(--ink)'}}/>
              </div>
              <span style={{fontSize:10,color:adminOver?'#c0392b':'var(--ink-2)',whiteSpace:'nowrap'}}>
                {adminOver ? `admins claim ${adminUsed}% — over by ${adminUsed-pubTotal}%`
                  : adminRemain>0 ? `${adminUsed}% to admins · ${adminRemain}% kept by publisher`
                  : `${pubTotal}% fully assigned to admins`}
              </span>
            </div>
          )}

          {!isHidden && (
            <div style={{marginTop:10,paddingTop:10,borderTop:'1px solid var(--rule-soft)'}}>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:6}}>ADMIN / SUB-PUBLISHER</div>
              {(p.admins||[]).map((a,ai)=>(
                <AdminCard key={ai} a={a} ai={ai} wIdx={wIdx} pi={pi} adminOver={adminOver}
                  setAdmin={setAdmin} removeAdmin={removeAdmin}/>
              ))}
              <button type="button" onClick={()=>addAdmin(wIdx,pi)} className="ff-mono upper"
                style={{display:'inline-flex',alignItems:'center',gap:6,marginTop:4,padding:'5px 10px',fontSize:9,letterSpacing:'.08em',
                  background:'transparent',color:'var(--ink-3)',border:'1px dashed var(--rule)',cursor:'pointer'}}>
                <Ic.Plus width={10} height={10}/> Add admin / sub-publisher
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function AdminCard({ a, ai, wIdx, pi, adminOver, setAdmin, removeAdmin }) {
  const [open, setOpen] = React.useState(true);
  const isHidden = a.unknown || a.selfPub;
  const summary = a.unknown
    ? <span className="ff-mono upper" style={{letterSpacing:'.08em',color:'var(--ink-3)'}}>UNKNOWN</span>
    : a.selfPub
      ? <span className="ff-mono upper" style={{letterSpacing:'.08em',color:'var(--ink-3)'}}>SELF-PUBLISHED</span>
      : (a.name || <em style={{color:'var(--ink-3)'}}>(unnamed)</em>);
  return (
    <div style={{marginTop:6,marginBottom:8,paddingLeft:10,borderLeft:'2px solid var(--rule-soft)'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,padding:'5px 8px',background:'var(--bg)',border:'1px solid var(--rule-soft)'}}>
        <button type="button" onClick={()=>setOpen(o=>!o)} className="ff-mono"
          style={{background:'transparent',border:0,cursor:'pointer',color:'var(--ink-3)',fontSize:10,padding:0,width:12,textAlign:'left'}}>
          {open?'▾':'▸'}
        </button>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',alignItems:'baseline',gap:6,minWidth:0}}>
            <span className="ff-mono upper" style={{fontSize:8,letterSpacing:'.12em',color:'var(--ink-3)'}}>{a.role||'ADMIN'} {ai+1}</span>
            <span style={{fontSize:11,fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{summary}</span>
          </div>
          <div className="ff-mono" style={{fontSize:9,color:'var(--ink-3)',marginTop:1}}>
            Share <strong style={{color:'var(--ink-2)'}}>{a.share||0}%</strong>
            {(a.territories||[]).length>0 && <span> · {(a.territories||[]).join(', ')}</span>}
          </div>
        </div>
        <button type="button" onClick={()=>removeAdmin(wIdx,pi,ai)} title="Remove admin"
          style={{background:'transparent',border:0,cursor:'pointer',color:'var(--ink-3)',fontSize:13,padding:'0 4px'}}>×</button>
      </div>

      {open && (
        <div style={{padding:'10px 8px 0'}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:10}}>
            <div>
              <L>RELATIONSHIP</L>
              <select value={a.role} onChange={e=>setAdmin(wIdx,pi,ai,{role:e.target.value})} className="ff-mono"
                style={{width:'100%',padding:'5px 6px',background:'var(--bg-2)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box'}}>
                {['Sub-pub','Admin'].map(r=><option key={r}>{r}</option>)}
              </select>
            </div>
            <div>
              <L>PUBLISHER ROLE</L>
              <select value={a.pubRole} onChange={e=>setAdmin(wIdx,pi,ai,{pubRole:e.target.value})} className="ff-mono"
                style={{width:'100%',padding:'5px 6px',background:'var(--bg-2)',border:'1px solid var(--rule)',fontSize:11,boxSizing:'border-box'}}>
                {ROLES_PUB.map(r=><option key={r}>{r}</option>)}
              </select>
            </div>
          </div>

          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:14,flexWrap:'wrap',marginBottom:10}}>
            <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
              <Cb checked={a.selfPub} onChange={v=>setAdmin(wIdx,pi,ai,{selfPub:v, ...(v?{unknown:false}:{})})}>Self-Published</Cb>
              <Cb checked={a.unknown} onChange={v=>setAdmin(wIdx,pi,ai,{unknown:v, ...(v?{selfPub:false}:{})})}>Unknown</Cb>
            </div>
            <Cb checked={a.controlled} onChange={v=>setAdmin(wIdx,pi,ai,{controlled:v})}>Controlled</Cb>
          </div>

          {!isHidden && (
            <div style={{display:'grid',gridTemplateColumns:'1fr 90px 110px',gap:8,marginBottom:10}}>
              <div>
                <L req>NAME</L>
                <PublisherTypeahead value={a.name} aid={a._pubId}
                  fieldMap={{name:'name', pro:'pro', ipi:'ipi', id:'_pubId'}}
                  onSelect={(patch)=>setAdmin(wIdx,pi,ai,patch)}/>
              </div>
              <div>
                <L>PRO</L>
                <select value={a.pro} onChange={e=>setAdmin(wIdx,pi,ai,{pro:e.target.value})} className="ff-mono"
                  style={{width:'100%',padding:'0 6px',background:'var(--bg-2)',border:'1px solid var(--rule)',fontSize:10,boxSizing:'border-box'}}>
                  {PROS.map(x=><option key={x}>{x}</option>)}
                </select>
              </div>
              <div>
                <L>IPI</L>
                <IPIInput value={a.ipi} onChange={(v)=>setAdmin(wIdx,pi,ai,{ipi:v})}/>
              </div>
            </div>
          )}

          <div style={{marginBottom:10}}>
            <L>OWNERSHIP SHARE</L>
            <SharesField value={a} onChange={(patch)=>setAdmin(wIdx,pi,ai,patch)} max={100} error={adminOver} size="sm"/>
          </div>

          <div style={{marginBottom:10}}>
            <L req>TERRITORY</L>
            <TerritoriesField value={a.territories} onChange={(t)=>setAdmin(wIdx,pi,ai,{territories:t})} size="sm"/>
          </div>

          <div style={{marginBottom:4}}>
            <Cb checked={a.firstRecRefusal} onChange={v=>setAdmin(wIdx,pi,ai,{firstRecRefusal:v})}>First Recording Refusal</Cb>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WriterCard, PubCard, AdminCard });