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

const RUNTIME_VERSION = '1'

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;
    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);
        return lerpProps(merge(layer.base,a.props),merge(layer.base,b.props),t);
      }
    }
    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;
    var sceneEnd=effectiveEnd(scene);
    var cs=getComputedStyle(container);
    if(cs.position==='static')container.style.position='relative';
    var canvas=document.createElement('canvas');
    canvas.style.cssText='display:block;width:100%;height:100%;';
    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;
    function frame(now){
      if(!start)start=now;
      var t=(now-start)/1000;
      if(sceneEnd<=0){ draw(0); requestAnimationFrame(frame); return; }
      if(loop) t=t%sceneEnd;
      else if(t>sceneEnd) t=sceneEnd;
      draw(t);
      requestAnimationFrame(frame);
    }
    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;
      }
      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));
        ctx.fillStyle=p.fill||asset.fill;
        if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
        ctx.fillRect(-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));
        ctx.fillStyle=p.fill||asset.fill;
        if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
        ctx.beginPath();
        ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2);
        ctx.fill();
        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.fillStyle=p.fill||asset.fill;
        ctx.font=asset.fontSize+'px sans-serif';
        ctx.textBaseline='top';
        ctx.fillText(asset.text,-tOffX,-tOffY);
      }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();
      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 order=scene.trackOrder||[];
      if(!order.length){for(var lj=0;lj<scene.layers.length;lj++)order.push(scene.layers[lj].id);}
      for(var oi=order.length-1;oi>=0;oi--){
        var id=order[oi];
        var lyr=layerById[id];
        if(lyr){ drawLayer(lyr,time); continue; }
        var tInsts=instByTrack[id]||[];
        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 visible=Math.max(0,clip2.duration-tS-tE);
          var offset=time-inst2.startTime;
          if(offset<0||offset>visible)continue;
          var localT=tS+offset;
          for(var cl2=clip2.layers.length-1;cl2>=0;cl2--){
            drawLayer(clip2.layers[cl2],localT);
          }
        }
      }
      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 {
  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)
}