document.addEventListener('DOMContentLoaded', () => {
  const contextSelect = document.getElementById('context');
  const namespaceSelect = document.getElementById('namespace');
  const podList = document.getElementById('pod-list');

  async function loadContexts() {
    try {
      const res = await fetch('http://localhost:8000/contexts');
      const data = await res.json();
      contextSelect.innerHTML = '';
      data.contexts.forEach(ctx => {
        const opt = document.createElement('option');
        opt.value = ctx;
        opt.textContent = ctx;
        if (ctx === data.current) opt.selected = true;
        contextSelect.appendChild(opt);
      });
    } catch (e) {
      console.error('Failed to load contexts', e);
    }
  }

  async function loadNamespaces() {
    try {
      const res = await fetch('http://localhost:8000/namespaces');
      const data = await res.json();
      namespaceSelect.innerHTML = '';
      data.namespaces.forEach(ns => {
        const opt = document.createElement('option');
        opt.value = ns;
        opt.textContent = ns;
        namespaceSelect.appendChild(opt);
      });
    } catch (e) {
      console.error('Failed to load namespaces', e);
    }
  }

  async function loadPods() {
    const ns = namespaceSelect.value || 'default';
    try {
      const res = await fetch(`http://localhost:8000/pods?namespace=${encodeURIComponent(ns)}`);
      const data = await res.json();
      podList.innerHTML = '<li>Pods loaded (raw output available)</li>';
    } catch (e) {
      console.error('Failed to load pods', e);
    }
  }

  loadContexts();
  loadNamespaces();
  namespaceSelect.addEventListener('change', loadPods);
  loadPods();
});