src/components/Countdown.js

import { MONTHS } from '../config.js';

export class Countdown {
  constructor(container) {
    this.container = container;
    this.nextEvent = null;
    this.intervalId = null;
  }

  setNextEvent(event) {
    this.nextEvent = event;
    this.render();
    this.startTicking();
  }

  startTicking() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    this.intervalId = setInterval(() => this.updateTime(), 1000);
  }

  getTimeUntil(date) {
    const now = new Date();
    const target = new Date(date);
    target.setHours(14, 0, 0, 0); // Assume 14:00 start time

    const diff = target - now;

    if (diff <= 0) {
      return { days: 0, hours: 0, minutes: 0, seconds: 0, passed: true };
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    return { days, hours, minutes, seconds, passed: false };
  }

  render() {
    if (!this.nextEvent) {
      this.container.innerHTML = '';
      return;
    }

    const date = new Date(this.nextEvent.date);
    const formattedDate = `${date.getDate()} ${MONTHS[date.getMonth()]}`;

    this.container.innerHTML = `
      <div class="countdown">
        <div class="countdown-header">
          <span class="countdown-label">Prochain meeting</span>
          <span class="countdown-event">${this.nextEvent.name}</span>
          <span class="countdown-location">${this.nextEvent.location.city} · ${formattedDate}</span>
        </div>
        <div class="countdown-timer">
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="days">--</span>
            <span class="countdown-unit-label">jours</span>
          </div>
          <div class="countdown-separator">:</div>
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="hours">--</span>
            <span class="countdown-unit-label">heures</span>
          </div>
          <div class="countdown-separator">:</div>
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="minutes">--</span>
            <span class="countdown-unit-label">min</span>
          </div>
          <div class="countdown-separator">:</div>
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="seconds">--</span>
            <span class="countdown-unit-label">sec</span>
          </div>
        </div>
      </div>
    `;

    this.updateTime();
  }

  updateTime() {
    if (!this.nextEvent) return;

    const time = this.getTimeUntil(this.nextEvent.date);

    const daysEl = this.container.querySelector('[data-unit="days"]');
    const hoursEl = this.container.querySelector('[data-unit="hours"]');
    const minutesEl = this.container.querySelector('[data-unit="minutes"]');
    const secondsEl = this.container.querySelector('[data-unit="seconds"]');

    if (daysEl) daysEl.textContent = String(time.days).padStart(2, '0');
    if (hoursEl) hoursEl.textContent = String(time.hours).padStart(2, '0');
    if (minutesEl) minutesEl.textContent = String(time.minutes).padStart(2, '0');
    if (secondsEl) secondsEl.textContent = String(time.seconds).padStart(2, '0');
  }

  destroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
}