invoice.js

const STORAGE_KEY = "invoiceData";
const THEME_KEY = "invoiceTheme";

// ── Theme ────────────────────────────────────────────────────

function applyTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  document.querySelectorAll(".theme-swatch").forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.theme === theme);
  });
  localStorage.setItem(THEME_KEY, theme);
}

// Apply saved theme immediately (before DOM fully paints)
applyTheme(localStorage.getItem(THEME_KEY) || "navy");

document.getElementById("theme-picker").addEventListener("click", (e) => {
  const swatch = e.target.closest(".theme-swatch");
  if (swatch) applyTheme(swatch.dataset.theme);
});

// DOM references (declared early to avoid forward-reference issues)
const datePicker = document.getElementById("datePicker");
const dateDisplay = document.querySelector('[data-field="invoiceDateDisplay"]');
const lineItemsBody = document.getElementById("lineItems");
const addRowBtn = document.getElementById("addRowBtn");
const resetBtn = document.getElementById("resetBtn");

// Default placeholder values
const defaults = {
  invoiceNumber: "0000",
  fromName: "Your Name",
  fromAddress: "Your Address",
  invoiceDate: "",
  billToName: "Client Name",
  billToAddress: "Client Address",
  footerContact: "Your Address · Your Phone · Your Email",
  lineItems: [{ description: "Description of services", amount: "$0.00" }],
};

// Header / footer editable fields (not line items)
const headerFields = [
  "invoiceNumber",
  "fromName",
  "fromAddress",
  "invoiceDate",
  "billToName",
  "billToAddress",
  "footerContact",
];

// ── Helpers ──────────────────────────────────────────────────

function isInput(el) {
  return el.tagName === "INPUT";
}

const currencyFmt = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

function formatCurrency(n) {
  return currencyFmt.format(n);
}

function parseCurrency(str) {
  return parseFloat(String(str).replace(/[^0-9.\-]/g, "")) || 0;
}

function formatDate(dateStr) {
  if (!dateStr) return "Select Date";
  const [y, m, d] = dateStr.split("-").map(Number);
  if (!y || !m || !d) return "Select Date";
  const date = new Date(y, m - 1, d);
  if (isNaN(date.getTime())) return "Select Date";
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

// ── Debounce ─────────────────────────────────────────────────

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

// ── Totals ───────────────────────────────────────────────────

function syncTotals() {
  const rows = lineItemsBody.querySelectorAll(".line-item");
  let total = 0;
  rows.forEach((row) => {
    const amountCell = row.querySelector('[data-field="amount"]');
    if (amountCell) total += parseCurrency(amountCell.textContent);
  });
  const formatted = formatCurrency(total);
  document.querySelector('[data-field="subtotal"]').textContent = formatted;
  document.querySelector('[data-field="totalDue"]').textContent =
    formatted + " USD";
}

// ── Persistence ──────────────────────────────────────────────

function gatherData() {
  const data = {};
  for (const key of headerFields) {
    const el = document.querySelector(`[data-field="${key}"]`);
    if (el) data[key] = isInput(el) ? el.value : el.textContent.trim();
  }
  // Gather line items
  data.lineItems = [];
  lineItemsBody.querySelectorAll(".line-item").forEach((row) => {
    const desc = row.querySelector('[data-field="description"]');
    const amt = row.querySelector('[data-field="amount"]');
    if (desc && amt) {
      data.lineItems.push({
        description: desc.textContent.trim(),
        amount: amt.textContent.trim(),
      });
    }
  });
  return data;
}

function save() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(gatherData()));
}

const debouncedSave = debounce(save, 300);

// ── Line-item row creation ───────────────────────────────────

function createRow(description, amount) {
  const tr = document.createElement("tr");
  tr.className = "line-item";
  tr.innerHTML = `
    <td contenteditable="true" data-field="description">${escapeHTML(description)}</td>
    <td contenteditable="true" data-field="amount">${escapeHTML(amount)}</td>
    <td class="no-print">
      <button class="remove-row" title="Remove line item" aria-label="Remove line item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </td>`;
  bindRowEvents(tr);
  return tr;
}

function escapeHTML(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

function bindRowEvents(row) {
  row.querySelectorAll("[contenteditable]").forEach((el) => {
    el.addEventListener("input", () => {
      if (el.dataset.field === "amount") syncTotals();
      debouncedSave();
    });
    el.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        el.blur();
      }
    });
  });
  const removeBtn = row.querySelector(".remove-row");
  if (removeBtn) {
    removeBtn.addEventListener("click", () => {
      // Keep at least one row
      if (lineItemsBody.querySelectorAll(".line-item").length <= 1) return;
      row.remove();
      syncTotals();
      debouncedSave();
    });
  }
}

// ── Load ─────────────────────────────────────────────────────

function load() {
  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
  const hasData = Object.keys(saved).length > 0;

  // Restore header/footer fields
  for (const key of headerFields) {
    const el = document.querySelector(`[data-field="${key}"]`);
    if (!el) continue;
    const value = hasData ? saved[key] : defaults[key];
    if (value !== undefined) {
      if (isInput(el)) el.value = value;
      else el.textContent = value;
    }
  }

  // Sync date display
  if (datePicker.value) {
    dateDisplay.textContent = formatDate(datePicker.value);
  } else {
    dateDisplay.textContent = formatDate(defaults.invoiceDate);
  }

  // Restore line items
  const items =
    hasData && saved.lineItems ? saved.lineItems : defaults.lineItems;

  lineItemsBody.innerHTML = "";
  items.forEach((item) => {
    lineItemsBody.appendChild(
      createRow(item.description || "", item.amount || "$0.00"),
    );
  });

  syncTotals();
}

// ── Event listeners ──────────────────────────────────────────

// Header/footer contenteditable fields
document
  .querySelectorAll("header [contenteditable], footer [contenteditable]")
  .forEach((el) => {
    el.addEventListener("input", () => debouncedSave());
    el.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        el.blur();
      }
    });
  });

// Invoice number (inside header <p>)
const invoiceNumberEl = document.querySelector('[data-field="invoiceNumber"]');
if (invoiceNumberEl) {
  invoiceNumberEl.addEventListener("input", () => debouncedSave());
  invoiceNumberEl.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      invoiceNumberEl.blur();
    }
  });
}

// Date picker
datePicker.addEventListener("change", () => {
  dateDisplay.textContent = formatDate(datePicker.value);
  debouncedSave();
});

// Add row
addRowBtn.addEventListener("click", () => {
  const newRow = createRow("Description of services", "$0.00");
  lineItemsBody.appendChild(newRow);
  newRow.querySelector('[data-field="description"]').focus();
  debouncedSave();
});

// Reset
resetBtn.addEventListener("click", () => {
  if (!confirm("Reset all invoice data to defaults?")) return;
  localStorage.removeItem(STORAGE_KEY);
  load();
});

// Bind events on the initial HTML row (will be replaced by load, but guard)
lineItemsBody.querySelectorAll(".line-item").forEach(bindRowEvents);

// ── Init ─────────────────────────────────────────────────────
load();