// ───────────────────────────────────────────────────────────────────────
// add-song-rights.jsx
// Rights tab for the global Add Song modal.
// USCO / jurisdictional copyright registration metadata.
// Exposes window.RightsTab(props).
// ───────────────────────────────────────────────────────────────────────

(function(){
  const { useState, useMemo, useRef } = React;

  // ── Option lists — sourced from window.REF (astro.copyright_* tables).
  // Falls back to a sensible default list if REF hasn't loaded yet.
  // These are getters (not consts) so they re-read REF after async load.

  const FALLBACK_JURISDICTIONS = [
    { v:'US',   l:'United States (eCO)' },
    { v:'CA',   l:'Canada' },
    { v:'UK',   l:'United Kingdom' },
    { v:'EU',   l:'European Union (EUIPO)' },
    { v:'AU',   l:'Australia' },
    { v:'JP',   l:'Japan' },
    { v:'BR',   l:'Brazil' },
    { v:'OTHER',l:'Other (specify in notes)' },
  ];
  const getJurisdictions = () => {
    const REF = window.REF;
    if (REF && REF.ready && Array.isArray(REF.copyrightJurisdictions) && REF.copyrightJurisdictions.length) {
      return REF.copyrightJurisdictions
        .filter(r => r && r.code && r.label)
        .map(r => ({ v: r.code, l: r.label, authority: r.authority_name, url: r.website_url }));
    }
    return FALLBACK_JURISDICTIONS;
  };

  const FALLBACK_COPYRIGHT_TYPES = [
    'Work of the Performing Arts',
    'Sound Recording',
    'Literary Work',
    'Work of the Visual Arts',
    'Serial',
  ];
  const getCopyrightTypes = () => {
    const REF = window.REF;
    if (REF && REF.ready && Array.isArray(REF.copyrightTypes) && REF.copyrightTypes.length) {
      return REF.copyrightTypes.filter(r => r && r.label).map(r => r.label);
    }
    return FALLBACK_COPYRIGHT_TYPES;
  };

  const FALLBACK_TITLE_TYPES = [
    'Title of work being registered',
    'Previous or Alternative Title',
    'Title of Larger Work',
    'Series Title',
    'Contents Title',
  ];
  const getTitleTypes = () => {
    const REF = window.REF;
    if (REF && REF.ready && Array.isArray(REF.copyrightTitleTypes) && REF.copyrightTitleTypes.length) {
      return REF.copyrightTitleTypes.filter(r => r && r.label).map(r => r.label);
    }
    return FALLBACK_TITLE_TYPES;
  };

  // Status tone is UI-only — schema stores just the code/label.
  // Map each REF status code → a tone. Unknown codes get a neutral grey.
  const STATUS_TONES = {
    draft:           '#9aa1a8',
    ready_to_submit: '#d97757',
    submitted:       '#3b82f6',
    registered:      '#16a34a',
    rejected:        '#dc2626',
  };
  const FALLBACK_REG_STATUS = [
    { v:'draft',           l:'Draft',           tone:STATUS_TONES.draft },
    { v:'ready_to_submit', l:'Ready to Submit', tone:STATUS_TONES.ready_to_submit },
    { v:'submitted',       l:'Submitted',       tone:STATUS_TONES.submitted },
    { v:'registered',      l:'Registered',      tone:STATUS_TONES.registered },
    { v:'rejected',        l:'Rejected',        tone:STATUS_TONES.rejected },
  ];
  const getRegStatus = () => {
    const REF = window.REF;
    if (REF && REF.ready && Array.isArray(REF.copyrightRegistrationStatuses) && REF.copyrightRegistrationStatuses.length) {
      return REF.copyrightRegistrationStatuses
        .filter(r => r && r.code && r.label)
        .map(r => ({ v: r.code, l: r.label, tone: STATUS_TONES[r.code] || '#9aa1a8' }));
    }
    return FALLBACK_REG_STATUS;
  };

  // Work-level identifier types — pulled live from ref.identifier_types
  // (filtered to types that apply to works). Falls back to a small list if
  // ref data hasn't loaded yet so the form still works offline.
  const STD_ID_TYPES = (() => {
    const fallback = ['ISWC', 'ISRC', 'ISMN', 'ISBN', 'Other'];
    const refTypes = (window.REF && window.REF.ready) ? (window.REF.identifierTypes || []) : [];
    if (!refTypes.length) return fallback;
    // applies_to is a comma-list like "WORK,RECORDING" or just "WORK".
    // entity_types is a Postgres array. Match either.
    const appliesToWork = (t) => {
      const a = (t.applies_to || '').toUpperCase();
      const e = Array.isArray(t.entity_types) ? t.entity_types.map(x => String(x).toUpperCase()) : [];
      return a.includes('WORK') || e.includes('WORK') || a === '' && e.length === 0; // permissive
    };
    const codes = refTypes.filter(appliesToWork).map(t => t.code).filter(Boolean);
    // Keep ISWC first (the canonical work identifier), then alpha, then 'Other'.
    const ordered = [
      ...(codes.includes('ISWC') ? ['ISWC'] : []),
      ...codes.filter(c => c !== 'ISWC').sort(),
    ];
    return ordered.length ? [...ordered, 'Other'] : fallback;
  })();

  const AUTHOR_TYPES = [
    'Composer (Music)',
    'Lyricist / Author of Text',
    'Author of Music & Lyrics',
    'Author of Arrangement',
    'Author of Compilation',
    'Editor',
    'Other',
  ];

  const CLAIMANT_TYPES = [
    'Author',
    'By written agreement',
    'By inheritance',
    'Transfer of rights',
    'Work for hire',
  ];

  const TRANSFER_STATEMENTS = [
    'By written agreement',
    'By inheritance',
    'Other',
  ];
  const getTransferStatements = () => {
    const REF = window.REF;
    if (REF && REF.ready && Array.isArray(REF.copyrightTransferStatements) && REF.copyrightTransferStatements.length) {
      return REF.copyrightTransferStatements.filter(r => r && r.label).map(r => r.label);
    }
    return TRANSFER_STATEMENTS;
  };

  // ── Defaults / factories ───────────────────────────────────────────
  const todayISO = () => new Date().toISOString().slice(0,10);

  const newRegistration = (jurisdiction='US') => ({
    id: 'reg_' + Math.random().toString(36).slice(2,9),
    jurisdiction,
    copyrightType: 'Work of the Performing Arts',
    localRegNum: '',
    titleType: 'Title of work being registered',
    status: 'draft',
    copyrightDate: todayISO(),
    registrationNumber: '',
    ecoServiceNumber: '',
    // Publication
    published: false,
    yearOfCompletion: String(new Date().getFullYear()),
    stdIdType: 'ISWC',
    stdIdValue: '',
    stdIdDate: '',
    // Authors / claimants / etc.
    authors: [],
    claimants: [],
    // Limitation of claim
    materialExcluded: { lyrics:false, music:false, arrangement:false, text:false, other:'' },
    previousRegistrations: [{ number:'', year:'' }, { number:'', year:'' }],
    newMaterial: { lyrics:false, music:false, arrangement:false, text:false, other:'' },
    // People & addresses
    rightsContact: emptyContact(),
    correspondent: emptyContact(),
    mailCertificate: emptyContact(),
    // Files / notes
    certificatePdf: null, // {name, size, url, uploadedAt}
    notes: '',
  });

  function emptyContact() {
    return {
      firstName:'', lastName:'',
      organization:'',
      email:'',
      phoneCountry:'US', phone:'',
      addressLine1:'', addressLine2:'',
      country:'', city:'', state:'', postalCode:'',
    };
  }

  function authorFromWriter(w) {
    const parts = (w?.name || '').trim().split(/\s+/);
    const last = parts.length > 1 ? parts.pop() : '';
    const first = parts.shift() || '';
    const middle = parts.join(' ');
    const role = (w?.role || '').toLowerCase();
    const contributed = {
      lyrics: role.includes('author') || role.includes('lyric'),
      music: role.includes('composer') || role.includes('music'),
      arrangement: role.includes('arrang'),
      text: false,
    };
    return {
      id: 'au_' + Math.random().toString(36).slice(2,9),
      writerId: w?._id || w?.name || null, // sync key
      synced: true,
      type: contributed.lyrics && contributed.music ? 'Author of Music & Lyrics'
            : contributed.lyrics ? 'Lyricist / Author of Text'
            : 'Composer (Music)',
      workForHire: !!w?.workForHire,
      firstName: first, middleName: middle, lastName: last,
      citizenship: '', domicile: '',
      yearOfBirth: '', yearOfDeath: '',
      anonymous: false, pseudonymous: false,
      contributed,
      contributedOther: '',
    };
  }

  function defaultClaimant() {
    return {
      id: 'cl_' + Math.random().toString(36).slice(2,9),
      type: 'Author',
      isOrganization: true,
      firstName:'', middleName:'', lastName:'',
      organization:'Pluralis Music',
      addressLine1:'1290 Avenue of the Americas',
      addressLine2:'Suite 1700',
      city:'New York', state:'NY', postalCode:'10104', country:'United States',
      transferStatement:'',
    };
  }

  // ── Section sub-nav ────────────────────────────────────────────────
  const SECTIONS = [
    { k:'copyright',  l:'Copyright Information' },
    { k:'publication',l:'Publication' },
    { k:'authors',    l:'Authors' },
    { k:'claimants',  l:'Claimants' },
    { k:'limitation', l:'Limitation of Claim' },
    { k:'permissions',l:'Rights & Permissions' },
    { k:'correspondent', l:'Correspondent' },
    { k:'mail',       l:'Mail Certificate' },
    { k:'certificate',l:'Certificate & Notes' },
  ];

  // ──────────────────────────────────────────────────────────────────
  // Main component
  // ──────────────────────────────────────────────────────────────────
  function RightsTab({ form, set }) {
    // Lazy-init the rights structure
    const rights = form.rights || { registrations: [newRegistration('US')], activeId: null };
    const regs = rights.registrations.length ? rights.registrations : [newRegistration('US')];
    const activeId = rights.activeId || regs[0].id;
    const active = regs.find(r => r.id === activeId) || regs[0];

    // Auto-seed claimant if registration is empty
    if (active.claimants.length === 0) {
      active.claimants = [defaultClaimant()];
    }
    // Auto-seed authors from writers if empty
    if (active.authors.length === 0 && form.writers?.length) {
      active.authors = form.writers
        .filter(w => w.name && w.name.trim())
        .map(authorFromWriter);
      if (active.authors.length === 0) {
        // No named writers yet — leave empty so the user adds one explicitly
      }
    }

    const setRights = (patch) => set({ rights: { ...rights, ...patch } });
    const setReg = (regId, patch) => setRights({
      registrations: regs.map(r => r.id === regId ? { ...r, ...patch } : r),
    });
    const setActive = (patch) => setReg(active.id, patch);

    const addRegistration = (jurisdiction) => {
      const r = newRegistration(jurisdiction);
      r.claimants = [defaultClaimant()];
      r.authors = (form.writers || [])
        .filter(w => w.name && w.name.trim())
        .map(authorFromWriter);
      setRights({
        registrations: [...regs, r],
        activeId: r.id,
      });
    };
    const removeRegistration = (regId) => {
      const remaining = regs.filter(r => r.id !== regId);
      setRights({
        registrations: remaining.length ? remaining : [newRegistration('US')],
        activeId: remaining[0]?.id || null,
      });
    };
    const switchRegistration = (regId) => setRights({ activeId: regId });

    return (
      <div style={{display:'grid', gridTemplateColumns:'200px 1fr', height:'58vh', borderTop:'1px solid var(--rule-soft)'}}>
        {/* Side nav */}
        <SideNav
          regs={regs}
          activeId={active.id}
          onSwitch={switchRegistration}
          onAdd={addRegistration}
          onRemove={removeRegistration}
        />

        {/* Scrollable body */}
        <div style={{overflowY:'auto', padding:'18px 22px 80px', background:'var(--bg)'}}>
          <RegistrationHeader reg={active} setReg={setActive} onRemove={()=>removeRegistration(active.id)} canRemove={regs.length>1}/>

          {/* Helper note — clarifies these fields aren't required to register the song */}
          <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',padding:'10px 12px',background:'var(--bg-2)',border:'1px solid var(--rule-soft)',marginBottom:18,lineHeight:1.55,display:'flex',gap:10,alignItems:'flex-start'}}>
            <span style={{color:'var(--ink-2)',fontSize:13,lineHeight:1}}>ⓘ</span>
            <span>
              <strong style={{color:'var(--ink-2)',fontWeight:600}}>Optional — fill in over time.</strong> None of these fields are required to register the work. Open a section to add detail when you're ready to file with the copyright office.
            </span>
          </div>

          <Section id="copyright" title="Copyright Information" icon="⚖" defaultOpen={true}>
            <CopyrightInfo reg={active} setReg={setActive}/>
          </Section>
          <Section id="publication" title="Publication Information" icon="●">
            <PublicationInfo reg={active} setReg={setActive}/>
          </Section>
          <Section id="authors" title="Authors" icon="✎" right={
            <button onClick={()=>{
              const fromWriters = (form.writers||[])
                .filter(w => w.name && w.name.trim())
                .map(authorFromWriter);
              if (!fromWriters.length) return;
              // Merge — keep manually-added (synced=false) authors, replace synced ones
              const manual = (active.authors||[]).filter(a => !a.synced);
              setActive({ authors:[...fromWriters, ...manual] });
            }}
              className="ff-mono upper" style={{padding:'4px 8px',fontSize:9,letterSpacing:'.08em',background:'transparent',border:'1px solid var(--rule)',color:'var(--ink-2)',cursor:'pointer'}}>
              ↻ Sync from Writers
            </button>
          }>
            <AuthorsSection reg={active} setReg={setActive}/>
          </Section>
          <Section id="claimants" title="Claimants" icon="◆">
            <ClaimantsSection reg={active} setReg={setActive}/>
          </Section>
          <Section id="limitation" title="Limitation of Claim" icon="–">
            <LimitationSection reg={active} setReg={setActive}/>
          </Section>
          <Section id="permissions" title="Rights & Permissions Contact" icon="☎">
            <ContactBlock value={active.rightsContact} onChange={v=>setActive({rightsContact:v})} hint="Contact for copyright management information or permission to use." showSearchAddress/>
          </Section>
          <Section id="correspondent" title="Correspondent" icon="✉">
            <ContactBlock value={active.correspondent} onChange={v=>setActive({correspondent:v})} hint="Required by USCO. The person USCO will contact with questions." showSearchAddress emailRequired/>
          </Section>
          <Section id="mail" title="Mail Certificate" icon="✦">
            <ContactBlock value={active.mailCertificate} onChange={v=>setActive({mailCertificate:v})} hint="Where the registration certificate should be mailed." mailVariant showSearchAddress/>
          </Section>
          <Section id="certificate" title="Certificate & Notes" icon="📄">
            <CertificateAndNotes reg={active} setReg={setActive}/>
          </Section>
        </div>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Side nav with registrations list
  // ──────────────────────────────────────────────────────────────────
  function SideNav({ regs, activeId, onSwitch, onAdd, onRemove }) {
    const [adding, setAdding] = useState(false);

    return (
      <div style={{borderRight:'1px solid var(--rule)', background:'var(--bg-2)', overflowY:'auto', padding:'14px 0'}}>
        <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',padding:'0 14px 4px'}}>
          REGISTRATIONS · {regs.length}
        </div>
        <div className="ff-mono" style={{fontSize:9,color:'var(--ink-3)',padding:'0 14px 10px',lineHeight:1.5,opacity:.75}}>
          copyright_registrations<br/>
          + authors / claimants<br/>
          + _us (US filings)
        </div>
        {(() => { const _juris = getJurisdictions(); const _stat = getRegStatus(); return regs.map(r => {
          const j = _juris.find(x=>x.v===r.jurisdiction);
          const st = _stat.find(s=>s.v===r.status);
          const isActive = r.id === activeId;
          return (
            <button key={r.id} onClick={()=>onSwitch(r.id)}
              style={{
                display:'block', width:'100%', textAlign:'left',
                padding:'10px 14px',
                background: isActive ? 'var(--bg)' : 'transparent',
                border:0,
                borderLeft: isActive ? '3px solid var(--ink)' : '3px solid transparent',
                cursor:'pointer',
                marginBottom:2,
              }}>
              <div className="ff-mono upper" style={{fontSize:10,letterSpacing:'.06em',color: isActive?'var(--ink)':'var(--ink-2)',fontWeight: isActive?600:400}}>
                {(j?.l || r.jurisdiction).split(' · ')[1] || j?.l || r.jurisdiction}
              </div>
              <div className="ff-mono" style={{fontSize:9,color:'var(--ink-3)',marginTop:3,display:'flex',alignItems:'center',gap:6}}>
                <span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:st?.tone||'#999'}}/>
                {st?.l || r.status}
                {r.registrationNumber && <span style={{marginLeft:'auto',color:'var(--ink-2)'}}>· {r.registrationNumber}</span>}
              </div>
            </button>
          );
        }); })()}

        {/* Add jurisdiction */}
        {adding ? (
          <div style={{padding:'8px 14px'}}>
            <select autoFocus
              onChange={e=>{ if(e.target.value){ onAdd(e.target.value); setAdding(false); } }}
              onBlur={()=>setAdding(false)}
              defaultValue=""
              className="ff-mono"
              style={{width:'100%',padding:'6px 8px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,color:'var(--ink)'}}>
              <option value="">— select jurisdiction —</option>
              {getJurisdictions().filter(j=>!regs.find(r=>r.jurisdiction===j.v && j.v!=='OTHER')).map(j=>(
                <option key={j.v} value={j.v}>{j.l}</option>
              ))}
            </select>
          </div>
        ) : (
          <button onClick={()=>setAdding(true)} className="ff-mono upper"
            style={{display:'block',width:'100%',textAlign:'left',padding:'10px 14px',marginTop:6,background:'transparent',border:0,cursor:'pointer',fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>
            + ADD JURISDICTION
          </button>
        )}
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Header strip per registration — jurisdiction + status switcher
  // ──────────────────────────────────────────────────────────────────
  function RegistrationHeader({ reg, setReg, onRemove, canRemove }) {
    const _stat = getRegStatus();
    const _juris = getJurisdictions();
    const st = _stat.find(s=>s.v===reg.status);
    return (
      <div style={{display:'flex',alignItems:'center',gap:14,padding:'4px 0 16px',borderBottom:'1px solid var(--rule)',marginBottom:18}}>
        <div style={{flex:1}}>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:4}}>JURISDICTION</div>
          <div className="ff-display" style={{fontSize:18,fontWeight:600,letterSpacing:'-0.01em'}}>
            {_juris.find(j=>j.v===reg.jurisdiction)?.l || reg.jurisdiction}
          </div>
        </div>
        <div>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:4}}>STATUS</div>
          <select value={reg.status} onChange={e=>setReg({status:e.target.value})}
            className="ff-mono" style={{padding:'6px 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:11,color:st?.tone||'var(--ink)',fontWeight:600}}>
            {_stat.map(s=><option key={s.v} value={s.v}>{s.l}</option>)}
          </select>
        </div>
        {canRemove && (
          <button onClick={onRemove} title="Remove registration"
            style={{padding:'8px 10px',background:'transparent',border:'1px solid var(--rule)',cursor:'pointer',color:'var(--ink-3)',fontSize:11}}>
            🗑
          </button>
        )}
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section wrapper
  // ──────────────────────────────────────────────────────────────────
  function Section({ id, title, icon, right, children, defaultOpen=false }) {
    const [open, setOpen] = useState(defaultOpen);
    return (
      <section id={id} style={{marginBottom:18,border:'1px solid var(--rule)',background:'var(--bg-2)'}}>
        <header onClick={()=>setOpen(o=>!o)}
          style={{display:'flex',alignItems:'center',gap:10,padding:'12px 16px',cursor:'pointer',borderBottom: open ? '1px solid var(--rule)' : '0',background:'var(--bg-2)'}}>
          <span style={{fontSize:13,color:'var(--ink-3)',width:16,textAlign:'center'}}>{icon}</span>
          <div className="ff-display" style={{fontSize:14,fontWeight:600,flex:1,letterSpacing:'-0.01em'}}>{title}</div>
          {right && <div onClick={e=>e.stopPropagation()}>{right}</div>}
          <span style={{fontSize:14,color:'var(--ink-3)',transform: open ? 'rotate(90deg)':'rotate(0deg)',transition:'transform .15s'}}>›</span>
        </header>
        {open && <div style={{padding:'16px'}}>{children}</div>}
      </section>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Copyright information
  // ──────────────────────────────────────────────────────────────────
  function CopyrightInfo({ reg, setReg }) {
    return (
      <div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <Field label="Jurisdiction" required>
            <Select value={reg.jurisdiction} onChange={v=>setReg({jurisdiction:v})}>
              {getJurisdictions().map(j=><option key={j.v} value={j.v}>{j.l}</option>)}
            </Select>
          </Field>
          <Field label="Copyright Type" required>
            <Select value={reg.copyrightType} onChange={v=>setReg({copyrightType:v})}>
              {getCopyrightTypes().map(t=><option key={t} value={t}>{t}</option>)}
            </Select>
          </Field>
          <Field label="Local Registration #" hint="Assigned by local authority">
            <Inp value={reg.localRegNum} onChange={v=>setReg({localRegNum:v})} placeholder="—"/>
          </Field>
          <Field label="Title Type">
            <Select value={reg.titleType} onChange={v=>setReg({titleType:v})}>
              {getTitleTypes().map(t=><option key={t} value={t}>{t}</option>)}
            </Select>
          </Field>
          <Field label="Copyright Date">
            <Inp type="date" value={reg.copyrightDate} onChange={v=>setReg({copyrightDate:v})}/>
          </Field>
          <Field label="Registration Number" hint={reg.jurisdiction==='US' ? 'Assigned by USCO after registration · e.g. PA0001234567 / SR0001234567' : 'Assigned after registration'}>
            <Inp mono value={reg.registrationNumber} onChange={v=>setReg({registrationNumber:v})} placeholder={reg.jurisdiction==='US'?'PA0001234567':'—'}/>
          </Field>
          {reg.jurisdiction==='US' && (
            <Field label="eCO Service Number" hint="U.S. Copyright Office only">
              <Inp mono value={reg.ecoServiceNumber} onChange={v=>setReg({ecoServiceNumber:v})} placeholder="1-1234567890"/>
            </Field>
          )}
        </div>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Publication information
  // ──────────────────────────────────────────────────────────────────
  function PublicationInfo({ reg, setReg }) {
    return (
      <div>
        <label style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:13,marginBottom:14,cursor:'pointer'}}>
          <input type="checkbox" checked={reg.published} onChange={e=>setReg({published:e.target.checked})}/>
          <span>Published</span>
        </label>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <Field label="Year of Completion">
            <Inp value={reg.yearOfCompletion} onChange={v=>setReg({yearOfCompletion:v})} placeholder="YYYY"/>
          </Field>
          <Field label="Standard Identifier Type">
            <Select value={reg.stdIdType} onChange={v=>setReg({stdIdType:v})}>
              {STD_ID_TYPES.map(t=><option key={t} value={t}>{t}</option>)}
            </Select>
          </Field>
          <Field label="Identifier Value">
            <Inp mono value={reg.stdIdValue} onChange={v=>setReg({stdIdValue:v})} placeholder={reg.stdIdType==='ISWC'?'T-000.000.000-0':''}/>
          </Field>
          <Field label="Identifier Date">
            <Inp type="date" value={reg.stdIdDate} onChange={v=>setReg({stdIdDate:v})}/>
          </Field>
        </div>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Authors (repeating)
  // ──────────────────────────────────────────────────────────────────
  function AuthorsSection({ reg, setReg }) {
    const setAuthor = (id, patch) => setReg({ authors: reg.authors.map(a=>a.id===id?{...a,...patch}:a) });
    const removeAuthor = (id) => setReg({ authors: reg.authors.filter(a=>a.id!==id) });
    const addAuthor = () => setReg({ authors: [...reg.authors, {
      id: 'au_'+Math.random().toString(36).slice(2,9),
      synced: false,
      type: 'Composer (Music)',
      workForHire: false,
      firstName:'', middleName:'', lastName:'',
      citizenship:'', domicile:'', yearOfBirth:'', yearOfDeath:'',
      anonymous:false, pseudonymous:false,
      contributed:{lyrics:false,music:false,arrangement:false,text:false},
      contributedOther:'',
    }]});

    return (
      <div>
        {reg.authors.length === 0 && (
          <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',padding:'12px 0',fontStyle:'italic'}}>
            No authors yet. Add manually or click "Sync from Writers" above.
          </div>
        )}
        {reg.authors.map((a, i) => (
          <PersonCard key={a.id} index={i} onRemove={()=>removeAuthor(a.id)} variant="author" badge={a.synced ? 'SYNCED FROM WRITERS' : null}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 200px',gap:14,alignItems:'end'}}>
              <Field label="Author Type">
                <Select value={a.type} onChange={v=>setAuthor(a.id,{type:v, synced:false})}>
                  {AUTHOR_TYPES.map(t=><option key={t} value={t}>{t}</option>)}
                </Select>
              </Field>
              <label style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:13,paddingBottom:18,cursor:'pointer'}}>
                <input type="checkbox" checked={a.workForHire} onChange={e=>setAuthor(a.id,{workForHire:e.target.checked, synced:false})}/>
                <span>Work for Hire</span>
              </label>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
              <Field label="First Name">
                <Inp value={a.firstName} onChange={v=>setAuthor(a.id,{firstName:v, synced:false})} placeholder="First Name"/>
              </Field>
              <Field label="Middle Name">
                <Inp value={a.middleName} onChange={v=>setAuthor(a.id,{middleName:v, synced:false})} placeholder="Middle Name"/>
              </Field>
              <Field label="Last Name">
                <Inp value={a.lastName} onChange={v=>setAuthor(a.id,{lastName:v, synced:false})} placeholder="Last Name"/>
              </Field>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:14}}>
              <Field label="Citizenship">
                <window.CountrySelect value={a.citizenship} onChange={v=>setAuthor(a.id,{citizenship:v, synced:false})}
                  style={{width:'100%',height:32,padding:'0 24px 0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box',appearance:'none',WebkitAppearance:'none'}}/>
              </Field>
              <Field label="Domicile">
                <window.CountrySelect value={a.domicile} onChange={v=>setAuthor(a.id,{domicile:v, synced:false})}
                  style={{width:'100%',height:32,padding:'0 24px 0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box',appearance:'none',WebkitAppearance:'none'}}/>
              </Field>
              <Field label="Year of Birth">
                <Inp value={a.yearOfBirth} onChange={v=>setAuthor(a.id,{yearOfBirth:v, synced:false})} placeholder="YYYY"/>
              </Field>
              <Field label="Year of Death">
                <Inp value={a.yearOfDeath} onChange={v=>setAuthor(a.id,{yearOfDeath:v, synced:false})} placeholder="YYYY"/>
              </Field>
            </div>
            <div style={{display:'flex',gap:18,marginTop:6,marginBottom:8}}>
              <label style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:12,cursor:'pointer'}}>
                <input type="checkbox" checked={a.anonymous} onChange={e=>setAuthor(a.id,{anonymous:e.target.checked, synced:false})}/>
                <span>Anonymous</span>
              </label>
              <label style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:12,cursor:'pointer'}}>
                <input type="checkbox" checked={a.pseudonymous} onChange={e=>setAuthor(a.id,{pseudonymous:e.target.checked, synced:false})}/>
                <span>Pseudonymous</span>
              </label>
            </div>
            <Field label="Contributed">
              <div style={{display:'flex',gap:14,alignItems:'center',flexWrap:'wrap'}}>
                {[
                  {k:'lyrics',l:'Lyrics'},
                  {k:'music',l:'Music'},
                  {k:'arrangement',l:'Musical Arrangement'},
                  {k:'text',l:'Text'},
                ].map(opt=>(
                  <label key={opt.k} style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:12,cursor:'pointer'}}>
                    <input type="checkbox" checked={!!a.contributed[opt.k]}
                      onChange={e=>setAuthor(a.id,{contributed:{...a.contributed,[opt.k]:e.target.checked}, synced:false})}/>
                    <span>{opt.l}</span>
                  </label>
                ))}
                <input value={a.contributedOther} onChange={e=>setAuthor(a.id,{contributedOther:e.target.value, synced:false})}
                  placeholder="Other (describe)..." style={{flex:1,minWidth:140,height:32,padding:'0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:12,boxSizing:'border-box'}}/>
              </div>
            </Field>
          </PersonCard>
        ))}
        <button onClick={addAuthor} className="ff-mono upper"
          style={{padding:'8px 14px',fontSize:10,letterSpacing:'.08em',background:'transparent',border:'1px dashed var(--rule)',color:'var(--ink-2)',cursor:'pointer',marginTop:8}}>
          + ADD AUTHOR
        </button>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Claimants
  // ──────────────────────────────────────────────────────────────────
  function ClaimantsSection({ reg, setReg }) {
    const setClaimant = (id, patch) => setReg({ claimants: reg.claimants.map(c=>c.id===id?{...c,...patch}:c) });
    const removeClaimant = (id) => setReg({ claimants: reg.claimants.filter(c=>c.id!==id) });
    const addClaimant = () => setReg({ claimants:[...reg.claimants, {
      id:'cl_'+Math.random().toString(36).slice(2,9),
      type:'Author', isOrganization:false,
      firstName:'',middleName:'',lastName:'',
      organization:'',
      addressLine1:'',addressLine2:'',city:'',state:'',postalCode:'',country:'United States',
      transferStatement:'',
    }]});

    return (
      <div>
        {reg.claimants.map((c,i)=>(
          <PersonCard key={c.id} index={i} onRemove={()=>removeClaimant(c.id)} variant="claimant"
            badge={c.organization==='Pluralis Music' ? 'PUBLISHER · DEFAULT' : null}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 200px',gap:14,alignItems:'end',marginBottom:8}}>
              <Field label="Claimant Type">
                <Select value={c.type} onChange={v=>setClaimant(c.id,{type:v})}>
                  {CLAIMANT_TYPES.map(t=><option key={t} value={t}>{t}</option>)}
                </Select>
              </Field>
              <label style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:13,paddingBottom:18,cursor:'pointer'}}>
                <input type="checkbox" checked={c.isOrganization} onChange={e=>setClaimant(c.id,{isOrganization:e.target.checked})}/>
                <span>Organization</span>
              </label>
            </div>
            {c.isOrganization ? (
              <Field label="Organization Name">
                <Inp value={c.organization} onChange={v=>setClaimant(c.id,{organization:v})} placeholder="Organization / publisher name"/>
              </Field>
            ) : (
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
                <Field label="First Name">
                  <Inp value={c.firstName} onChange={v=>setClaimant(c.id,{firstName:v})} placeholder="First Name"/>
                </Field>
                <Field label="Middle Name">
                  <Inp value={c.middleName} onChange={v=>setClaimant(c.id,{middleName:v})} placeholder="Middle Name"/>
                </Field>
                <Field label="Last Name">
                  <Inp value={c.lastName} onChange={v=>setClaimant(c.id,{lastName:v})} placeholder="Last Name"/>
                </Field>
              </div>
            )}
            <div style={{marginBottom:12}}>
              <div className="ff-mono upper" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.1em',marginBottom:6}}>Address</div>
              <window.AddressBlock
                value={{
                  country_iso: c.countryIso || '',
                  line1: c.addressLine1 || '',
                  line2: c.addressLine2 || '',
                  city:  c.city || '',
                  state: c.state || '',
                  postal_code: c.postalCode || '',
                }}
                onChange={(next) => {
                  const ts = (window.REF && window.REF.ready && window.REF.raw.territories) || [];
                  const ctry = next.country_iso ? ts.find(t => t.iso_alpha_2 === next.country_iso) : null;
                  setClaimant(c.id, {
                    countryIso: next.country_iso || '',
                    country: ctry ? ctry.common_name : (c.country || ''),
                    addressLine1: next.line1 || '',
                    addressLine2: next.line2 || '',
                    city:  next.city || '',
                    state: next.state || '',
                    postalCode: next.postal_code || '',
                  });
                }}
                style={{width:'100%',height:32,padding:'0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box'}}/>
            </div>
            <Field label="Transfer Statement (if not an author)">
              <Select value={c.transferStatement} onChange={v=>setClaimant(c.id,{transferStatement:v})}>
                <option value="">Select (optional)</option>
                {getTransferStatements().map(t=><option key={t} value={t}>{t}</option>)}
              </Select>
            </Field>
          </PersonCard>
        ))}
        <button onClick={addClaimant} className="ff-mono upper"
          style={{padding:'8px 14px',fontSize:10,letterSpacing:'.08em',background:'transparent',border:'1px dashed var(--rule)',color:'var(--ink-2)',cursor:'pointer',marginTop:8}}>
          + ADD CLAIMANT
        </button>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Limitation of claim
  // ──────────────────────────────────────────────────────────────────
  function LimitationSection({ reg, setReg }) {
    const setExc = (patch) => setReg({ materialExcluded: { ...reg.materialExcluded, ...patch }});
    const setNew = (patch) => setReg({ newMaterial: { ...reg.newMaterial, ...patch }});
    const setPrev = (i, patch) => setReg({ previousRegistrations: reg.previousRegistrations.map((p,j)=>j===i?{...p,...patch}:p) });

    const ExcRow = ({obj, set: doSet, hint}) => (
      <div style={{marginBottom:14}}>
        <div style={{display:'flex',gap:18,alignItems:'center',flexWrap:'wrap',marginBottom:8}}>
          {[
            {k:'lyrics',l:'Lyrics'},
            {k:'music',l:'Music'},
            {k:'arrangement',l:'Musical Arrangement'},
            {k:'text',l:'Text'},
          ].map(opt=>(
            <label key={opt.k} style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:13,cursor:'pointer'}}>
              <input type="radio" checked={!!obj[opt.k]}
                onChange={()=>{
                  // Radio-style: only one excluded type at a time (matches USCO form)
                  doSet({lyrics:false,music:false,arrangement:false,text:false,[opt.k]:true});
                }}/>
              <span>{opt.l}</span>
            </label>
          ))}
        </div>
        <Inp value={obj.other} onChange={v=>doSet({other:v})} placeholder={hint}/>
      </div>
    );

    return (
      <div>
        <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginBottom:14,lineHeight:1.5}}>
          Declare material excluded, previously registered content, and new material added.
        </div>

        <Field label="Material Excluded">
          <ExcRow obj={reg.materialExcluded} set={setExc} hint="Other excluded material..."/>
        </Field>

        <Field label="Previous Registration">
          <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 2fr 1fr',gap:10}}>
            <Inp value={reg.previousRegistrations[0]?.number||''} onChange={v=>setPrev(0,{number:v})} placeholder="Reg #1 Number" mono/>
            <Inp value={reg.previousRegistrations[0]?.year||''} onChange={v=>setPrev(0,{year:v})} placeholder="YYYY"/>
            <Inp value={reg.previousRegistrations[1]?.number||''} onChange={v=>setPrev(1,{number:v})} placeholder="Reg #2 Number" mono/>
            <Inp value={reg.previousRegistrations[1]?.year||''} onChange={v=>setPrev(1,{year:v})} placeholder="YYYY"/>
          </div>
        </Field>

        <Field label="New Material Included">
          <ExcRow obj={reg.newMaterial} set={setNew} hint="Describe new material..."/>
        </Field>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Section: Certificate & notes (with PDF upload)
  // ──────────────────────────────────────────────────────────────────
  function CertificateAndNotes({ reg, setReg }) {
    const fileRef = useRef(null);
    const [drag, setDrag] = useState(false);

    const handleFiles = (files) => {
      const file = files?.[0];
      if (!file) return;
      if (!file.type.includes('pdf') && !file.name.toLowerCase().endsWith('.pdf')) {
        window.dispatchEvent(new CustomEvent('astro-toast', {detail:{msg:'Please upload a PDF file', tone:'warn'}}));
        return;
      }
      const url = URL.createObjectURL(file);
      setReg({
        certificatePdf: {
          name: file.name,
          size: file.size,
          url,
          uploadedAt: new Date().toISOString(),
        },
      });
    };

    const removeFile = () => {
      if (reg.certificatePdf?.url) {
        try { URL.revokeObjectURL(reg.certificatePdf.url); } catch(_){}
      }
      setReg({ certificatePdf: null });
    };

    const formatBytes = (b) => {
      if (!b) return '0 B';
      if (b < 1024) return b + ' B';
      if (b < 1024*1024) return (b/1024).toFixed(1) + ' KB';
      return (b/1024/1024).toFixed(2) + ' MB';
    };

    return (
      <div>
        <Field label="Certificate PDF" hint="Upload the registration certificate PDF received from USCO">
          {reg.certificatePdf ? (
            <div style={{display:'grid',gridTemplateColumns:'80px 1fr auto',gap:14,padding:14,border:'1px solid var(--rule)',background:'var(--bg)',alignItems:'center'}}>
              {/* PDF thumbnail preview */}
              <div style={{width:80,height:104,background:'#fafafa',border:'1px solid var(--rule)',position:'relative',overflow:'hidden'}}>
                <object data={reg.certificatePdf.url} type="application/pdf"
                  style={{width:240,height:312,transform:'scale(.333)',transformOrigin:'top left',pointerEvents:'none',position:'absolute',top:0,left:0}}>
                  <div style={{display:'flex',alignItems:'center',justifyContent:'center',width:'100%',height:'100%',fontSize:24,color:'var(--ink-3)'}}>📄</div>
                </object>
              </div>
              <div>
                <div style={{fontWeight:600,fontSize:13,marginBottom:3,wordBreak:'break-all'}}>{reg.certificatePdf.name}</div>
                <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)'}}>{formatBytes(reg.certificatePdf.size)} · uploaded {new Date(reg.certificatePdf.uploadedAt).toLocaleDateString()}</div>
                <div style={{display:'flex',gap:8,marginTop:10}}>
                  <a href={reg.certificatePdf.url} target="_blank" rel="noopener noreferrer" className="ff-mono upper"
                    style={{padding:'5px 10px',fontSize:10,letterSpacing:'.08em',background:'var(--ink)',color:'var(--bg)',textDecoration:'none'}}>
                    OPEN
                  </a>
                  <button onClick={()=>fileRef.current?.click()} className="ff-mono upper"
                    style={{padding:'5px 10px',fontSize:10,letterSpacing:'.08em',background:'transparent',border:'1px solid var(--rule)',color:'var(--ink-2)',cursor:'pointer'}}>
                    REPLACE
                  </button>
                  <button onClick={removeFile} className="ff-mono upper"
                    style={{padding:'5px 10px',fontSize:10,letterSpacing:'.08em',background:'transparent',border:'1px solid var(--rule)',color:'var(--ink-3)',cursor:'pointer'}}>
                    REMOVE
                  </button>
                </div>
              </div>
            </div>
          ) : (
            <div
              onClick={()=>fileRef.current?.click()}
              onDragOver={e=>{e.preventDefault(); setDrag(true);}}
              onDragLeave={()=>setDrag(false)}
              onDrop={e=>{e.preventDefault(); setDrag(false); handleFiles(e.dataTransfer.files);}}
              style={{
                padding:'30px 20px',
                border: drag ? '2px dashed var(--ink)' : '2px dashed var(--rule)',
                background: drag ? 'var(--bg-2)' : 'var(--bg)',
                cursor:'pointer',
                textAlign:'center',
                transition:'all .15s',
              }}>
              <div style={{fontSize:28,marginBottom:8,color:'var(--ink-3)'}}>📄</div>
              <div style={{fontSize:13,fontWeight:600,marginBottom:4}}>Drop PDF here or click to browse</div>
              <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)'}}>USCO registration certificate · max 25 MB</div>
            </div>
          )}
          <input ref={fileRef} type="file" accept="application/pdf,.pdf" hidden
            onChange={e=>{handleFiles(e.target.files); e.target.value='';}}/>
        </Field>

        <Field label="Notes">
          <textarea value={reg.notes} onChange={e=>setReg({notes:e.target.value})} rows={5}
            placeholder="Internal notes about this registration..."
            style={{width:'100%',padding:10,background:'var(--bg)',border:'1px solid var(--rule)',fontSize:12,resize:'vertical',color:'var(--ink)',fontFamily:'inherit',lineHeight:1.5}}/>
        </Field>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Reusable contact block (rights / correspondent / mail certificate)
  // ──────────────────────────────────────────────────────────────────
  function ContactBlock({ value, onChange, hint, mailVariant, emailRequired, showSearchAddress }) {
    const v = value || emptyContact();
    const set = (patch) => onChange({ ...v, ...patch });

    return (
      <div>
        {hint && (
          <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',marginBottom:12,lineHeight:1.5}}>
            {hint}
          </div>
        )}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <Field label="First Name">
            <Inp value={v.firstName} onChange={x=>set({firstName:x})} placeholder="First Name"/>
          </Field>
          <Field label="Last Name">
            <Inp value={v.lastName} onChange={x=>set({lastName:x})} placeholder="Last Name"/>
          </Field>
        </div>
        <Field label="Organization">
          <Inp value={v.organization} onChange={x=>set({organization:x})} placeholder="Organization (optional)"/>
        </Field>
        {!mailVariant && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <Field label={emailRequired ? 'Email *' : 'Email'}>
              <window.EmailField value={v.email} onChange={x=>set({email:x})}
                style={{width:'100%',height:32,padding:'0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box'}}/>
            </Field>
            <Field label="Phone">
              <window.PhoneField
                valueObj={{ country_iso: v.phoneCountry || 'US', number: v.phone || '' }}
                onChangeObj={(next) => set({ phoneCountry: next.country_iso, phone: next.number })}
                style={{width:'100%',height:32,padding:'0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box'}}/>
            </Field>
          </div>
        )}
        {showSearchAddress && (
          <Field label={null}>
            <div style={{display:'flex',alignItems:'center',gap:8,padding:'10px 12px',background:'var(--bg)',border:'1px solid var(--rule)',marginBottom:12,cursor:'text'}}>
              <span style={{color:'var(--ink-3)'}}>⌕</span>
              <input placeholder="Search address..." style={{flex:1,border:0,outline:0,background:'transparent',fontSize:13,color:'var(--ink)'}}/>
            </div>
          </Field>
        )}
        <div style={{marginBottom:12}}>
          <div className="ff-mono upper" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.1em',marginBottom:6}}>Address</div>
          <window.AddressBlock
            value={{
              country_iso: v.countryIso || '',
              line1: v.addressLine1 || '',
              line2: v.addressLine2 || '',
              city:  v.city || '',
              state: v.state || '',
              postal_code: v.postalCode || '',
            }}
            onChange={(next) => {
              const ts = (window.REF && window.REF.ready && window.REF.raw.territories) || [];
              const ctry = next.country_iso ? ts.find(t => t.iso_alpha_2 === next.country_iso) : null;
              set({
                countryIso: next.country_iso || '',
                country: ctry ? ctry.common_name : (v.country || ''),
                addressLine1: next.line1 || '',
                addressLine2: next.line2 || '',
                city:  next.city || '',
                state: next.state || '',
                postalCode: next.postal_code || '',
              });
            }}
            style={{width:'100%',height:32,padding:'0 10px',background:'var(--bg)',border:'1px solid var(--rule)',fontSize:13,color:'var(--ink)',outline:'none',boxSizing:'border-box'}}/>
        </div>
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Generic person card wrapper (Author / Claimant)
  // ──────────────────────────────────────────────────────────────────
  function PersonCard({ index, onRemove, variant, badge, children }) {
    return (
      <div style={{padding:14,border:'1px solid var(--rule)',background:'var(--bg)',marginBottom:12}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)'}}>
            {variant === 'author' ? 'AUTHOR' : 'CLAIMANT'} #{index+1}
            {badge && <span style={{marginLeft:10,padding:'1px 6px',background:'var(--ink-5)',color:'var(--ink-2)',fontSize:8,letterSpacing:'.1em'}}>{badge}</span>}
          </div>
          <button onClick={onRemove} className="ff-mono upper"
            style={{padding:'3px 8px',fontSize:9,letterSpacing:'.08em',background:'transparent',border:'1px solid var(--rule)',color:'var(--ink-3)',cursor:'pointer'}}>
            🗑 REMOVE
          </button>
        </div>
        {children}
      </div>
    );
  }

  // ──────────────────────────────────────────────────────────────────
  // Field / Inp / Select primitives
  // ──────────────────────────────────────────────────────────────────
  function Field({ label, hint, required, children }) {
    return (
      <div style={{marginBottom:12}}>
        {label != null && (
          <div style={{display:'flex',alignItems:'center',gap:4,marginBottom:5}}>
            <span style={{fontSize:11,color:'var(--ink-2)',fontWeight:500}}>{label}</span>
            {required && <span style={{color:'#dc2626',fontSize:11}}>*</span>}
          </div>
        )}
        {children}
        {hint && <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:4}}>{hint}</div>}
      </div>
    );
  }

  function Inp({ value, onChange, placeholder, type='text', mono=false }) {
    return (
      <input
        value={value == null ? '' : value}
        onChange={e=>onChange(e.target.value)}
        placeholder={placeholder}
        type={type}
        className={mono?'ff-mono':''}
        style={{
          width:'100%',
          height:32,
          padding:'0 10px',
          background:'var(--bg)',
          border:'1px solid var(--rule)',
          fontSize:13,
          fontFamily: mono ? 'ui-monospace,monospace' : 'inherit',
          color:'var(--ink)',
          outline:'none',
          boxSizing:'border-box',
        }}
        onFocus={e=>e.target.style.borderColor='var(--ink)'}
        onBlur={e=>e.target.style.borderColor='var(--rule)'}/>
    );
  }

  function Select({ value, onChange, children }) {
    return (
      <select value={value} onChange={e=>onChange(e.target.value)}
        className="ff-mono"
        style={{
          width:'100%',
          padding:'8px 10px',
          background:'var(--bg)',
          border:'1px solid var(--rule)',
          fontSize:12,
          color:'var(--ink)',
          outline:'none',
        }}>
        {children}
      </select>
    );
  }

  // Expose to the global scope
  window.RightsTab = RightsTab;
  window._rightsHelpers = { newRegistration, defaultClaimant, authorFromWriter };
})();
