import {profiles,pose,mix} from './emotions.js';
import {createRobbyRig,geometry,KEYPOINT_IDS} from './rig.js';
const $=id=>document.getElementById(id),source=await fetch('/static/robby.svg').then(r=>r.text());
$('lab-avatar').innerHTML=source;const rig=createRobbyRig($('lab-avatar').querySelector('svg'));let seed=42;
for(const id of ['a','b'])for(const p of [{slug:'neutral',label:'Neutral'},...profiles]){const o=document.createElement('option');o.value=p.slug;o.textContent=p.label;$(id).append(o);}
$('a').value='amusement';$('b').value='teasing';$('seed').onclick=()=>seed++;
$('points').onchange=()=>rig.showKeypoints($('points').checked);
for(const profile of profiles){
 const holder=document.createElement('div');holder.innerHTML=source;const svg=holder.querySelector('svg'),r=createRobbyRig(svg);
 for(let i=0;i<3;i++)r.update({pose:pose(profile.slug,1,0)},1000,0);
 const card=document.createElement('button');card.className='emotion-card';card.dataset.emotion=profile.slug;
 const img=document.createElement('img');img.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(new XMLSerializer().serializeToString(svg));img.alt=profile.label;
 const label=document.createElement('span');label.textContent=profile.id+'. '+profile.label;
 const family=document.createElement('small');family.textContent=profile.family;
 card.append(img,label,family);card.onclick=()=>{$('a').value=profile.slug;$('blend').value=0;window.scrollTo({top:80,behavior:'smooth'});};$('cards').append(card);
}
let last=0;
function frame(t){const blend=Number($('blend').value),strength=Number($('intensity').value),variation=Number($('variation').value);
 const target=mix(pose($('a').value,strength,variation,seed),pose($('b').value,strength,variation,seed+5),blend);
 rig.update({pose:target},last?t-last:16.7,matchMedia('(prefers-reduced-motion: reduce)').matches?0:t);last=t;
 $('blend-value').textContent=Math.round(blend*100)+'%';$('label').textContent=`${Math.round((1-blend)*100)}% ${$('a').value.replaceAll('_',' ')} · ${Math.round(blend*100)}% ${$('b').value.replaceAll('_',' ')} · seed ${seed}`;requestAnimationFrame(frame);}
requestAnimationFrame(frame);window.robotGallery={rig,geometry,KEYPOINT_IDS,profiles,pose,mix};