import {regionNames, presetStart} from './history-core.mjs';

const rows=JSON.parse(document.getElementById('archive-chart-data').textContent);
const plot=document.getElementById('archive-plot');
const period=document.getElementById('archive-period');
const slider=document.getElementById('archive-date');
const detail=document.getElementById('archive-chart-detail');
const colors=['#c81e2b','#343e50','#aa6840','#737ea2'];
const dashes=['','9 3','3 3','12 3 2 3'];
const money=new Intl.NumberFormat('tr-TR',{maximumFractionDigits:0});
const date=s=>new Date(s+'T12:00:00Z').toLocaleDateString('tr-TR',{day:'numeric',month:'long',year:'numeric',timeZone:'UTC'});
let selected=[],x,y;

function inspect(){
 const row=selected[Number(slider.value)];if(!row)return;
 slider.setAttribute('aria-valuetext',date(row.date));
 detail.innerHTML=`<a href="/demir-fiyat-arsivi/${row.date}/">${date(row.date)} ↗</a><div class="archive-chart-values">${regionNames.map((name,i)=>`<div><span style="--series:${colors[i]}">${name}</span><strong>${money.format(row.values[i])} <small>₺/ton</small></strong></div>`).join('')}</div>`;
 const cursor=plot.querySelector('#archive-cursor');
 cursor.innerHTML=`<line x1="${x(row)}" x2="${x(row)}" y1="20" y2="270" stroke="#adb2ba" stroke-dasharray="3 4"/>${row.values.map((v,i)=>`<circle cx="${x(row)}" cy="${y(v)}" r="4" fill="${colors[i]}" stroke="white" stroke-width="2"/>`).join('')}`;
}
function draw(reset=false){
 const start=presetStart(rows.at(-1).date,period.value,rows[0].date);
 selected=rows.filter(r=>r.date>=start);
 const width=Math.max(250,plot.clientWidth),height=320,left=55,right=15,top=20,bottom=270;
 const values=selected.flatMap(r=>r.values),low=Math.min(...values),high=Math.max(...values),padding=Math.max(100,(high-low)*.12);
 const min=Math.max(0,low-padding),max=high+padding;
 const first=Date.parse(selected[0].date),last=Date.parse(selected.at(-1).date);
 x=r=>last===first?(left+width-right)/2:left+(Date.parse(r.date)-first)/(last-first)*(width-left-right);
 y=v=>bottom-(v-min)/(max-min)*(bottom-top);
 const grid=Array.from({length:5},(_,i)=>{const v=min+(max-min)*i/4,yy=y(v);return `<line x1="${left}" x2="${width-right}" y1="${yy}" y2="${yy}" stroke="#e5e7eb"/><text x="${left-8}" y="${yy+4}" text-anchor="end">${money.format(v)}</text>`;}).join('');
 const count=width<500?3:6;
 const labels=Array.from({length:count},(_,i)=>{const r=selected[Math.round(i*(selected.length-1)/(count-1))];return `<text x="${x(r)}" y="295" text-anchor="${i===0?'start':i===count-1?'end':'middle'}">${r.date.slice(8)}.${r.date.slice(5,7)}.${r.date.slice(0,4)}</text>`;}).join('');
 plot.innerHTML=`<svg viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="archive-svg-title archive-svg-desc"><title id="archive-svg-title">Dört bölgenin demir fiyatları</title><desc id="archive-svg-desc">${date(selected[0].date)} ile ${date(selected.at(-1).date)} arasındaki ${selected.length} kayıt. Bölge fiyatlarını okumak için grafiğin altındaki tarih kaydırıcısını kullanın.</desc>${grid}${labels}${regionNames.map((_,i)=>`<polyline fill="none" stroke="${colors[i]}" stroke-width="2" stroke-dasharray="${dashes[i]}" stroke-linejoin="round" points="${selected.map(r=>`${x(r).toFixed(1)},${y(r.values[i]).toFixed(1)}`).join(' ')}"/>`).join('')}<g id="archive-cursor"></g></svg>`;
 slider.max=selected.length-1;if(reset)slider.value=selected.length-1;
 document.getElementById('archive-chart-range').textContent=`${date(selected[0].date)} – ${date(selected.at(-1).date)} · ${selected.length.toLocaleString('tr-TR')} tarihli kayıt`;
 inspect();
}
period.addEventListener('change',()=>draw(true));
slider.addEventListener('input',inspect);
plot.addEventListener('pointerdown',event=>{
 const target=event.clientX-plot.getBoundingClientRect().left;
 let best=0;selected.forEach((r,i)=>{if(Math.abs(x(r)-target)<Math.abs(x(selected[best])-target))best=i;});
 slider.value=best;inspect();
});
draw(true);
new ResizeObserver(()=>draw()).observe(plot);