{{-- Interactive 3D turntable viewer (shared by monster + npc pages).
     Expects $turnUrl (sprite-sheet webp) and/or $modelImg (static png), and optionally $name.
     Turntable = canvas showing one frame of the sheet; drag rotates, scroll/buttons zoom.
     Only pixels reach the browser (renders pre-built offline). --}}
@if(!empty($turnUrl))
    <div class="wk-monster-model" style="display:flex;justify-content:center;margin:0 0 16px;">
        <div class="wk-turntable" data-src="{{ $turnUrl }}" data-frames="36" data-cols="6">
            <canvas class="wk-turntable__cv"></canvas>
            <div class="wk-turntable__zoom">
                <button type="button" data-tt="out" aria-label="{{ __('Zoom out') }}">&minus;</button>
                <button type="button" data-tt="in" aria-label="{{ __('Zoom in') }}">+</button>
            </div>
            <div class="wk-turntable__hint">{{ __('drag to rotate · scroll to zoom') }}</div>
        </div>
    </div>
    <style>
        .wk-turntable{position:relative;width:320px;max-width:100%;aspect-ratio:320/400;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);touch-action:none;cursor:grab;user-select:none;}
        .wk-turntable:active{cursor:grabbing;}
        .wk-turntable__cv{display:block;width:100%;height:100%;}
        .wk-turntable__zoom{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;}
        .wk-turntable__zoom button{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.45);color:#fff;font-size:18px;line-height:1;cursor:pointer;}
        .wk-turntable__zoom button:hover{background:rgba(0,0,0,.7);}
        .wk-turntable__hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;color:rgba(255,255,255,.5);pointer-events:none;transition:opacity .3s;}
        .wk-turntable.is-active .wk-turntable__hint{opacity:0;}
    </style>
    <script>
    (function(){
        var el=document.currentScript.previousElementSibling;
        while(el&&!el.classList.contains('wk-monster-model'))el=el.previousElementSibling;
        el=el&&el.querySelector('.wk-turntable'); if(!el)return;
        var cv=el.querySelector('canvas'),ctx=cv.getContext('2d');
        var frames=+el.dataset.frames,cols=+el.dataset.cols,rows=Math.ceil(frames/cols);
        var img=new Image(),fw=0,fh=0,W=0,H=0,frame=0,zoom=1,panX=0,panY=0,acc=0;
        function size(){var d=window.devicePixelRatio||1;W=el.clientWidth;H=el.clientHeight;cv.width=W*d;cv.height=H*d;ctx.setTransform(d,0,0,d,0,0);}
        function clamp(){var mx=Math.max(0,(W*zoom-W)/2),my=Math.max(0,(H*zoom-H)/2);panX=Math.max(-mx,Math.min(mx,panX));panY=Math.max(-my,Math.min(my,panY));}
        function draw(){if(!fw)return;ctx.clearRect(0,0,W,H);var sx=(frame%cols)*fw,sy=((frame/cols)|0)*fh,dw=W*zoom,dh=H*zoom;ctx.drawImage(img,sx,sy,fw,fh,(W-dw)/2+panX,(H-dh)/2+panY,dw,dh);}
        img.onload=function(){fw=img.width/cols;fh=img.height/rows;size();draw();};img.src=el.dataset.src;
        window.addEventListener('resize',function(){size();draw();});
        var down=false,lx=0,ly=0;
        el.addEventListener('pointerdown',function(e){if(e.target.closest('.wk-turntable__zoom'))return;down=true;lx=e.clientX;ly=e.clientY;el.classList.add('is-active');if(el.setPointerCapture)el.setPointerCapture(e.pointerId);});
        el.addEventListener('pointermove',function(e){if(!down)return;var dx=e.clientX-lx,dy=e.clientY-ly;lx=e.clientX;ly=e.clientY;if(zoom>1.02){panX+=dx;panY+=dy;clamp();}else{acc+=dx;var step=W/frames;while(acc>=step){frame=(frame+frames-1)%frames;acc-=step;}while(acc<=-step){frame=(frame+1)%frames;acc+=step;}}draw();});
        function up(){down=false;}el.addEventListener('pointerup',up);el.addEventListener('pointercancel',up);
        el.addEventListener('wheel',function(e){e.preventDefault();zoom*=e.deltaY<0?1.15:.87;zoom=Math.max(1,Math.min(4,zoom));if(zoom<=1){zoom=1;panX=panY=0;}clamp();draw();},{passive:false});
        el.addEventListener('dblclick',function(){zoom=1;panX=panY=0;draw();});
        el.querySelectorAll('[data-tt]').forEach(function(b){b.addEventListener('click',function(ev){ev.stopPropagation();zoom*=b.dataset.tt==='in'?1.3:.77;zoom=Math.max(1,Math.min(4,zoom));if(zoom<=1){zoom=1;panX=panY=0;}clamp();draw();});});
    })();
    </script>
@elseif(!empty($modelImg))
    <div class="wk-monster-model" style="display:flex;justify-content:center;margin:0 0 16px;">
        <img src="{{ $modelImg }}" alt="{{ ($name ?? 'Model') }} 3D model" loading="lazy"
             style="max-width:320px;width:100%;height:auto;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);" />
    </div>
@endif