// ---------------------------------------------------------------------
// Helper: call the API relative to the current host (no hard‑coded host)
const api = async (method, endpoint, data) => {
  const res = await fetch(`/${endpoint}`, {
    method,
    headers: { 'Content-Type': 'application/json' },
    body: data ? JSON.stringify(data) : null,
  });
  if (!res.ok) throw await res.json();
  return res.json();
};

// ---------------------------------------------------------------------
// Load Providers
const providersList = document.getElementById('providers-list');
const providerForm = document.getElementById('provider-form');
const providerSelect = document.querySelector('#service-form select[name="provider_id"]');
const visitProviderSelect = document.querySelector('#visit-form select[name="provider_id"]');
async function loadProviders() {
  const providers = await api('GET', 'providers/');
  providersList.innerHTML = `<ul>${providers.map(p => `<li>${p.name} (${p.hourly_rate || 'n/a'})</li>`).join('')}</ul>`;
  const opts = providers.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
  providerSelect.innerHTML = opts;
  visitProviderSelect.innerHTML = opts;
}
providerForm.addEventListener('submit', async e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target).entries());
  if (!data.hourly_rate) delete data.hourly_rate;
  await api('POST', 'providers/', data);
  await loadProviders();
});

// ---------------------------------------------------------------------
// Load Clients
const clientsList = document.getElementById('clients-list');
const clientForm = document.getElementById('client-form');
const clientSelect = document.querySelector('#visit-form select[name="client_id"]');
async function loadClients() {
  const clients = await api('GET', 'clients/');
  clientsList.innerHTML = `<ul>${clients.map(c => `<li>${c.name}</li>`).join('')}</ul>`;
  clientSelect.innerHTML = clients.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
}
clientForm.addEventListener('submit', async e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target).entries());
  await api('POST', 'clients/', data);
  await loadClients();
});

// ---------------------------------------------------------------------
// Load Services
const servicesList = document.getElementById('services-list');
const serviceForm = document.getElementById('service-form');
async function loadServices() {
  const services = await api('GET', 'services/');
  servicesList.innerHTML = `<ul>${services.map(s => `<li>${s.name} @ $${s.price} (${s.duration_minutes || 'n/a'}min)</li>`).join('')}</ul>`;
}
serviceForm.addEventListener('submit', async e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target).entries());
  if (!data.duration_minutes) delete data.duration_minutes;
  await api('POST', 'services/', data);
  await loadServices();
});

// ---------------------------------------------------------------------
// Load Visits
const visitsList = document.getElementById('visits-list');
const visitForm = document.getElementById('visit-form');
async function loadVisits() {
  const visits = await api('GET', 'visits/');
  visitsList.innerHTML = `<ul>${visits.map(v => `<li>${new Date(v.start_time).toLocaleString()} – ${v.duration_minutes}min (Provider #${v.provider_id} • Client #${v.client_id})</li>`).join('')}</ul>`;
}
visitForm.addEventListener('submit', async e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target).entries());
  if (data.start_time) data.start_time = new Date(data.start_time).toISOString();
  await api('POST', 'visits/', data);
  await loadVisits();
});

// ---------------------------------------------------------------------
// Initial load
async function init() {
  await Promise.all([loadProviders(), loadClients(), loadServices(), loadVisits()]);
}
init();