// UI state, model rendering, and viewer controls.
const $=id=>document.getElementById(id);let entities=[],dimensionTexts=[],fileName='',modelData=null,yaw=-.72,pitch=.62,zoom=1,panX=0,panY=0,drag=null;
const canvas=document.createElement('canvas');$('viewport').appendChild(canvas);const ctx=canvas.getContext('2d');
const status=(msg,error=false)=>{$('status').textContent=msg;$('status').classList.toggle('error',error)};
function resize(){const r=$('viewport').getBoundingClientRect(),dpr=Math.min(devicePixelRatio||1,2);canvas.width=r.width*dpr;canvas.height=r.height*dpr;canvas.style.width=r.width+'px';canvas.style.height=r.height+'px';ctx.setTransform(dpr,0,0,dpr,0,0);draw()}window.addEventListener('resize',resize);
function fill(sel,items,placeholder){sel.innerHTML='';const opt=document.createElement('option');opt.value='';opt.textContent=placeholder;sel.append(opt);for(const v of items){const o=document.createElement('option');o.value=v;o.textContent=v;sel.append(o)}}
function loadFile(file){if(!file)return;fileName=file.name;$('filename').textContent=file.name;$('meta').textContent=file.name;const reader=new FileReader();reader.onerror=()=>status('파일을 읽을 수 없습니다.',true);reader.onload=()=>{try{const parsed=CatchpitDxf.parseDxf(String(reader.result));entities=parsed.entities;dimensionTexts=parsed.dimensionTexts;const layers=parsed.layers;fill($('outline'),layers,'평면 외곽선 레이어 선택');$('outline').disabled=false;$('build').disabled=false;$('export').disabled=true;$('parts').classList.add('hidden');$('empty').classList.remove('hidden');if(layers.includes('LN_out'))$('outline').value='LN_out';status(`${layers.length}개 레이어 · 선 도형 ${entities.length}개 · 치수 문자 ${dimensionTexts.length}개를 읽었습니다. 외곽선 레이어를 확인하세요.`);$('footstatus').textContent=file.name;modelData=null;draw()}catch(e){$('build').disabled=true;status('DXF 읽기 실패: '+e.message,true)}};reader.readAsText(file)}
$('file').addEventListener('change',e=>loadFile(e.target.files[0]));$('drop').addEventListener('dragover',e=>{e.preventDefault();$('drop').classList.add('drag')});$('drop').addEventListener('dragleave',()=>$('drop').classList.remove('drag'));$('drop').addEventListener('drop',e=>{e.preventDefault();$('drop').classList.remove('drag');loadFile(e.dataTransfer.files[0])});
// Build the slab and hollow wall from dimensioned outer and inner plan loops.
function build(){
 try{
  const result=CatchpitModel.createCatchpitModel({entities,dimensionTexts,outlineLayer:$('outline').value,heightMm:$('height').value,baseThicknessMm:$('thickness').value,autoHeight:$('autoHeight').checked});
  modelData=result.modelData;const {heightSource}=result;
  if($('autoHeight').checked){$('height').value=modelData.height*1000;$('thickness').value=modelData.baseThickness*1000}
  const {parts,wallThickness,minX,minY,height,dimX,dimY}=modelData;
  $('partRows').innerHTML='';for(const part of parts){const label=document.createElement('label');label.className='partrow';const toggle=document.createElement('input');toggle.type='checkbox';toggle.checked=true;toggle.addEventListener('change',()=>{part.visible=toggle.checked;draw()});const swatch=document.createElement('i');swatch.className='swatch';swatch.style.background=part.color;const text=document.createElement('span');text.textContent=part.name;label.append(toggle,swatch,text);$('partRows').append(label)}$('parts').classList.remove('hidden');
  $('empty').classList.add('hidden');$('badge').classList.remove('hidden');$('legend').classList.remove('hidden');$('reset').disabled=false;$('export').disabled=false;
  $('meta').textContent=`${fileName} · 평면 ${dimX} × ${dimY} mm · 벽체 높이 ${(height*1000).toFixed(0)} mm`;
  status(`모델 생성 완료 · 바닥판 1 · 벽체 1 · 벽 두께 약 ${(wallThickness*1000).toFixed(0)} mm · ${heightSource}`);
  $('footstatus').textContent=`좌하단 기준점 (${minX.toFixed(3)}, ${minY.toFixed(3)}) → (0, 0, 0)`;fit();
 }catch(e){status(e.message,true)}
}
function project(x,y,z){const d=yaw,c=Math.cos(d),s=Math.sin(d),xx=x*c-y*s,yy=x*s+y*c,cp=Math.cos(pitch),sp=Math.sin(pitch);return{x:xx,y:yy*cp-z*sp,z:yy*sp+z*cp}}
// Project model faces into the canvas and paint them from back to front.
function draw(){
 if(!ctx)return;const w=$('viewport').clientWidth,h=$('viewport').clientHeight;ctx.clearRect(0,0,w,h);
 if(!modelData){drawGrid(w,h);return}
 const m=modelData,visible=m.parts.filter(p=>p.visible),all=[];
 for(const part of visible)for(const p of [...part.footprint,...(part.innerFootprint||[])])all.push(project(p.x,p.y,part.z0),project(p.x,p.y,part.z1));
 if(!all.length){drawGrid(w,h);return}
 const xs=all.map(p=>p.x),ys=all.map(p=>p.y),span=Math.max(Math.max(...xs)-Math.min(...xs),Math.max(...ys)-Math.min(...ys),.01),s=Math.min(w,h)*.68/span*zoom,cx=(Math.min(...xs)+Math.max(...xs))/2,cy=(Math.min(...ys)+Math.max(...ys))/2;
 const screen=p=>({x:w/2+panX+(p.x-cx)*s,y:h/2+panY-(p.y-cy)*s});
 const ringAt=(ring,z)=>ring.map(p=>screen(project(p.x,p.y,z)));
 const signed=pts=>{let a=0;for(let i=0;i<pts.length;i++){const q=pts[(i+1)%pts.length];a+=pts[i].x*q.y-q.x*pts[i].y}return a/2};
 const paint=(pts,fill,stroke='#b8f3dd')=>{if(!pts.length)return;ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);for(const p of pts.slice(1))ctx.lineTo(p.x,p.y);ctx.closePath();ctx.fillStyle=fill;ctx.fill();if(stroke){ctx.strokeStyle=stroke;ctx.lineWidth=1;ctx.stroke()}};
 drawGrid(w,h);ctx.globalAlpha=.55;
 const base=visible.find(p=>p.type==='base');if(base){ctx.globalAlpha=.82;paint(ringAt(base.footprint,base.z1),base.color,'#b0f0dc');ctx.globalAlpha=.55}
 const faces=[];
 for(const part of visible){
  const outerOrientation=Math.sign(CatchpitDxf.area(part.footprint))||1;
  const rings=part.type==='wall'?[{ring:part.footprint,orientation:outerOrientation},{ring:part.innerFootprint,orientation:-outerOrientation}]:[{ring:part.footprint,orientation:outerOrientation}];
  for(const {ring,orientation} of rings)for(let i=0;i<ring.length;i++){
   const a=ring[i],b=ring[(i+1)%ring.length],pts=[screen(project(a.x,a.y,part.z0)),screen(project(b.x,b.y,part.z0)),screen(project(b.x,b.y,part.z1)),screen(project(a.x,a.y,part.z1))];
   if(part.type!=='base'&&signed(pts)*(-orientation)<=0)continue;
   const mid=project((a.x+b.x)/2,(a.y+b.y)/2,(part.z0+part.z1)/2);faces.push({pts,depth:mid.z,color:part.type==='base'?'#347866':part.color,opacity:part.type==='base'?.78:.55,stroke:part.type==='base'?'#9fe6d0':null});
  }
 }
 faces.sort((a,b)=>a.depth-b.depth);for(const face of faces){ctx.globalAlpha=face.opacity;paint(face.pts,face.color,face.stroke)}ctx.globalAlpha=.55;
 for(const part of visible.filter(p=>p.type==='wall')){
  for(const e of part.edgePairs){const oa=part.footprint[e.outerStart],ob=part.footprint[e.outerEnd],ia=part.innerFootprint[e.innerStart],ib=part.innerFootprint[e.innerEnd];paint([oa,ob,ib,ia].map(p=>screen(project(p.x,p.y,part.z1))),part.color,null)}
  ctx.strokeStyle='#c3ffe9';ctx.lineWidth=1;
  for(const ring of [part.footprint,part.innerFootprint]){
   for(const z of [part.z0,part.z1]){const pts=ringAt(ring,z);ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);for(const p of pts.slice(1))ctx.lineTo(p.x,p.y);ctx.closePath();ctx.stroke()}
   for(const p of ring){const a=screen(project(p.x,p.y,part.z0)),b=screen(project(p.x,p.y,part.z1));ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke()}
  }
 }
 ctx.globalAlpha=1;const origin=screen(project(0,0,0));ctx.fillStyle='#ffbb73';ctx.beginPath();ctx.arc(origin.x,origin.y,4,0,Math.PI*2);ctx.fill();ctx.fillStyle='#dce5eb';ctx.font='11px Segoe UI';ctx.fillText('0,0,0',origin.x+7,origin.y+4);
}
function drawGrid(w,h){ctx.strokeStyle='rgba(91,111,125,.13)';ctx.lineWidth=1;const step=36;for(let x=w/2%step;x<w;x+=step){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke()}for(let y=h/2%step;y<h;y+=step){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke()}}
function fit(){if(!modelData)return;zoom=1;panX=0;panY=0;yaw=-.72;pitch=.62;draw()}$('build').addEventListener('click',build);$('reset').addEventListener('click',fit);
canvas.addEventListener('pointerdown',e=>{canvas.setPointerCapture(e.pointerId);drag={x:e.clientX,y:e.clientY,button:e.button,shift:e.shiftKey}});canvas.addEventListener('pointermove',e=>{if(!drag)return;const dx=e.clientX-drag.x,dy=e.clientY-drag.y;if(drag.button===2||drag.shift){panX+=dx;panY+=dy}else{yaw+=dx*.009;pitch+=dy*.007}drag.x=e.clientX;drag.y=e.clientY;draw()});canvas.addEventListener('pointerup',()=>drag=null);canvas.addEventListener('contextmenu',e=>e.preventDefault());canvas.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.2,Math.min(8,zoom*(e.deltaY<0?1.1:.9)));draw()},{passive:false});
$('export').addEventListener('click',()=>CatchpitObjExporter.download(modelData,fileName));
resize();