{# Revision Notes Modal - v3 Compact #}
<style>
#notesModal .modal-body{padding:0;overflow:hidden;user-select:none}
#ncw{width:100%;height:100%;background:#fff;background-image:radial-gradient(#ced4da 1px,transparent 1px);background-size:24px 24px;touch-action:none;cursor:crosshair;position:relative}
.ntb{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;z-index:1060;background:rgba(33,37,41,.92);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tb{width:38px;height:38px;border-radius:50%;border:0;background:0 0;color:rgba(255,255,255,.6);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:.15s}
.tb:hover{background:rgba(255,255,255,.15);color:#fff}.tb.on{background:var(--ap,#0d6efd);color:#fff;box-shadow:0 3px 12px rgba(13,110,253,.4);transform:scale(1.08)}
.tb.sty{background:#198754!important;box-shadow:0 3px 12px rgba(25,135,84,.4)!important}
.sp{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 4px}
.cd{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.15s}.cd.on{border-color:#fff;transform:scale(1.2)}
#rpnl{position:absolute;bottom:16px;right:16px;width:260px;background:#2b3035;border-radius:10px;padding:8px;z-index:1050;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .25s}.rpnl-h{transform:translateY(150%)}
#rpnl img{width:100%;border-radius:6px;border:1px solid #495057}
#dbg{position:absolute;bottom:16px;left:16px;background:rgba(0,0,0,.7);color:#fff;padding:4px 10px;border-radius:16px;font:.8rem monospace;pointer-events:none}
</style>

<div class="modal fade" id="notesModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-fullscreen"><div class="modal-content bg-dark"><div class="modal-body">
<div class="ntb">
 <button class="tb on" data-t="pencil" title="Pencil"><i class="fas fa-pencil-alt"></i></button>
 <button class="tb" data-t="highlighter" title="Highlighter"><i class="fas fa-highlighter"></i></button>
 <button class="tb" data-t="eraser" title="Eraser"><i class="fas fa-eraser"></i></button>
 <div class="sp"></div>
 <div class="d-flex gap-1">
  <div class="cd on" data-c="#212529" style="background:#212529"></div>
  <div class="cd" data-c="#dc3545" style="background:#dc3545"></div>
  <div class="cd" data-c="#0d6efd" style="background:#0d6efd"></div>
 </div>
 <div class="sp"></div>
 <div class="dropdown">
  <button class="tb" data-bs-toggle="dropdown"><i class="fas fa-shapes"></i></button>
  <ul class="dropdown-menu dropdown-menu-dark">
   <li><button class="dropdown-item" data-sh="rect">Rectangle</button></li>
   <li><button class="dropdown-item" data-sh="circle">Circle</button></li>
   <li><button class="dropdown-item" data-sh="arrow">Arrow</button></li>
   <li><button class="dropdown-item" data-sh="text">Text</button></li>
  </ul>
 </div>
 <button class="tb" data-t="select"><i class="fas fa-mouse-pointer"></i></button>
 <div class="sp"></div>
 <button class="tb" id="bsty" title="Stylus Mode"><i class="fas fa-pen-nib"></i></button>
 <div class="sp"></div>
 <button class="tb" id="bundo"><i class="fas fa-undo"></i></button>
 <button class="tb text-success" id="bsave"><i class="fas fa-check"></i></button>
 <button class="tb text-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<div id="ncw"><canvas id="nc"></canvas></div>
<div id="rpnl">
 <div class="d-flex justify-content-between align-items-center mb-1">
  <small class="text-white-50">Reference</small>
  <button class="btn btn-sm btn-link text-white-50 p-0" id="rpnl-hide"><i class="fas fa-chevron-down"></i></button>
 </div>
 <img id="nref" src="">
</div>
<button class="btn btn-dark rounded-circle shadow position-absolute bottom-0 end-0 m-3" id="rpnl-show"><i class="fas fa-image"></i></button>
<div id="dbg">Touch Draw</div>
</div></div></div></div>

<script>
(function(){
const $ = s => document.querySelector(s), $$ = s => document.querySelectorAll(s);
let C, tool='pencil', color='#212529', imgId, hist=[], styMode=false, ptrType='mouse', fingerPan=false;

window.openNotesModal = function(id, ref) {
 imgId = id; $('#nref').src = ref;
 $('#rpnl').classList.remove('rpnl-h');
 const m = new bootstrap.Modal($('#notesModal'));
 m.show();
 $('#notesModal').addEventListener('shown.bs.modal', init, {once:true});
};

function init() {
 C && C.dispose();
 const w = $('#ncw');
 w.addEventListener('pointerdown', e => { ptrType = e.pointerType; }, true);
 C = new fabric.Canvas('nc', {
  width: w.clientWidth, height: w.clientHeight,
  backgroundColor:'#fff', isDrawingMode:true, selection:false,
  preserveObjectStacking:true, perPixelTargetFind:true
 });
 wire(); zoom(); setT('pencil'); load();
 window.onresize = () => { C.setWidth(w.clientWidth); C.setHeight(w.clientHeight); };
}

async function load() {
 try {
  const r = await fetch('/get_note_json/'+imgId);
  if(r.ok){ const d=await r.json(); if(d.success&&d.json_data){
   const j = typeof d.json_data==='string'?JSON.parse(d.json_data):d.json_data;
   C.loadFromJSON(j,()=>{ C.renderAll(); snap(); }); return;
  }}
 } catch(e){}
 snap();
}

function wire() {
 C.on('path:created', o => {
  if((styMode && ptrType!=='pen') || fingerPan){ C.remove(o.path); C.requestRenderAll(); }
 });
 C.on('mouse:down', function(o){
  const e = o.e;
  if(styMode && ptrType==='touch'){
   fingerPan=true; this.isDrawingMode=false; this.selection=false;
   this.isDragging=true; this.lastPosX=e.clientX||0; this.lastPosY=e.clientY||0; return;
  }
  if(styMode && ptrType==='pen' && (tool==='pencil'||tool==='highlighter')) this.isDrawingMode=true;
  if(!styMode && e.touches && e.touches.length>1){ this.isDrawingMode=false; this.isDragging=true; return; }
  if(tool==='eraser'){ this.isDrawingMode=false; this.isErasing=true; eraseAt(e); }
 });
 C.on('mouse:move', function(o){
  if(this.isDragging){
   const e=o.e, v=this.viewportTransform,
    x=e.clientX||(e.touches&&e.touches[0]?.clientX)||this.lastPosX,
    y=e.clientY||(e.touches&&e.touches[0]?.clientY)||this.lastPosY;
   v[4]+=x-this.lastPosX; v[5]+=y-this.lastPosY;
   this.requestRenderAll(); this.lastPosX=x; this.lastPosY=y;
  }
  if(this.isErasing) eraseAt(o.e);
 });
 C.on('mouse:up', function(){
  const wasPan=fingerPan;
  this.isDragging=false; this.isErasing=false; fingerPan=false;
  if((tool==='pencil'||tool==='highlighter')&&!wasPan&&(!styMode||ptrType==='pen')) C.isDrawingMode=true;
  if(styMode&&ptrType==='touch') C.isDrawingMode=false;
  snap();
 });
}

function eraseAt(e){ const t=C.findTarget(e,false); if(t){ C.remove(t); C.requestRenderAll(); }}

function setT(t){
 tool=t;
 $$('.tb[data-t]').forEach(b=>b.classList.toggle('on',b.dataset.t===t));
 C.isDrawingMode=false; C.selection=false; C.defaultCursor='default';
 C.getObjects().forEach(o=>{ o.selectable=false; o.evented=false; });
 if(t==='pencil'||t==='highlighter'){
  C.isDrawingMode=!styMode;
  C.freeDrawingBrush=new fabric.PencilBrush(C);
  if(t==='highlighter'){ const c=h2r(color); C.freeDrawingBrush.color=`rgba(${c.r},${c.g},${c.b},.3)`; C.freeDrawingBrush.width=20; }
  else{ C.freeDrawingBrush.color=color; C.freeDrawingBrush.width=3; }
 } else if(t==='eraser'){
  C.defaultCursor='crosshair'; C.getObjects().forEach(o=>o.evented=true);
 } else if(t==='select'){
  C.selection=true; C.defaultCursor='move'; C.getObjects().forEach(o=>{ o.selectable=true; o.evented=true; });
 }
}

function setC(hex,el){ color=hex; $$('.cd').forEach(d=>d.classList.toggle('on',d===el)); if(tool==='pencil'||tool==='highlighter') setT(tool); }

function togSty(){
 styMode=!styMode;
 const b=$('#bsty'), d=$('#dbg');
 b.classList.toggle('on',styMode); b.classList.toggle('sty',styMode);
 d.textContent=styMode?'Stylus Only':'Touch Draw'; d.style.color=styMode?'#20c997':'#fff';
 if(tool==='pencil'||tool==='highlighter') C.isDrawingMode=!styMode;
}

function addSh(type){
 setT('select'); const p=C.getVpCenter(),
  o={left:p.x,top:p.y,fill:'transparent',stroke:color,strokeWidth:3,originX:'center',originY:'center'};
 let s;
 if(type==='rect') s=new fabric.Rect({...o,width:100,height:80});
 if(type==='circle') s=new fabric.Circle({...o,radius:40});
 if(type==='arrow') s=new fabric.Path('M0 0L100 0M90-10L100 0L90 10',{...o,fill:null});
 if(type==='text'){ s=new fabric.IText('Text',{left:p.x,top:p.y,fontSize:24,fill:color}); C.add(s); C.setActiveObject(s); s.enterEditing(); snap(); return; }
 if(s){ C.add(s); C.setActiveObject(s); snap(); }
}

function zoom(){
 C.on('mouse:wheel',function(o){
  let z=C.getZoom()*(.999**o.e.deltaY);
  z=Math.min(5,Math.max(.2,z));
  C.zoomToPoint({x:o.e.offsetX,y:o.e.offsetY},z);
  o.e.preventDefault(); o.e.stopPropagation();
 });
}

function snap(){ if(hist.length>20) hist.shift(); hist.push(JSON.stringify(C)); }
function undo(){ if(hist.length<=1) return; hist.pop(); C.loadFromJSON(hist[hist.length-1],C.renderAll.bind(C)); }

async function save(){
 const json=JSON.stringify(C.toJSON()), img=C.toDataURL({format:'png',multiplier:2});
 try{
  const r=await fetch('/save_note_json',{method:'POST',headers:{'Content-Type':'application/json'},
   body:JSON.stringify({image_id:imgId,session_id:'{{ session_id }}',json_data:json,image_data:img})});
  const d=await r.json();
  if(d.success){ bootstrap.Modal.getInstance($('#notesModal')).hide(); showStatus('Saved!','success'); setTimeout(()=>location.reload(),400); }
  else showStatus('Error: '+d.error,'danger');
 }catch(e){ showStatus('Error: '+e.message,'danger'); }
}

function h2r(h){ return{r:parseInt(h.slice(1,3),16),g:parseInt(h.slice(3,5),16),b:parseInt(h.slice(5,7),16)}; }

// Event delegation
document.addEventListener('click', e => {
 const t=e.target.closest('[data-t]'); if(t&&C){ setT(t.dataset.t); return; }
 const c=e.target.closest('.cd'); if(c&&C){ setC(c.dataset.c,c); return; }
 const s=e.target.closest('[data-sh]'); if(s&&C){ addSh(s.dataset.sh); return; }
 if(e.target.closest('#bsty')){ togSty(); return; }
 if(e.target.closest('#bundo')){ undo(); return; }
 if(e.target.closest('#bsave')){ save(); return; }
 if(e.target.closest('#rpnl-hide')){ $('#rpnl').classList.add('rpnl-h'); return; }
 if(e.target.closest('#rpnl-show')){ $('#rpnl').classList.remove('rpnl-h'); return; }
});

window.toggleNoteInPdf = async(id,inc)=>{
 try{ const r=await fetch('/toggle_note_in_pdf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({image_id:id,include:inc})}); const d=await r.json(); if(!d.success) showStatus('Error: '+d.error,'danger'); }catch(e){ showStatus(e.message,'danger'); }
};
window.deleteNote = async id=>{
 if(!confirm('Delete this note?')) return;
 try{ const r=await fetch('/delete_note',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({image_id:id})}); const d=await r.json(); if(d.success){ showStatus('Deleted','success'); location.reload(); } else showStatus(d.error,'danger'); }catch(e){ showStatus(e.message,'danger'); }
};
})();
</script>