// ── add-edition-modal.jsx ──────────────────────────────────────
// Lightweight "+ NEW EDITION" flow — adds a single Edition to an
// existing Release Group. Triggered by:
//   window.dispatchEvent(new CustomEvent('astro-add-edition', {detail:{groupId}}))
//
// Editions inherit the parent group's title/artist/label/genre/©line — the
// user just chooses the format, territory, release date, retail price,
// edition label, and (for digital) which DSPs to deliver to. Tracklist
// defaults to the parent's first edition; bonus tracks can be added per-edition
// in a follow-up flow (out of scope for this modal).

const { useState: useAeS, useEffect: useAeE } = React;

const _AE_FORMATS = [
  {k:'Digital',  l:'Digital',  hint:'streaming · download'},
  {k:'CD',       l:'CD',       hint:'compact disc'},
  {k:'Vinyl',    l:'Vinyl',    hint:'12" / 7" LP / EP'},
  {k:'Cassette', l:'Cassette', hint:'tape'},
  {k:'DVD',      l:'DVD',      hint:'video'},
];
const _AE_DSPS = ['Spotify','Apple Music','YouTube Music','Amazon','Tidal','Deezer','Pandora','SoundCloud','Anghami','Boomplay','NetEase','QQ Music','Yandex','VK'];

function _AeLbl({ children }) {
  return <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:6,marginTop:2}}>{children}</div>;
}
function _AeInp({ value, onChange, placeholder, type='text', mono=false }) {
  return (
    <input type={type} value={value || ''} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      className={mono?'ff-mono':''}
      style={{width:'100%',padding:'9px 10px',fontSize:13,
        background:'var(--bg)',border:'1px solid var(--rule)',color:'var(--ink)',
        outline:'none',marginBottom:14}}/>
  );
}

function GlobalAddEditionModal() {
  const [open, setOpen] = useAeS(false);
  const [groupId, setGroupId] = useAeS(null);
  const [form, setForm] = useAeS({});

  useAeE(() => {
    const onOpen = (e) => {
      const gid = e.detail?.groupId;
      if (!gid) return;
      const group = (window.RELEASE_GROUPS || []).find(g => g.id === gid);
      const eds = window.editionsOfGroup ? window.editionsOfGroup(gid) : [];
      const firstEd = eds[0] || {};
      const today = new Date().toISOString().slice(0,10);
      const yyyy = String(new Date().getFullYear());
      setGroupId(gid);
      setOpen(true);
      setForm({
        format:        'Vinyl',
        editionLabel:  '',
        upc:           '',
        territory:     'Worldwide',
        date:          today,
        retailPrice:   27.99,
        pLine:         (group ? `℗ ${yyyy} ${group.label}` : firstEd.pLine || ''),
        cLine:         (group ? `© ${yyyy} ${group.label}` : firstEd.cLine || ''),
        bonusTracks:   0,
        dsps:          new Set(_AE_DSPS),
        // copy parent fields for display + creation
        _group:        group,
        _firstEd:      firstEd,
      });
    };
    window.addEventListener('astro-add-edition', onOpen);
    return () => window.removeEventListener('astro-add-edition', onOpen);
  }, []);

  if (!open) return null;
  const close = () => setOpen(false);
  const set = (patch) => setForm(f => ({...f, ...patch}));

  const group = form._group || {};
  const firstEd = form._firstEd || {};
  const isDigital = form.format === 'Digital';
  const valid = !!form.format && !!form.editionLabel && !!form.upc && !!form.date;

  const finish = () => {
    if (!valid) return;
    const id = 'rl_new_' + Date.now().toString(36);
    const dspList = isDigital ? Array.from(form.dsps || []) : [];
    const ed = {
      id, groupId,
      editionLabel: form.editionLabel,
      upc: form.upc,
      title: group.title || firstEd.title,
      artist: group.artist || firstEd.artist,
      label: group.label || firstEd.label,
      type: group.type || firstEd.type || 'Album',
      format: form.format,
      territory: form.territory || 'Worldwide',
      tracks: (firstEd.tracks || 0) + (parseInt(form.bonusTracks,10) || 0),
      bonusTracks: parseInt(form.bonusTracks,10) || 0,
      date: form.date,
      retailPrice: parseFloat(form.retailPrice) || 0,
      pLine: form.pLine,
      cLine: form.cLine,
      status: 'live',
      art: group.art || firstEd.art,
      ddex: 'queued',
      dsps: isDigital ? dspList.length : 0,
      dspList,
    };
    if (window.RELEASES) window.RELEASES.unshift(ed);
    if (window.toast) window.toast(`Edition "${form.editionLabel}" added to ${group.title || firstEd.title}`, 'ok');
    close();
    // Re-open the release drawer so the new edition is visible immediately
    if (firstEd.id) {
      setTimeout(() => window.dispatchEvent(new CustomEvent('astro-open-release', {detail:{id:id}})), 50);
    }
  };

  const toggleDsp = (d) => {
    const next = new Set(form.dsps);
    next.has(d) ? next.delete(d) : next.add(d);
    set({dsps: next});
  };

  return (
    <>
      <div onClick={close} style={{position:'fixed',inset:0,background:'rgba(0,0,0,.42)',zIndex:80}}/>
      <div role="dialog" aria-modal="true" aria-label="Add edition" style={{
        position:'fixed',top:'50%',left:'50%',transform:'translate(-50%,-50%)',
        width:'min(640px,96vw)',maxHeight:'90vh',display:'flex',flexDirection:'column',
        background:'var(--bg)',border:'1px solid var(--rule)',zIndex:81,
        boxShadow:'0 30px 80px rgba(0,0,0,.34)'}}>

        {/* Header */}
        <div style={{flex:'0 0 auto',padding:'18px 24px',borderBottom:'1px solid var(--rule)',
          display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:14,
          background:`linear-gradient(90deg, ${group.art||'#f4d34a'} 0%, ${group.art||'#f4d34a'} 6px, var(--bg) 6px)`}}>
          <div style={{minWidth:0,flex:1}}>
            <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.14em',color:'var(--ink-3)',marginBottom:4}}>NEW EDITION</div>
            <div className="ff-display" style={{fontSize:22,fontWeight:700,letterSpacing:'-0.02em',lineHeight:1.05,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
              {group.title || firstEd.title || 'Release'}
            </div>
            <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:4}}>
              {group.artist || firstEd.artist} · {group.type || firstEd.type} · {firstEd.tracks || 0} tracks in original
            </div>
          </div>
          <button onClick={close} aria-label="Close"
            style={{background:'transparent',border:0,color:'var(--ink-3)',cursor:'pointer',
              fontSize:18,lineHeight:1,padding:4}}>×</button>
        </div>

        {/* Body */}
        <div style={{flex:1,overflowY:'auto',padding:'20px 24px'}}>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:14}}>
            EDITION FORMAT
          </div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6,marginBottom:18}}>
            {_AE_FORMATS.map(f => {
              const active = form.format === f.k;
              return (
                <button key={f.k} onClick={()=>set({format:f.k, retailPrice: f.k==='Vinyl'?27.99:f.k==='CD'?14.99:f.k==='Digital'?9.99:14.99})}
                  className="ff-mono upper"
                  style={{padding:'8px 12px',fontSize:11,letterSpacing:'.08em',
                    background: active?'var(--ink)':'transparent', color:active?'var(--bg)':'var(--ink)',
                    border:'1px solid '+(active?'var(--ink)':'var(--rule)'),cursor:'pointer',fontWeight:600,
                    display:'flex',flexDirection:'column',alignItems:'flex-start',gap:2,minWidth:110,textAlign:'left'}}>
                  <span>{f.l}</span>
                  <span style={{fontSize:9,letterSpacing:'.06em',opacity:.7,fontWeight:400}}>{f.hint}</span>
                </button>
              );
            })}
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0 16px'}}>
            <div>
              <_AeLbl>Edition label</_AeLbl>
              <_AeInp value={form.editionLabel} onChange={v=>set({editionLabel:v})}
                placeholder="Vinyl LP · Deluxe · Japan Edition · Remaster"/>
            </div>
            <div>
              <_AeLbl>UPC / EAN</_AeLbl>
              <_AeInp value={form.upc} onChange={v=>set({upc:v})} placeholder="13-digit UPC" mono/>
            </div>
            <div>
              <_AeLbl>Release date</_AeLbl>
              <_AeInp value={form.date} onChange={v=>set({date:v})} type="date"/>
            </div>
            <div>
              <_AeLbl>Territory</_AeLbl>
              <_AeInp value={form.territory} onChange={v=>set({territory:v})} placeholder="Worldwide · Japan · EU"/>
            </div>
            <div>
              <_AeLbl>Retail price (USD)</_AeLbl>
              <_AeInp value={form.retailPrice} onChange={v=>set({retailPrice:v})} type="number" mono/>
            </div>
            <div>
              <_AeLbl>Bonus tracks</_AeLbl>
              <_AeInp value={form.bonusTracks} onChange={v=>set({bonusTracks:v})} type="number" mono/>
            </div>
            <div style={{gridColumn:'1 / -1'}}>
              <_AeLbl>℗ line</_AeLbl>
              <_AeInp value={form.pLine} onChange={v=>set({pLine:v})}/>
            </div>
            <div style={{gridColumn:'1 / -1'}}>
              <_AeLbl>© line</_AeLbl>
              <_AeInp value={form.cLine} onChange={v=>set({cLine:v})}/>
            </div>
          </div>

          {isDigital && (
            <div style={{marginTop:14,padding:14,border:'1px solid var(--rule-soft)',background:'var(--bg-2)'}}>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)',marginBottom:10}}>
                DSP DELIVERY · {form.dsps?.size || 0} / {_AE_DSPS.length}
              </div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:'5px 12px'}}>
                {_AE_DSPS.map(d=>{
                  const on = form.dsps?.has(d);
                  return (
                    <button key={d} onClick={()=>toggleDsp(d)}
                      style={{display:'flex',alignItems:'center',gap:8,padding:'5px 0',
                        background:'transparent',border:0,cursor:'pointer',textAlign:'left',
                        color: on ? 'var(--ink)' : 'var(--ink-3)'}}>
                      <span style={{width:14,height:14,border:'1px solid '+(on?'var(--ink)':'var(--rule)'),
                        background:on?'var(--ink)':'transparent',
                        display:'flex',alignItems:'center',justifyContent:'center',color:'var(--bg)',
                        fontSize:10,lineHeight:1}}>{on?'✓':''}</span>
                      <span className="ff-mono" style={{fontSize:11}}>{d}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}
          {!isDigital && (
            <div style={{marginTop:14,padding:14,border:'1px solid var(--rule-soft)',background:'var(--bg-2)'}}>
              <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',lineHeight:1.5}}>
                Physical editions are not delivered to DSPs. Manufacturing &amp;
                distribution are tracked in <span style={{color:'var(--ink)'}}>Operations → Physical</span>.
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{flex:'0 0 auto',padding:'14px 24px',borderTop:'1px solid var(--rule)',
          display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.12em',color:'var(--ink-3)'}}>
            {valid ? 'READY · queued for DDEX delivery' : 'COMPLETE FORMAT, LABEL, UPC + DATE'}
          </span>
          <div style={{display:'flex',gap:6}}>
            <button onClick={close} className="ff-mono upper"
              style={{padding:'8px 14px',fontSize:11,letterSpacing:'.08em',background:'transparent',color:'var(--ink-2)',border:'1px solid var(--rule)',cursor:'pointer'}}>
              CANCEL
            </button>
            <button onClick={finish} disabled={!valid} className="ff-mono upper"
              style={{padding:'8px 14px',fontSize:11,letterSpacing:'.08em',
                background: valid?'var(--ink)':'var(--bg-2)',
                color: valid?'var(--bg)':'var(--ink-4)',
                border:0,cursor:valid?'pointer':'not-allowed',fontWeight:600}}>
              CREATE EDITION →
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { GlobalAddEditionModal });