Blame for script.js

// ======================================================
// FILE: script.js
// ======================================================

// --- 1. The "Life Brain" Definitions ---
const CATEGORIES = {
    "brain-dump": {
      name: "🧠 Quick Brain Dump",
      description: "Get it out of your head. Sort it later.",
      emoji: "📥",
      steps: [
        {
          title: "What's on your mind?",
          fields: [
            { id: "title", label: "Short Title", type: "text", required: true },
            { id: "event_date", label: "Date/Time (Optional)", type: "datetime-local" },
            { id: "description", label: "Details (#tags)", type: "textarea", required: true },
            { id: "frequency", label: "Is this recurring?", type: "select", options: ["One-Time", "Daily", "Weekly", "Monthly", "Yearly"] },
          ],
        },
      ],
    },
    chore: {
      name: "🧹 Routine / Chore",
      description: "Cleaning, maintenance, bills.",
      emoji: "🔄",
      steps: [
        {
          title: "The Routine",
          fields: [
            { id: "title", label: "What needs doing?", type: "text", placeholder: "e.g. Take out Trash", required: true },
            { id: "event_date", label: "Start Date (for recurring calc)", type: "datetime-local" },
            { id: "frequency", label: "How often?", type: "select", options: ["One-Time", "Daily", "Weekly", "Monthly", "Yearly"] },
            { id: "assignee", label: "Who does this? (Optional)", type: "text", placeholder: "e.g. Dad, Kids" },
          ],
        },
        {
          title: "Details",
          fields: [
            { id: "description", label: "Instructions / Notes (Use #tags)", type: "textarea" },
            { id: "tools", label: "Tools/Supplies needed?", type: "text" },
          ],
        },
      ],
    },
    project: {
      name: "🛠️ Project / Fix",
      description: "Something broken or a goal.",
      emoji: "🚧",
      steps: [
        {
          title: "The Project",
          fields: [
            { id: "title", label: "Project Name", type: "text", required: true },
            { id: "event_date", label: "Deadline / Date", type: "datetime-local" },
            { id: "frequency", label: "Timeline", type: "select", options: ["One-Time", "Daily", "Weekly", "Monthly", "Yearly"] },
          ],
        },
        {
          title: "The Plan",
          fields: [
            { id: "description", label: "Desired Outcome (#tags)", type: "textarea" },
            { id: "budget", label: "Estimated Cost ($)", type: "number" },
            { id: "blockers", label: "What is stopping us?", type: "text" },
          ],
        },
      ],
    },
    inventory: {
      name: "📦 Life / Appointments",
      description: "Car, Health, House, etc..",
      emoji: "📋",
      steps: [
        {
          title: "System Info",
          fields: [
            { id: "title", label: "Item Name", type: "text", placeholder: "e.g. Honda Civic", required: true },
            { id: "event_date", label: "Next Maintenance/Appt Date", type: "datetime-local" },
            { id: "frequency", label: "Maintenance/Appt Cycle", type: "select", options: ["One-Time", "Daily", "Weekly", "Monthly", "Yearly"] },
          ],
        },
        {
          title: "Reference Data",
          fields: [
            { id: "description", label: "Key Data (VIN, Names, ID #) - Use #tags", type: "textarea" },
            { id: "location", label: "Where is it happening/stored?", type: "text" },
          ],
        },
      ],
    },
  };
  
  // --- State ---
  let allEntries = [];
  let editingId = null;
  let currentStep = 0;
  let currentCatKey = null;
  let wizardData = {};
  
  // NEW: OS-Site Style State
  let activeTags = new Set(); 
  let searchQuery = ""; 
  
  // --- Elements ---
  const grid = document.getElementById("grid");
  const modal = document.getElementById("modal");
  const modalBody = document.getElementById("wizard-body");
  const prevBtn = document.getElementById("prev-btn");
  const nextBtn = document.getElementById("next-btn");
  const searchInput = document.getElementById("search-input"); 
  
  document.addEventListener("DOMContentLoaded", () => {
      fetchEntries();
      
      searchInput.addEventListener("input", (e) => {
          searchQuery = e.target.value.trim().toLowerCase();
          refreshViews();
      });
  });
  
  // ==========================================================
  // --- DATA LAYER (LOCALSTORAGE) ---
  // ==========================================================
  
  const DB_KEY = "lifeman_data";
  
  // Helper: Generate UUID
  function uuidv4() {
    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
    );
  }
  
  async function fetchEntries() {
    // Load from LocalStorage
    const raw = localStorage.getItem(DB_KEY);
    if (raw) {
        allEntries = JSON.parse(raw);
    } else {
        // Initialize with empty if nothing exists
        allEntries = []; 
    }
  
    // Sort logic 
    allEntries.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
  
    renderTagBar();
    refreshViews();
  }
  
  async function saveData() {
    // Prepare the payload
    const payload = {
      template_type: currentCatKey,
      title: wizardData.title || "Untitled",
      description: wizardData.description || "",
      frequency: wizardData.frequency || "One-Time",
      event_date: wizardData.event_date ? new Date(wizardData.event_date).toISOString() : null,
      tags: extractTags(wizardData.description || ""),
      details: wizardData,
      updated_at: new Date().toISOString()
    };
  
    if (editingId) {
      // --- UPDATE LOGIC ---
      const index = allEntries.findIndex(e => e.id === editingId);
      if (index !== -1) {
          // Merge existing data with new payload
          allEntries[index] = { ...allEntries[index], ...payload };
      }
    } else {
      // --- CREATE LOGIC ---
      const newEntry = {
          id: uuidv4(),
          status: "Active",
          created_at: new Date().toISOString(),
          ...payload
      };
      allEntries.push(newEntry);
    }
  
    // Persist to LocalStorage
    localStorage.setItem(DB_KEY, JSON.stringify(allEntries));
  
    closeModal();
    fetchEntries();
  }
  
  async function deleteEntry(id) {
    if (confirm("Are you sure you want to remove this?")) {
      // Filter out the deleted item
      allEntries = allEntries.filter(e => e.id !== id);
      // Save
      localStorage.setItem(DB_KEY, JSON.stringify(allEntries));
      fetchEntries();
    }
  }
  
  // ==========================================================
  // --- END DATA LAYER ---
  // ==========================================================
  
  function refreshViews() {
      if (currentView === "list") renderGrid();
      else renderCalendar();
  }
  
  // --- Tag System ---
  
  function renderTagBar() {
    const container = document.getElementById("tag-filter-bar");
    const tags = new Set();
  
    allEntries.forEach((entry) => {
      if (entry.tags) entry.tags.forEach((t) => tags.add(t));
      const matches = entry.description ? entry.description.match(/#\w+/g) : [];
      if (matches) matches.forEach((m) => tags.add(m.substring(1)));
    });
  
    container.innerHTML = "";
  
    const allBtn = document.createElement("button");
    allBtn.className = `chip ${activeTags.size === 0 ? "active" : ""}`;
    allBtn.textContent = "All";
    allBtn.onclick = () => {
        activeTags.clear();
        renderTagBar();
        refreshViews();
    };
    container.appendChild(allBtn);
  
    Array.from(tags).sort().forEach((tag) => {
        const btn = document.createElement("button");
        btn.className = `chip ${activeTags.has(tag) ? "active" : ""}`;
        btn.textContent = `#${tag}`;
        btn.onclick = () => toggleTag(tag);
        container.appendChild(btn);
    });
  }
  
  function toggleTag(tag) {
      if (activeTags.has(tag)) {
          activeTags.delete(tag);
      } else {
          activeTags.add(tag);
      }
      renderTagBar(); 
      refreshViews();
  }
  
  // --- Filter Logic ---
  
  function entryMatchesFilter(entry) {
    const textMatch = !searchQuery || 
      entry.title.toLowerCase().includes(searchQuery) || 
      (entry.description && entry.description.toLowerCase().includes(searchQuery));
  
    if (!textMatch) return false;
  
    if (activeTags.size === 0) return true;
  
    const entryTags = new Set(entry.tags || []);
    const descTags = entry.description ? entry.description.match(/#\w+/g) : [];
    if (descTags) descTags.forEach(t => entryTags.add(t.substring(1)));
  
    for (let tag of activeTags) {
        if (entryTags.has(tag)) return true;
    }
  
    return false;
  }
  
  function renderGrid() {
    grid.innerHTML = "";
    const visibleEntries = allEntries.filter(entry => entryMatchesFilter(entry));
  
    if (visibleEntries.length === 0) {
      grid.innerHTML = `<div style="text-align:center; grid-column:1/-1; color:#555; margin-top:50px;">
              <h2>No entries found.</h2>
          </div>`;
      return;
    }
  
    visibleEntries.forEach((entry) => {
      const descWithTags = parseTags(entry.description || "");
      const card = document.createElement("div");
      card.className = "card";
      card.innerHTML = `
              <div class="card-top">
                  <span style="font-size:1.5rem">${CATEGORIES[entry.template_type]?.emoji || "📄"}</span>
                  <span class="freq-badge freq-${entry.frequency || "One-Time"}">${entry.frequency || "One-Time"}</span>
              </div>
              <h3>${entry.title}</h3>
              <p>${descWithTags}</p>
              <div class="card-actions">
                  <button class="btn-icon" onclick="openEdit('${entry.id}')">✏️ Edit</button>
                  <button class="btn-icon" style="color:var(--danger)" onclick="deleteEntry('${entry.id}')">🗑️</button>
              </div>
          `;
      grid.appendChild(card);
    });
  }
  
  function parseTags(text) {
    if (!text) return "";
    return text.replace(
      /#(\w+)/g,
      '<span class="hashtag" onclick="filterByTag(\'$1\')">#$1</span>',
    );
  }
  
  function filterByTag(tag) {
      // Simple wrapper to support the inline onclick in parseTags
      if (!activeTags.has(tag)) {
          activeTags.clear();
          activeTags.add(tag);
          renderTagBar();
          refreshViews();
      }
  }
  
  // --- Wizard / Editor Logic ---
  
  function openNew() {
    editingId = null;
    wizardData = {};
    showCategorySelect();
    modal.classList.add("open");
  }
  
  async function openEdit(id) {
    const entry = allEntries.find((e) => e.id === id);
    if (!entry) return;
  
    editingId = id;
    currentCatKey = entry.template_type;
  
    let formattedDate = "";
    if (entry.event_date) {
      const d = new Date(entry.event_date);
      const pad = (n) => (n < 10 ? "0" + n : n);
      formattedDate = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
    }
  
    wizardData = {
      title: entry.title,
      description: entry.description,
      frequency: entry.frequency,
      event_date: formattedDate,
      ...entry.details,
    };
  
    startWizard(currentCatKey);
    modal.classList.add("open");
  }
  
  function showCategorySelect() {
    modalBody.innerHTML = `
          <h2 style="margin-bottom:20px; text-align:center;">What are we organizing?</h2>
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:15px;">
              ${Object.entries(CATEGORIES)
                .map(
                  ([key, cat]) => `
                  <div onclick="startWizard('${key}')"
                       style="background:#2c303a; padding:20px; border-radius:12px; cursor:pointer; text-align:center; border:1px solid #333; transition:0.2s;">
                      <div style="font-size:2rem; margin-bottom:10px;">${cat.emoji}</div>
                      <strong>${cat.name}</strong><br>
                      <small style="color:#888">${cat.description}</small>
                  </div>
              `,
                )
                .join("")}
          </div>
      `;
    prevBtn.classList.add("hidden");
    nextBtn.classList.add("hidden");
  }
  
  function startWizard(key) {
    currentCatKey = key;
    currentStep = 0;
    renderStep();
  }
  
  function renderStep() {
    const template = CATEGORIES[currentCatKey];
    const step = template.steps[currentStep];
  
    let html = `<h2>${step.title}</h2>`;
    step.fields.forEach((field) => {
      const val = wizardData[field.id] || "";
      html += `<div class="form-group"><label>${field.label}</label>`;
  
      if (field.type === "textarea") {
        html += `<textarea id="inp_${field.id}" rows="4">${val}</textarea>`;
      } else if (field.type === "select") {
        html += `<select id="inp_${field.id}">
                  ${field.options.map((o) => `<option value="${o}" ${val === o ? "selected" : ""}>${o}</option>`).join("")}
              </select>`;
      } else {
        html += `<input type="${field.type}" id="inp_${field.id}" value="${val}" placeholder="${field.placeholder || ""}">`;
      }
      html += `</div>`;
    });
  
    modalBody.innerHTML = html;
  
    prevBtn.classList.remove("hidden");
    nextBtn.classList.remove("hidden");
    nextBtn.innerText =
      currentStep === template.steps.length - 1
        ? editingId
          ? "Update"
          : "Save"
        : "Next";
  }
  
  window.moveWizard = async (dir) => {
    const inputs = modalBody.querySelectorAll("input, select, textarea");
    inputs.forEach((i) => {
      const key = i.id.replace("inp_", "");
      wizardData[key] = i.value;
    });
  
    const template = CATEGORIES[currentCatKey];
    const nextIdx = currentStep + dir;
  
    if (dir === -1 && currentStep === 0) {
      if (editingId) closeModal(); 
      else showCategorySelect(); 
      return;
    }
  
    if (nextIdx >= template.steps.length) {
      await saveData();
      return;
    }
  
    currentStep = nextIdx;
    renderStep();
  };
  
  function extractTags(text) {
    const match = text.match(/#\w+/g);
    return match ? match.map((t) => t.substring(1)) : []; 
  }
  
  function closeModal() {
    modal.classList.remove("open");
  }
  
  // --- Calendar Logic ---
  
  let currentDate = new Date();
  let currentView = "list";
  
  function switchView(view) {
    currentView = view;
    document.getElementById("view-list").classList.toggle("active", view === "list");
    document.getElementById("view-cal").classList.toggle("active", view === "calendar");
  
    if (view === "calendar") {
      document.getElementById("grid").classList.add("hidden");
      document.getElementById("calendar-view").classList.remove("hidden");
      renderCalendar();
    } else {
      document.getElementById("grid").classList.remove("hidden");
      document.getElementById("calendar-view").classList.add("hidden");
    }
  }
  
  function changeMonth(dir) {
    currentDate.setMonth(currentDate.getMonth() + dir);
    renderCalendar();
  }
  
  function renderCalendar() {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
  
    const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
    document.getElementById("cal-month-name").innerText = `${monthNames[month]} ${year}`;
  
    const daysContainer = document.getElementById("cal-days");
    daysContainer.innerHTML = "";
  
    const firstDayIndex = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const today = new Date();
  
    for (let i = 0; i < firstDayIndex; i++) {
      const div = document.createElement("div");
      div.className = "cal-day";
      div.style.background = "#111"; 
      daysContainer.appendChild(div);
    }
  
    for (let i = 1; i <= daysInMonth; i++) {
      const dayDiv = document.createElement("div");
      dayDiv.className = "cal-day";
      
      if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
        dayDiv.classList.add("today");
      }
  
      dayDiv.innerHTML = `<span class="day-number">${i}</span>`;
  
      const dayEvents = getEventsForDay(year, month, i);
      
      dayEvents.forEach((evt) => {
        const el = document.createElement("div");
        el.className = `cal-event type-${evt.type}`;
        el.innerText = evt.title; 
        el.onclick = (e) => {
          if(window.innerWidth > 768) {
              e.stopPropagation();
              openEdit(evt.id);
          }
        };
        dayDiv.appendChild(el);
      });
  
      dayDiv.onclick = () => {
          selectMobileDay(dayDiv, dayEvents, i, year, month);
      };
  
      daysContainer.appendChild(dayDiv);
    }
  }
  
  function getEventsForDay(year, month, day) {
    const targetDate = new Date(year, month, day);
    const dayOfWeek = targetDate.getDay();
    const dayOfMonth = day;
    const targetMonth = month;
  
    let events = [];
  
    allEntries.forEach((entry) => {
      if (!entryMatchesFilter(entry)) return;
      const freq = entry.frequency || "One-Time";
      const title = entry.title;
      const id = entry.id;
  
      const baseDateStr = entry.event_date || entry.created_at;
      const baseDate = new Date(baseDateStr);
  
      if (freq === "One-Time") {
        if (baseDate.getFullYear() === year && baseDate.getMonth() === month && baseDate.getDate() === day) {
          events.push({ id, title, type: "one-time", category: entry.template_type });
        }
      }
      if (freq === "Daily") {
        if (targetDate >= new Date(baseDate).setHours(0, 0, 0, 0)) {
          events.push({ id, title, type: "daily", category: entry.template_type });
        }
      }
      if (freq === "Weekly") {
        if (baseDate.getDay() === dayOfWeek && targetDate >= new Date(baseDate).setHours(0, 0, 0, 0)) {
          events.push({ id, title, type: "weekly", category: entry.template_type });
        }
      }
      if (freq === "Monthly") {
        if (baseDate.getDate() === dayOfMonth && targetDate >= new Date(baseDate).setHours(0, 0, 0, 0)) {
          events.push({ id, title, type: "monthly", category: entry.template_type });
        }
      }
      if (freq === "Yearly") {
        if (baseDate.getMonth() === targetMonth && baseDate.getDate() === dayOfMonth && targetDate >= new Date(baseDate).setHours(0, 0, 0, 0)) {
          events.push({ id, title, type: "yearly", category: entry.template_type });
        }
      }
    });
  
    return events;
  }
  
  function selectMobileDay(el, events, day, year, month) {
      document.querySelectorAll('.cal-day').forEach(d => d.classList.remove('selected'));
      el.classList.add('selected');
  
      const detailBox = document.getElementById('mobile-day-details');
      const titleEl = document.getElementById('mobile-selected-date-title');
      const listEl = document.getElementById('mobile-event-list');
      
      detailBox.classList.remove('hidden');
      
      const dateObj = new Date(year, month, day);
      titleEl.innerText = dateObj.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' });
  
      if (events.length === 0) {
          listEl.innerHTML = `<div style="color:#666; font-style:italic;">No events planned.</div>`;
          return;
      }
  
      listEl.innerHTML = events.map(evt => `
          <div class="mobile-event-card" 
               style="border-left-color: ${getCategoryColor(evt.type)}"
               onclick="openEdit('${evt.id}')">
              <span>${evt.title}</span>
              <span style="font-size:0.8rem; color:#888;">${evt.category}</span>
          </div>
      `).join('');
      
      if(window.innerWidth < 600) {
          detailBox.scrollIntoView({ behavior: "smooth" });
      }
  }
  
  function getCategoryColor(type) {
      if(type === 'daily') return 'var(--success)';
      if(type === 'weekly') return 'var(--warning)';
      if(type === 'monthly') return '#2979ff';
      if(type === 'yearly') return '#ff4081';
      return 'var(--accent)';
  }
  
  
// ======================================================
// NEW: Data Import / Export / URL Logic (Refactored)
// ======================================================

function downloadData() {
    if (allEntries.length === 0) {
        alert("Nothing to save!");
        return;
    }

    const dataStr = JSON.stringify(allEntries, null, 2);
    const blob = new Blob([dataStr], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    const date = new Date().toISOString().split('T')[0];
    a.download = `lifeman_backup_${date}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// ------------------------------------------------------
// Shared Import Processor
// ------------------------------------------------------

function processImportData(json) {
    try {
        // Basic validation
        if (!Array.isArray(json)) {
            throw new Error("File content is not a valid list.");
        }

        // Ask user for strategy
        const strategy = confirm(
            "Click OK to MERGE with existing data.\nClick Cancel to REPLACE all data."
        );

        if (strategy === false) {
            // REPLACE STRATEGY
            allEntries = json;
            localStorage.setItem(DB_KEY, JSON.stringify(allEntries));
            alert("Database replaced successfully!");
        } else {
            // MERGE STRATEGY
            let count = 0;
            json.forEach(newItem => {
                const index = allEntries.findIndex(old => old.id === newItem.id);
                if (index !== -1) {
                    // Update existing
                    allEntries[index] = newItem;
                } else {
                    // Add new
                    allEntries.push(newItem);
                }
                count++;
            });
            localStorage.setItem(DB_KEY, JSON.stringify(allEntries));
            alert(`Processed ${count} items.`);
        }

        // Refresh UI
        renderTagBar();
        refreshViews();
        
        // Close modal if it's open (for the URL flow)
        if(document.getElementById('url-modal').classList.contains('open')) {
            closeUrlModal();
        }

    } catch (err) {
        console.error(err);
        alert("Error processing data: " + err.message);
    }
}

// ------------------------------------------------------
// File Import
// ------------------------------------------------------

function triggerImport() {
    document.getElementById('import-file').click();
}

function handleFileImport(input) {
    const file = input.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const json = JSON.parse(e.target.result);
            processImportData(json);
        } catch (err) {
            alert("Error reading file: " + err.message);
        }
        input.value = '';
    };
    reader.readAsText(file);
}

// ------------------------------------------------------
// URL Import
// ------------------------------------------------------

const EXAMPLE_URL = "https://raw.githubusercontent.com/mrhappynice/lifeman/refs/heads/main/data.json";

function openUrlModal() {
    document.getElementById('url-modal').classList.add('open');
}

function closeUrlModal() {
    document.getElementById('url-modal').classList.remove('open');
}

async function fetchAndLoad(url) {
    if (!url) {
        alert("Please enter a URL.");
        return;
    }

    const btn = document.activeElement;
    // Simple check to ensure we are interacting with a button, to disable it
    const isBtn = btn && btn.tagName === 'BUTTON';
    let originalText = "";
    
    if(isBtn) {
        originalText = btn.innerText;
        btn.innerText = "Loading...";
        btn.disabled = true;
    }

    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const json = await response.json();
        
        processImportData(json);
        
    } catch (err) {
        alert("Failed to load from URL.\n\nPossible reasons:\n1. The URL is wrong.\n2. The server blocks cross-origin (CORS) requests.\n\nError: " + err.message);
    } finally {
        if(isBtn) {
            btn.innerText = originalText;
            btn.disabled = false;
        }
    }
}

function loadCustomUrl() {
    const url = document.getElementById('import-url-input').value.trim();
    fetchAndLoad(url);
}

function loadExampleData() {
    fetchAndLoad(EXAMPLE_URL);
}