forex_dashboard/app.js

"use strict";
/* =========================================================================
   FX PULSE — dashboard logic
   ---------------------------------------------------------------------------
   Sections:
     1. Config & state
     2. API layer (fetch with CDN fallback + caching)
     3. Math/analysis helpers (MA, volatility, slope, patterns)
     4. Rendering (current value, table, heatmap, charts, AI, patterns)
     5. Calculator
     6. Theme + events + init
   ========================================================================= */

/* -------------------- 1. CONFIG & STATE -------------------- */
const MAJORS = ["usd","eur","gbp","jpy","aud","cad","chf","cny","sgd","php"];
const FALLBACK_NAMES = {usd:"US Dollar",eur:"Euro",gbp:"British Pound",jpy:"Japanese Yen",
  aud:"Australian Dollar",cad:"Canadian Dollar",chf:"Swiss Franc",cny:"Chinese Yuan",
  sgd:"Singapore Dollar",php:"Philippine Peso",hkd:"Hong Kong Dollar",nzd:"New Zealand Dollar",
  inr:"Indian Rupee",krw:"South Korean Won",thb:"Thai Baht",myr:"Malaysian Ringgit"};

const state = {
  base:"usd",
  target:"php",
  range:30,
  names:{},          // code -> name
  latest:null,       // latest base file: {date, base:{...}}
  yesterday:null,    // most recent prior day base file
  series:[],         // [{date, rate}] for selected target over range
  candles:[],        // [{x,o,h,l,c}]
  table:[],          // computed table rows
  sort:{key:"code",dir:1},
  cache:new Map(),   // url -> json
};

/* -------------------- 2. API LAYER -------------------- */
// Build the candidate URLs (primary jsDelivr, then pages.dev fallback).
function urlsLatest(base){
  return [
    `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${base}.json`,
    `https://latest.currency-api.pages.dev/v1/currencies/${base}.json`
  ];
}
function urlsDated(base,date){
  return [
    `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@${date}/v1/currencies/${base}.json`,
    `https://${date}.currency-api.pages.dev/v1/currencies/${base}.json`
  ];
}
function urlsNames(){
  return [
    `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.json`,
    `https://latest.currency-api.pages.dev/v1/currencies.json`
  ];
}

// Try each URL in order (with a hard timeout so a stalled request can't hang
// the dashboard); first success wins. Throws if all fail.
async function fetchJson(urls,timeoutMs=10000){
  const key = urls[0];
  if(state.cache.has(key)) return state.cache.get(key);
  let lastErr;
  for(const u of urls){
    const ctrl=new AbortController();
    const timer=setTimeout(()=>ctrl.abort(),timeoutMs);
    try{
      const res = await fetch(u,{signal:ctrl.signal});
      clearTimeout(timer);
      if(!res.ok) throw new Error("HTTP "+res.status);
      const json = await res.json();
      state.cache.set(key,json);
      return json;
    }catch(e){ clearTimeout(timer); lastErr = e; }
  }
  throw lastErr || new Error("All endpoints failed");
}

// Run async tasks with a concurrency cap (avoids jsDelivr burst throttling
// when fetching many date-tagged files for the historical series).
async function mapLimit(items,limit,fn){
  const out=new Array(items.length);
  let idx=0;
  async function worker(){ while(idx<items.length){ const i=idx++; out[i]=await fn(items[i],i); } }
  await Promise.all(Array.from({length:Math.min(limit,items.length)},worker));
  return out;
}

// All historical dates are derived from the *latest data date* (not the wall
// clock) so the API and the dashboard stay in sync.
function latestDate(){ return state.latest?.date ? new Date(state.latest.date+"T00:00:00Z") : new Date(); }
function ymdMinus(baseDate,n){ const d=new Date(baseDate); d.setUTCDate(d.getUTCDate()-n); return d.toISOString().slice(0,10); }

// Latest rates for a base currency.
async function getLatest(base){ return fetchJson(urlsLatest(base)); }

// Rates for a specific date; returns null if unavailable (no throw).
async function getDated(base,date){
  try{ return await fetchJson(urlsDated(base,date)); }
  catch{ return null; }
}

// Find the most recent available historical file before the latest date,
// scanning back up to `maxBack` days.
async function getRecentPast(base,startOff,maxBack){
  const ld=latestDate();
  for(let i=startOff;i<startOff+maxBack;i++){
    const data = await getDated(base, ymdMinus(ld,i));
    if(data && data[base]) return data;
  }
  return null;
}

/* -------------------- 3. ANALYSIS HELPERS -------------------- */
const mean = a => a.reduce((s,x)=>s+x,0)/(a.length||1);
function stdev(a){ const m=mean(a); return Math.sqrt(mean(a.map(x=>(x-m)**2))); }

// Simple moving average series (window w) aligned to input length (null padded).
function sma(arr,w){
  return arr.map((_,i)=> i<w-1 ? null : mean(arr.slice(i-w+1,i+1)));
}
// Daily % returns.
function returns(arr){ const r=[]; for(let i=1;i<arr.length;i++) r.push((arr[i]-arr[i-1])/arr[i-1]); return r; }
// Normalised linear-regression slope (% per step) for trend strength.
function slopePct(arr){
  const n=arr.length; if(n<2) return 0;
  const xs=arr.map((_,i)=>i), mx=mean(xs), my=mean(arr);
  let num=0,den=0;
  for(let i=0;i<n;i++){ num+=(xs[i]-mx)*(arr[i]-my); den+=(xs[i]-mx)**2; }
  const slope = den? num/den : 0;
  return (slope/my)*100; // % of mean per step
}

// Build estimated daily candles from a close series.
function buildCandles(series){
  if(series.length<2) return [];
  const closes = series.map(p=>p.rate);
  const rets = returns(closes);
  const vol = stdev(rets); // typical daily move (fraction)
  const out=[];
  for(let i=1;i<series.length;i++){
    const open=closes[i-1], close=closes[i];
    const body=Math.abs(close-open);
    // wick estimate: at least the body, padded by recent volatility
    const wick = Math.max(body*0.6, close*vol*0.9);
    const hi = Math.max(open,close)+wick;
    const lo = Math.min(open,close)-wick;
    out.push({ x: luxon.DateTime.fromISO(series[i].date).toMillis(), o:open, h:hi, l:lo, c:close });
  }
  return out;
}

// Detect market patterns from a close series. Returns [{tag,cls,text}].
function detectPatterns(series){
  const closes = series.map(p=>p.rate);
  if(closes.length<5) return [{tag:"info",cls:"t-flat",text:"Not enough history to analyse patterns."}];
  const out=[];
  const rets=returns(closes);
  const vol=stdev(rets)*100;
  const slope=slopePct(closes);
  const last=closes[closes.length-1];
  const sShort=sma(closes,5), sLong=sma(closes,Math.min(10,closes.length-1));
  const maShort=sShort[sShort.length-1], maLong=sLong[sLong.length-1];

  // Trend (via regression slope)
  if(slope>0.12) out.push({tag:"Uptrend",cls:"t-up",text:`Rate is rising ~${slope.toFixed(2)}% per day on a regression fit.`});
  else if(slope<-0.12) out.push({tag:"Downtrend",cls:"t-down",text:`Rate is falling ~${Math.abs(slope).toFixed(2)}% per day on a regression fit.`});
  else out.push({tag:"Sideways",cls:"t-flat",text:"No clear direction — rate is moving sideways."});

  // Breakout: last value beyond recent range (exclude last point)
  const prior=closes.slice(0,-1);
  const hiP=Math.max(...prior), loP=Math.min(...prior);
  if(last>hiP) out.push({tag:"Breakout ↑",cls:"t-break",text:"Closed above its recent high — upside breakout."});
  else if(last<loP) out.push({tag:"Breakout ↓",cls:"t-break",text:"Closed below its recent low — downside breakout."});

  // Volatility spike: recent vol vs earlier vol
  if(rets.length>=8){
    const half=Math.floor(rets.length/2);
    const recent=stdev(rets.slice(half))*100, early=stdev(rets.slice(0,half))*100;
    if(recent>early*1.6 && recent>0.25)
      out.push({tag:"Volatility spike",cls:"t-vol",text:`Recent swings (${recent.toFixed(2)}%) are well above the earlier ${early.toFixed(2)}% baseline.`});
  }

  // MA crossover (golden/death) in the last step
  if(maShort!=null && maLong!=null){
    const pShort=sShort[sShort.length-2], pLong=sLong[sLong.length-2];
    if(pShort!=null && pLong!=null){
      if(pShort<=pLong && maShort>maLong) out.push({tag:"Bullish crossover",cls:"t-up",text:"Short MA crossed above long MA — bullish signal."});
      else if(pShort>=pLong && maShort<maLong) out.push({tag:"Bearish crossover",cls:"t-down",text:"Short MA crossed below long MA — bearish signal."});
    }
  }
  return out;
}

// Generate human-readable rule-based AI insights.
function buildInsights(series,base,target){
  const pair=`${base.toUpperCase()}/${target.toUpperCase()}`;
  const closes=series.map(p=>p.rate);
  const out=[];
  if(closes.length<3){ return [{ic:"ℹ️",t:"Limited history available for "+pair+".",s:""}]; }
  const slope=slopePct(closes);
  const totalChg=((closes[closes.length-1]-closes[0])/closes[0])*100;
  const vol=stdev(returns(closes))*100;
  const ma7=sma(closes,Math.min(7,closes.length))[closes.length-1];
  const last=closes[closes.length-1];

  // 1. Directional pressure
  if(slope>0.12) out.push({ic:"📈",t:`${pair} is showing upward pressure, up ${totalChg.toFixed(2)}% over the last ${closes.length} days.`,s:"Buyers currently in control."});
  else if(slope<-0.12) out.push({ic:"📉",t:`${pair} is under downward pressure, down ${Math.abs(totalChg).toFixed(2)}% over the last ${closes.length} days.`,s:"Sellers currently in control."});
  else out.push({ic:"➡️",t:`${pair} is broadly flat (${totalChg>=0?"+":""}${totalChg.toFixed(2)}%) — a consolidation phase.`,s:"Direction unclear; range-bound."});

  // 2. MA momentum
  if(ma7!=null){
    if(last>ma7*1.001) out.push({ic:"🟢",t:`Price is above its ${Math.min(7,closes.length)}-day moving average, suggesting bullish momentum.`,s:`Last ${last.toFixed(4)} vs MA ${ma7.toFixed(4)}.`});
    else if(last<ma7*0.999) out.push({ic:"🔵",t:`Price is below its ${Math.min(7,closes.length)}-day moving average, suggesting bearish momentum.`,s:`Last ${last.toFixed(4)} vs MA ${ma7.toFixed(4)}.`});
  }

  // 3. Volatility read
  if(vol>0.6) out.push({ic:"⚡",t:"Volatility is higher than usual, so short-term movement may be unstable.",s:`Avg daily swing ≈ ${vol.toFixed(2)}%.`});
  else out.push({ic:"🛡️",t:"Volatility is subdued — movements are relatively calm and orderly.",s:`Avg daily swing ≈ ${vol.toFixed(2)}%.`});

  return out;
}

/* -------------------- 4. RENDERING -------------------- */
const $ = id => document.getElementById(id);
const fmt = (v,d=4)=> v==null||isNaN(v) ? "—" : Number(v).toLocaleString(undefined,{maximumFractionDigits:d,minimumFractionDigits:Math.min(2,d)});
const nameOf = c => state.names[c] || FALLBACK_NAMES[c] || c.toUpperCase();

function trendClass(p){ return p>0.05?"up":p<-0.05?"down":"flat"; }
function trendWord(p){ return p>0.05?"Uptrend":p<-0.05?"Downtrend":"Stable"; }

// --- Current value card ---
function renderCurrent(){
  const {base,target,latest,yesterday,series}=state;
  const rate = latest?.[base]?.[target];
  $("pairLabel").textContent = `${base.toUpperCase()}/${target.toUpperCase()}`;
  $("rateBig").textContent = fmt(rate,4);

  // daily change vs most recent prior day
  let chg=null;
  const prev = yesterday?.[base]?.[target];
  if(prev) chg = ((rate-prev)/prev)*100;
  const cv=$("changeVal");
  if(chg==null){ cv.textContent="n/a"; cv.className="change flat"; }
  else{ cv.textContent=`${chg>=0?"▲ +":"▼ "}${chg.toFixed(3)}%`; cv.className="change "+trendClass(chg); }

  const badge=$("trendBadge");
  badge.textContent=trendWord(chg??0);
  badge.className="badge "+trendClass(chg??0);

  // 7d stats from series
  const closes=series.map(p=>p.rate);
  if(closes.length){
    $("m7high").textContent=fmt(Math.max(...closes),4);
    $("m7low").textContent=fmt(Math.min(...closes),4);
    $("mvol").textContent=(stdev(returns(closes))*100).toFixed(2)+"%";
  }
}

// --- Table ---
function computeTable(){
  const {base,latest,yesterday}=state;
  const cur=latest?.[base]||{};
  const prev=yesterday?.[base]||{};
  const rows=[];
  for(const code in cur){
    if(code===base) continue;
    const rate=cur[code];
    const p=prev[code];
    const change = (p!=null && p!==0) ? ((rate-p)/p)*100 : null;
    rows.push({code,name:nameOf(code),rate,change});
  }
  // mark strongest / weakest by change among comparable rows
  const withChg=rows.filter(r=>r.change!=null);
  if(withChg.length){
    let s=withChg[0], w=withChg[0];
    for(const r of withChg){ if(r.change>s.change)s=r; if(r.change<w.change)w=r; }
    s.lead="s"; w.lead="w";
  }
  state.table=rows;
}
function renderTable(){
  const q=$("tableSearch").value.trim().toLowerCase();
  const {key,dir}=state.sort;
  let rows=state.table.slice();
  if(q) rows=rows.filter(r=>r.code.includes(q)||r.name.toLowerCase().includes(q));
  rows.sort((a,b)=>{
    let av=a[key], bv=b[key];
    if(key==="change"){ av=av??-Infinity; bv=bv??-Infinity; }
    if(typeof av==="string") return av.localeCompare(bv)*dir;
    return (av-bv)*dir;
  });
  const body=$("rateBody");
  body.innerHTML = rows.map(r=>{
    const cls = trendClass(r.change??0);
    const sign = r.change==null?"":(r.change>=0?"+":"");
    const lead = r.lead==="s"?`<span class="lead s">Strong</span>`:r.lead==="w"?`<span class="lead w">Weak</span>`:"";
    const rowCls = r.lead==="s"?"row-strong":r.lead==="w"?"row-weak":"";
    const arrow = r.change==null?"·":r.change>0.05?"▲":r.change<-0.05?"▼":"—";
    return `<tr class="${rowCls}">
      <td class="code">${r.code.toUpperCase()}${lead}</td>
      <td class="name">${r.name}</td>
      <td class="num">${fmt(r.rate,r.rate<10?5:2)}</td>
      <td class="num"><span class="pill ${cls}">${r.change==null?"n/a":sign+r.change.toFixed(2)+"%"}</span></td>
      <td>${arrow} ${trendWord(r.change??0)}</td>
    </tr>`;
  }).join("");
  $("tableCount").textContent=`${rows.length} currencies`;
  $("tableBaseLbl").textContent=`(1 ${state.base.toUpperCase()} = …)`;
  // header arrows
  document.querySelectorAll("thead th[data-sort]").forEach(th=>{
    const a=th.querySelector(".arr");
    if(!a) return;
    a.textContent = th.dataset.sort===key ? (dir>0?"▲":"▼") : "";
  });
}

// --- AI + patterns ---
function renderAI(){
  const ins=buildInsights(state.series,state.base,state.target);
  $("aiList").innerHTML = ins.map(i=>`<div class="insight"><div class="ic">${i.ic}</div><p>${i.t}<span>${i.s||""}</span></p></div>`).join("");
}
function renderPatterns(){
  const ps=detectPatterns(state.series);
  $("patternList").innerHTML = ps.map(p=>`<div class="pattern"><span class="tag ${p.cls}">${p.tag}</span><small>${p.text}</small></div>`).join("");
}

// --- Heatmap (basket-weighted 7-day strength from USD cross rates) ---
async function renderHeatmap(){
  const grid=$("heatGrid");
  grid.innerHTML = MAJORS.map(()=>`<div class="heat-cell skeleton" style="height:78px"></div>`).join("");
  // Cross rate C->O derived from USD file: rate = usd[O]/usd[C]
  const now = await getLatest("usd");
  const past = await getRecentPast("usd",7,7);
  if(!now?.usd || !past?.usd){ grid.innerHTML=`<div style="color:var(--text-faint);font-size:.8rem">Heatmap data unavailable.</div>`; return; }
  const N=now.usd, P=past.usd;
  const valNow=c=> c==="usd"?1:N[c], valPast=c=> c==="usd"?1:P[c];
  const strength={};
  for(const c of MAJORS){
    const diffs=[];
    for(const o of MAJORS){
      if(o===c) continue;
      const rNow=valNow(o)/valNow(c), rPast=valPast(o)/valPast(c);
      if(rPast) diffs.push(((rNow-rPast)/rPast)*100);
    }
    strength[c]=mean(diffs);
  }
  const vals=Object.values(strength);
  const lo=Math.min(...vals), hi=Math.max(...vals), span=(hi-lo)||1;
  // cool color ramp: muted navy (weak) -> bright mint/cyan (strong). No purple.
  const ramp=t=>{
    const stops=[[11,34,51],[14,74,90],[19,138,138],[31,182,166],[127,240,200]];
    const x=t*(stops.length-1), i=Math.min(stops.length-2,Math.floor(x)), f=x-i;
    const c=stops[i].map((v,k)=>Math.round(v+(stops[i+1][k]-v)*f));
    return `rgb(${c[0]},${c[1]},${c[2]})`;
  };
  const ordered=[...MAJORS].sort((a,b)=>strength[b]-strength[a]);
  grid.innerHTML = ordered.map((c,idx)=>{
    const t=(strength[c]-lo)/span;
    const tag = idx===0?"Strongest":idx===ordered.length-1?"Weakest":(strength[c]>=0?"Firm":"Soft");
    return `<div class="heat-cell" style="background:${ramp(t)};${t<0.4?'color:#cfe8f2':''}">
      <div class="code">${c.toUpperCase()}</div>
      <div class="pct">${strength[c]>=0?"+":""}${strength[c].toFixed(2)}%</div>
      <div class="lbl">${tag}</div></div>`;
  }).join("");
}

/* -------------------- CHARTS -------------------- */
let candleChart, lineChart;
function themeColors(){
  const cs=getComputedStyle(document.documentElement);
  return {
    text:cs.getPropertyValue("--text-dim").trim(),
    grid:cs.getPropertyValue("--grid").trim(),
    up:cs.getPropertyValue("--c-up").trim(),
    down:cs.getPropertyValue("--c-down").trim(),
    accent:cs.getPropertyValue("--accent").trim(),
    accent2:cs.getPropertyValue("--accent-2").trim(),
    slate:cs.getPropertyValue("--c-slate").trim(),
  };
}
function renderCandles(){
  const tc=themeColors();
  state.candles=buildCandles(state.series);
  const ctx=$("candleChart");
  if(candleChart) candleChart.destroy();
  candleChart=new Chart(ctx,{
    type:"candlestick",
    data:{datasets:[{
      label:`${state.base.toUpperCase()}/${state.target.toUpperCase()} (est.)`,
      data:state.candles,
      // chartjs-chart-financial uses the *plural* keys; keeps candles on the
      // cool palette (teal = up, slate-blue = down) — no warm reds.
      backgroundColors:{up:tc.up,down:tc.down,unchanged:tc.slate},
      borderColors:{up:tc.up,down:tc.down,unchanged:tc.slate},
    }]},
    options:{
      responsive:true,maintainAspectRatio:false,
      plugins:{legend:{display:false},tooltip:{callbacks:{
        label:c=>{const o=c.raw;return [`O ${fmt(o.o,4)}`,`H ${fmt(o.h,4)}`,`L ${fmt(o.l,4)}`,`C ${fmt(o.c,4)}`];}
      }}},
      scales:{
        x:{type:"time",time:{unit:state.range>30?"week":"day"},grid:{color:tc.grid},ticks:{color:tc.text,maxRotation:0,autoSkip:true,maxTicksLimit:8}},
        y:{grid:{color:tc.grid},ticks:{color:tc.text}}
      }
    }
  });
}
function renderLine(){
  const tc=themeColors();
  const labels=state.series.map(p=>p.date);
  const data=state.series.map(p=>p.rate);
  const ma=sma(data,7);
  const ctx=$("lineChart");
  if(lineChart) lineChart.destroy();
  // gradient fill under the line
  const g=ctx.getContext("2d").createLinearGradient(0,0,0,320);
  g.addColorStop(0,"rgba(34,211,238,.30)"); g.addColorStop(1,"rgba(34,211,238,0)");
  lineChart=new Chart(ctx,{
    type:"line",
    data:{labels,datasets:[
      {label:"Rate",data,borderColor:tc.accent,backgroundColor:g,fill:true,tension:.3,pointRadius:0,borderWidth:2.4},
      {label:"7-day MA",data:ma,borderColor:tc.accent2,borderDash:[6,5],fill:false,tension:.3,pointRadius:0,borderWidth:1.8}
    ]},
    options:{
      responsive:true,maintainAspectRatio:false,
      interaction:{mode:"index",intersect:false},
      plugins:{legend:{display:true,labels:{color:tc.text,boxWidth:14,usePointStyle:true}},
        tooltip:{callbacks:{label:c=>`${c.dataset.label}: ${fmt(c.parsed.y,5)}`}}},
      scales:{
        x:{grid:{color:tc.grid},ticks:{color:tc.text,maxRotation:0,autoSkip:true,maxTicksLimit:8}},
        y:{grid:{color:tc.grid},ticks:{color:tc.text}}
      }
    }
  });
}

/* -------------------- 5. CALCULATOR -------------------- */
async function runCalc(){
  const amt=parseFloat($("calcAmount").value)||0;
  const from=$("calcFrom").value, to=$("calcTo").value;
  try{
    const data=await getLatest(from);
    const rate = from===to ? 1 : data?.[from]?.[to];
    if(rate==null){ $("calcOut").textContent="—"; $("calcRate").textContent="rate unavailable"; return; }
    const res=amt*rate;
    $("calcOut").textContent=`${fmt(res, res<10?4:2)} ${to.toUpperCase()}`;
    $("calcRate").textContent=`1 ${from.toUpperCase()} = ${fmt(rate,6)} ${to.toUpperCase()}`;
  }catch{ $("calcRate").textContent="rate unavailable"; }
}

/* -------------------- DATA FETCH ORCHESTRATION -------------------- */
// Fetch the rate series for the selected target across the chosen range.
// Dates are counted back from the latest data date; requests are throttled.
async function fetchSeries(){
  const {base,target,range}=state;
  const ld=latestDate();
  const step = range>60 ? 3 : 1;               // sample longer ranges to limit requests
  const offsets=[]; for(let off=0;off<=range;off+=step) offsets.push(off);
  const results = await mapLimit(offsets,6, async off=>{
    if(off===0){ const d=state.latest||await getLatest(base); return d?{date:d.date,rate:d[base]?.[target]}:null; }
    const d=await getDated(base, ymdMinus(ld,off));
    return d && d[base]?.[target]!=null ? {date:d.date,rate:d[base][target]} : null;
  });
  // dedupe by date + sort ascending
  const map=new Map();
  results.filter(Boolean).forEach(p=>{ if(p.rate!=null) map.set(p.date,p.rate); });
  state.series=[...map.entries()].map(([date,rate])=>({date,rate})).sort((a,b)=>a.date<b.date?-1:1);
}

// Refresh only the series-dependent widgets (line, candles, AI, patterns, value stats).
async function refreshSeries(){
  await fetchSeries();
  renderLine(); renderCandles(); renderAI(); renderPatterns(); renderCurrent();
}

// Full refresh. Core widgets (value, table, calculator) render first from the
// two base files; charts + heatmap then load progressively in the background.
async function refreshAll(){
  showLoading(true,"Fetching exchange data…");
  $("refreshBtn").classList.add("spin");
  try{
    state.cache.clear();
    state.latest = await getLatest(state.base);
    state.yesterday = await getRecentPast(state.base,1,7);
    computeTable(); renderTable();
    renderCurrent();          // show rate + daily change immediately
    stampUpdated();
    await runCalc();
    showLoading(false);       // core dashboard is now usable
    // Progressive load — failures here never block the core dashboard.
    await Promise.allSettled([ refreshSeries(), renderHeatmap() ]);
  }catch(e){
    showError("Could not load exchange data ("+(e.message||"unknown")+"). Primary & fallback endpoints unreachable.");
  }finally{
    showLoading(false);
    $("refreshBtn").classList.remove("spin");
  }
}

/* -------------------- 6. THEME / EVENTS / INIT -------------------- */
function stampUpdated(){
  const t=new Date();
  $("updatedAt").textContent=t.toLocaleString(undefined,{hour:"2-digit",minute:"2-digit",second:"2-digit",day:"2-digit",month:"short"});
  const dataDate = state.latest?.date ? ` · data date ${state.latest.date}` : "";
  $("srcLabel").textContent=dataDate;
}
function showLoading(on,msg){ if(msg)$("loadMsg").textContent=msg; $("overlay").classList.toggle("show",on); }
function showError(msg){ $("toastMsg").textContent=msg; const t=$("toast"); t.classList.add("show"); clearTimeout(showError._t); showError._t=setTimeout(()=>t.classList.remove("show"),7000); }

function applyTheme(theme){
  document.documentElement.setAttribute("data-theme",theme);
  $("themeIcon").textContent = theme==="dark"?"🌙":"☀️";
  localStorage.setItem("fxpulse-theme",theme);
  // re-render charts so they pick up theme colors
  if(state.series.length){ renderLine(); renderCandles(); }
}

function fillSelect(sel,selected){
  const codes=Object.keys(state.names).sort();
  sel.innerHTML=codes.map(c=>`<option value="${c}" ${c===selected?"selected":""}>${c.toUpperCase()} — ${nameOf(c)}</option>`).join("");
}

function bindEvents(){
  $("baseSel").addEventListener("change",e=>{ state.base=e.target.value; refreshAll(); });
  $("targetSel").addEventListener("change",e=>{ state.target=e.target.value; refreshSeries(); });
  $("refreshBtn").addEventListener("click",refreshAll);
  $("themeBtn").addEventListener("click",()=>{
    applyTheme(document.documentElement.getAttribute("data-theme")==="dark"?"light":"dark");
  });
  // range buttons
  $("rangeBtns").addEventListener("click",e=>{
    const b=e.target.closest("button"); if(!b) return;
    state.range=+b.dataset.d;
    document.querySelectorAll("#rangeBtns button").forEach(x=>x.classList.toggle("active",x===b));
    showLoading(true,"Loading "+state.range+"-day history…");
    refreshSeries().finally(()=>showLoading(false));
  });
  // table search + sort
  $("tableSearch").addEventListener("input",renderTable);
  document.querySelectorAll("thead th[data-sort]").forEach(th=>{
    th.addEventListener("click",()=>{
      const k=th.dataset.sort;
      if(state.sort.key===k) state.sort.dir*=-1; else state.sort={key:k,dir:k==="code"||k==="name"?1:-1};
      renderTable();
    });
  });
  // calculator
  ["input","change"].forEach(ev=>{
    $("calcAmount").addEventListener(ev,runCalc);
    $("calcFrom").addEventListener("change",runCalc);
    $("calcTo").addEventListener("change",runCalc);
  });
  $("calcSwap").addEventListener("click",()=>{
    const f=$("calcFrom").value; $("calcFrom").value=$("calcTo").value; $("calcTo").value=f; runCalc();
  });
}

async function init(){
  // theme first (no flash)
  applyTheme(localStorage.getItem("fxpulse-theme")||"dark");
  // currency names for selectors
  try{ state.names=await fetchJson(urlsNames()); }
  catch{ state.names={...FALLBACK_NAMES}; showError("Currency list endpoint failed — using a reduced fallback list."); }
  fillSelect($("baseSel"),state.base);
  fillSelect($("targetSel"),state.target);
  fillSelect($("calcFrom"),"usd");
  fillSelect($("calcTo"),"eur");
  bindEvents();
  await refreshAll();
}

// Wait for Chart.js (and financial plugin) then boot.
window.addEventListener("DOMContentLoaded",init);