import { createLineChart } from '../charts/lineChart';
import { createBarChart } from '../charts/barChart';

async function init() {
  // Resolve data paths relative to the article HTML so they work in all three
  // serving modes: vite dev server, vite preview, and the built dist/ opened
  // directly via file:// (where absolute /article/... paths break).
  const dataBase = new URL('./data/tsa/', document.baseURI).href;
  const [seriesRes, corrRes, irfRes, fevdRes, forecastRes, summaryRes] = await Promise.all([
    fetch(dataBase + 'series.json'),
    fetch(dataBase + 'rolling_corr.json'),
    fetch(dataBase + 'irf.json'),
    fetch(dataBase + 'fevd.json'),
    fetch(dataBase + 'forecast.json'),
    fetch(dataBase + 'summary.json')
  ]);

  const seriesData = await seriesRes.json();
  const corrData = await corrRes.json();
  const irfData = await irfRes.json();
  const fevdData = await fevdRes.json();
  const forecastData = await forecastRes.json();
  const summary = await summaryRes.json();

  // Populate Summary Stats
  const setStat = (key: string, val: string | number) => {
    const el = document.querySelector(`[data-stat="${key}"]`);
    if (el) el.textContent = String(val);
  };

  setStat('adf_nvda', summary.adf_nvda_pval.toFixed(4));
  setStat('adf_pjm', summary.adf_pjm_pval.toFixed(4));
  setStat('lag_order', summary.lag_order);
  setStat('granger_nvda_pjm', summary.granger_nvda_to_pjm_pval.toFixed(4));
  setStat('granger_pjm_nvda', summary.granger_pjm_to_nvda_pval.toFixed(4));
  setStat('var_rmse', summary.var_rmse.toFixed(4));
  setStat('ar_rmse', summary.ar_rmse.toFixed(4));

  // 1. Hero dual-axis line chart
  const heroTarget = document.getElementById('chart-hero');
  if (heroTarget) {
    const parsedSeries = seriesData.map((d: any) => ({
      date: new Date(d.date),
      nvda: d.NVDA_Close,
      pjm: d.PJM_Load
    }));
    createLineChart({
      target: heroTarget,
      series: [
        { id: 'nvda', label: 'NVDA Close ($)', data: parsedSeries.filter((d: any) => d.nvda !== null).map((d: any) => ({ date: d.date, value: d.nvda })), color: 'rgba(255, 255, 255, 0.92)', width: 1.8 },
        { id: 'pjm', label: 'PJM Load (GWh)', data: parsedSeries.filter((d: any) => d.pjm !== null).map((d: any) => ({ date: d.date, value: d.pjm })), color: 'rgba(255, 255, 255, 0.36)', dash: [5, 5], width: 1.4 }
      ],
      yAxisLabel: 'NVDA Price',
      y2AxisLabel: 'PJM Load',
      valueFormat: (value) => value.toLocaleString(undefined, { maximumFractionDigits: 2 })
    });
  }

  // 2. IRF charts
  const irfContainer = document.getElementById('chart-irf-container');
  if (irfContainer) {
    const irfPairs = [
      { key: "NVDA_to_NVDA", title: "NVDA → NVDA" },
      { key: "NVDA_to_PJM", title: "NVDA → PJM Load" },
      { key: "PJM_to_NVDA", title: "PJM Load → NVDA" },
      { key: "PJM_to_PJM", title: "PJM Load → PJM Load" }
    ];

    irfPairs.forEach(pair => {
      const div = document.createElement('div');
      div.className = 'irf-chart';
      irfContainer.appendChild(div);
      const p = document.createElement('p');
      p.textContent = pair.title;
      p.style.textAlign = 'center';
      p.style.fontSize = '12px';
      p.style.marginBottom = '8px';
      p.style.color = 'var(--text-muted)';
      div.appendChild(p);

      const fg = document.createElement('div');
      fg.style.height = 'calc(100% - 25px)';
      div.appendChild(fg);

      const pd = irfData[pair.key].map((d: any) => ({
        date: new Date(2000, 0, d.horizon + 1),
        value: d.value,
        label: `Horizon ${d.horizon}`
      }));

      createLineChart({
        target: fg,
        series: [
          { id: pair.key, label: 'Response', data: pd, color: 'rgba(255, 255, 255, 0.86)', width: 1.6 }
        ],
        xTickFormat: (date) => String(date.getDate() - 1),
        yTickFormat: (value) => value.toFixed(3),
        valueFormat: (value) => value.toFixed(5)
      });
    });
  }

  // 3. FEVD stacked bar chart for PJM Load
  const fevdTarget = document.getElementById('chart-fevd');
  if (fevdTarget) {
    const fevdMapped = fevdData.PJM.map((d: any) => {
       return {
           date: d.horizon,
           nvda: d.NVDA,
           pjm: d.PJM
       };
    });
    createBarChart({
      target: fevdTarget,
      series: [
        { id: 'nvda', label: 'NVDA', data: fevdMapped.map((d: any) => ({ date: String(d.date), value: d.nvda*100 })), color: 'rgba(255, 255, 255, 0.72)' },
        { id: 'pjm', label: 'PJM', data: fevdMapped.map((d: any) => ({ date: String(d.date), value: d.pjm*100 })), color: 'rgba(255, 255, 255, 0.18)' }
      ],
      yDomain: [0, 100],
      yTickFormat: (value) => `${value.toFixed(0)}%`,
      valueFormat: (value) => `${value.toFixed(2)}%`
    });
  }

  // 4. Rolling correlation
  const corrTarget = document.getElementById('chart-correlation');
  if (corrTarget) {
    const parsedCorr = corrData.map((d: any) => ({
      date: new Date(d.date),
      value: d.correlation
    }));
    createLineChart({
      target: corrTarget,
      series: [
        { id: 'corr', label: 'Rolling Correlation', data: parsedCorr, color: 'rgba(255, 255, 255, 0.86)', width: 1.7 }
      ],
      yDomain: [-0.4, 0.4],
      yTickFormat: (value) => value.toFixed(1),
      valueFormat: (value) => value.toFixed(4)
    });
  }

  // 5. Forecast out-of-sample
  const fcastTarget = document.getElementById('chart-forecast');
  if (fcastTarget) {
    const parsedFcast = forecastData.map((d: any) => ({
      date: new Date(d.date),
      actual: d.actual,
      var_pred: d.VAR_pred,
      ar_pred: d.AR_pred
    }));
    createLineChart({
      target: fcastTarget,
      series: [
        { id: 'actual', label: 'Actual', data: parsedFcast.map((d: any) => ({ date: d.date, value: d.actual })), color: 'rgba(255, 255, 255, 0.9)', width: 1.6 },
        { id: 'var_pred', label: 'VAR Forecast', data: parsedFcast.map((d: any) => ({ date: d.date, value: d.var_pred })), color: 'rgba(255, 255, 255, 0.46)', dash: [5, 5], width: 1.3 },
        { id: 'ar_pred', label: 'AR Forecast', data: parsedFcast.map((d: any) => ({ date: d.date, value: d.ar_pred })), color: 'rgba(255, 255, 255, 0.24)', dash: [2, 4], width: 1.2 }
      ],
      yTickFormat: (value) => value.toFixed(2),
      valueFormat: (value) => value.toFixed(5)
    });
  }
}

// Wait for DOMContentLoaded AND custom fonts to load before rendering charts.
// D3 measures SVG text immediately; if Artemis/Helvetica haven't swapped in yet,
// axis labels end up laid out against fallback font metrics and can overflow or
// mis-align after the swap.
const start = async () => {
  try {
    if (typeof document !== 'undefined' && (document as any).fonts?.ready) {
      await (document as any).fonts.ready;
    }
  } catch {
    /* font loading is best-effort; proceed regardless */
  }
  init();
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', start);
} else {
  start();
}