// @ts-check
(()=>{
  'use strict';
  const App=window.IUS_TEMPLATE,{utils}=App;
  const series={
    7:[38,44,41,58,61,73,82],
    30:[24,28,26,32,36,31,42,46,49,45,54,58,56,61,67,64,72,69,74,78,73,81,76,84,88,86,91,89,94,98],
    90:Array.from({length:30},(_,i)=>Math.round(22+i*2.25+Math.sin(i*.82)*9+(i%6)*1.5))
  };
  const metrics={7:{leads:'18',engagement:'72%',conversion:'5.2%',dl:'+6.1%',de:'+4.4%',dc:'+0.7%'},30:{leads:'42',engagement:'68%',conversion:'4.8%',dl:'+12.4%',de:'+8.1%',dc:'+0.9%'},90:{leads:'116',engagement:'64%',conversion:'4.5%',dl:'+24.8%',de:'+10.6%',dc:'+1.3%'}};
  function render(range){
    const values=series[range],w=660,h=220,x0=40,y0=30,min=Math.min(...values),max=Math.max(...values),step=w/(values.length-1);
    const points=values.map((v,i)=>({x:x0+i*step,y:y0+h-(v-min)/(max-min||1)*h,v,i}));
    const line=points.map((p,i)=>`${i?'L':'M'}${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');
    const area=`${line} L${points.at(-1).x.toFixed(1)} ${y0+h} L${x0} ${y0+h} Z`;
    utils.$('[data-chart-line]')?.setAttribute('d',line);utils.$('[data-chart-area]')?.setAttribute('d',area);
    const group=utils.$('[data-chart-points]');if(group){group.replaceChildren();points.forEach((p,i)=>{const c=document.createElementNS('http://www.w3.org/2000/svg','circle');c.setAttribute('cx',String(p.x));c.setAttribute('cy',String(p.y));c.setAttribute('r',i===points.length-1?'6':'4');c.setAttribute('class','chart-point');c.setAttribute('tabindex','0');c.setAttribute('role','button');c.setAttribute('aria-label',`Period ${i+1}: ${p.v}`);const activate=()=>{const o=utils.$('[data-chart-output]');if(o)o.textContent=`${App.state.locale==='ja'?'期間':'Period'} ${i+1}: ${p.v}`};c.addEventListener('focus',activate);c.addEventListener('pointerenter',activate);group.append(c)})}
    const table=utils.$('[data-chart-table]');if(table){table.replaceChildren();points.forEach(p=>{const tr=document.createElement('tr');const a=document.createElement('td'),b=document.createElement('td');a.textContent=String(p.i+1);b.textContent=String(p.v);tr.append(a,b);table.append(tr)})}
    const m=metrics[range];for(const k of ['leads','engagement','conversion']){const el=utils.$(`[data-metric="${k}"]`),d=utils.$(`[data-metric-delta="${k}"]`);if(el)el.textContent=m[k];if(d)d.textContent=m[k==='leads'?'dl':k==='engagement'?'de':'dc']}
    utils.$$('[data-range]').forEach(btn=>btn.setAttribute('aria-pressed',String(Number(btn.dataset.range)===range)));
  }
  function init(){utils.$$('[data-range]').forEach(btn=>btn.addEventListener('click',()=>render(Number(btn.dataset.range))));utils.$('[data-dashboard-inspect]')?.addEventListener('click',()=>{const d=utils.$('[data-dashboard]');if(!d)return;const active=d.classList.toggle('is-inspecting');document.body.classList.toggle('dashboard-inspecting',active);const control=utils.$('[data-dashboard-inspect]');if(control){control.setAttribute('aria-expanded',String(active));control.textContent=active?(App.state.locale==='ja'?'インスペクターを閉じる':'Close interface inspector'):App.modules.i18n.t('dashboard.open')}});render(30)}
  App.modules.uiDemo={init,render};
})();
