{{-- Odontograma 2D leve + visualizador 3D no clique --}}
{{-- Incluir dentro da aba tratamentos com: @include('patients.partials.odontograma') --}}

<style>
.odo{background:#fff;border-radius:14px;border:1px solid #e2e8f0;padding:20px}
.odo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.odo-t{font-size:13px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
.odo-modes{display:flex;gap:6px}
.odo-mode{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid #d1d5db;background:#fff;color:#374151;transition:all .15s}
.odo-mode.active{background:#2563eb;color:#fff;border-color:#2563eb}
.odo-slabel{text-align:center;font-size:11px;color:#94a3b8;margin:6px 0;font-weight:500}
.odo-row{display:flex;justify-content:center;gap:3px;flex-wrap:wrap;padding:2px}
.odo-div{border:none;border-top:2px dashed #cbd5e1;margin:10px 20px}
.tcell{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;flex-shrink:0}
.tnum{font-size:9px;color:#94a3b8;font-weight:600;transition:color .15s}
.tcell:hover .tnum{color:#2563eb}
.t3d{width:26px;height:34px;transition:transform .15s}
.t3d svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15))}
.tcell:hover .t3d{transform:translateY(-2px) scale(1.1)}
.tcell.aberto .t3d svg [data-fill]{fill:#fde047!important;stroke:#ca8a04!important}
.tcell.aberto .tnum{color:#a16207}
.tcell.finalizado .t3d svg [data-fill]{fill:#86efac!important;stroke:#15803d!important}
.tcell.finalizado .tnum{color:#15803d}
.tcell.ausente .t3d svg [data-fill]{fill:#fecaca!important;stroke:#dc2626!important;opacity:.6}
.odo-leg{display:flex;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:#64748b}
.legd{width:10px;height:10px;border-radius:2px;border:1.5px solid}

.modal3d{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.85);z-index:2000;align-items:center;justify-content:center;padding:20px}
.modal3d.show{display:flex}
.modal3d-box{background:#0f172a;border-radius:20px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.modal3d-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #1e293b}
.modal3d-title{font-size:15px;font-weight:600;color:#fff}
.modal3d-close{background:none;border:none;color:#64748b;font-size:22px;cursor:pointer;line-height:1}
.modal3d-close:hover{color:#fff}
#canvas3d{width:100%;height:340px;background:radial-gradient(circle at 50% 40%,#1e293b,#0f172a);position:relative}
.modal3d-hint{text-align:center;font-size:11px;color:#64748b;padding:8px}
.modal3d-states{display:flex;gap:8px;justify-content:center;padding:16px 20px;flex-wrap:wrap}
.ms{padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid;transition:transform .15s}
.ms:hover{transform:scale(1.05)}
.ms-n{background:#1e293b;color:#cbd5e1;border-color:#334155}
.ms-t{background:#422006;color:#fbbf24;border-color:#a16207}
.ms-f{background:#052e16;color:#4ade80;border-color:#15803d}
.ms-a{background:#450a0a;color:#f87171;border-color:#b91c1c}
@media(max-width:768px){.t3d{width:22px;height:28px}.odo-row{gap:2px}}
</style>

<div class="odo">
  <div class="odo-head">
    <span class="odo-t">Odontograma</span>
    <div class="odo-modes">
      <button class="odo-mode active" onclick="odoMode('perm',this)">Permanente</button>
      <button class="odo-mode" onclick="odoMode('dec',this)">Decídua</button>
    </div>
  </div>

  <div id="odo-perm">
    <div class="odo-slabel">Arcada superior</div>
    <div class="odo-row" id="odo-sup"></div>
    <div class="odo-div"></div>
    <div class="odo-row" id="odo-inf"></div>
    <div class="odo-slabel">Arcada inferior</div>
  </div>

  <div id="odo-dec" style="display:none">
    <div class="odo-slabel">Arcada superior (decídua)</div>
    <div class="odo-row" id="odo-dsup"></div>
    <div class="odo-div"></div>
    <div class="odo-row" id="odo-dinf"></div>
    <div class="odo-slabel">Arcada inferior (decídua)</div>
  </div>

  <div class="odo-leg">
    <span class="leg"><span class="legd" style="background:#fef9c3;border-color:#ca8a04"></span>A tratar</span>
    <span class="leg"><span class="legd" style="background:#dcfce7;border-color:#22c55e"></span>Finalizado</span>
    <span class="leg"><span class="legd" style="background:#fee2e2;border-color:#dc2626"></span>Ausente</span>
  </div>
</div>

{{-- MODAL 3D --}}
<div class="modal3d" id="modal3d">
  <div class="modal3d-box">
    <div class="modal3d-head">
      <span class="modal3d-title" id="modal3d-title">Dente</span>
      <button class="modal3d-close" onclick="close3d()">&#10005;</button>
    </div>
    <div id="canvas3d"></div>
    <div class="modal3d-hint">Arraste para girar · scroll para zoom</div>
    <div class="modal3d-states">
      <button class="ms ms-n" onclick="set3dState('normal')">Normal</button>
      <button class="ms ms-t" onclick="set3dState('aberto')">A tratar</button>
      <button class="ms ms-f" onclick="set3dState('finalizado')">Finalizado</button>
      <button class="ms ms-a" onclick="set3dState('ausente')">Ausente</button>
    </div>
  </div>
</div>

@php
  $existingStates = $toothStatus ?? [];
@endphp

<script>
window.odoStates = @json($existingStates);
const odoPatientId = {{ $patient->id ?? 0 }};

function toothType(n){
  n=+String(n).replace('d','');
  if([16,17,18,26,27,28,36,37,38,46,47,48].includes(n)) return 'molar';
  if([14,15,24,25,34,35,44,45].includes(n)) return 'premolar';
  if([13,23,33,43].includes(n)) return 'canine';
  return 'incisor';
}

function toothSVG2D(num){
  const type=toothType(num);
  if(type==='molar') return `<svg viewBox="0 0 26 34"><rect data-fill x="3" y="2" width="8" height="12" rx="2" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><rect data-fill x="15" y="2" width="8" height="12" rx="2" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><rect data-fill x="2" y="11" width="22" height="20" rx="5" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.2"/><rect x="5" y="15" width="6" height="5" rx="1.5" fill="#e2e8f0"/><rect x="15" y="15" width="6" height="5" rx="1.5" fill="#e2e8f0"/><rect x="5" y="22" width="6" height="5" rx="1.5" fill="#e2e8f0"/><rect x="15" y="22" width="6" height="5" rx="1.5" fill="#e2e8f0"/></svg>`;
  if(type==='premolar') return `<svg viewBox="0 0 26 34"><rect data-fill x="8" y="2" width="6" height="12" rx="2" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><rect data-fill x="15" y="2" width="5" height="11" rx="2" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><rect data-fill x="2" y="11" width="22" height="19" rx="6" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.2"/><ellipse cx="13" cy="19" rx="5" ry="3.5" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="0.6"/></svg>`;
  if(type==='canine') return `<svg viewBox="0 0 26 34"><rect data-fill x="9" y="2" width="9" height="14" rx="3" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><path data-fill d="M3 16 Q3 13 13 13 Q23 13 23 16 L20 30 Q20 33 13 33 Q6 33 6 30 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.2"/><path d="M9 15 L13 7 L17 15" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="0.6" stroke-linejoin="round"/></svg>`;
  return `<svg viewBox="0 0 26 34"><rect data-fill x="8" y="2" width="10" height="14" rx="3" fill="#fde68a" stroke="#d4a017" stroke-width="0.8"/><rect data-fill x="3" y="13" width="20" height="18" rx="5" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.2"/><rect x="7" y="16" width="12" height="3" rx="1.5" fill="#fff" opacity="0.7"/></svg>`;
}

function buildOdo(nums,elId,inf){
  const el=document.getElementById(elId);
  el.innerHTML='';
  nums.forEach(n=>{
    const cell=document.createElement('div');
    const st=window.odoStates[n]||'';
    cell.className='tcell'+(st?' '+st:'');
    cell.id='oc-'+n;
    const numHtml=`<span class="tnum">${String(n).replace('d','')}</span>`;
    const svgHtml=`<div class="t3d">${toothSVG2D(n)}</div>`;
    cell.innerHTML=inf?(svgHtml+numHtml):(numHtml+svgHtml);
    cell.onclick=()=>open3d(n);
    el.appendChild(cell);
  });
}

function odoMode(mode,btn){
  document.querySelectorAll('.odo-mode').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('odo-perm').style.display=mode==='perm'?'':'none';
  document.getElementById('odo-dec').style.display=mode==='dec'?'':'none';
}

buildOdo([18,17,16,15,14,13,12,11,21,22,23,24,25,26,27,28],'odo-sup',false);
buildOdo([48,47,46,45,44,43,42,41,31,32,33,34,35,36,37,38],'odo-inf',true);
buildOdo(['d55','d54','d53','d52','d51','d61','d62','d63','d64','d65'],'odo-dsup',false);
buildOdo(['d85','d84','d83','d82','d81','d71','d72','d73','d74','d75'],'odo-dinf',true);

// ===== 3D MODAL =====
let s3d={scene:null,cam:null,rend:null,group:null,raf:null,drag:false,px:0,py:0,rx:0,ry:0,auto:true,tooth:null,state:'normal',type:'molar',loaded:false};

function loadThree(cb){
  if(window.THREE){cb();return}
  const sc=document.createElement('script');
  sc.src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
  sc.onload=cb;
  document.head.appendChild(sc);
}

function open3d(num){
  s3d.tooth=num;
  s3d.type=toothType(num);
  s3d.state=window.odoStates[num]||'normal';
  document.getElementById('modal3d-title').textContent='Dente '+String(num).replace('d','');
  document.getElementById('modal3d').classList.add('show');
  loadThree(()=>{init3d();build3d()});
}

function close3d(){
  document.getElementById('modal3d').classList.remove('show');
  if(s3d.raf) cancelAnimationFrame(s3d.raf);
  const c=document.getElementById('canvas3d');
  if(s3d.rend){c.innerHTML='';s3d.rend=null}
  s3d.loaded=false;
}

const stateColors3d={normal:0xf5f5f0,aberto:0xfde047,finalizado:0x4ade80,ausente:0xf87171};

function init3d(){
  if(s3d.loaded) return;
  const c=document.getElementById('canvas3d');
  const w=c.clientWidth,h=340;
  s3d.scene=new THREE.Scene();
  s3d.cam=new THREE.PerspectiveCamera(45,w/h,0.1,100);
  s3d.cam.position.set(0,0,7);
  s3d.rend=new THREE.WebGLRenderer({antialias:true,alpha:true});
  s3d.rend.setSize(w,h);
  s3d.rend.setPixelRatio(Math.min(window.devicePixelRatio,2));
  c.appendChild(s3d.rend.domElement);

  const k=new THREE.DirectionalLight(0xffffff,1.1);k.position.set(3,5,4);s3d.scene.add(k);
  const f=new THREE.DirectionalLight(0xbfdbfe,0.5);f.position.set(-4,2,3);s3d.scene.add(f);
  const r=new THREE.DirectionalLight(0xffffff,0.6);r.position.set(0,-3,-4);s3d.scene.add(r);
  s3d.scene.add(new THREE.AmbientLight(0x94a3b8,0.5));

  s3d.group=new THREE.Group();s3d.scene.add(s3d.group);

  const cv=s3d.rend.domElement;
  cv.addEventListener('mousedown',e=>{s3d.drag=true;s3d.auto=false;s3d.px=e.clientX;s3d.py=e.clientY});
  window.addEventListener('mouseup',()=>s3d.drag=false);
  window.addEventListener('mousemove',e=>{if(!s3d.drag)return;s3d.ry+=(e.clientX-s3d.px)*0.01;s3d.rx+=(e.clientY-s3d.py)*0.01;s3d.px=e.clientX;s3d.py=e.clientY});
  cv.addEventListener('wheel',e=>{e.preventDefault();s3d.cam.position.z=Math.max(4,Math.min(12,s3d.cam.position.z+e.deltaY*0.01))},{passive:false});
  cv.addEventListener('touchstart',e=>{s3d.drag=true;s3d.auto=false;s3d.px=e.touches[0].clientX;s3d.py=e.touches[0].clientY});
  cv.addEventListener('touchend',()=>s3d.drag=false);
  cv.addEventListener('touchmove',e=>{if(!s3d.drag)return;s3d.ry+=(e.touches[0].clientX-s3d.px)*0.01;s3d.rx+=(e.touches[0].clientY-s3d.py)*0.01;s3d.px=e.touches[0].clientX;s3d.py=e.touches[0].clientY},{passive:true});

  s3d.loaded=true;
  animate3d();
}

function crownGeo(type){
  let geo;
  if(type==='molar'){
    geo=new THREE.BoxGeometry(2.2,1.6,2.2,6,4,6);
    const p=geo.attributes.position;
    for(let i=0;i<p.count;i++){let x=p.getX(i),y=p.getY(i),z=p.getZ(i);if(y>0.6){p.setY(i,y+Math.sin(x*3)*Math.cos(z*3)*0.18)}p.setX(i,x*(1-Math.abs(y)*0.08));p.setZ(i,z*(1-Math.abs(y)*0.08))}
    geo.computeVertexNormals();
  }else if(type==='premolar'){
    geo=new THREE.SphereGeometry(1.3,16,16);
    const p=geo.attributes.position;
    for(let i=0;i<p.count;i++){let x=p.getX(i),y=p.getY(i),z=p.getZ(i);p.setY(i,y*1.1);if(y>0.8){p.setX(i,x+Math.sin(x*4)*0.12);p.setZ(i,z+Math.cos(z*4)*0.12)}}
    geo.computeVertexNormals();
  }else if(type==='canine'){
    geo=new THREE.ConeGeometry(1.1,2.6,16);
    const p=geo.attributes.position;
    for(let i=0;i<p.count;i++){let x=p.getX(i),y=p.getY(i),z=p.getZ(i);p.setX(i,x*(1+Math.abs(y)*0.1));p.setZ(i,z*(1+Math.abs(y)*0.1))}
    geo.computeVertexNormals();
  }else{
    geo=new THREE.BoxGeometry(1.8,2.2,0.9,4,6,3);
    const p=geo.attributes.position;
    for(let i=0;i<p.count;i++){let x=p.getX(i),y=p.getY(i),z=p.getZ(i);p.setX(i,x*(1-Math.abs(y)*0.06));if(y>0.9)p.setZ(i,z*0.7)}
    geo.computeVertexNormals();
  }
  return geo;
}

function rootGeo(type){
  const g=new THREE.Group();
  if(type==='molar'){
    for(let i=0;i<3;i++){const m=new THREE.Mesh(new THREE.ConeGeometry(0.4,2.2,8));m.position.set((i-1)*0.7,-1.8,0);m.rotation.x=Math.PI;g.add(m)}
  }else{
    const m=new THREE.Mesh(new THREE.ConeGeometry(0.5,type==='canine'?2.8:2.2,10));m.position.y=type==='canine'?-2.4:-2.0;m.rotation.x=Math.PI;g.add(m);
  }
  return g;
}

function build3d(){
  if(!s3d.group) return;
  while(s3d.group.children.length) s3d.group.remove(s3d.group.children[0]);
  const color=stateColors3d[s3d.state];
  const absent=s3d.state==='ausente';
  const enamel=new THREE.MeshPhysicalMaterial({color,metalness:0,roughness:0.25,clearcoat:0.8,clearcoatRoughness:0.15,reflectivity:0.5,transparent:absent,opacity:absent?0.45:1});
  const rootMat=new THREE.MeshPhysicalMaterial({color:s3d.state==='normal'?0xfde68a:color,metalness:0,roughness:0.5,transparent:absent,opacity:absent?0.35:1});
  const crown=new THREE.Mesh(crownGeo(s3d.type),enamel);crown.position.y=0.6;s3d.group.add(crown);
  const roots=rootGeo(s3d.type);roots.position.y=0.3;roots.traverse(c=>{if(c.isMesh)c.material=rootMat});s3d.group.add(roots);
  s3d.group.scale.set(0.85,0.85,0.85);
}

function animate3d(){
  s3d.raf=requestAnimationFrame(animate3d);
  if(s3d.auto) s3d.ry+=0.005;
  if(s3d.group){s3d.group.rotation.x=s3d.rx;s3d.group.rotation.y=s3d.ry}
  if(s3d.rend) s3d.rend.render(s3d.scene,s3d.cam);
}

function set3dState(state){
  s3d.state=state;
  window.odoStates[s3d.tooth]=state;
  build3d();
  // atualiza o dente 2D
  const cell=document.getElementById('oc-'+s3d.tooth);
  if(cell){cell.className='tcell'+(state!=='normal'?' '+state:'')}
  // salva no backend
  fetch('{{ url("patients") }}/'+odoPatientId+'/tooth', {
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]')?.content||''},
    body:JSON.stringify({tooth:s3d.tooth,state:state})
  }).catch(()=>{});
}
</script>