import type { Scene } from '@/types/scene'

const RUNTIME_VERSION = '7'

const ENGINE_SOURCE = `(function(){
  if (window.AnimatrPlayer && window.AnimatrPlayer.__v === '${RUNTIME_VERSION}') return;

  function easing(name, t){
    if(name==='easeIn')return t*t;
    if(name==='easeOut')return 1-(1-t)*(1-t);
    if(name==='easeInOut')return t<0.5?2*t*t:1-Math.pow(-2*t+2,2)/2;
    return t;
  }
  function merge(base,partial){
    var o={};for(var k in base)o[k]=base[k];
    if(partial)for(var k2 in partial)o[k2]=partial[k2];
    return o;
  }
  function lerp(a,b,t){return a+(b-a)*t;}
  function parseHex(hex){
    if(!hex)return null;
    var h=String(hex).trim().replace('#','');
    if(h.length===3)h=h[0]+h[0]+h[1]+h[1]+h[2]+h[2];
    if(h.length<6)return null;
    var n=parseInt(h.slice(0,6),16);
    if(isNaN(n))return null;
    return [(n>>16)&255,(n>>8)&255,n&255];
  }
  function formatHex(r,g,b){
    function c(v){v=Math.round(v);if(v<0)v=0;if(v>255)v=255;var s=v.toString(16);return s.length<2?'0'+s:s;}
    return '#'+c(r)+c(g)+c(b);
  }
  function lerpColor(a,b,t){
    var pa=parseHex(a),pb=parseHex(b);
    if(!pa||!pb)return t<0.5?a:b;
    return formatHex(lerp(pa[0],pb[0],t),lerp(pa[1],pb[1],t),lerp(pa[2],pb[2],t));
  }
  function lerpProps(a,b,t){
    var out={
      x:lerp(a.x,b.x,t),
      y:lerp(a.y,b.y,t),
      scaleX:lerp(a.scaleX,b.scaleX,t),
      scaleY:lerp(a.scaleY,b.scaleY,t),
      rotation:lerp(a.rotation,b.rotation,t),
      opacity:lerp(a.opacity,b.opacity,t)
    };
    if(a.fill&&b.fill)out.fill=lerpColor(a.fill,b.fill,t);
    else if(b.fill)out.fill=b.fill;
    else if(a.fill)out.fill=a.fill;
    if(a.points&&b.points&&a.points.length===b.points.length){
      var lp=[];
      for(var lpi=0;lpi<a.points.length;lpi++){
        var pa=a.points[lpi], pb=b.points[lpi];
        var mp={x:lerp(pa.x,pb.x,t),y:lerp(pa.y,pb.y,t)};
        var keys=['inX','inY','outX','outY'];
        for(var ki=0;ki<keys.length;ki++){
          var K=keys[ki];
          if(pa[K]!=null && pb[K]!=null) mp[K]=lerp(pa[K],pb[K],t);
          else if(pb[K]!=null) mp[K]=pb[K];
          else if(pa[K]!=null) mp[K]=pa[K];
        }
        lp.push(mp);
      }
      out.points=lp;
    } else if(b.points) out.points=b.points;
    else if(a.points) out.points=a.points;
    if(a.stroke&&b.stroke) out.stroke=lerpColor(a.stroke,b.stroke,t);
    else if(b.stroke) out.stroke=b.stroke;
    else if(a.stroke) out.stroke=a.stroke;
    if(a.strokeWidth!=null&&b.strokeWidth!=null) out.strokeWidth=lerp(a.strokeWidth,b.strokeWidth,t);
    else if(b.strokeWidth!=null) out.strokeWidth=b.strokeWidth;
    else if(a.strokeWidth!=null) out.strokeWidth=a.strokeWidth;
    return out;
  }
  function sample(layer,time){
    var kfs=layer.keyframes.slice().sort(function(a,b){return a.time-b.time;});
    if(!kfs.length)return merge(layer.base);
    if(time<=kfs[0].time)return merge(layer.base,kfs[0].props);
    var last=kfs[kfs.length-1];
    if(time>=last.time)return merge(layer.base,last.props);
    for(var i=0;i<kfs.length-1;i++){
      var a=kfs[i],b=kfs[i+1];
      if(time>=a.time&&time<=b.time){
        if(a.hold){
          if(time>=b.time)return merge(layer.base,b.props);
          return merge(layer.base,a.props);
        }
        var raw=(time-a.time)/(b.time-a.time);
        var t=easing(b.easing,raw);
        var pa=merge(layer.base,a.props);
        var pb=merge(layer.base,b.props);
        var outSample=lerpProps(pa,pb,t);
        if(b.ctrlX!=null && b.ctrlY!=null){
          var om=1-t;
          outSample.x=om*om*pa.x+2*om*t*b.ctrlX+t*t*pb.x;
          outSample.y=om*om*pa.y+2*om*t*b.ctrlY+t*t*pb.y;
        }
        return outSample;
      }
    }
    return merge(layer.base);
  }

  function loadImages(assets){
    var imgs={};
    var list=assets.filter(function(a){return a.kind==='image';});
    return Promise.all(list.map(function(a){
      return new Promise(function(resolve){
        var img=new Image();
        img.onload=function(){imgs[a.id]=img;resolve();};
        img.onerror=function(){resolve();};
        img.src=a.src;
      });
    })).then(function(){return imgs;});
  }

  function effectiveEnd(scene){
    var max=0;
    for(var i=0;i<scene.layers.length;i++){
      var kfs=scene.layers[i].keyframes;
      for(var j=0;j<kfs.length;j++){ if(kfs[j].time>max) max=kfs[j].time; }
    }
    var instances=scene.clipInstances||[];
    var clips=scene.clips||[];
    var clipById={};
    for(var ci=0;ci<clips.length;ci++) clipById[clips[ci].id]=clips[ci];
    for(var ii=0;ii<instances.length;ii++){
      var inst=instances[ii];
      var cl=clipById[inst.clipId];
      if(!cl) continue;
      var trimS=inst.trimStart||0;
      var trimE=inst.trimEnd||0;
      var end=inst.startTime+Math.max(0,cl.duration-trimS-trimE);
      if(end>max) max=end;
    }
    if(max<=0) return scene.duration;
    return Math.min(max,scene.duration);
  }
  function mount(container,scene,opts){
    if(!container)return;
    opts=opts||{};
    var loop=opts.loop!==false;
    // Honour explicit in/out points; fall back to 0 and the animation's own end.
    var rangeIn=Math.max(0, Math.min(scene.duration, scene.inTime==null?0:scene.inTime));
    var autoEnd=effectiveEnd(scene);
    var rangeOut=Math.max(rangeIn, Math.min(scene.duration, scene.outTime==null?autoEnd:scene.outTime));
    var sceneEnd=rangeOut;
    var cs=getComputedStyle(container);
    if(cs.position==='static')container.style.position='relative';
    var bgVideo=null;
    if(scene.backgroundVideo && scene.backgroundVideo.src){
      bgVideo=document.createElement('video');
      bgVideo.src=scene.backgroundVideo.src;
      bgVideo.muted=true;
      bgVideo.playsInline=true;
      bgVideo.loop=!!loop;
      bgVideo.preload='auto';
      bgVideo.style.cssText='position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;';
      container.appendChild(bgVideo);
    }
    var canvas=document.createElement('canvas');
    canvas.style.cssText='display:block;width:100%;height:100%;position:relative;z-index:1;';
    container.appendChild(canvas);
    var ctx=canvas.getContext('2d');
    var dpr=window.devicePixelRatio||1;
    var size={w:0,h:0};
    function resize(){
      var r=container.getBoundingClientRect();
      size.w=r.width;size.h=r.height;
      canvas.width=Math.max(1,Math.round(r.width*dpr));
      canvas.height=Math.max(1,Math.round(r.height*dpr));
    }
    var ro=new ResizeObserver(resize);
    ro.observe(container);
    resize();
    var assetMap={};
    scene.assets.forEach(function(a){assetMap[a.id]=a;});
    var imgs={};
    var start=0;
    var bgStarted=false;
    function syncBgVideo(t){
      if(!bgVideo) return;
      if(!bgStarted){
        bgStarted=true;
        try{ bgVideo.play(); }catch(e){}
      }
      if(Math.abs(bgVideo.currentTime-t)>0.2){
        bgVideo.currentTime=t;
      }
    }
    var rangeLen=Math.max(0, rangeOut-rangeIn);
    var runtime={
      fps: scene.fps||60,
      rangeIn: rangeIn,
      duration: scene.duration,
      markers: {},
      jumpTo: null,
      forcePause: false,
      forcePlay: false,
      warn: function(m){ if(window.console)window.console.warn('[animatr]',m); }
    };
    (scene.markers||[]).forEach(function(mk){ runtime.markers[mk.name]=mk.time; });
    function parseScriptSource(source){
      var outActs=[];
      var outErrs=[];
      var lines=String(source||'').split(/\\r?\\n/);
      for(var pi=0;pi<lines.length;pi++){
        var ln=lines[pi];
        var ci=ln.indexOf('//');
        if(ci>=0) ln=ln.slice(0,ci);
        ln=ln.trim();
        if(!ln) continue;
        var toks=ln.split(/\\s+/).filter(function(x){return x;});
        var cmd=(toks[0]||'').toLowerCase();
        var parsed=null, err=null;
        if(cmd==='play') parsed={type:'play'};
        else if(cmd==='pause') parsed={type:'pause'};
        else if(cmd==='rewind') parsed={type:'rewindToLoop'};
        else if(cmd==='jump'){
          if(toks.length<2) err='jump: missing argument';
          else {
            var a=toks[1];
            if(a.charAt(0)==='#'){
              var fr=Number(a.slice(1));
              if(!isFinite(fr)) err='jump: invalid frame '+a;
              else parsed={type:'jumpToFrame',frame:fr};
            } else if(a.charAt(0)==='@'){
              var nm=a.slice(1);
              if(!nm) err='jump: missing marker name';
              else parsed={type:'jumpToMarker',name:nm};
            } else {
              var tm=Number(a);
              if(!isFinite(tm)) err='jump: invalid time '+a;
              else parsed={type:'jumpTo',time:tm};
            }
          }
        } else {
          err='unknown command "'+cmd+'"';
        }
        if(err) outErrs.push({line:pi+1,message:err});
        else if(parsed) outActs.push(parsed);
      }
      return {actions:outActs, errors:outErrs};
    }
    function evalAction(act){
      switch(act.type){
        case 'play': runtime.forcePlay=true; runtime.forcePause=false; return;
        case 'pause': runtime.forcePause=true; runtime.forcePlay=false; return;
        case 'rewindToLoop': runtime.jumpTo=runtime.rangeIn; return;
        case 'jumpTo': runtime.jumpTo=Math.max(0,Math.min(runtime.duration,act.time)); return;
        case 'jumpToFrame': runtime.jumpTo=Math.max(0,Math.min(runtime.duration,act.frame/runtime.fps)); return;
        case 'jumpToMarker': {
          var mt=runtime.markers[act.name];
          if(mt==null){ runtime.warn('Unknown marker: '+act.name); return; }
          runtime.jumpTo=Math.max(0,Math.min(runtime.duration,mt));
          return;
        }
        case 'script': {
          var parsed=parseScriptSource(act.source);
          if(parsed.errors.length){
            for(var sei=0; sei<parsed.errors.length; sei++){
              runtime.warn('Script line '+parsed.errors[sei].line+': '+parsed.errors[sei].message);
            }
          }
          for(var sai=0; sai<parsed.actions.length; sai++) evalAction(parsed.actions[sai]);
          return;
        }
      }
    }
    function fireFrames(prev, next){
      if(next<=prev) return;
      var frames=scene.scriptFrames||[];
      var toFire=[];
      for(var ffi=0; ffi<frames.length; ffi++){
        var fr=frames[ffi];
        if(fr.time>prev && fr.time<=next) toFire.push(fr);
      }
      toFire.sort(function(a,b){return a.time-b.time;});
      for(var ffj=0; ffj<toFire.length; ffj++){
        var acts=toFire[ffj].actions||[];
        for(var fai=0; fai<acts.length; fai++) evalAction(acts[fai]);
      }
    }
    var currentT=rangeIn;
    var paused=false;
    var lastNow=0;
    function frame(now){
      if(rangeLen<=0){
        draw(currentT);
        syncBgVideo(currentT);
        requestAnimationFrame(frame);
        return;
      }
      if(!lastNow) lastNow=now;
      var dt=(now-lastNow)/1000;
      lastNow=now;
      if(!paused){
        var prev=currentT;
        var nextT=currentT+dt;
        if(nextT>=rangeOut){
          fireFrames(prev, rangeOut);
          currentT = loop ? rangeIn : rangeOut;
        } else {
          currentT=nextT;
          fireFrames(prev, currentT);
        }
        if(runtime.jumpTo!=null){ currentT=runtime.jumpTo; runtime.jumpTo=null; }
        if(runtime.forcePause){ paused=true; runtime.forcePause=false; }
        if(runtime.forcePlay){ paused=false; runtime.forcePlay=false; }
      }
      draw(currentT);
      syncBgVideo(currentT);
      requestAnimationFrame(frame);
    }
    function tracePolyPath(tctx,sp,ap,offX,offY,closed){
      var n=sp.length;
      if(n<2) return;
      tctx.beginPath();
      tctx.moveTo(sp[0].x-offX,sp[0].y-offY);
      var endI=closed?n:n-1;
      for(var ti=0;ti<endI;ti++){
        var aPos=sp[ti];
        var bIdx=(ti+1)%n;
        var bPos=sp[bIdx];
        var aA=ap?ap[ti]:null;
        var bA=ap?ap[bIdx]:null;
        var aHas=aA&&aA.type&&aA.type!=='corner';
        var bHas=bA&&bA.type&&bA.type!=='corner';
        if(aHas||bHas){
          var aox=aHas?((aPos.outX!=null?aPos.outX:(aA.outX||0))):0;
          var aoy=aHas?((aPos.outY!=null?aPos.outY:(aA.outY||0))):0;
          var bix=bHas?((bPos.inX!=null?bPos.inX:(bA.inX||0))):0;
          var biy=bHas?((bPos.inY!=null?bPos.inY:(bA.inY||0))):0;
          tctx.bezierCurveTo(aPos.x+aox-offX,aPos.y+aoy-offY,bPos.x+bix-offX,bPos.y+biy-offY,bPos.x-offX,bPos.y-offY);
        } else {
          tctx.lineTo(bPos.x-offX,bPos.y-offY);
        }
      }
      if(closed) tctx.closePath();
    }
    function drawMaskShape(ctxm,layer,time){
      var asset=assetMap[layer.assetId];
      if(!asset) return;
      if(asset.kind!=='rect' && asset.kind!=='circle' && asset.kind!=='text' && asset.kind!=='polygon') return;
      var p=sample(layer,time);
      ctxm.save();
      ctxm.translate(p.x,p.y);
      ctxm.rotate(p.rotation*Math.PI/180);
      ctxm.scale(p.scaleX,p.scaleY);
      ctxm.fillStyle='#000000';
      if(asset.kind==='rect'){
        var mrOff=layer.offsetX!=null?layer.offsetX:asset.width/2;
        var mrOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
        ctxm.fillRect(-mrOff,-mrOffY,asset.width,asset.height);
      } else if(asset.kind==='circle'){
        var mcOff=layer.offsetX!=null?layer.offsetX:0;
        var mcOffY=layer.offsetY!=null?layer.offsetY:0;
        ctxm.beginPath();
        ctxm.arc(-mcOff,-mcOffY,asset.radius,0,Math.PI*2);
        ctxm.fill();
      } else if(asset.kind==='text'){
        var mtOff=layer.offsetX!=null?layer.offsetX:0;
        var mtOffY=layer.offsetY!=null?layer.offsetY:0;
        ctxm.font=asset.fontSize+'px sans-serif';
        ctxm.textBaseline='top';
        ctxm.fillText(asset.text,-mtOff,-mtOffY);
      } else {
        var mpOffX=layer.offsetX!=null?layer.offsetX:0;
        var mpOffY=layer.offsetY!=null?layer.offsetY:0;
        var mpPts=p.points||asset.points||[];
        var mpClosed=asset.closed!==false;
        if(mpClosed && mpPts.length>=3){
          tracePolyPath(ctxm,mpPts,asset.points,mpOffX,mpOffY,true);
          ctxm.fill();
        }
      }
      ctxm.restore();
    }
    function drawLayer(layer,time){
      var asset=assetMap[layer.assetId];
      if(!asset||!layer.visible)return;
      var p=sample(layer,time);
      ctx.save();
      ctx.globalAlpha=ctx.globalAlpha*p.opacity;
      ctx.translate(p.x,p.y);
      ctx.rotate(p.rotation*Math.PI/180);
      ctx.scale(p.scaleX,p.scaleY);
      var sOp=p.shadowOpacity||0;
      var sBl=p.shadowBlur||0;
      var sDi=p.shadowDistance||0;
      if(sOp>0 && (sBl>0 || sDi>0)){
        var sAn=(p.shadowAngle==null?90:p.shadowAngle)*Math.PI/180;
        var sHex=(p.shadowColor||'#000000').replace('#','');
        if(sHex.length===3){sHex=sHex[0]+sHex[0]+sHex[1]+sHex[1]+sHex[2]+sHex[2];}
        var sNum=parseInt(sHex.slice(0,6),16);
        if(isNaN(sNum))sNum=0;
        ctx.shadowColor='rgba('+((sNum>>16)&255)+','+((sNum>>8)&255)+','+(sNum&255)+','+sOp+')';
        ctx.shadowBlur=sBl;
        ctx.shadowOffsetX=Math.cos(sAn)*sDi;
        ctx.shadowOffsetY=Math.sin(sAn)*sDi;
      }
      var lRawStroke=p.stroke||asset.stroke;
      var lSW=(p.strokeWidth!=null?p.strokeWidth:(asset.strokeWidth||0));
      var lStroke=lSW>0?(lRawStroke||'#000000'):null;
      var lHasStroke=!!lStroke && lStroke!=='transparent' && lSW>0;
      if(asset.kind==='rect'){
        var rOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
        var rOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
        var rBlur=(p.blur!=null?p.blur:(asset.blur||0));
        if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
        var rFill=p.fill||asset.fill;
        if(rFill && rFill!=='transparent'){
          ctx.fillStyle=rFill;
          ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
        }
        if(lHasStroke){
          ctx.strokeStyle=lStroke;
          ctx.lineWidth=lSW;
          ctx.strokeRect(-rOffX,-rOffY,asset.width,asset.height);
        }
        ctx.filter='none';
      }else if(asset.kind==='circle'){
        var cOffX=layer.offsetX!=null?layer.offsetX:0;
        var cOffY=layer.offsetY!=null?layer.offsetY:0;
        var cBlur=(p.blur!=null?p.blur:(asset.blur||0));
        if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
        ctx.beginPath();
        ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2);
        var cFill=p.fill||asset.fill;
        if(cFill && cFill!=='transparent'){
          ctx.fillStyle=cFill;
          ctx.fill();
        }
        if(lHasStroke){
          ctx.strokeStyle=lStroke;
          ctx.lineWidth=lSW;
          ctx.stroke();
        }
        ctx.filter='none';
      }else if(asset.kind==='text'){
        var tOffX=layer.offsetX!=null?layer.offsetX:0;
        var tOffY=layer.offsetY!=null?layer.offsetY:0;
        ctx.font=asset.fontSize+'px sans-serif';
        ctx.textBaseline='top';
        var tFill=p.fill||asset.fill;
        if(tFill && tFill!=='transparent'){
          ctx.fillStyle=tFill;
          ctx.fillText(asset.text,-tOffX,-tOffY);
        }
        if(lHasStroke){
          ctx.strokeStyle=lStroke;
          ctx.lineWidth=lSW;
          ctx.strokeText(asset.text,-tOffX,-tOffY);
        }
      }else if(asset.kind==='polygon'){
        var pOffX=layer.offsetX!=null?layer.offsetX:0;
        var pOffY=layer.offsetY!=null?layer.offsetY:0;
        var pBlur=(p.blur!=null?p.blur:(asset.blur||0));
        var pPts=p.points||asset.points||[];
        var pClosed=asset.closed!==false;
        var pNeeded=pClosed?3:2;
        if(pPts.length>=pNeeded){
          if(pBlur>0) ctx.filter='blur('+pBlur+'px)';
          tracePolyPath(ctx,pPts,asset.points,pOffX,pOffY,pClosed);
          var pFill=p.fill||asset.fill;
          if(pClosed && pFill && pFill!=='transparent'){
            ctx.fillStyle=pFill;
            ctx.fill();
          }
          if(lHasStroke){
            ctx.strokeStyle=lStroke;
            ctx.lineWidth=lSW;
            ctx.lineJoin='round';
            ctx.lineCap='round';
            ctx.stroke();
          }
          ctx.filter='none';
        }
      }else if(asset.kind==='image'){
        var img=imgs[asset.id];
        if(img){
          var iOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
          var iOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
          ctx.drawImage(img,-iOffX,-iOffY,asset.width,asset.height);
        }
      }
      ctx.shadowColor='transparent';
      ctx.shadowBlur=0;
      ctx.shadowOffsetX=0;
      ctx.shadowOffsetY=0;
      ctx.restore();
    }
    function draw(time){
      var lw=scene.canvas.width,lh=scene.canvas.height;
      var cw=size.w,ch=size.h;
      if(!cw||!ch)return;
      var s=Math.min(cw/lw,ch/lh);
      var ox=(cw-lw*s)/2;
      var oy=(ch-lh*s)/2;
      ctx.setTransform(dpr,0,0,dpr,0,0);
      ctx.clearRect(0,0,cw,ch);
      ctx.save();
      ctx.translate(ox,oy);
      ctx.scale(s,s);
      ctx.beginPath();
      ctx.rect(0,0,lw,lh);
      ctx.clip();
      if(!scene.backgroundVideo){
        ctx.fillStyle=scene.canvas.background;
        ctx.fillRect(0,0,lw,lh);
      }
      var layerById={};
      for(var li=0;li<scene.layers.length;li++)layerById[scene.layers[li].id]=scene.layers[li];
      var clipById2={};
      var clips2=scene.clips||[];
      for(var ci2=0;ci2<clips2.length;ci2++)clipById2[clips2[ci2].id]=clips2[ci2];
      var instByTrack={};
      var instances=scene.clipInstances||[];
      for(var iInst=0;iInst<instances.length;iInst++){
        var iE=instances[iInst];
        (instByTrack[iE.clipTrackId]=instByTrack[iE.clipTrackId]||[]).push(iE);
      }
      var rawOrder=scene.trackOrder||[];
      var groupById2={}; var groups2=scene.groups||[];
      for(var gi2=0;gi2<groups2.length;gi2++) groupById2[groups2[gi2].id]=groups2[gi2];
      if(!rawOrder.length){ rawOrder=[]; for(var lj=0;lj<scene.layers.length;lj++) rawOrder.push(scene.layers[lj].id); }
      var hasTopMask=false;
      for(var hm=0;hm<rawOrder.length;hm++){ var hmL=layerById[rawOrder[hm]]; if(hmL && hmL.isMask){ hasTopMask=true; break; } }
      var mainCtx=ctx, topOff=null;
      if(hasTopMask){
        topOff=document.createElement('canvas');
        topOff.width=canvas.width; topOff.height=canvas.height;
        var topOffCtx=topOff.getContext('2d');
        if(topOffCtx){
          var tmT=ctx.getTransform();
          topOffCtx.setTransform(tmT.a,tmT.b,tmT.c,tmT.d,tmT.e,tmT.f);
          ctx=topOffCtx;
        } else { topOff=null; }
      }
      for(var oi=rawOrder.length-1;oi>=0;oi--){
        var id=rawOrder[oi];
        var lyr=layerById[id];
        if(lyr){
          if(lyr.isMask){
            ctx.save();
            ctx.globalCompositeOperation=(lyr.maskMode==='negative'?'destination-out':'destination-in');
            drawMaskShape(ctx,lyr,time);
            ctx.restore();
            continue;
          }
          drawLayer(lyr,time); continue;
        }
        var tInsts=instByTrack[id]||[];
        if(tInsts.length){
          for(var ti=0;ti<tInsts.length;ti++){
            var inst2=tInsts[ti];
            var clip2=clipById2[inst2.clipId];
            if(!clip2)continue;
            var tS=inst2.trimStart||0;
            var tE=inst2.trimEnd||0;
            var visibleClip=Math.max(0,clip2.duration-tS-tE);
            var offset=time-inst2.startTime;
            if(offset<0||offset>visibleClip)continue;
            var localT=tS+offset;
            for(var cl2=clip2.layers.length-1;cl2>=0;cl2--){
              drawLayer(clip2.layers[cl2],localT);
            }
          }
          continue;
        }
        var grp=groupById2[id];
        if(grp){
          var gContent=[], gMasks=[];
          for(var ch=grp.childIds.length-1;ch>=0;ch--){
            var cl0=layerById[grp.childIds[ch]];
            if(!cl0) continue;
            if(cl0.isMask) gMasks.push(cl0); else gContent.push(cl0);
          }
          if(!gMasks.length){
            for(var gi3=0;gi3<gContent.length;gi3++) drawLayer(gContent[gi3],time);
          } else {
            var mcanvas=document.createElement('canvas');
            mcanvas.width=canvas.width; mcanvas.height=canvas.height;
            var mctx=mcanvas.getContext('2d');
            var tm=ctx.getTransform();
            mctx.setTransform(tm.a,tm.b,tm.c,tm.d,tm.e,tm.f);
            var savedCtx=ctx;
            ctx=mctx;
            for(var gi4=0;gi4<gContent.length;gi4++) drawLayer(gContent[gi4],time);
            for(var gm=0;gm<gMasks.length;gm++){
              var mL=gMasks[gm];
              mctx.save();
              mctx.globalCompositeOperation=(mL.maskMode==='negative'?'destination-out':'destination-in');
              drawMaskShape(mctx,mL,time);
              mctx.restore();
            }
            ctx=savedCtx;
            ctx.save();
            ctx.setTransform(1,0,0,1,0,0);
            ctx.drawImage(mcanvas,0,0);
            ctx.restore();
          }
        }
      }
      if(topOff){
        ctx=mainCtx;
        ctx.save();
        ctx.setTransform(1,0,0,1,0,0);
        ctx.drawImage(topOff,0,0);
        ctx.restore();
      }
      ctx.restore();
    }
    loadImages(scene.assets).then(function(loaded){
      imgs=loaded;
      requestAnimationFrame(frame);
    });
  }

  var api={ __v: '${RUNTIME_VERSION}', mount: mount };
  window.AnimatrPlayer = api;

  var pending = window.__animatrPending;
  window.__animatrPending = null;
  if (pending) for (var i=0;i<pending.length;i++) { try { pending[i](); } catch(e) { console.error(e); } }
})();
`

const SCENE_BOOT_SOURCE = `(function(){
  var SCENE = __SCENE__;
  var OPTIONS = __OPTIONS__;
  var script = document.currentScript;
  var target = null;
  if (script && script.dataset && script.dataset.target) target = document.querySelector(script.dataset.target);
  else if (script && script.parentElement) target = script.parentElement;
  var autoOpts = {};
  if (script && script.dataset && script.dataset.loop === 'false') autoOpts.loop = false;
  function boot(){
    if (!target || !window.AnimatrPlayer) return;
    var merged = {};
    for (var k in OPTIONS) merged[k] = OPTIONS[k];
    for (var k2 in autoOpts) merged[k2] = autoOpts[k2];
    window.AnimatrPlayer.mount(target, SCENE, merged);
  }
  if (window.AnimatrPlayer) boot();
  else (window.__animatrPending = window.__animatrPending || []).push(boot);
})();
`

function jsonForExport(scene: Scene): string {
  // Data-URL background videos are stripped from the export — local video
  // files can't be embedded reasonably. The user needs to host the media
  // externally and set a URL in settings before exporting.
  const bg = scene.backgroundVideo
  if (bg && bg.src && bg.src.startsWith('data:')) {
    const { backgroundVideo, ...rest } = scene
    void backgroundVideo
    return JSON.stringify(rest)
  }
  return JSON.stringify(scene)
}

export interface ExportOptions {
  loop?: boolean
}

export function generateRuntimeScript(): string {
  return (
    '/* Animatr runtime v' + RUNTIME_VERSION + ' — generated ' + new Date().toISOString() + ' */\n' +
    ENGINE_SOURCE
  )
}

export function generateSceneScript(scene: Scene, options: ExportOptions = {}): string {
  const sceneJson = jsonForExport(scene)
  const optsJson = JSON.stringify({ loop: options.loop !== false })
  return (
    '/* Animatr scene — generated ' + new Date().toISOString() + '\n' +
    ' * Requires animatr-runtime.js (v' + RUNTIME_VERSION + ') to be loaded once per page.\n' +
    ' */\n' +
    SCENE_BOOT_SOURCE.replace('__SCENE__', sceneJson).replace('__OPTIONS__', optsJson)
  )
}

export function generateBundledScript(scene: Scene, options: ExportOptions = {}): string {
  return (
    '/* Animatr bundled export — generated ' + new Date().toISOString() + ' */\n' +
    ENGINE_SOURCE +
    '\n' +
    generateSceneScriptBody(scene, options)
  )
}

function generateSceneScriptBody(scene: Scene, options: ExportOptions): string {
  const sceneJson = jsonForExport(scene)
  const optsJson = JSON.stringify({ loop: options.loop !== false })
  return SCENE_BOOT_SOURCE.replace('__SCENE__', sceneJson).replace('__OPTIONS__', optsJson)
}

export function downloadRuntime(filename = 'animatr-runtime.js') {
  triggerDownload(generateRuntimeScript(), filename, 'application/javascript')
}

export function downloadSceneExport(scene: Scene, filename = 'animation.js') {
  triggerDownload(generateSceneScript(scene), filename, 'application/javascript')
}

export function downloadBundledExport(scene: Scene, filename = 'animation-bundled.js') {
  triggerDownload(generateBundledScript(scene), filename, 'application/javascript')
}

export function generateExampleHtml(scene: Scene, options: ExportOptions = {}): string {
  const runtime = ENGINE_SOURCE
  const sceneBoot = generateSceneScriptBody(scene, options)
  const aspect = `${scene.canvas.width} / ${scene.canvas.height}`
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Animatr — Example</title>
<style>
  :root { color-scheme: light dark; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 40px 20px;
    background: #f5f5f7;
    color: #1d1d1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  @media (prefers-color-scheme: dark) {
    body { background: #1e1e22; color: #e5e5ea; }
    pre { background: #26262c !important; color: #e5e5ea; }
    .stage { background: #26262c; box-shadow: 0 0 0 1px #3a3a42; }
  }
  h1 { font-size: 18px; font-weight: 600; margin: 0; }
  p { margin: 0; color: #6e6e73; font-size: 13px; text-align: center; }
  .stage {
    width: min(100%, 960px);
    aspect-ratio: ${aspect};
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
  }
  .usage {
    max-width: 760px;
    width: 100%;
  }
  .usage h2 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  pre {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.5;
    overflow: auto;
    margin: 0;
  }
</style>
</head>
<body>
  <h1>Animatr Export</h1>
  <p>Load the runtime once, then embed as many scenes on the page as you like.</p>

  <!-- Runtime: once per page -->
  <script>
${runtime}
  </script>

  <div class="stage">
    <!-- Scene: one per animation -->
    <script>
${sceneBoot}
    </script>
  </div>

  <div class="usage">
    <h2>Embed on your own page</h2>
    <pre>&lt;!-- once per page --&gt;
&lt;script src="animatr-runtime.js"&gt;&lt;/script&gt;

&lt;!-- per animation: one container + scene script --&gt;
&lt;div style="width: 800px; height: 450px;"&gt;
  &lt;script src="animation.js"&gt;&lt;/script&gt;
&lt;/div&gt;

&lt;div style="width: 400px; height: 225px;"&gt;
  &lt;script src="animation-2.js"&gt;&lt;/script&gt;
&lt;/div&gt;</pre>
  </div>
</body>
</html>
`
}

export function downloadExampleHtml(scene: Scene, filename = 'animation-example.html') {
  const source = generateExampleHtml(scene)
  triggerDownload(source, filename, 'text/html')
}

function triggerDownload(source: string, filename: string, mime: string) {
  const blob = new Blob([source], { type: mime })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  setTimeout(() => URL.revokeObjectURL(url), 1000)
}