/* ============================================================
   devnotes.jsx — панель «Заметки для разработчика» (Claude Code).
   Карта бэкенд-интеграции, сгруппирована по экранам. Пины на экранах
   ссылаются сюда по номеру.
   ============================================================ */
function DevNotesSheet({ open, focus, onClose }){
  const ref = React.useRef(null);
  React.useEffect(()=>{
    if(open && focus && ref.current){
      const el = ref.current.querySelector(`[data-note="${focus}"]`);
      if(el){ el.scrollIntoViewIfNeeded ? el.scrollIntoViewIfNeeded() : el.scrollTop; 
        el.animate?.([{background:'#1f8a4d33'},{background:'transparent'}],{duration:1600}); }
    }
  },[open,focus]);
  if(!open) return null;
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" ref={ref} onClick={e=>e.stopPropagation()} style={{maxHeight:'88%'}}>
        <div className="sheet-grip"/>
        <div style={{display:'flex',alignItems:'center',gap:9,marginBottom:4}}>
          <span style={{color:'#3ddc84'}}><IconCode size={22}/></span>
          <span className="h2" style={{fontSize:19}}>Заметки для разработчика</span>
        </div>
        <div style={{color:'var(--text-sec)',fontSize:13,marginBottom:8}}>
          Карта бэкенд-интеграции. Номера совпадают с пинами на экранах (режим Dev).
        </div>
        {DEV_NOTES.map(grp=>(
          <div key={grp.group} style={{marginTop:18}}>
            <div className="dev-tag">{grp.group}</div>
            <div className="card" style={{padding:'2px 14px'}}>
              {grp.items.map(it=>(
                <div className="dev-note-row" data-note={it.n} key={it.n}>
                  <div className="dev-note-num">{it.n}</div>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:700,fontSize:14.5}}>{it.t}</div>
                    <div style={{color:'var(--text-sec)',fontSize:13,margin:'3px 0 6px',lineHeight:1.45}}>{it.d}</div>
                    <code>{it.code}</code>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div style={{height:10}}/>
      </div>
    </div>
  );
}

Object.assign(window, { DevNotesSheet });