app.js

/* Affirmations — a radiant little text pad. All data stays in localStorage. */
(() => {
  "use strict";

  const STORE_KEY = "affirmations.entries.v1";

  const CATS = {
    glow:  { emoji: "✨", label: "good thing" },
    deed:  { emoji: "💛", label: "kind deed" },
    plan:  { emoji: "🌱", label: "plan" },
    grace: { emoji: "🙏", label: "gratitude" },
  };

  const PROMPTS = [
    "what made you smile today, even a little?",
    "name one thing your past self would be proud of.",
    "what small kindness did you give or receive?",
    "what's one thing you're quietly looking forward to?",
    "what did your body do for you today? thank it.",
    "who made your day 1% better? what did they do?",
    "what's something hard you handled anyway?",
    "what tiny beauty did you notice — light, a sound, a taste?",
    "what would you like tomorrow-you to get to do?",
    "what did you learn about yourself this week?",
    "what's one worry that turned out okay?",
    "if today had a highlight reel, what's on it?",
  ];

  // ————— state —————

  let entries = load();
  let activeCat = "glow";
  let activeFilter = "all";

  function load() {
    try {
      const raw = localStorage.getItem(STORE_KEY);
      const parsed = raw ? JSON.parse(raw) : [];
      return Array.isArray(parsed) ? parsed.filter(e => e && e.text && e.ts) : [];
    } catch { return []; }
  }
  function save() { localStorage.setItem(STORE_KEY, JSON.stringify(entries)); }

  // ————— dom —————

  const $ = id => document.getElementById(id);
  const entryText = $("entryText"), entriesEl = $("entries"), emptyState = $("emptyState");

  // ————— greeting + prompts —————

  function setGreeting() {
    const h = new Date().getHours();
    const g = h < 5 ? "hello, night owl" :
              h < 12 ? "good morning, sunshine" :
              h < 18 ? "good afternoon, radiant human" : "good evening, gentle soul";
    $("greeting").textContent = g;
  }

  let promptIdx = Math.floor(Math.random() * PROMPTS.length);
  function nextPrompt() {
    $("promptText").textContent = PROMPTS[promptIdx % PROMPTS.length];
    promptIdx++;
  }
  $("promptPill").addEventListener("click", () => {
    nextPrompt();
    entryText.focus();
  });

  // ————— chips —————

  function wireChips(rowId, onPick) {
    const row = $(rowId);
    row.addEventListener("click", e => {
      const chip = e.target.closest(".chip");
      if (!chip) return;
      row.querySelectorAll(".chip").forEach(c => {
        c.classList.toggle("is-active", c === chip);
        if (c.getAttribute("role") === "radio") c.setAttribute("aria-checked", c === chip);
      });
      onPick(chip);
    });
  }
  wireChips("catChips", chip => { activeCat = chip.dataset.cat; entryText.focus(); });
  wireChips("filterChips", chip => { activeFilter = chip.dataset.filter; render(); });

  // ————— save —————

  $("saveBtn").addEventListener("click", addEntry);
  entryText.addEventListener("keydown", e => {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") addEntry();
  });

  function addEntry() {
    const text = entryText.value.trim();
    if (!text) { toast("write a little something first 🌸"); entryText.focus(); return; }
    entries.unshift({ id: Date.now() + Math.random().toString(16).slice(2), text, cat: activeCat, ts: Date.now(), done: false });
    save();
    entryText.value = "";
    render();
    sparkleBurst();
    toast(pick(["kept safe ✨", "one more light collected 💛", "your future self says thanks 🌱", "beautifully done 🙏"]));
  }

  function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

  // ————— render —————

  function fmtDay(ts) {
    const d = new Date(ts), today = new Date();
    const startOf = x => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
    const diff = Math.round((startOf(today) - startOf(d)) / 86400000);
    if (diff === 0) return "today";
    if (diff === 1) return "yesterday";
    return d.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
  }
  function fmtTime(ts) {
    return new Date(ts).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
  }

  function render() {
    const list = activeFilter === "all" ? entries : entries.filter(e => e.cat === activeFilter);
    entriesEl.innerHTML = "";
    emptyState.hidden = list.length > 0;

    let lastDay = null;
    for (const e of list) {
      const day = fmtDay(e.ts);
      if (day !== lastDay) {
        const label = document.createElement("p");
        label.className = "day-label";
        label.textContent = day;
        entriesEl.appendChild(label);
        lastDay = day;
      }
      entriesEl.appendChild(entryNode(e));
    }
    renderStats();
    renderReflect(false);
  }

  function entryNode(e) {
    const cat = CATS[e.cat] || CATS.glow;
    const div = document.createElement("div");
    div.className = "entry" + (e.done ? " is-done" : "");

    const emoji = document.createElement("span");
    emoji.className = "entry-emoji";
    emoji.textContent = cat.emoji;

    const body = document.createElement("div");
    body.className = "entry-body";
    const text = document.createElement("p");
    text.className = "entry-text";
    text.textContent = e.text;
    const meta = document.createElement("p");
    meta.className = "entry-meta";
    meta.textContent = `${cat.label} · ${fmtTime(e.ts)}`;
    body.append(text, meta);

    const actions = document.createElement("div");
    actions.className = "entry-actions";
    if (e.cat === "plan" && !e.done) {
      const done = btn("🌸", "mark this plan as done", () => {
        e.done = true; save(); render(); sparkleBurst();
        toast("a plan bloomed into a good thing 🌸");
      });
      actions.appendChild(done);
    }
    actions.appendChild(btn("✕", "let this one go", () => {
      if (!confirm("Let this one go? It'll be removed for good.")) return;
      entries = entries.filter(x => x.id !== e.id);
      save(); render();
      toast("released 🕊️");
    }));

    div.append(emoji, body, actions);
    return div;
  }

  function btn(txt, label, onClick) {
    const b = document.createElement("button");
    b.className = "icon-btn";
    b.type = "button";
    b.textContent = txt;
    b.title = b.ariaLabel = label;
    b.addEventListener("click", onClick);
    return b;
  }

  // ————— stats —————

  function renderStats() {
    $("glowbar").hidden = entries.length === 0;
    $("statTotal").textContent = entries.length;
    $("statDeeds").textContent = entries.filter(e => e.cat === "deed").length;
    $("statDone").textContent = entries.filter(e => e.cat === "plan" && e.done).length;
    $("statStreak").textContent = streak();
  }

  function streak() {
    const days = new Set(entries.map(e => new Date(e.ts).toDateString()));
    let n = 0;
    const d = new Date();
    if (!days.has(d.toDateString())) d.setDate(d.getDate() - 1); // streak survives until today ends
    while (days.has(d.toDateString())) { n++; d.setDate(d.getDate() - 1); }
    return n;
  }

  // ————— reflect —————

  let reflectId = null;
  function renderReflect(forceNew) {
    const card = $("reflectCard");
    if (entries.length < 2) { card.hidden = true; return; }
    card.hidden = false;
    let e = entries.find(x => x.id === reflectId);
    if (!e || forceNew) {
      const pool = entries.length > 3 ? entries.slice(1) : entries; // prefer not the one just written
      let next = pick(pool);
      if (forceNew && pool.length > 1) {
        while (next.id === reflectId) next = pick(pool);
      }
      e = next;
      reflectId = e.id;
    }
    const cat = CATS[e.cat] || CATS.glow;
    $("reflectText").textContent = e.text;
    $("reflectMeta").textContent = `${cat.emoji} ${cat.label} · ${fmtDay(e.ts)} at ${fmtTime(e.ts)}`;
  }
  $("anotherMemory").addEventListener("click", () => renderReflect(true));

  // ————— export / import —————

  $("exportBtn").addEventListener("click", () => {
    const blob = new Blob([JSON.stringify(entries, null, 2)], { type: "application/json" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `affirmations-${new Date().toISOString().slice(0, 10)}.json`;
    a.click();
    URL.revokeObjectURL(a.href);
    toast("your light, exported ☀️");
  });

  $("importBtn").addEventListener("click", () => $("importFile").click());
  $("importFile").addEventListener("change", async e => {
    const file = e.target.files[0];
    if (!file) return;
    try {
      const incoming = JSON.parse(await file.text());
      if (!Array.isArray(incoming)) throw new Error("not a list");
      const known = new Set(entries.map(x => x.id));
      const added = incoming.filter(x => x && x.text && x.ts && !known.has(x.id));
      entries = [...entries, ...added].sort((a, b) => b.ts - a.ts);
      save(); render();
      toast(`welcomed ${added.length} memories home 💛`);
    } catch {
      toast("hmm, that file didn't look right 🫧");
    }
    e.target.value = "";
  });

  // ————— toast —————

  let toastTimer;
  function toast(msg) {
    const t = $("toast");
    t.textContent = msg;
    t.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => t.classList.remove("show"), 2400);
  }

  // ————— parallax —————

  const layers = [...document.querySelectorAll(".sky-layer")];
  const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
  let mx = 0, my = 0, ticking = false;

  function applyParallax() {
    ticking = false;
    const sy = scrollY;
    for (const layer of layers) {
      const d = parseFloat(layer.dataset.depth || 0);
      layer.style.transform =
        `translate3d(${mx * d * 120}px, ${my * d * 120 - sy * d * 4}px, 0)`;
    }
  }
  function requestParallax() {
    if (!ticking) { ticking = true; requestAnimationFrame(applyParallax); }
  }
  if (!reduceMotion) {
    addEventListener("mousemove", e => {
      mx = e.clientX / innerWidth - 0.5;
      my = e.clientY / innerHeight - 0.5;
      requestParallax();
    }, { passive: true });
    addEventListener("scroll", requestParallax, { passive: true });
  }

  // floating motes
  const motes = $("motes");
  if (!reduceMotion) {
    for (let i = 0; i < 16; i++) {
      const m = document.createElement("span");
      m.className = "mote";
      const size = 3 + Math.random() * 6;
      m.style.cssText = `left:${Math.random() * 100}%; top:${60 + Math.random() * 40}%;` +
        `width:${size}px; height:${size}px;` +
        `animation-duration:${14 + Math.random() * 18}s; animation-delay:${-Math.random() * 20}s;`;
      motes.appendChild(m);
    }
  }

  // ————— sparkle burst on save —————

  const canvas = $("sparkles"), ctx = canvas.getContext("2d");
  let particles = [], animating = false;

  function resize() { canvas.width = innerWidth; canvas.height = innerHeight; }
  addEventListener("resize", resize, { passive: true });
  resize();

  function sparkleBurst() {
    if (reduceMotion) return;
    const rect = $("saveBtn").getBoundingClientRect();
    const cx = rect.left + rect.width / 2, cy = rect.top + rect.height / 2;
    const colors = ["#f5b942", "#f79cae", "#9ed0f5", "#cdb4f0", "#a8e6c9", "#ffffff"];
    for (let i = 0; i < 42; i++) {
      const a = Math.random() * Math.PI * 2, v = 2 + Math.random() * 5;
      particles.push({
        x: cx, y: cy,
        vx: Math.cos(a) * v, vy: Math.sin(a) * v - 2,
        r: 1.5 + Math.random() * 3,
        life: 1,
        color: colors[i % colors.length],
      });
    }
    if (!animating) { animating = true; requestAnimationFrame(tick); }
  }

  function tick() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles = particles.filter(p => p.life > 0);
    for (const p of particles) {
      p.x += p.vx; p.y += p.vy;
      p.vy += 0.12;           // gravity
      p.vx *= 0.985;
      p.life -= 0.016;
      ctx.globalAlpha = Math.max(p.life, 0);
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r * p.life, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
    if (particles.length) requestAnimationFrame(tick);
    else animating = false;
  }

  // ————— go —————

  setGreeting();
  nextPrompt();
  render();
})();