script.js

(function () {
  "use strict";

  // ======================================================
  //  THEME TOGGLE
  // ======================================================

  var savedTheme = localStorage.getItem("theme") || "dark";
  document.documentElement.setAttribute("data-theme", savedTheme);
  updateToggleUI(savedTheme);

  document.getElementById("theme-toggle").addEventListener("click", function () {
    var current = document.documentElement.getAttribute("data-theme") || "dark";
    var next = current === "dark" ? "light" : "dark";
    document.documentElement.setAttribute("data-theme", next);
    localStorage.setItem("theme", next);
    updateToggleUI(next);
  });

  function updateToggleUI(theme) {
    var icon = document.getElementById("toggle-icon");
    var label = document.getElementById("toggle-label");
    if (theme === "dark") {
      icon.textContent = "☀";
      label.textContent = "Light";
    } else {
      icon.textContent = "☾";
      label.textContent = "Dark";
    }
  }

  // ======================================================
  //  UTILITIES
  // ======================================================

  var MONTHS = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
  var MONTH_FULL = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  var DAYS = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
  var DAY_HEADERS = ["MON","TUE","WED","THU","FRI","SAT","SUN"];

  var now = new Date();

  function dateKey(d) {
    var y = d.getFullYear();
    var m = String(d.getMonth() + 1).padStart(2, "0");
    var day = String(d.getDate()).padStart(2, "0");
    return y + "-" + m + "-" + day;
  }

  function todayKey() { return dateKey(now); }

  function uid() {
    return Date.now().toString(36) + Math.random().toString(36).substr(2, 6);
  }

  function formatDate(iso) {
    var p = iso.split("-");
    return parseInt(p[2]) + " " + MONTHS[parseInt(p[1]) - 1] + " " + p[0];
  }

  function formatTimestamp(ts) {
    var d = new Date(ts);
    var h = d.getHours(), m = d.getMinutes();
    var ampm = h >= 12 ? "PM" : "AM";
    h = h % 12 || 12;
    return h + ":" + String(m).padStart(2, "0") + " " + ampm;
  }

  // ======================================================
  //  DATE STAMP
  // ======================================================

  document.getElementById("today-stamp").textContent =
    DAYS[now.getDay()] + " " + now.getDate() + " " + MONTHS[now.getMonth()] + " " + now.getFullYear();

  // ======================================================
  //  LOCAL STORAGE
  // ======================================================

  function loadData(key, fallback) {
    try {
      var raw = localStorage.getItem(key);
      return raw ? JSON.parse(raw) : fallback;
    } catch (e) {
      return fallback;
    }
  }

  function saveData(key, data) {
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.warn("Storage full or unavailable", e);
    }
  }

  var lawxisNotes = loadData("lawxis_notes", []);
  var jobprepTasks = loadData("jobprep_tasks", []);

  function persistNotes() { saveData("lawxis_notes", lawxisNotes); }
  function persistTasks() { saveData("jobprep_tasks", jobprepTasks); }

  // ======================================================
  //  SUPABASE DATABASE & CLOUD SYNC
  // ======================================================

  var supabaseClient = null;
  var syncStatusDot = document.getElementById("sync-status-dot");
  var syncStatusLabel = document.getElementById("sync-status-label");
  var syncConnBadge = document.getElementById("sync-connection-badge");
  var syncConnDetail = document.getElementById("sync-connection-detail");
  var inputSupabaseUrl = document.getElementById("supabase-url");
  var inputSupabaseKey = document.getElementById("supabase-key");

  function setSyncUIState(state, detailText) {
    if (!syncStatusDot) return;
    syncStatusDot.className = "sync-dot " + state;
    if (state === "online") {
      syncStatusLabel.textContent = "Cloud";
      syncConnBadge.textContent = "CONNECTED TO SUPABASE";
      syncConnBadge.className = "tag insight";
      if (syncConnDetail) {
        syncConnDetail.textContent = detailText || "Connected to PostgreSQL database. Changes sync automatically in real-time.";
      }
    } else if (state === "syncing") {
      syncStatusLabel.textContent = "Syncing";
      if (syncConnDetail && detailText) syncConnDetail.textContent = detailText;
    } else {
      syncStatusLabel.textContent = "Local";
      syncConnBadge.textContent = "LOCAL STORAGE ONLY";
      syncConnBadge.className = "tag";
      if (syncConnDetail) {
        syncConnDetail.textContent = detailText || "Connect your Supabase project to sync your notes and tasks to the cloud across all your devices.";
      }
    }
  }

  function initSupabase(url, key) {
    if (!url || !key || !window.supabase) {
      supabaseClient = null;
      setSyncUIState("offline");
      return false;
    }
    try {
      supabaseClient = window.supabase.createClient(url.trim(), key.trim());
      setSyncUIState("online");
      return true;
    } catch (err) {
      console.warn("Supabase init error:", err);
      supabaseClient = null;
      setSyncUIState("offline", "Configuration error: " + (err.message || "Invalid credentials"));
      return false;
    }
  }

  // Pull notes and tasks from Supabase
  async function fetchCloudData(isManual) {
    if (!supabaseClient) return;
    setSyncUIState("syncing", "Fetching cloud data from Supabase...");
    try {
      var notesRes = await supabaseClient.from("lawxis_notes").select("*").order("timestamp", { ascending: false });
      var tasksRes = await supabaseClient.from("jobprep_tasks").select("*").order("timestamp", { ascending: true });

      if (notesRes.error) throw notesRes.error;
      if (tasksRes.error) throw tasksRes.error;

      if (notesRes.data && Array.isArray(notesRes.data)) {
        // Map database records
        var cloudNotes = notesRes.data.map(function (n) {
          return {
            id: n.id,
            title: n.title,
            content: n.content,
            category: n.category,
            person: n.person || "",
            date: n.date,
            timestamp: Number(n.timestamp)
          };
        });

        // Merge: cloud notes take precedence, keep any local-only notes
        var cloudNoteIds = new Set(cloudNotes.map(function (n) { return n.id; }));
        var localOnlyNotes = lawxisNotes.filter(function (n) { return !cloudNoteIds.has(n.id); });
        lawxisNotes = cloudNotes.concat(localOnlyNotes);
        persistNotes();
      }

      if (tasksRes.data && Array.isArray(tasksRes.data)) {
        var cloudTasks = tasksRes.data.map(function (t) {
          return {
            id: t.id,
            description: t.description,
            category: t.category,
            priority: t.priority,
            date: t.date,
            completed: Boolean(t.completed),
            completedAt: t.completed_at ? Number(t.completed_at) : null,
            timestamp: Number(t.timestamp)
          };
        });

        var cloudTaskIds = new Set(cloudTasks.map(function (t) { return t.id; }));
        var localOnlyTasks = jobprepTasks.filter(function (t) { return !cloudTaskIds.has(t.id); });
        jobprepTasks = cloudTasks.concat(localOnlyTasks);
        persistTasks();
      }

      // Re-render UI
      renderNotes();
      updateLawxisStats();
      renderTasks();
      updateTaskStats();
      updateHero();
      updateWeekStrip();
      renderCalendar();

      setSyncUIState("online", "Connected to Supabase PostgreSQL database. Synced just now.");
      if (isManual) toast("Synced with Supabase ✓");
    } catch (err) {
      console.warn("Cloud sync error:", err);
      setSyncUIState("offline", "Sync issue: " + (err.message || "Failed to reach database"));
      if (isManual) toast("Cloud sync error: " + (err.message || "Failed"));
    }
  }

  // Push local notes and tasks to Supabase
  async function pushLocalToCloud() {
    if (!supabaseClient) {
      toast("Please connect to Supabase first");
      return;
    }
    setSyncUIState("syncing", "Pushing local data to Supabase...");
    try {
      if (lawxisNotes.length > 0) {
        var notesPayload = lawxisNotes.map(function (n) {
          return {
            id: n.id,
            title: n.title,
            content: n.content,
            category: n.category,
            person: n.person || "",
            date: n.date,
            timestamp: n.timestamp
          };
        });
        var res1 = await supabaseClient.from("lawxis_notes").upsert(notesPayload);
        if (res1.error) throw res1.error;
      }

      if (jobprepTasks.length > 0) {
        var tasksPayload = jobprepTasks.map(function (t) {
          return {
            id: t.id,
            description: t.description,
            category: t.category,
            priority: t.priority,
            date: t.date,
            completed: t.completed,
            completed_at: t.completedAt,
            timestamp: t.timestamp
          };
        });
        var res2 = await supabaseClient.from("jobprep_tasks").upsert(tasksPayload);
        if (res2.error) throw res2.error;
      }

      setSyncUIState("online", "Local data pushed to Supabase successfully.");
      toast("Local data uploaded to Supabase ✓");
    } catch (err) {
      console.warn("Push error:", err);
      setSyncUIState("offline", "Push error: " + (err.message || "Check schema"));
      toast("Push failed: " + (err.message || "Error"));
    }
  }

  // Async cloud mutations with fallback
  function cloudInsertNote(note) {
    if (!supabaseClient) return;
    supabaseClient.from("lawxis_notes").insert([{
      id: note.id,
      title: note.title,
      content: note.content,
      category: note.category,
      person: note.person || "",
      date: note.date,
      timestamp: note.timestamp
    }]).then(function (res) {
      if (res.error) console.warn("Supabase note insert error:", res.error);
    });
  }

  function cloudDeleteNote(id) {
    if (!supabaseClient) return;
    supabaseClient.from("lawxis_notes").delete().eq("id", id).then(function (res) {
      if (res.error) console.warn("Supabase note delete error:", res.error);
    });
  }

  function cloudInsertTask(task) {
    if (!supabaseClient) return;
    supabaseClient.from("jobprep_tasks").insert([{
      id: task.id,
      description: task.description,
      category: task.category,
      priority: task.priority,
      date: task.date,
      completed: task.completed,
      completed_at: task.completedAt,
      timestamp: task.timestamp
    }]).then(function (res) {
      if (res.error) console.warn("Supabase task insert error:", res.error);
    });
  }

  function cloudUpdateTask(task) {
    if (!supabaseClient) return;
    supabaseClient.from("jobprep_tasks").update({
      completed: task.completed,
      completed_at: task.completedAt
    }).eq("id", task.id).then(function (res) {
      if (res.error) console.warn("Supabase task update error:", res.error);
    });
  }

  function cloudDeleteTask(id) {
    if (!supabaseClient) return;
    supabaseClient.from("jobprep_tasks").delete().eq("id", id).then(function (res) {
      if (res.error) console.warn("Supabase task delete error:", res.error);
    });
  }

  // ======================================================
  //  TOAST
  // ======================================================

  var toastEl = document.getElementById("toast");
  var toastTimer = null;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 1900);
  }

  // ======================================================
  //  TABS
  // ======================================================

  var tabBtns = document.querySelectorAll("#main-tabs button");
  var tabIds = ["lawxis", "jobprep", "calendar"];

  tabBtns.forEach(function (b) {
    b.addEventListener("click", function () {
      tabBtns.forEach(function (x) { x.setAttribute("aria-selected", "false"); });
      b.setAttribute("aria-selected", "true");
      tabIds.forEach(function (k) {
        document.getElementById("p-" + k).hidden = (k !== b.dataset.tab);
      });
      if (b.dataset.tab === "calendar") {
        renderCalendar();
      }
    });
  });

  // ======================================================
  //  HERO STATUS
  // ======================================================

  function updateHero() {
    var today = todayKey();
    var todayTasks = jobprepTasks.filter(function (t) { return t.date === today; });
    var completedToday = todayTasks.filter(function (t) { return t.completed; }).length;
    var totalToday = todayTasks.length;
    var todayNotes = lawxisNotes.filter(function (n) { return n.date === today; }).length;

    var totalDone = completedToday + todayNotes;
    document.getElementById("hero-readout").textContent = totalDone;

    var pct = totalToday > 0 ? (completedToday / totalToday) * 100 : (todayNotes > 0 ? 100 : 0);
    document.getElementById("hero-gauge-fill").style.width = pct + "%";
    document.getElementById("hero-gauge-needle").style.left = pct + "%";

    if (totalToday === 0 && todayNotes === 0) {
      document.getElementById("hero-state").textContent = "No activity yet";
    } else if (totalToday > 0 && completedToday === totalToday) {
      document.getElementById("hero-state").textContent = "All tasks complete ✓";
    } else if (completedToday > 0 || todayNotes > 0) {
      document.getElementById("hero-state").textContent = "In progress";
    } else {
      document.getElementById("hero-state").textContent = "Tasks pending";
    }
  }

  // ======================================================
  //  LAWXIS — NOTES
  // ======================================================

  var currentFilter = "all";

  function renderNotes() {
    var container = document.getElementById("notes-list");
    var emptyEl = document.getElementById("notes-empty");

    var filtered = currentFilter === "all"
      ? lawxisNotes
      : lawxisNotes.filter(function (n) { return n.category === currentFilter; });

    // Sort newest first
    filtered = filtered.slice().sort(function (a, b) { return b.timestamp - a.timestamp; });

    // Clear existing note cards (keep empty state)
    var cards = container.querySelectorAll(".note-card");
    cards.forEach(function (c) { c.remove(); });

    document.getElementById("notes-count").textContent = filtered.length + " note" + (filtered.length !== 1 ? "s" : "");

    if (filtered.length === 0) {
      emptyEl.style.display = "block";
      return;
    }

    emptyEl.style.display = "none";

    filtered.forEach(function (note) {
      var card = document.createElement("div");
      card.className = "note-card";
      card.innerHTML =
        '<div class="note-card-head">' +
          '<span class="note-title">' + escapeHtml(note.title) + '</span>' +
          '<span class="tag ' + note.category + '">' + note.category.toUpperCase() + '</span>' +
        '</div>' +
        '<div class="note-body">' + escapeHtml(note.content) + '</div>' +
        '<div class="note-card-foot">' +
          (note.person ? '<span class="note-person">↗ ' + escapeHtml(note.person) + '</span>' : '<span></span>') +
          '<div style="display:flex;gap:8px;align-items:center">' +
            '<span class="note-date">' + formatDate(note.date) + ' · ' + formatTimestamp(note.timestamp) + '</span>' +
            '<button class="danger-ghost" data-delete-note="' + note.id + '">Delete</button>' +
          '</div>' +
        '</div>';
      container.appendChild(card);
    });

    // Delete handlers
    container.querySelectorAll("[data-delete-note]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var id = btn.getAttribute("data-delete-note");
        lawxisNotes = lawxisNotes.filter(function (n) { return n.id !== id; });
        persistNotes();
        cloudDeleteNote(id);
        renderNotes();
        updateLawxisStats();
        updateHero();
        toast("Note deleted");
      });
    });
  }

  function updateLawxisStats() {
    document.getElementById("stat-total-notes").textContent = lawxisNotes.length;
    document.getElementById("stat-interviews").textContent = lawxisNotes.filter(function (n) { return n.category === "interview"; }).length;
    document.getElementById("stat-insights").textContent = lawxisNotes.filter(function (n) { return n.category === "insight"; }).length;
  }

  // Save note
  document.getElementById("btn-save-note").addEventListener("click", function () {
    var title = document.getElementById("note-title").value.trim();
    var content = document.getElementById("note-content").value.trim();
    var category = document.getElementById("note-category").value;
    var person = document.getElementById("note-person").value.trim();

    if (!title) {
      toast("Title is required");
      document.getElementById("note-title").focus();
      return;
    }
    if (!content) {
      toast("Notes content is required");
      document.getElementById("note-content").focus();
      return;
    }

    var note = {
      id: uid(),
      title: title,
      content: content,
      category: category,
      person: person,
      date: todayKey(),
      timestamp: Date.now()
    };

    lawxisNotes.push(note);
    persistNotes();
    cloudInsertNote(note);
    renderNotes();
    updateLawxisStats();
    updateHero();

    // Clear form
    document.getElementById("note-title").value = "";
    document.getElementById("note-content").value = "";
    document.getElementById("note-person").value = "";
    document.getElementById("note-category").selectedIndex = 0;

    toast("Note saved");
  });

  // Clear form
  document.getElementById("btn-clear-note").addEventListener("click", function () {
    document.getElementById("note-title").value = "";
    document.getElementById("note-content").value = "";
    document.getElementById("note-person").value = "";
    document.getElementById("note-category").selectedIndex = 0;
  });

  // Filters
  document.getElementById("note-filters").addEventListener("click", function (e) {
    var btn = e.target.closest("button[data-filter]");
    if (!btn) return;
    document.querySelectorAll("#note-filters button").forEach(function (b) {
      b.classList.remove("active");
    });
    btn.classList.add("active");
    currentFilter = btn.getAttribute("data-filter");
    renderNotes();
  });

  // ======================================================
  //  JOB PREP — TASKS
  // ======================================================

  function renderTasks() {
    var container = document.getElementById("tasks-list");
    var emptyEl = document.getElementById("tasks-empty");
    var today = todayKey();

    var todayTasks = jobprepTasks.filter(function (t) { return t.date === today; });

    // Sort: incomplete first, then by timestamp
    todayTasks.sort(function (a, b) {
      if (a.completed !== b.completed) return a.completed ? 1 : -1;
      return a.timestamp - b.timestamp;
    });

    // Clear existing items
    var items = container.querySelectorAll(".task-item");
    items.forEach(function (i) { i.remove(); });

    document.getElementById("tasks-today-count").textContent = todayTasks.length + " task" + (todayTasks.length !== 1 ? "s" : "");

    if (todayTasks.length === 0) {
      emptyEl.style.display = "block";
      return;
    }

    emptyEl.style.display = "none";

    todayTasks.forEach(function (task) {
      var div = document.createElement("div");
      div.className = "task-item" + (task.completed ? " completed" : "");
      div.innerHTML =
        '<input type="checkbox"' + (task.completed ? ' checked' : '') + ' data-task-id="' + task.id + '">' +
        '<span class="task-text">' + escapeHtml(task.description) + '</span>' +
        '<div class="task-meta">' +
          '<span class="tag ' + getCategoryTagClass(task.category) + '">' + formatCategory(task.category) + '</span>' +
          '<span class="priority-dot ' + task.priority + '" title="' + task.priority + ' priority"></span>' +
          '<button class="danger-ghost" data-delete-task="' + task.id + '">✕</button>' +
        '</div>';
      container.appendChild(div);
    });

    // Checkbox handlers
    container.querySelectorAll("[data-task-id]").forEach(function (cb) {
      cb.addEventListener("change", function () {
        var id = cb.getAttribute("data-task-id");
        var task = jobprepTasks.find(function (t) { return t.id === id; });
        if (task) {
          task.completed = cb.checked;
          task.completedAt = cb.checked ? Date.now() : null;
          persistTasks();
          cloudUpdateTask(task);
          renderTasks();
          updateTaskStats();
          updateHero();
          updateWeekStrip();
          if (cb.checked) toast("Task completed ✓");
        }
      });
    });

    // Delete handlers
    container.querySelectorAll("[data-delete-task]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var id = btn.getAttribute("data-delete-task");
        jobprepTasks = jobprepTasks.filter(function (t) { return t.id !== id; });
        persistTasks();
        cloudDeleteTask(id);
        renderTasks();
        updateTaskStats();
        updateHero();
        updateWeekStrip();
        toast("Task deleted");
      });
    });
  }

  function getCategoryTagClass(cat) {
    var map = {
      "dsa": "solid",
      "system-design": "blue",
      "project": "insight",
      "resume": "interview",
      "application": "flag",
      "mock-interview": "idea",
      "study": "solid",
      "other": ""
    };
    return map[cat] || "";
  }

  function formatCategory(cat) {
    return cat.replace(/-/g, " ").toUpperCase();
  }

  function updateTaskStats() {
    var today = todayKey();
    var todayTasks = jobprepTasks.filter(function (t) { return t.date === today; });
    var done = todayTasks.filter(function (t) { return t.completed; }).length;
    var pending = todayTasks.length - done;

    document.getElementById("stat-tasks-total").textContent = todayTasks.length;
    document.getElementById("stat-tasks-done").textContent = done;
    document.getElementById("stat-tasks-pending").textContent = pending;
  }

  // Add task
  document.getElementById("btn-add-task").addEventListener("click", function () {
    var desc = document.getElementById("task-desc").value.trim();
    var category = document.getElementById("task-category").value;
    var priority = document.getElementById("task-priority").value;

    if (!desc) {
      toast("Task description is required");
      document.getElementById("task-desc").focus();
      return;
    }

    var task = {
      id: uid(),
      description: desc,
      category: category,
      priority: priority,
      date: todayKey(),
      completed: false,
      completedAt: null,
      timestamp: Date.now()
    };

    jobprepTasks.push(task);
    persistTasks();
    cloudInsertTask(task);
    renderTasks();
    updateTaskStats();
    updateHero();
    updateWeekStrip();

    document.getElementById("task-desc").value = "";
    toast("Task added");
  });

  // Enter key to add task
  document.getElementById("task-desc").addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      document.getElementById("btn-add-task").click();
    }
  });

  // Enter key to save note
  document.getElementById("note-title").addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      document.getElementById("note-content").focus();
    }
  });

  // Clear task form
  document.getElementById("btn-clear-task").addEventListener("click", function () {
    document.getElementById("task-desc").value = "";
    document.getElementById("task-category").selectedIndex = 0;
    document.getElementById("task-priority").selectedIndex = 0;
  });

  // ======================================================
  //  WEEK STRIP
  // ======================================================

  function updateWeekStrip() {
    var strip = document.getElementById("week-strip");
    strip.innerHTML = "";

    // Get Monday of current week
    var today = new Date();
    var dayOfWeek = today.getDay();
    var diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Monday = 0
    var monday = new Date(today);
    monday.setDate(today.getDate() - diff);

    var weekTotal = 0;

    for (var i = 0; i < 7; i++) {
      var d = new Date(monday);
      d.setDate(monday.getDate() + i);
      var dk = dateKey(d);

      var dayTasks = jobprepTasks.filter(function (t) { return t.date === dk && t.completed; });
      var dayNotes = lawxisNotes.filter(function (n) { return n.date === dk; });
      var count = dayTasks.length + dayNotes.length;
      weekTotal += count;

      var btn = document.createElement("button");
      btn.type = "button";
      btn.setAttribute("aria-pressed", count > 0 ? "true" : "false");
      btn.innerHTML =
        '<span class="count">' + count + '</span>' +
        '<span>' + DAY_HEADERS[i] + '</span>';

      if (dk === todayKey()) {
        btn.style.borderColor = "var(--signal)";
        btn.style.borderWidth = "2px";
      }

      strip.appendChild(btn);
    }

    document.getElementById("week-score").textContent = weekTotal;
    document.getElementById("week-verdict").textContent = "Activities this week";
  }

  // ======================================================
  //  CALENDAR
  // ======================================================

  // Calendar range: Oct 2026 to Dec 2027
  var calYear = now.getFullYear();
  var calMonth = now.getMonth(); // 0-indexed
  var CAL_MIN_YEAR = 2026, CAL_MIN_MONTH = 9; // Oct 2026
  var CAL_MAX_YEAR = 2027, CAL_MAX_MONTH = 11; // Dec 2027

  function renderCalendar() {
    var grid = document.getElementById("cal-grid");
    grid.innerHTML = "";

    // Title
    document.getElementById("cal-title").textContent = MONTH_FULL[calMonth].toUpperCase() + " " + calYear;

    // Nav buttons
    document.getElementById("cal-prev").disabled =
      (calYear === CAL_MIN_YEAR && calMonth <= CAL_MIN_MONTH);
    document.getElementById("cal-next").disabled =
      (calYear === CAL_MAX_YEAR && calMonth >= CAL_MAX_MONTH);

    // Day headers
    DAY_HEADERS.forEach(function (d) {
      var h = document.createElement("div");
      h.className = "cal-header";
      h.textContent = d;
      grid.appendChild(h);
    });

    // First day of month
    var firstDay = new Date(calYear, calMonth, 1);
    var startDay = firstDay.getDay(); // 0=Sun
    // Convert to Mon=0 format
    var startOffset = startDay === 0 ? 6 : startDay - 1;

    // Days in month
    var daysInMonth = new Date(calYear, calMonth + 1, 0).getDate();

    // Today key
    var todayStr = todayKey();

    // Build data lookup for this month
    var monthData = {};
    for (var d = 1; d <= daysInMonth; d++) {
      var dk = calYear + "-" + String(calMonth + 1).padStart(2, "0") + "-" + String(d).padStart(2, "0");
      var notesCount = lawxisNotes.filter(function (n) { return n.date === dk; }).length;
      var tasksCount = jobprepTasks.filter(function (t) { return t.date === dk; }).length;
      if (notesCount > 0 || tasksCount > 0) {
        monthData[d] = { notes: notesCount, tasks: tasksCount };
      }
    }

    // Empty cells before first day
    for (var e = 0; e < startOffset; e++) {
      var empty = document.createElement("div");
      empty.className = "cal-cell empty";
      grid.appendChild(empty);
    }

    // Date cells
    for (var day = 1; day <= daysInMonth; day++) {
      var dk2 = calYear + "-" + String(calMonth + 1).padStart(2, "0") + "-" + String(day).padStart(2, "0");
      var cell = document.createElement("div");
      cell.className = "cal-cell";

      if (dk2 === todayStr) cell.classList.add("today");
      if (monthData[day]) cell.classList.add("has-data");

      var dateNum = document.createElement("div");
      dateNum.className = "cal-date";
      dateNum.textContent = day;
      cell.appendChild(dateNum);

      if (monthData[day]) {
        var dots = document.createElement("div");
        dots.className = "cal-dots";
        if (monthData[day].notes > 0) {
          var dotN = document.createElement("span");
          dotN.className = "cal-dot lawxis";
          dots.appendChild(dotN);
        }
        if (monthData[day].tasks > 0) {
          var dotT = document.createElement("span");
          dotT.className = "cal-dot jobprep";
          dots.appendChild(dotT);
        }
        cell.appendChild(dots);

        var countText = document.createElement("div");
        countText.className = "cal-count";
        var parts = [];
        if (monthData[day].notes > 0) parts.push(monthData[day].notes + "N");
        if (monthData[day].tasks > 0) parts.push(monthData[day].tasks + "T");
        countText.textContent = parts.join(" · ");
        cell.appendChild(countText);
      }

      // Click handler
      (function (dateStr) {
        cell.addEventListener("click", function () {
          openDayModal(dateStr);
        });
      })(dk2);

      grid.appendChild(cell);
    }
  }

  // Month navigation
  document.getElementById("cal-prev").addEventListener("click", function () {
    calMonth--;
    if (calMonth < 0) { calMonth = 11; calYear--; }
    renderCalendar();
  });

  document.getElementById("cal-next").addEventListener("click", function () {
    calMonth++;
    if (calMonth > 11) { calMonth = 0; calYear++; }
    renderCalendar();
  });

  // ======================================================
  //  DAY DETAIL MODAL
  // ======================================================

  function openDayModal(dateStr) {
    var modal = document.getElementById("day-modal");
    var body = document.getElementById("modal-body");

    // Parse date for display
    var parts = dateStr.split("-");
    var dateObj = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
    var dayName = ["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"][dateObj.getDay()];

    document.getElementById("modal-date-title").textContent =
      dayName + " · " + formatDate(dateStr);

    // Get data for this date
    var dayNotes = lawxisNotes.filter(function (n) { return n.date === dateStr; })
      .sort(function (a, b) { return a.timestamp - b.timestamp; });
    var dayTasks = jobprepTasks.filter(function (t) { return t.date === dateStr; })
      .sort(function (a, b) { return a.timestamp - b.timestamp; });

    var html = "";

    // Lawxis section
    html += '<div class="modal-section">';
    html += '<h3><span class="section-dot green"></span> Lawxis — Research Notes</h3>';
    if (dayNotes.length === 0) {
      html += '<p class="modal-empty">No research notes on this date</p>';
    } else {
      dayNotes.forEach(function (note) {
        html += '<div class="modal-note-item">';
        html += '<div style="display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px">';
        html += '<strong style="font-size:14px">' + escapeHtml(note.title) + '</strong>';
        html += '<span class="tag ' + note.category + '">' + note.category.toUpperCase() + '</span>';
        html += '</div>';
        html += '<p style="margin:0 0 6px;font-size:14px;opacity:.85;white-space:pre-wrap">' + escapeHtml(note.content) + '</p>';
        if (note.person) {
          html += '<span class="tiny">↗ ' + escapeHtml(note.person) + ' · ' + formatTimestamp(note.timestamp) + '</span>';
        } else {
          html += '<span class="tiny">' + formatTimestamp(note.timestamp) + '</span>';
        }
        html += '</div>';
      });
    }
    html += '</div>';

    // Job Prep section
    html += '<div class="modal-section">';
    html += '<h3><span class="section-dot blue"></span> Job Prep — Tasks</h3>';
    if (dayTasks.length === 0) {
      html += '<p class="modal-empty">No tasks on this date</p>';
    } else {
      dayTasks.forEach(function (task) {
        var isDone = task.completed;
        html += '<div class="modal-task-item' + (isDone ? ' completed' : '') + '">';
        html += '<span class="check-icon ' + (isDone ? 'done' : 'pending') + '">' + (isDone ? '☑' : '☐') + '</span>';
        html += '<span style="flex:1;font-size:14px">' + escapeHtml(task.description) + '</span>';
        html += '<span class="tag ' + getCategoryTagClass(task.category) + '">' + formatCategory(task.category) + '</span>';
        html += '</div>';
      });

      var completedCount = dayTasks.filter(function (t) { return t.completed; }).length;
      html += '<p class="tiny" style="margin-top:12px">' + completedCount + '/' + dayTasks.length + ' COMPLETED</p>';
    }
    html += '</div>';

    // Summary
    if (dayNotes.length === 0 && dayTasks.length === 0) {
      html += '<div class="empty-state" style="padding:20px 0">';
      html += '<div class="empty-icon">📅</div>';
      html += '<p>No activity recorded on this date</p>';
      html += '</div>';
    }

    body.innerHTML = html;
    modal.classList.add("open");
    document.body.style.overflow = "hidden";
  }

  // Close modal
  document.getElementById("modal-close").addEventListener("click", closeModal);
  document.getElementById("day-modal").addEventListener("click", function (e) {
    if (e.target === this) closeModal();
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") {
      closeModal();
      closeSyncModal();
    }
  });

  function closeModal() {
    document.getElementById("day-modal").classList.remove("open");
    document.body.style.overflow = "";
  }

  // ======================================================
  //  SYNC MODAL CONTROLS
  // ======================================================

  var syncModal = document.getElementById("sync-modal");
  var openSyncBtn = document.getElementById("btn-open-sync");
  var closeSyncBtn = document.getElementById("sync-modal-close");

  function openSyncModal() {
    if (inputSupabaseUrl) inputSupabaseUrl.value = localStorage.getItem("supabase_url") || "";
    if (inputSupabaseKey) inputSupabaseKey.value = localStorage.getItem("supabase_key") || "";
    syncModal.classList.add("open");
    document.body.style.overflow = "hidden";
  }

  function closeSyncModal() {
    syncModal.classList.remove("open");
    document.body.style.overflow = "";
  }

  if (openSyncBtn) openSyncBtn.addEventListener("click", openSyncModal);
  if (closeSyncBtn) closeSyncBtn.addEventListener("click", closeSyncModal);
  if (syncModal) {
    syncModal.addEventListener("click", function (e) {
      if (e.target === this) closeSyncModal();
    });
  }

  // Connect & Save
  document.getElementById("btn-save-sync").addEventListener("click", function () {
    var url = (inputSupabaseUrl.value || "").trim();
    var key = (inputSupabaseKey.value || "").trim();

    if (!url || !key) {
      toast("Please enter both Supabase URL and Anon Key");
      return;
    }

    localStorage.setItem("supabase_url", url);
    localStorage.setItem("supabase_key", key);

    var ok = initSupabase(url, key);
    if (ok) {
      fetchCloudData(true);
      closeSyncModal();
    } else {
      toast("Failed to initialize Supabase client");
    }
  });

  // Test Connection
  document.getElementById("btn-test-sync").addEventListener("click", async function () {
    var url = (inputSupabaseUrl.value || "").trim();
    var key = (inputSupabaseKey.value || "").trim();

    if (!url || !key) {
      toast("Enter URL and Anon Key first");
      return;
    }

    setSyncUIState("syncing", "Testing connection to Supabase...");
    try {
      var testClient = window.supabase ? window.supabase.createClient(url, key) : null;
      if (!testClient) throw new Error("Supabase library not loaded");

      var res = await testClient.from("lawxis_notes").select("id", { count: "exact", head: true });
      if (res.error) throw res.error;

      setSyncUIState("online", "Connection test successful! Tables accessible.");
      toast("Supabase connection verified ✓");
    } catch (err) {
      console.warn("Connection test error:", err);
      setSyncUIState("offline", "Test failed: " + (err.message || "Ensure table lawxis_notes exists"));
      toast("Test failed: " + (err.message || "Error"));
    }
  });

  // Disconnect
  document.getElementById("btn-disconnect-sync").addEventListener("click", function () {
    localStorage.removeItem("supabase_url");
    localStorage.removeItem("supabase_key");
    if (inputSupabaseUrl) inputSupabaseUrl.value = "";
    if (inputSupabaseKey) inputSupabaseKey.value = "";
    supabaseClient = null;
    setSyncUIState("offline", "Disconnected from Supabase. Working in local offline mode.");
    toast("Disconnected from Supabase");
  });

  // Push Local
  document.getElementById("btn-push-local").addEventListener("click", function () {
    pushLocalToCloud();
  });

  // Pull Cloud
  document.getElementById("btn-pull-cloud").addEventListener("click", function () {
    fetchCloudData(true);
  });

  // ======================================================
  //  HTML ESCAPE
  // ======================================================

  function escapeHtml(text) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode(text));
    return div.innerHTML;
  }

  // ======================================================
  //  INITIALIZATION
  // ======================================================

  renderNotes();
  updateLawxisStats();
  renderTasks();
  updateTaskStats();
  updateHero();
  updateWeekStrip();
  renderCalendar();

  // Supabase Auto-init
  var savedSupabaseUrl = localStorage.getItem("supabase_url");
  var savedSupabaseKey = localStorage.getItem("supabase_key");
  if (savedSupabaseUrl && savedSupabaseKey) {
    var initialized = initSupabase(savedSupabaseUrl, savedSupabaseKey);
    if (initialized) {
      fetchCloudData(false);
    }
  } else {
    setSyncUIState("offline");
  }

})();