script.js

// Wait for the HTML document to be fully loaded before running the script
document.addEventListener("DOMContentLoaded", () => {
  // --- Get DOM Elements ---
  const addCardBtn = document.getElementById("addCardBtn");
  const dialog = document.getElementById("cardDialog");
  const cardForm = document.getElementById("cardForm");
  const dialogTitle = document.getElementById("dialogTitle");

  // --- State Management with localStorage Persistence ---
  const store = {
    cards: [],
    // Load cards from localStorage
    loadState() {
      const savedCards = localStorage.getItem("kanban-cards");
      this.cards = savedCards ? JSON.parse(savedCards) : [];
    },
    // Save cards to localStorage
    saveState() {
      localStorage.setItem("kanban-cards", JSON.stringify(this.cards));
    },
    // Add a new card, save, and re-render
    add(card) {
      this.cards.push(card);
      this.saveState();
      render();
    },
    // Update an existing card, save, and re-render
    update(id, updatedCard) {
      this.cards = this.cards.map(c => c.id === id ? { ...c, ...updatedCard } : c);
      this.saveState();
      render();
    },
    // Remove a card, save, and re-render
    remove(id) {
      this.cards = this.cards.filter(c => c.id !== id);
      this.saveState();
      render();
    },
    // Move a card to a new column, save, and re-render
    move(id, column) {
      const card = this.find(id);
      if (card) {
        card.column = column;
        this.saveState();
        render();
      }
    },
    // Helper function to find a card by its ID
    find(id) {
      return this.cards.find(c => c.id === id);
    }
  };

  // --- Utility Functions ---
  // Generates a simple unique ID
  function uid() {
    return Math.random().toString(36).slice(2, 9);
  }

  // Escapes HTML to prevent XSS attacks
  function escapeHTML(s) {
    return s.replace(/[&<>"']/g, ch => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch]));
  }

  // --- Core Functions ---
  // Creates an HTML element for a single card
  function createCardElement(card) {
    const el = document.createElement("article");
    el.className = "card";
    el.draggable = true;
    el.dataset.id = card.id;

    // Use template literal for clean HTML structure
    el.innerHTML = `
      <div class="card-header">
        <span class="card-color" style="background:${card.color};"></span>
        <span class="card-title">${escapeHTML(card.title)}</span>
        <div class="card-actions">
          <button class="edit-btn" title="Edit">✏️</button>
          <button class="delete-btn" title="Delete">🗑️</button>
        </div>
      </div>
      ${card.description ? `<div class="card-body">${escapeHTML(card.description)}</div>` : ''}
    `;

    // Add event listener for the edit button
    el.querySelector(".edit-btn").addEventListener("click", () => {
      openEditDialog(card.id);
    });

    // Add event listener for the delete button
    el.querySelector(".delete-btn").addEventListener("click", () => {
      if (confirm("Are you sure you want to delete this task?")) {
        store.remove(card.id);
      }
    });

    // Add drag-and-drop event listeners
    el.addEventListener("dragstart", (e) => {
      el.classList.add("dragging");
      e.dataTransfer.setData("text/plain", card.id);
      e.dataTransfer.effectAllowed = "move";
    });
    el.addEventListener("dragend", () => {
      el.classList.remove("dragging");
    });

    return el;
  }

  // Renders all cards and updates column counts
  function render() {
    // Clear all columns first
    document.querySelectorAll(".column-dropzone").forEach(zone => zone.innerHTML = "");
    document.querySelectorAll(".card-count").forEach(countEl => countEl.textContent = '(0)');

    // Render each card in its correct column
    store.cards.forEach(card => {
      const zone = document.querySelector(`.column[data-column="${card.column}"] .column-dropzone`);
      if (zone) {
        zone.appendChild(createCardElement(card));
        // Update the card count in the header
        const countEl = zone.previousElementSibling.querySelector('.card-count');
        const currentCount = parseInt(countEl.textContent.slice(1, -1)) || 0;
        countEl.textContent = `(${currentCount + 1})`;
      }
    });
  }

  // Sets up the drag-and-drop functionality for columns
  function setupDropzones() {
    document.querySelectorAll(".column-dropzone").forEach(zone => {
      zone.addEventListener("dragover", (e) => {
        e.preventDefault(); // This is necessary to allow a drop
        e.dataTransfer.dropEffect = "move";
      });
      zone.addEventListener("dragenter", () => zone.classList.add("drag-over"));
      zone.addEventListener("dragleave", () => zone.classList.remove("drag-over"));
      zone.addEventListener("drop", (e) => {
        e.preventDefault();
        zone.classList.remove("drag-over");

        const id = e.dataTransfer.getData("text/plain");
        const column = zone.closest(".column").dataset.column;
        store.move(id, column);
      });
    });
  }

  // --- Dialog and Form Handling ---
  // Opens the dialog to add a new card
  addCardBtn.addEventListener("click", () => {
    dialogTitle.textContent = "Add New Task";
    cardForm.reset();
    cardForm.id.value = ""; // Clear the hidden ID field
    cardForm.color.value = "#2563eb"; // Default color
    dialog.showModal();
  });

  // Opens the dialog to edit an existing card
  function openEditDialog(id) {
    const card = store.find(id);
    if (!card) return;

    dialogTitle.textContent = "Edit Task";
    cardForm.id.value = card.id;
    cardForm.title.value = card.title;
    cardForm.description.value = card.description || "";
    cardForm.color.value = card.color;
    dialog.showModal();
  }

  // Handles form submission for both adding and editing cards
  cardForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const id = cardForm.id.value;
    const title = cardForm.title.value.trim();
    if (!title) return; // Don't save if title is empty

    const cardData = {
      title,
      description: cardForm.description.value.trim(),
      color: cardForm.color.value,
    };

    if (id) {
      // If an ID exists, it's an update
      store.update(id, cardData);
    } else {
      // Otherwise, it's a new card
      const newCard = {
        ...cardData,
        id: uid(),
        column: "backlog" // New cards always start in the backlog
      };
      store.add(newCard);
    }

    dialog.close();
  });

  // --- Application Initialization ---
  store.loadState();
  setupDropzones();
  render();
});