script.js

import { criarTask, listarTasks, deletarTask, atualizarTask, atualizarStatus } from './connectApi.js'; //backend API connection

// ---------- helpers ----------
function showModal(selector) {
  const el = document.querySelector(selector);
  el.classList.remove('close-modal');
  setTimeout(() => el.classList.add('show'), 10);
}
function hideModal(selector) {
  const el = document.querySelector(selector);
  el.classList.remove('show');
  setTimeout(() => el.classList.add('close-modal'), 300);
}
function randomId(){
  let id= '';
  for(let i=0; i< 2; i++){
    id += Math.floor(Math.random()*100)
  }
  return id;
}


// ---------- modelo ----------
class Task {
  constructor(id, title, desc = '') {
    this.id = id || randomId();
    this.title = title;
    this.desc = desc;
    this.completed = false;
  }
  toggle() { 
    this.completed = !this.completed; 
    console.log('toggle', this.id, this.completed);
    atualizarStatus(this.id, this.completed ? 1 : 0); //backend call
  }
}

// ---------- controle ----------

const tasks = [];
async function initializeTasks() {
  const loadedTasks = await listarTasks();
  loadedTasks.forEach(taskData => {
    const task = new Task(taskData.id, taskData.title, taskData.description);
    task.id = taskData.id;
    task.completed = taskData.status ? true : false;
    tasks.push(task);
    renderTask(task);
  });
}
initializeTasks();
 
const tasksContainer = document.querySelector('.tasks-container');

// stats DOM
const totalEl = document.getElementById('total-tasks');
const doneEl   = document.getElementById('done-tasks');
const pendEl   = document.getElementById('pending-tasks');

// atualiza os números de progresso
function updateStats() {
  const total = tasks.length;
  const done  = tasks.filter(t => t.completed).length;
  const pend  = total - done;
  totalEl.textContent = total;
  doneEl.textContent  = done;
  pendEl.textContent  = pend;
}

// renderiza uma tarefa no DOM
function renderTask(task) {
  const el = document.createElement('div');
  el.className = 'task';
  el.dataset.id = task.id;
  el.innerHTML = `
    <p class="id-task">${task.id}</p>
    <h3 class="title-task">${task.title}</h3>
    <input type="checkbox" id="chk-${task.id}" class="state-task" ${task.completed ? 'checked' : ''}>
    <label for="chk-${task.id}" class="switch"></label>
    <div class="control-task">
      <button class="detail-btn btn">Detail</button>
      <button class="edit-btn btn">Edit</button>
      <button class="delete-btn btn">Delete</button>
    </div>
  `;
  tasksContainer.prepend(el);
  updateStats();
}

// ---------- eventos ----------

// abrir modal nova tarefa
document.getElementById('new-task').addEventListener('click', () => {
  showModal('#modal-new')           
});

                         
document.querySelectorAll('.cancel-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    hideModal('#modal-new');
    hideModal(' #modal-edit');          
    hideModal('#modal-delete');
  });
});

// criar nova tarefa
document.getElementById('add-task-btn').addEventListener('click', async () => {
  const title = document.getElementById('input-task').value.trim();
  const desc  = document.getElementById('task-desc').value.trim();
  if (!title) {
    alert('Informe o título da tarefa.');
    return;
  }
  const task = await criarTask({ title, description: desc }); //backend call
  console.log(task);
  // initializeTasks();
  renderTask(new Task( task.id, task.title, task.description));
  document.getElementById('input-task').value = '';
  document.getElementById('task-desc').value = '';
  hideModal('#modal-new')            
});

                                             
tasksContainer.addEventListener('click', e => {
  const btn = e.target;
  const taskEl = btn.closest('.task');
  const id = taskEl.dataset.id;

          
  if (btn.classList.contains('delete-btn')) {
    showModal('#modal-delete');
    document.querySelector('.confirm-delete').onclick = () => {
      deletarTask(id); //backend call
      taskEl.remove();
      updateStats();
      hideModal('#modal-delete')               
    };
    return;
  }

        
  if (btn.classList.contains('edit-btn')) {
    const task = tasks.find(t => t.id == id );
    console.log('edit', id, task);
    if (task) {
      document.getElementById('edit-task-title').value = task.title;
      document.getElementById('edit-task-desc').value = task.desc;
      showModal('#modal-edit');

      document.getElementById('confirm-edit-btn').onclick = () => {
        task.title = document.getElementById('edit-task-title').value.trim();
        task.desc  = document.getElementById('edit-task-desc').value.trim();
        taskEl.querySelector('.title-task').textContent = task.title;
        updateStats();
        atualizarTask(id, { title: task.title, description: task.desc }); //backend call
        hideModal('#modal-edit')            
      };
    }
  }

          
  if (btn.classList.contains('detail-btn')) {
    const task = tasks.find(t => t.id == id);
    if (task) {
      alert(`Título: ${task.title}\nDescrição: ${task.desc || '—'}`);
    }
  }

                                 
  if (btn.classList.contains('state-task')) {
    const task = tasks.find(t => t.id == id);
    if (task) {
      task.toggle();
      updateStats();
    }
  }
});