{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-grid-3x3-gap me-2"></i> Dashboard Builder</h4>
    <div class="d-flex gap-2">
      <button id="saveLayout" class="btn btn-primary"><i class="bi bi-save me-1"></i> Save Layout</button>
      <a class="btn btn-outline-secondary" href="{{ url_for('dashbuild.my_dashboard') }}">View</a>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-lg-3">
      <div class="card shadow-sm">
        <div class="card-header bg-light"><strong>Add Widgets</strong></div>
        <div class="list-group list-group-flush" id="widgetPicker">
          {% for w in widget_catalog %}
            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-wtype="{{ w.id }}">
              {{ w.name }}
              <span class="badge bg-secondary">{{ w.kind }}</span>
            </button>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="col-lg-9">
      <div class="card shadow-sm">
        <div class="card-header bg-light"><strong>Layout</strong></div>
        <div class="card-body" style="min-height:70vh;">
          <div class="grid-stack"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Gridstack & Chart.js CDN -->
<link href="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<style>
/* Helpful if a widget forgets to set a fixed height around <canvas> */
.widget-body canvas { min-height: 220px; }
</style>

<script>
// --- ensure scripts inside injected HTML run (Chart.js inits, etc.) ---
function __execScripts(container){
  const scripts = container.querySelectorAll('script');
  scripts.forEach(s => {
    const n = document.createElement('script');
    // copy attributes if any
    for (const {name, value} of Array.from(s.attributes)) n.setAttribute(name, value);
    if (s.src) {
      n.src = s.src; n.async = false;
    } else {
      n.textContent = s.textContent;
    }
    document.body.appendChild(n);
    n.remove();
  });
}

(function(){
  // init grid
  const grid = GridStack.init({
    cellHeight: 90,
    minRow: 1,
    float: true,
    disableOneColumnMode: true,
    resizable: { handles: 'e, se, s, sw, w' }
  });

  // render initial widgets
  const initial = [
    {% for w in widgets %}
      {id: {{ w.id }}, x: {{ w.x }}, y: {{ w.y }}, w: {{ w.w }}, h: {{ w.h }} },
    {% endfor %}
  ];
  initial.forEach(item => addWidgetToGrid(item.id, item.x, item.y, item.w, item.h));

  // Add widget button
  document.querySelectorAll('#widgetPicker [data-wtype]').forEach(btn=>{
    btn.addEventListener('click', async ()=>{
      const wtype = btn.getAttribute('data-wtype');
      const resp = await fetch("{{ url_for('dashbuild.api_add_widget') }}", {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ widget_type: wtype })
      }).then(r=>r.json());
      if(!resp.ok){ alert(resp.error||'Add failed'); return; }
      addWidgetToGrid(resp.widget_id, 0, 0, 6, 3, true);
    });
  });

  function addWidgetToGrid(id, x, y, w, h, fetchHtml=false){
    const el = document.createElement('div');
    el.className = 'grid-stack-item';
    el.setAttribute('gs-id', id);
    el.innerHTML = `
      <div class="grid-stack-item-content card h-100 shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
          <strong>Widget #${id}</strong>
          <button type="button" class="btn btn-sm btn-outline-danger btn-remove">Remove</button>
        </div>
        <div class="card-body p-2 widget-body">
          <div class="text-muted small">Loading…</div>
        </div>
      </div>`;
    grid.addWidget(el, {x,y,w,h, autoPosition: (x===undefined || y===undefined)});
    el.querySelector('.btn-remove').addEventListener('click', ()=> removeWidget(el));
    loadWidgetHtml(id, el);
  }

  async function loadWidgetHtml(id, el){
    const resp = await fetch(`{{ url_for('dashbuild.api_render_widget', widget_id=0) }}`.replace('/0','/'+id))
                      .then(r=>r.json());
    const body = el.querySelector('.widget-body');
    if(resp.ok){
      body.innerHTML = resp.html;
      __execScripts(body); // <<< run inline scripts from the HTML fragment
    }else{
      body.innerHTML = '<div class="text-danger">Failed to render.</div>';
    }
  }

  async function removeWidget(el){
    const id = el.getAttribute('gs-id');
    const ok = confirm('Remove this widget?');
    if(!ok) return;
    await fetch("{{ url_for('dashbuild.api_remove_widget') }}", {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ id: id })
    });
    grid.removeWidget(el);
  }

  // Save layout
  document.getElementById('saveLayout').addEventListener('click', async ()=>{
    const items = [];
    grid.engine.nodes.forEach((n, idx)=>{
      items.push({ id: n.el.getAttribute('gs-id'), x:n.x, y:n.y, w:n.w, h:n.h, order_index: idx });
    });
    const resp = await fetch("{{ url_for('dashbuild.api_save_layout') }}", {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify(items)
    }).then(r=>r.json());
    if(resp.ok) { alert('Saved!'); } else { alert('Save failed'); }
  });
})();
</script>
{% endblock %}