import { el, mount } from '../dom.js';
import { api } from '../api.js';
import { svCard } from '../components/sv_card.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';

const CARD_MODULES = [clock, weather, hostPerf];   // grows in later tasks
let active = [];                                   // mounted cards needing stop()

export async function render(main) {
  active.forEach(c => c.stop && c.stop()); active = [];
  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' })
  );

  let layout = { card_order: [], hidden: [], sizes: {} };
  try { layout = await api.get('/api/dashboard/layout'); } catch { /* defaults */ }

  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); }
  }
  // health band + drag wiring arrive in Tasks 22 and 10.
}