import { mountShare, viewerURL } from './share.js?v=1';
import { bindCamera } from './interactions.js';
const menuToggle=document.querySelector('#menu-toggle');
const menuPanels=document.querySelectorAll('[data-comparison-menu]');
function setMenu(open){
  for(const panel of menuPanels)panel.hidden=!open;
  document.body.classList.toggle('menu-open',open);
  menuToggle.setAttribute('aria-expanded',String(open));
  const label=open?'Hide menu':'Show menu';
  menuToggle.setAttribute('aria-label',label);menuToggle.title=label;
}
setMenu(false);
menuToggle.addEventListener('click',()=>setMenu(!document.body.classList.contains('menu-open')));
addEventListener('keydown',event=>{
  if(event.key==='Escape'&&document.body.classList.contains('menu-open')){
    setMenu(false);menuToggle.focus();
  }
});
const state=document.querySelector('#state'),id=location.pathname.split('/').pop();
const token=new URLSearchParams(location.hash.slice(1)).get('token')||sessionStorage.getItem(`comparison:${id}`);
if(token)sessionStorage.setItem(`comparison:${id}`,token);
if(location.hash)history.replaceState(null,'',location.pathname);
const headers=token?{'X-Viewer-Token':token}:{},base=`/api/v1/comparisons/${id}`;
const controller=new AbortController(),views=[];
addEventListener('pagehide',()=>{controller.abort();for(const view of views)view.destroy();},{once:true});
async function request(path='',text=false){
  const response=await fetch(base+path,{headers,signal:controller.signal,cache:'no-store'});
  if(!response.ok){const body=await response.json();throw new Error(body.error?.message||'Comparison unavailable');}
  return text?response.text():response.json();
}
function union(boxes){
  const x=Math.min(...boxes.map(b=>b.x)),y=Math.min(...boxes.map(b=>b.y));
  return {x,y,width:Math.max(...boxes.map(b=>b.x+b.width))-x,height:Math.max(...boxes.map(b=>b.y+b.height))-y};
}
async function start(){
  let result;
  for(;;){
    result=await request();if(result.status==='completed')break;
    if(result.status==='failed')throw new Error(result.error?.message||'Comparison failed');
    await new Promise(resolve=>setTimeout(resolve,1000));
  }
  const texts=await Promise.all(['old','new'].map(side=>request('/svg/'+side,true)));
  const svgs=texts.map(text=>{
    const parsed=new DOMParser().parseFromString(text,'image/svg+xml');
    if(parsed.querySelector('parsererror')||parsed.documentElement.localName!=='svg')throw new Error('Invalid rendering artifact');
    return document.importNode(parsed.documentElement,true);
  });
  const content=[result.old.bounds,result.new.bounds].filter(b=>b&&b.width>0&&b.height>0);
  const bounds=union(content.length?content:[result.old.sheet,result.new.sheet]);
  for(const [index,side] of ['old','new'].entries()){
    document.querySelector(`#${side}-name`).textContent=result[side].filename;
    const surface=document.querySelector(`#${side}-surface`);surface.append(svgs[index]);
    surface.style.backgroundColor=svgs[index].querySelector('rect')?.getAttribute('fill')||'#ffffff';
    views.push(bindCamera(surface,svgs[index],bounds,source=>{
      if(document.querySelector('#sync').checked)for(const other of views)if(other!==source)other.apply(source.pose());
    }));
  }
  await document.fonts.ready;
  state.classList.remove('loading');state.textContent='';
  const changes=result.changes,byId=new Map(changes.map(c=>[c.id,c])),rows=new Map(),nodes=svgs.flatMap(svg=>[...svg.querySelectorAll('[data-change-id]')]);
  const list=document.querySelector('#changes'),filter=document.querySelector('#filter');
  let selected=null;
  for(const [status,count]of Object.entries(result.summary)){
    const badge=document.createElement('span');badge.className=status;badge.textContent=`${count} ${status}`;document.querySelector('#summary').append(badge);
  }
  if(!changes.length)list.textContent='No structural changes detected.';
  function visibleChanges(){return changes.filter(c=>filter.value==='all'||c.status===filter.value);}
  function select(change){
    selected=change.id;
    for(const [id,row]of rows)row.setAttribute('aria-current',String(id===selected));
    for(const node of nodes){if(node.dataset.changeId===selected)node.setAttribute('data-selected','');else node.removeAttribute('data-selected');}
    const boxes=[change.old_bounds,change.new_bounds].filter(Boolean);
    if(boxes.length)for(const view of views)view.focus(union(boxes));
    const details={kind:change.kind,match:change.match||'unmatched'};
    if(change.moved)details.movement=change.movement;
    if(change.fields.length)details.fields=change.fields;
    document.querySelector('#details').textContent=JSON.stringify(details,null,2);
    rows.get(selected)?.scrollIntoView({block:'nearest'});
  }
  for(const change of changes){
    const button=document.createElement('button');button.type='button';button.className=change.status;
    const label=document.createElement('span');label.textContent=change.label;
    const kind=document.createElement('small');kind.textContent=change.status+(change.moved&&change.status==='modified'?', moved':'')+' · '+change.kind;
    button.append(label,kind);button.addEventListener('click',()=>select(change));list.append(button);rows.set(change.id,button);
  }
  function applyFilters(){
    for(const node of nodes){
      const change=byId.get(node.dataset.changeId);
      const hidden=change?(filter.value!=='all'&&change.status!==filter.value):(filter.value!=='all'||document.querySelector('#only-changes').checked);
      node.toggleAttribute('data-diff-hidden',hidden);
    }
    for(const change of changes)rows.get(change.id).hidden=filter.value!=='all'&&change.status!==filter.value;
    document.body.classList.toggle('no-highlights',!document.querySelector('#highlights').checked);
  }
  for(const element of [filter,document.querySelector('#only-changes'),document.querySelector('#highlights')])element.addEventListener('change',applyFilters);
  document.querySelector('#fit').addEventListener('click',()=>{for(const view of views)view.fit();});
  document.querySelector('#sync').addEventListener('change',()=>{if(document.querySelector('#sync').checked&&views[0])views[1].apply(views[0].pose());});
  function next(delta){
    const candidates=visibleChanges();if(!candidates.length)return;
    const index=candidates.findIndex(c=>c.id===selected);
    const target=index<0?(delta>0?0:candidates.length-1):(index+delta+candidates.length)%candidates.length;
    select(candidates[target]);
  }
  document.querySelector('#previous').addEventListener('click',()=>next(-1));document.querySelector('#next').addEventListener('click',()=>next(1));
  for(const svg of svgs)svg.addEventListener('click',event=>{const id=event.target.closest('[data-change-id]')?.dataset.changeId;if(byId.has(id))select(byId.get(id));});
  applyFilters();
  mountShare(document.querySelector('#comparison-share'),viewerURL(location.pathname,token));
  function expire(){if(result.expires_at===-1)return;const remaining=result.expires_at*1000-Date.now();if(remaining<=0){for(const view of views)view.destroy();document.querySelector('.workspace').replaceChildren();state.textContent='This comparison link has expired';}else setTimeout(expire,Math.min(2147483647,remaining));}expire();
}
start().catch(error=>{state.classList.remove('loading');state.textContent=error.name==='AbortError'?'':error.message;});