/**
 * MaterialForge — Crystal Structure Design Lab
 * Modular Frontend Application
 */

class MaterialForgeApp {
  constructor() {
    this.API_BASE = window.location.origin;
    this.WS_URL = this.API_BASE.replace(/^http/i, 'ws') + '/ws';
    this.ws = null;
    this.pendingRequest = null;
    this.connectingPromise = null;
    this.state = {
      rewardHistory: [],
      bestReward: 0,
      currentObs: null,
      selectedAtom: 'A',
      selectedAction: 'place',
      selectedCell: { r: 0, c: 0 },
      hoverPos: { r: -1, c: -1 }
    };

    // Configuration
    this.ATOM_COLORS = { A: '#e74c3c', B: '#3b82f6', C: '#f59e0b', P: '#10b981', '.': '#111827' };
    this.ATOM_GLOW   = { A: '#e74c3c', B: '#3b82f6', C: '#f59e0b', P: '#10b981' };
    this.CELL_SIZE = 38;
    this.GRID_SIZE = 8;
    this.PAD = 4;

    this.init();
  }

  /* ── Initialization ── */
  async init() {
    this.cacheElements();
    this.bindEvents();
    this.setupCharts();
    this.drawLattice(null);
    
    await this.checkHealth();
    this.setLoading(false);
    this.log('Laboratory Protocol Initialized', 'ok');
    // Health telemetry polling
    setInterval(() => this.checkHealth(), 30000);
  }

  cacheElements() {
    this.els = {
      loading: document.getElementById('loading-overlay'),
      statusDot: document.getElementById('status-dot'),
      statusText: document.getElementById('status-text'),
      apiBase: document.getElementById('api-base'),
      toast: document.getElementById('toast'),
      logBox: document.getElementById('log-box'),
      canvas: document.getElementById('lattice-canvas'),
      ctx: document.getElementById('lattice-canvas').getContext('2d'),
      
      // KPIs
      kpi: {
        step: document.getElementById('kpi-step'),
        reward: document.getElementById('kpi-reward'),
        best: document.getElementById('kpi-best'),
        orderIndex: document.getElementById('kpi-quality'),
        cost: document.getElementById('kpi-cost'),
        atoms: document.getElementById('kpi-atoms'),
        atomCount: document.getElementById('lat-atom-count'),
        episodeId: document.getElementById('episode-id')
      },
      
      // Controls
      difficulty: document.getElementById('sel-difficulty'),
      scenario: document.getElementById('sel-scenario'),
      selectedCell: document.getElementById('selected-cell'),
      hoverCell: document.getElementById('hover-cell'),
      selectedAtomDisplay: document.getElementById('selected-atom-display'),
      quickActionDisplay: document.getElementById('quick-action-display'),
      btnReset: document.getElementById('btn-reset'),
      btnStep: document.getElementById('btn-step'),
      atomSection: document.getElementById('atom-section')
    };

    // Resize canvas
    this.els.canvas.width = this.GRID_SIZE * this.CELL_SIZE + this.PAD * 2;
    this.els.canvas.height = this.GRID_SIZE * this.CELL_SIZE + this.PAD * 2;
  }

  bindEvents() {
    this.els.btnReset.onclick = () => this.doReset();
    this.els.btnStep.onclick = () => this.doStepFromSelection();
    
    // Canvas interaction
    this.els.canvas.addEventListener('click', (e) => this.handleCanvasClick(e));
    this.els.canvas.addEventListener('contextmenu', (e) => this.handleCanvasRightClick(e));
    this.els.canvas.addEventListener('mousemove', (e) => this.handleCanvasHover(e));
    this.els.canvas.addEventListener('mouseleave', () => {
      this.state.hoverPos = { r: -1, c: -1 };
      this.els.hoverCell.textContent = '-';
      this.drawLattice(this.state.currentObs ? this.state.currentObs.grid : null);
    });

    // Keyboard
    document.addEventListener('keydown', (e) => {
      if (['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) return;
      if (e.key === 'Enter') this.doStepFromSelection();
      if (e.key.toLowerCase() === 'r') this.doReset();
    });
  }

  /* ── API Interaction ── */
  async ensureSocket() {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      return this.ws;
    }
    if (this.connectingPromise) {
      return this.connectingPromise;
    }

    this.connectingPromise = new Promise((resolve, reject) => {
      const socket = new WebSocket(this.WS_URL);

      socket.addEventListener('open', () => {
        this.ws = socket;
        this.connectingPromise = null;
        this.log('Persistent lab session established', 'ok');
        resolve(socket);
      }, { once: true });

      socket.addEventListener('message', (event) => this.handleSocketMessage(event));

      socket.addEventListener('close', () => {
        this.ws = null;
        this.connectingPromise = null;
        if (this.pendingRequest) {
          this.pendingRequest.reject(new Error('Lab session closed unexpectedly'));
          this.pendingRequest = null;
        }
      });

      socket.addEventListener('error', () => {
        if (this.connectingPromise) {
          this.connectingPromise = null;
        }
        reject(new Error('Unable to connect to the lab session'));
      }, { once: true });
    });

    return this.connectingPromise;
  }

  handleSocketMessage(event) {
    let payload;
    try {
      payload = JSON.parse(event.data);
    } catch {
      if (this.pendingRequest) {
        this.pendingRequest.reject(new Error('Received invalid server response'));
        this.pendingRequest = null;
      }
      return;
    }

    if (!this.pendingRequest) return;

    const request = this.pendingRequest;
    this.pendingRequest = null;

    if (payload.type === 'error') {
      request.reject(new Error(payload.data?.message || 'Unknown server error'));
      return;
    }

    request.resolve(payload.data);
  }

  normalizeObservationResponse(payload) {
    const obs = payload?.observation ?? payload ?? {};
    const grid = Array.isArray(obs.grid) ? obs.grid : (Array.isArray(payload?.grid) ? payload.grid : []);

    return {
      ...obs,
      grid,
      current_properties: obs.current_properties ?? {},
      target: obs.target ?? {},
      score_breakdown: obs.score_breakdown ?? {},
      metadata: obs.metadata ?? {},
      phase: obs.phase ?? 'amorphous',
      step_number: obs.step_number ?? 0,
      max_steps: obs.max_steps ?? 50,
      total_cost: obs.total_cost ?? 0,
      cost_budget: obs.cost_budget ?? 0,
      reward: payload?.reward ?? obs.reward ?? 0,
      done: payload?.done ?? obs.done ?? false
    };
  }

  async wsRequest(message) {
    const socket = await this.ensureSocket();
    if (this.pendingRequest) {
      throw new Error('Another environment request is still in progress');
    }

    return new Promise((resolve, reject) => {
      this.pendingRequest = { resolve, reject };

      try {
        socket.send(JSON.stringify(message));
      } catch (error) {
        this.pendingRequest = null;
        reject(error);
      }
    });
  }

  async checkHealth() {
    try {
      this.els.apiBase.textContent = window.location.host;
      const h = await fetch(this.API_BASE + '/health').then(r => r.json());
      this.els.statusDot.classList.remove('offline');
      this.els.statusText.textContent = (h.status === 'ok' || h.status === 'healthy') ? 'API Online' : 'Warning';
      return true;
    } catch {
      this.els.statusDot.classList.add('offline');
      this.els.statusText.textContent = 'API Offline';
      return false;
    }
  }

  /* ── Business Logic ── */
  async doReset() {
    this.setLoading(true);
    try {
      const payload = { 
        difficulty: this.els.difficulty.value,
        scenario_name: this.els.scenario.value || undefined
      };
      const response = await this.wsRequest({ type: 'reset', data: payload });
      const obs = this.normalizeObservationResponse(response);

      this.state.rewardHistory = [];
      this.state.bestReward = 0;
      this.resetCharts();
      this.updateUI(obs, 0);
      
      this.log(`Protocol Reset → Diff: ${payload.difficulty} | Scenario: ${payload.scenario_name || 'Random'}`, 'ok');
      this.toast('Laboratory environment re-initialized', 'success');
    } catch (e) {
      this.log(`Initialization Failure: ${e.message}`, 'err');
      this.toast(`Reset failed: ${e.message}`, 'error');
    } finally {
      this.setLoading(false);
    }
  }

  async doStepFromSelection() {
    if (!this.state.currentObs) return this.toast('Reset the environment first', 'error');
    const { r, c } = this.state.selectedCell;
    const cell = this.state.currentObs.grid?.[r]?.[c] ?? '.';
    if (cell !== '.') {
      return this.toast('Cell is occupied. Right click to remove first.', 'error');
    }
    await this.executeAction({
      action_type: 'place',
      row: r,
      col: c,
      atom: this.state.selectedAtom
    });
  }

  async executeAction(action) {
    if (!this.state.currentObs) return;
    this.els.btnStep.disabled = true;
    const row = action.row;
    const col = action.col;

    try {
      const response = await this.wsRequest({ type: 'step', data: action });
      const obs = this.normalizeObservationResponse(response);
      const reward = obs.reward ?? 0;
      const done   = obs.done ?? false;

      this.state.rewardHistory.push(reward);
      this.state.bestReward = Math.max(this.state.bestReward, reward);

      this.updateCharts(reward);
      this.updateUI(obs, reward);

      const actionStr = `${action.action_type.toUpperCase()} [${row},${col}] ${action.atom ? 'Species: '+action.atom : ''}`;
      this.log(`Step ${obs.step_number}: ${actionStr} → Rwd: ${reward.toFixed(4)}${done ? ' [COMPLETE]' : ''}`, done ? 'ok' : '');

      if (done) this.toast(`Episode complete. Optimal reward: ${this.state.bestReward.toFixed(4)}`, 'success');
    } catch (e) {
      this.log(`Step error: ${e.message}`, 'err');
      this.toast(`Step failed: ${e.message}`, 'error');
    } finally {
      this.els.btnStep.disabled = false;
    }
  }

  /* ── UI Rendering ── */
  updateUI(obs, reward) {
    this.state.currentObs = obs;
    const grid = Array.isArray(obs.grid) ? obs.grid : [];
    this.drawLattice(grid);

    // KPIs
    this.els.kpi.step.textContent = `${obs.step_number} / ${obs.max_steps}`;
    this.els.kpi.reward.textContent = (reward ?? 0).toFixed(4);
    this.els.kpi.best.textContent = this.state.bestReward.toFixed(4);
    this.els.kpi.cost.textContent = `${Math.round(obs.total_cost)} / ${Math.round(obs.cost_budget)}`;

    const atomCount = grid.flat().filter(c => c !== '.').length;
    this.els.kpi.atoms.textContent = atomCount;
    this.els.kpi.atomCount.textContent = `${atomCount} atoms`;
    this.els.selectedAtomDisplay.textContent = this.state.selectedAtom;
    this.els.selectedCell.textContent = `${this.state.selectedCell.r}, ${this.state.selectedCell.c}`;
    this.els.quickActionDisplay.textContent = 'PLACE';

    const orderIdx = obs.score_breakdown?.lattice_order_index ?? 0;
    this.els.kpi.orderIndex.textContent = orderIdx.toFixed(3);
    this.els.kpi.orderIndex.className = 'kpi-value phase-' + (obs.phase || 'amorphous');

    // Property bars
    ['hardness', 'conductivity', 'thermal_resistance', 'elasticity'].forEach(p => {
      const curr = obs.current_properties[p] ?? 0;
      const tgt  = obs.target[p] ?? 0;
      document.getElementById(`pv-${p}`).textContent = `${curr.toFixed(0)} / ${tgt.toFixed(0)}`;
      document.getElementById(`pb-${p}`).style.width = Math.min(curr, 100) + '%';
      document.getElementById(`pt-${p}`).style.left  = Math.min(tgt, 100) + '%';
    });

    const sb = obs.score_breakdown || {};
    document.getElementById('sc-stability').textContent = (sb.structural_stability ?? 0).toFixed(3);
    document.getElementById('sc-quality').textContent   = (sb.lattice_order_index ?? 0).toFixed(3);
    document.getElementById('sb-stability').style.width = ((sb.structural_stability ?? 0) * 100) + '%';
    document.getElementById('sb-quality').style.width   = ((sb.lattice_order_index ?? 0) * 100) + '%';

    if (obs.metadata && this.els.kpi.episodeId) {
      this.els.kpi.episodeId.textContent = `scenario: ${obs.metadata.scenario_name || 'random'} · diff: ${obs.metadata.difficulty || '—'}`;
    }
  }

  drawLattice(grid) {
    const { ctx, canvas } = this.els;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#080c14';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let r = 0; r < this.GRID_SIZE; r++) {
      for (let c = 0; c < this.GRID_SIZE; c++) {
        const cell = (grid && grid[r] && grid[r][c]) || '.';
        const x = this.PAD + c * this.CELL_SIZE;
        const y = this.PAD + r * this.CELL_SIZE;
        const color = this.ATOM_COLORS[cell] || this.ATOM_COLORS['.'];

        ctx.fillStyle = color;
        ctx.globalAlpha = cell === '.' ? 0.25 : 0.9;
        this.roundRect(ctx, x + 1, y + 1, this.CELL_SIZE - 2, this.CELL_SIZE - 2, 6);
        ctx.fill();
        ctx.globalAlpha = 1;

        if (cell !== '.') {
          ctx.shadowBlur = 14;
          ctx.shadowColor = this.ATOM_GLOW[cell];
          ctx.font = 'bold 16px "JetBrains Mono", monospace';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillStyle = '#fff';
          ctx.fillText(cell, x + this.CELL_SIZE / 2, y + this.CELL_SIZE / 2);
          ctx.shadowBlur = 0;
        }

        ctx.strokeStyle = 'rgba(30,45,69,0.5)';
        ctx.lineWidth = 0.5;
        ctx.strokeRect(x + 0.5, y + 0.5, this.CELL_SIZE - 1, this.CELL_SIZE - 1);
      }
    }
    this.drawHover();
  }

  drawHover() {
    const { r, c } = this.state.hoverPos;
    if (r < 0 || c < 0) return;
    const x = this.PAD + c * this.CELL_SIZE;
    const y = this.PAD + r * this.CELL_SIZE;
    this.els.ctx.strokeStyle = 'rgba(0,212,170,0.8)';
    this.els.ctx.lineWidth = 2;
    this.roundRect(this.els.ctx, x + 2, y + 2, this.CELL_SIZE - 4, this.CELL_SIZE - 4, 5);
    this.els.ctx.stroke();
  }

  /* ── Interaction Handlers ── */
  handleCanvasClick(e) {
    const coords = this.getCanvasCoords(e);
    if (coords) {
      this.setSelectedCell(coords);
      if (!this.state.currentObs) return;
      const currentCell = this.state.currentObs.grid?.[coords.r]?.[coords.c] ?? '.';
      if (currentCell !== '.') {
        this.toast('Cell is occupied. Right click to remove first.', 'error');
        return;
      }
      this.executeAction({
        action_type: 'place',
        row: coords.r,
        col: coords.c,
        atom: this.state.selectedAtom
      });
    }
  }

  handleCanvasRightClick(e) {
    e.preventDefault();
    const coords = this.getCanvasCoords(e);
    if (coords) {
      this.setSelectedCell(coords);
      if (!this.state.currentObs) return;
      const currentCell = this.state.currentObs.grid?.[coords.r]?.[coords.c] ?? '.';
      if (currentCell === '.') {
        this.toast('Cell is already empty', 'error');
        return;
      }
      this.els.quickActionDisplay.textContent = 'REMOVE';
      this.executeAction({
        action_type: 'remove',
        row: coords.r,
        col: coords.c
      });
    }
  }

  handleCanvasHover(e) {
    const coords = this.getCanvasCoords(e);
    if (coords && (coords.r !== this.state.hoverPos.r || coords.c !== this.state.hoverPos.c)) {
      this.state.hoverPos = coords;
      this.els.hoverCell.textContent = `${coords.r}, ${coords.c}`;
      if (this.state.currentObs) {
        const currentCell = this.state.currentObs.grid?.[coords.r]?.[coords.c] ?? '.';
        this.els.quickActionDisplay.textContent = currentCell === '.' ? 'PLACE' : 'REMOVE ONLY';
      }
      this.drawLattice(this.state.currentObs ? this.state.currentObs.grid : null);
    }
  }

  setSelectedCell(coords) {
    this.state.selectedCell = coords;
    this.els.selectedCell.textContent = `${coords.r}, ${coords.c}`;
    this.drawLattice(this.state.currentObs ? this.state.currentObs.grid : null);
  }

  getCanvasCoords(e) {
    const rect = this.els.canvas.getBoundingClientRect();
    const scaleX = this.els.canvas.width / rect.width;
    const scaleY = this.els.canvas.height / rect.height;
    const col = Math.floor(((e.clientX - rect.left) * scaleX - this.PAD) / this.CELL_SIZE);
    const row = Math.floor(((e.clientY - rect.top) * scaleY - this.PAD) / this.CELL_SIZE);
    return (row >= 0 && row < 8 && col >= 0 && col < 8) ? { r: row, c: col } : null;
  }

  /* ── Charts ── */
  setupCharts() {
    Chart.defaults.color = '#94a3b8';
    Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
    Chart.defaults.plugins.legend.labels.usePointStyle = true;
    Chart.defaults.plugins.legend.labels.boxWidth = 8;
    Chart.defaults.plugins.legend.labels.boxHeight = 8;

    const rewardChartCtx = document.getElementById('reward-chart').getContext('2d');
    const rewardGradient = rewardChartCtx.createLinearGradient(0, 0, 0, 180);
    rewardGradient.addColorStop(0, 'rgba(0,212,170,0.30)');
    rewardGradient.addColorStop(1, 'rgba(0,212,170,0.02)');
    this.rewardChart = new Chart(rewardChartCtx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          data: [],
          borderColor: '#00d4aa',
          backgroundColor: rewardGradient,
          fill: true,
          tension: 0.35,
          pointRadius: 0,
          pointHoverRadius: 4,
          borderWidth: 2.5
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { intersect: false, mode: 'index' },
        plugins: {
          legend: { display: false },
          tooltip: {
            backgroundColor: '#0f172a',
            borderColor: 'rgba(148,163,184,0.18)',
            borderWidth: 1,
            displayColors: false,
            callbacks: {
              label: (ctx) => `Reward ${Number(ctx.parsed.y).toFixed(3)}`
            }
          }
        },
        scales: {
          x: { grid: { display: false }, ticks: { font: { size: 10 } } },
          y: {
            min: -0.05,
            max: 1.05,
            grid: { color: 'rgba(30,45,69,0.3)' },
            ticks: {
              font: { size: 10 },
              callback: (value) => Number(value).toFixed(1)
            }
          }
        }
      }
    });
  }

  updateCharts(reward) {
    this.rewardChart.data.labels.push(this.state.rewardHistory.length);
    this.rewardChart.data.datasets[0].data.push(reward);
    this.rewardChart.update();
  }

  resetCharts() {
    this.rewardChart.data.labels = [];
    this.rewardChart.data.datasets[0].data = [];
    this.rewardChart.update();
  }

  /* ── Utilities ── */
  setLoading(on) {
    this.els.loading.classList.toggle('hidden', !on);
    this.els.btnReset.disabled = on;
    this.els.btnStep.disabled = on;
  }

  log(msg, type = '') {
    const entry = document.createElement('div');
    entry.className = 'log-entry';
    entry.innerHTML = `<span class="log-ts">${new Date().toLocaleTimeString()}</span><span class="log-${type}">${msg}</span>`;
    this.els.logBox.appendChild(entry);
    this.els.logBox.scrollTop = this.els.logBox.scrollHeight;
  }

  toast(msg, type = '') {
    this.els.toast.textContent = msg;
    this.els.toast.className = `toast show ${type}`;
    clearTimeout(this.toastTimeout);
    this.toastTimeout = setTimeout(() => this.els.toast.className = 'toast', 3000);
  }

  roundRect(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
    ctx.lineTo(x + w, y + h - r);
    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
    ctx.lineTo(x + r, y + h);
    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();
  }

  selectAtom(atom) {
    this.state.selectedAtom = atom;
    this.els.selectedAtomDisplay.textContent = atom;
    this.els.quickActionDisplay.textContent = 'PLACE';
    document.querySelectorAll('.atom-btn').forEach(b => b.classList.toggle('selected', b.dataset.atom === atom));
  }
}

// Analytics Logic
async function loadBenchmarks() {
  const status = document.getElementById('benchmark-status');
  try {
    const res = await fetch('/playground/benchmarks.json');
    if (!res.ok) throw new Error('Benchmark data not found. Please run agent_benchmark.py');
    const data = await res.json();
    if (!Array.isArray(data) || data.length === 0) {
      throw new Error('Benchmark dataset is empty');
    }

    const average = (values) => values.reduce((sum, value) => sum + value, 0) / (values.length || 1);
    const avgBest = average(data.map((run) => run.best_reward));
    const avgFinal = average(data.map((run) => run.final_reward));
    const overruns = data.filter((run) => run.total_cost > run.cost_budget).length;
    const bestRun = data.reduce((best, run) => (run.best_reward > best.best_reward ? run : best), data[0]);
    const topPhase = Object.entries(data.reduce((acc, run) => {
      acc[run.phase] = (acc[run.phase] || 0) + 1;
      return acc;
    }, {})).sort((a, b) => b[1] - a[1])[0];

    const setText = (id, text) => {
      const el = document.getElementById(id);
      if (el) el.textContent = text;
    };

    setText('bm-total-runs', String(data.length));
    setText('bm-avg-best', avgBest.toFixed(3));
    setText('bm-best-run', `${bestRun.scenario} (${bestRun.difficulty}) reached ${bestRun.best_reward.toFixed(3)} in ${bestRun.steps} steps and finished in phase ${bestRun.phase}.`);
    setText('analytics-total', String(data.length));
    setText('analytics-avg-best', avgBest.toFixed(3));
    setText('analytics-avg-final', avgFinal.toFixed(3));
    setText('analytics-budget-hit', `${overruns} / ${data.length}`);

    status.textContent = `Loaded ${data.length} benchmark episodes. Dominant phase: ${topPhase ? `${topPhase[0]} (${topPhase[1]})` : 'n/a'}.`;

    // 1. Phase Distribution (Pie)
    const phases = data.reduce((acc, run) => {
      acc[run.phase] = (acc[run.phase] || 0) + 1;
      return acc;
    }, {});
    
    if (window.phaseChart) window.phaseChart.destroy();
    window.phaseChart = new Chart(document.getElementById('phase-pie-chart'), {
      type: 'doughnut',
      data: {
        labels: Object.keys(phases),
        datasets: [{
          data: Object.values(phases),
          backgroundColor: ['#00d4aa', '#3b82f6', '#f59e0b', '#8b5cf6'],
          borderColor: '#111823',
          borderWidth: 3,
          hoverOffset: 6
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '58%',
        plugins: {
          legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 16 } },
          tooltip: {
            backgroundColor: '#0f172a',
            borderColor: 'rgba(148,163,184,0.18)',
            borderWidth: 1,
            callbacks: {
              label: (ctx) => `${ctx.label}: ${ctx.parsed} runs`
            }
          }
        }
      }
    });

    // 2. Scenario Performance (Bar)
    if (window.barChart) window.barChart.destroy();
    window.barChart = new Chart(document.getElementById('scenario-bar-chart'), {
      type: 'bar',
      data: {
        labels: data.map((r) => `${r.scenario} · ${r.difficulty}`),
        datasets: [
          {
            label: 'Best Reward',
            data: data.map((r) => r.best_reward),
            backgroundColor: '#00d4aa',
            borderRadius: 10,
            barPercentage: 0.7,
            categoryPercentage: 0.7,
            yAxisID: 'y'
          },
          {
            label: 'Final Reward',
            data: data.map((r) => r.final_reward),
            backgroundColor: '#3b82f6',
            borderRadius: 10,
            barPercentage: 0.7,
            categoryPercentage: 0.7,
            yAxisID: 'y'
          },
          {
            type: 'line',
            label: 'Budget Used %',
            data: data.map((r) => (r.total_cost / r.cost_budget) * 100),
            borderColor: '#f59e0b',
            backgroundColor: '#f59e0b',
            pointRadius: 3,
            pointHoverRadius: 5,
            tension: 0.3,
            borderWidth: 2,
            yAxisID: 'yBudget'
          }
        ]
      },
      options: { 
        responsive: true, 
        maintainAspectRatio: false, 
        interaction: { intersect: false, mode: 'index' },
        scales: { 
          y: {
            min: 0,
            max: 1,
            position: 'left',
            title: { display: true, text: 'Reward' },
            grid: { color: 'rgba(30,45,69,0.3)' },
            ticks: {
              color: '#64748b',
              callback: (value) => Number(value).toFixed(1)
            }
          },
          yBudget: {
            min: 0,
            max: Math.max(140, ...data.map((r) => Math.ceil(((r.total_cost / r.cost_budget) * 100) / 10) * 10)),
            position: 'right',
            title: { display: true, text: 'Budget %' },
            grid: { display: false },
            ticks: {
              color: '#f59e0b',
              callback: (value) => `${value}%`
            }
          },
          x: {
            grid: { display : false },
            ticks: { color: '#64748b', font: { size: 10 } }
          }
        },
        plugins: {
          legend: { labels: { color: '#94a3b8', padding: 16 } },
          tooltip: {
            backgroundColor: '#0f172a',
            borderColor: 'rgba(148,163,184,0.18)',
            borderWidth: 1,
            callbacks: {
              label: (ctx) => {
                if (ctx.dataset.yAxisID === 'yBudget') {
                  return `${ctx.dataset.label}: ${Number(ctx.parsed.y).toFixed(0)}%`;
                }
                return `${ctx.dataset.label}: ${Number(ctx.parsed.y).toFixed(3)}`;
              }
            }
          }
        }
      }
    });

    const insights = [
      `Best observed run: ${bestRun.scenario} on ${bestRun.difficulty} difficulty with reward ${bestRun.best_reward.toFixed(3)}.`,
      `${overruns} of ${data.length} recorded episodes exceeded the nominal budget, which shows the cost penalty is active.`,
      `Average best reward is ${avgBest.toFixed(3)} while average final reward is ${avgFinal.toFixed(3)}, so later-step degradation is visible in the baseline traces.`
    ];

    const insightBox = document.getElementById('benchmark-insights');
    if (insightBox) {
      insightBox.innerHTML = insights.map((item) => `<div class="insight-item">${item}</div>`).join('');
    }

    const tableBody = document.getElementById('benchmark-table-body');
    if (tableBody) {
      tableBody.innerHTML = data.map((run) => `
        <tr>
          <td>${run.scenario}</td>
          <td>${run.difficulty}</td>
          <td>${run.best_reward.toFixed(3)}</td>
          <td>${run.final_reward.toFixed(3)}</td>
          <td>${run.phase}</td>
          <td>${run.total_cost.toFixed(0)} / ${run.cost_budget.toFixed(0)}</td>
          <td>${run.steps}</td>
        </tr>
      `).join('');
    }

  } catch (e) {
    status.textContent = `Notice: ${e.message}`;
    status.style.color = '#ef4444';
  }
}

// Instantiate app
window.MF_APP = new MaterialForgeApp();
setTimeout(loadBenchmarks, 1000); // Initial load attempt

function selectAtom(btn) { window.MF_APP.selectAtom(btn.dataset.atom); }