<div class="container py-5 d-flex justify-content-center">
  <div class="card btd-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-3">My Tasks</h5>

      <form id="btdForm" class="d-flex gap-2 mb-3">
        <input type="text" class="form-control" id="btdInput" placeholder="Add a new task...">
        <button class="btn btn-dark" type="submit">Add</button>
      </form>

      <div class="btn-group btn-group-sm mb-3" role="group" id="btdFilters">
        <button type="button" class="btn btn-outline-dark active" data-filter="all">All</button>
        <button type="button" class="btn btn-outline-dark" data-filter="active">Active</button>
        <button type="button" class="btn btn-outline-dark" data-filter="completed">Completed</button>
      </div>

      <ul class="list-group list-group-flush mb-3" id="btdList"></ul>

      <div class="d-flex justify-content-between align-items-center small text-muted">
        <span id="btdCount">0 items left</span>
        <a href="javascript:void(0)" id="btdClearCompleted">Clear completed</a>
      </div>
    </div>
  </div>
</div>

.btd-card { width: 420px; border: 1px solid #eceef1; border-radius: 14px; }
.btd-item-text.btd-done { text-decoration: line-through; color: #adb5bd; }
#btdList .list-group-item { display: flex; align-items: center; gap: 10px; border-left: none; border-right: none; }

const STORAGE_KEY = 'btd_todos_v1';
let todos = [];
let filter = 'all';

function loadTodos() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    todos = raw ? JSON.parse(raw) : [];
  } catch (e) {
    todos = [];
  }
}

function saveTodos() {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
  } catch (e) {
    // localStorage unavailable (private mode / quota) — fail silently, app still works in-memory.
  }
}

const form = document.getElementById('btdForm');
const input = document.getElementById('btdInput');
const list = document.getElementById('btdList');
const countEl = document.getElementById('btdCount');
const filterBtns = Array.from(document.querySelectorAll('#btdFilters button'));
const clearCompletedBtn = document.getElementById('btdClearCompleted');

function render() {
  list.innerHTML = '';
  const visible = todos.filter(t => {
    if (filter === 'active') return !t.done;
    if (filter === 'completed') return t.done;
    return true;
  });

  visible.forEach(todo => {
    const li = document.createElement('li');
    li.className = 'list-group-item';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'form-check-input mt-0';
    checkbox.checked = todo.done;
    checkbox.addEventListener('change', () => {
      todo.done = checkbox.checked;
      saveTodos();
      render();
    });

    const span = document.createElement('span');
    span.className = 'flex-grow-1 btd-item-text' + (todo.done ? ' btd-done' : '');
    span.textContent = todo.text;

    const del = document.createElement('button');
    del.className = 'btn btn-sm btn-outline-danger';
    del.textContent = 'Delete';
    del.addEventListener('click', () => {
      todos = todos.filter(t => t.id !== todo.id);
      saveTodos();
      render();
    });

    li.appendChild(checkbox);
    li.appendChild(span);
    li.appendChild(del);
    list.appendChild(li);
  });

  const remaining = todos.filter(t => !t.done).length;
  countEl.textContent = remaining + (remaining === 1 ? ' item left' : ' items left');
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  todos.push({ id: Date.now() + Math.random(), text, done: false });
  input.value = '';
  saveTodos();
  render();
});

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    filterBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    filter = btn.getAttribute('data-filter');
    render();
  });
});

clearCompletedBtn.addEventListener('click', () => {
  todos = todos.filter(t => !t.done);
  saveTodos();
  render();
});

loadTodos();
render();