let currentActivity = '';
let socket;

function renderActivitiesOld(activities) {
const list = document.getElementById('activity-list');
list.innerHTML = '';
activities.forEach(activity => {
  const div = document.createElement('div');
  div.textContent = activity;
  div.className = 'activity-item' + (activity === currentActivity ? ' selected' : '');
  div.onclick = () => selectActivity(activity);
  list.appendChild(div);
});
}

function renderActivities(activities) {
  const list = document.getElementById('activity-list');
  list.innerHTML = '';

  activities.forEach(activity => {
    const id = `activity-${activity.replace(/\s+/g, '-')}`;

    const label = document.createElement('label');
    label.className = 'activity-option';

    const radio = document.createElement('input');
    radio.type = 'radio';
    radio.name = 'activity';
    radio.value = activity;
    radio.id = id;
    if (activity === currentActivity) {
      radio.checked = true;
    }

    radio.addEventListener('change', () => {
      socket.send(JSON.stringify({ action: 'select', activity }));
    });

    const span = document.createElement('span');
    span.textContent = activity;

    label.appendChild(radio);
    label.appendChild(span);
    list.appendChild(label);
  });
}



function selectActivity(activity) {
currentActivity = activity;
document.getElementById('current-activity').textContent = activity;
renderActivities(activityList);
socket.send(JSON.stringify({ action: 'select', activity }));
}

function addNewActivity() {
const input = document.getElementById('new-activity');
const newAct = input.value.trim();
if (newAct && !activityList.includes(newAct)) {
  activityList.push(newAct);
  selectActivity(newAct);
  input.value = '';
}
}

let activityList = [];

async function initializePage() {
// Fetch initial data from server
const response = await fetch(`/api/init?u=${user}`);
const data = await response.json();
currentActivity = data.current;
activityList = data.activities;
document.getElementById('current-activity').textContent = currentActivity;
renderActivities(activityList);
}

function setupWebSocket() {
socket = new WebSocket(`ws://${window.location.host}/ws/activity?u=${user}`);

socket.onopen = () => {
  console.log('WebSocket connected');
  socket.send(JSON.stringify({ action: 'hello' }));
};

socket.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === 'activity_update') {
    currentActivity = msg.activity;
    document.getElementById('current-activity').textContent = currentActivity;
    renderActivities(activityList);
  }
};

socket.onclose = () => {
  console.log('WebSocket closed, retrying...');
  setTimeout(setupWebSocket, 1000);
};
}

// Initialize on load
window.onload = () => {
initializePage();
setupWebSocket();
};