app.js

// ---- Configuration ---------------------------------------------------------

// Paste the /exec URL from your Apps Script web-app deployment.
const API_URL = 'https://script.google.com/macros/s/AKfycbyZV-1NOKePO9nysKDtZzl-dPDdzML8CHcsSgxouU_qBYGi2JoVyjRpRXJ-JgTR5Zln/exec';

// Keep this list in sync with the categories you care about. It lives on the
// client so the form works fully offline.
const CATEGORIES = [
  'AI Tools',
  'Book',
  'Cat Food',
  'Clothing',
  'Coffee',
  'Dentist',
  'Eating Out',
  'Electricity',
  'Eyecare',
  'Groceries',
  'Haircut',
  'Hospitality/Gift',
  'Household',
  'Internet',
  'ISK',
  'Medicine',
  'Phone Bill',
  'Rent & Aidat',
  'Ring Cleaning',
  'Snacks',
  'Streaming',
  'Tech',
  'Tithe',
  'Travel',
  'Vet',
  'Video Games',
  'Visa',
  'Water',
];

// ---- Boot -------------------------------------------------------------------

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js');
}

const $ = (id) => document.getElementById(id);

// Local "today" as YYYY-MM-DD (toISOString is UTC and can land on the wrong day).
const now = new Date();
$('date').value = now.getFullYear() + '-' +
  String(now.getMonth() + 1).padStart(2, '0') + '-' +
  String(now.getDate()).padStart(2, '0');

CATEGORIES.forEach((c) => {
  const o = document.createElement('option');
  o.value = c; o.textContent = c;
  $('category').appendChild(o);
});

$('submit').addEventListener('click', save);
window.addEventListener('online', () => flushQueue());
flushQueue(); // send anything queued while offline last time

// ---- Submit -----------------------------------------------------------------

function setStatus(msg, cls) {
  const s = $('status');
  s.textContent = msg;
  s.className = cls || '';
}

async function save() {
  const date = $('date').value.trim();
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
    setStatus('Date must be in YYYY-MM-DD format.', 'err');
    return;
  }

  const tl = $('tl').value, aud = $('aud').value, usd = $('usd').value;
  if (!tl && !aud && !usd) {
    setStatus('Enter at least one amount.', 'err');
    return;
  }

  const payload = {
    date,
    category: $('category').value,
    tl, aud, usd,
  };

  $('submit').disabled = true;
  setStatus('Saving…');

  try {
    const msg = await send(payload);
    setStatus(msg, 'ok');
    clearAmounts();
  } catch (err) {
    // Network/server hiccup — stash it and let the queue retry.
    enqueue(payload);
    setStatus('Offline — saved locally, will sync when back online.', 'warn');
    clearAmounts();
  } finally {
    $('submit').disabled = false;
  }
}

function clearAmounts() {
  $('tl').value = $('aud').value = $('usd').value = '';
}

async function send(payload) {
  const res = await fetch(API_URL, {
    method: 'POST',
    // text/plain keeps this a "simple" request (no CORS preflight).
    headers: { 'Content-Type': 'text/plain;charset=utf-8' },
    body: JSON.stringify(payload),
    redirect: 'follow',
  });
  const data = await res.json();
  if (!data.ok) throw new Error(data.error || 'Server error');
  return data.message;
}

// ---- Offline queue ----------------------------------------------------------

// Function declarations (not const arrows) so they're hoisted — flushQueue()
// runs at boot before this point in the file is reached.
function queueGet() { return JSON.parse(localStorage.getItem('queue') || '[]'); }
function queueSet(q) { localStorage.setItem('queue', JSON.stringify(q)); }

function enqueue(payload) {
  const q = queueGet();
  q.push(payload);
  queueSet(q);
}

async function flushQueue() {
  let q = queueGet();
  while (q.length) {
    try {
      await send(q[0]);
      q.shift();
      queueSet(q);
    } catch (e) {
      break; // still offline / failing — try again later
    }
  }
  if (q.length === 0 && localStorage.getItem('queue')) {
    localStorage.removeItem('queue');
  }
}