import { el, mount } from '../dom.js';
import { api } from '../api.js';
import { renderHealthBand, stopHealthBand } from './health_band.js';
import { renderDevicesBand, stopDevicesBand } from './devices_band.js';
import { svCard } from '../components/sv_card.js';
import { attachReorder } from '../components/sv_reorder.js';
import { orderCards } from './cards/registry.js';
import clock from './cards/clock.js';
import weather from './cards/weather.js';
import hostPerf from './cards/host_perf.js';
import jobs from './cards/jobs.js';
import inbox from './cards/inbox.js';
import search from './cards/search.js';
import speedtest from './cards/speedtest.js';

const CARD_MODULES = [clock, weather, hostPerf, jobs, inbox, search, speedtest];   // grows in later tasks
let active = [];                                   // mounted cards needing stop()
let renderGen = 0;                                 // guards against overlapping async renders

export async function render(main) {
  const myGen = ++renderGen;
  active.forEach(c => c.stop && c.stop()); active = []; stopHealthBand(); stopDevicesBand();
  mount(main,
    el('h1', { class: 'view-h1' }, 'Sacred Valley'),
    el('p', { class: 'view-sub' }, 'The homelab, at a glance.'),
    el('div', { id: 'sv-cards' }),
    el('div', { id: 'sv-health' }),
    el('div', { id: 'sv-devices' })
  );

  let layout = { card_order: [], hidden: [], sizes: {} };
  try { layout = await api.get('/api/dashboard/layout'); } catch { /* defaults */ }
  // A newer render() started while we awaited — bail before mounting timers/DOM
  // so we don't double-mount cards or leak intervals onto the live grid.
  if (myGen !== renderGen) return;

  const grid = document.getElementById('sv-cards');
  const ordered = orderCards(CARD_MODULES, layout);
  for (const def of ordered) {
    const size = layout.sizes?.[def.id] || def.size;
    const { root, body } = svCard({ ...def, size });
    grid.appendChild(root);
    try { def.mount(body); def.start && def.start(); active.push(def); }
    catch (e) { body.appendChild(el('span', { class: 'muted' }, 'card failed')); console.error(def.id, e); }
  }
  attachReorder(grid, async (newOrder) => {
    // reflect immediately
    const frag = document.createDocumentFragment();
    newOrder.forEach(id => { const n = grid.querySelector(`.sv-card[data-card-id="${id}"]`); if (n) frag.appendChild(n); });
    grid.appendChild(frag);
    try { await api.put('/api/dashboard/layout', { ...layout, card_order: newOrder }); layout.card_order = newOrder; }
    catch (e) { console.error('save layout', e); }
  });
  renderHealthBand(document.getElementById('sv-health'));
  renderDevicesBand(document.getElementById('sv-devices'));
}