function init() {
  initTimeVisualizer('timeVisualizer');
}

export function updateTime() {
  fetch("/time")
    .then(res => res.json())
    .then(data => {
      document.getElementById("weatherSummary").innerText = data.time;
    });
}

function initTimeVisualizer(containerId) {
  const grid = document.createElement('div');
  grid.className = 'grid';
  document.getElementById(containerId).appendChild(grid);

  function updateTime() {
    grid.innerHTML = '';
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();

    for (let i = 0; i < 24; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      
      if (i >= 20 || i < 4) cell.classList.add('sleep');
      if (i < hours) cell.classList.add('past');
      
      if (i === hours) {
        cell.classList.add('current');
        const fillPercentage = (minutes / 60) * 100;
        cell.style.setProperty('--fill', `${fillPercentage}%`);
        const line = document.createElement('div');
        line.className = 'timeline';
        line.style.left = `calc(${fillPercentage}% - 1px)`;
        cell.appendChild(line);
      }
      
      grid.appendChild(cell);
    }
  }

  updateTime();
  setInterval(updateTime, 60000);   // 1min
}

init()