script.js

const clockEl = document.getElementById('clock');
const dateText = document.getElementById('dateText');
const timerEl = document.getElementById('timer');
const timerStatus = document.getElementById('timerStatus');
const sessionLabel = document.getElementById('sessionLabel');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const taskForm = document.getElementById('taskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
const taskCount = document.getElementById('taskCount');
const presetButtons = document.querySelectorAll('.preset');

let tasks = JSON.parse(localStorage.getItem('focus-flow-tasks') || '[]');
let timerDuration = 25 * 60;
let timeLeft = timerDuration;
let timerInterval = null;
let isRunning = false;

function formatTime(totalSeconds) {
  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
  const seconds = String(totalSeconds % 60).padStart(2, '0');
  return `${minutes}:${seconds}`;
}

function updateClock() {
  const now = new Date();
  clockEl.textContent = now.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  });
  dateText.textContent = now.toLocaleDateString([], {
    weekday: 'short',
    month: 'short',
    day: 'numeric'
  });
}

function renderTasks() {
  if (!tasks.length) {
    taskList.innerHTML = '<li class="task-item"><span class="task-text">No tasks yet — add one above.</span></li>';
    taskCount.textContent = '0 tasks';
    return;
  }

  const completed = tasks.filter(task => task.done).length;
  taskCount.textContent = `${completed}/${tasks.length} done`;

  taskList.innerHTML = tasks
    .map(task => `
      <li class="task-item ${task.done ? 'done' : ''}">
        <label class="task-main">
          <input type="checkbox" ${task.done ? 'checked' : ''} data-id="${task.id}" />
          <span class="task-text">${task.text}</span>
        </label>
        <button class="delete-btn" data-id="${task.id}" aria-label="Delete task">✕</button>
      </li>
    `)
    .join('');
}

function saveTasks() {
  localStorage.setItem('focus-flow-tasks', JSON.stringify(tasks));
}

function addTask(text) {
  const trimmed = text.trim();
  if (!trimmed) return;

  tasks.unshift({ id: Date.now(), text: trimmed, done: false });
  saveTasks();
  renderTasks();
}

function toggleTask(id) {
  tasks = tasks.map(task => (task.id === id ? { ...task, done: !task.done } : task));
  saveTasks();
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(task => task.id !== id);
  saveTasks();
  renderTasks();
}

function updateTimerDisplay() {
  timerEl.textContent = formatTime(timeLeft);
  sessionLabel.textContent = `${timerDuration / 60} min`;
}

function startTimer() {
  if (isRunning) return;
  isRunning = true;
  timerStatus.textContent = 'In focus mode';
  timerInterval = setInterval(() => {
    timeLeft -= 1;
    updateTimerDisplay();

    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      isRunning = false;
      timerStatus.textContent = 'Session complete';
      timeLeft = 0;
      updateTimerDisplay();
    }
  }, 1000);
}

function pauseTimer() {
  if (!isRunning) return;
  clearInterval(timerInterval);
  isRunning = false;
  timerStatus.textContent = 'Paused';
}

function resetTimer() {
  clearInterval(timerInterval);
  isRunning = false;
  timeLeft = timerDuration;
  updateTimerDisplay();
  timerStatus.textContent = 'Ready to begin';
}

function setPreset(minutes) {
  timerDuration = minutes * 60;
  timeLeft = timerDuration;
  updateTimerDisplay();
  presetButtons.forEach(button => {
    button.classList.toggle('active', Number(button.dataset.minutes) === minutes);
  });
  if (!isRunning) {
    timerStatus.textContent = 'Ready to begin';
  }
}

updateClock();
setInterval(updateClock, 1000);
renderTasks();
updateTimerDisplay();

startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

taskForm.addEventListener('submit', event => {
  event.preventDefault();
  addTask(taskInput.value);
  taskInput.value = '';
});

taskList.addEventListener('click', event => {
  const deleteButton = event.target.closest('.delete-btn');
  if (deleteButton) {
    deleteTask(Number(deleteButton.dataset.id));
  }
});

taskList.addEventListener('change', event => {
  if (event.target.matches('input[type="checkbox"]')) {
    toggleTask(Number(event.target.dataset.id));
  }
});

presetButtons.forEach(button => {
  button.addEventListener('click', () => setPreset(Number(button.dataset.minutes)));
});