script.js

let timelineData = {
  project: {
    title: "Task Management SaaS",
    problem:
      "Teams struggle with simple, real-time task tracking without complex enterprise tools.",
    solution:
      "Build a lightweight task management app with real-time collaboration, user authentication, and cloud storage.",
    techStack: [
      "Next.js 14",
      "TypeScript",
      "Supabase (Auth & DB)",
      "Tailwind CSS",
      "Vercel (Deploy)",
    ],
  },
  days: [
    {
      number: 1,
      title: "Foundation & Setup",
      goals: [
        "Set up Next.js 14 project with TypeScript and Tailwind CSS",
        "Initialize Git repository and create GitHub repo",
        "Set up .gitignore and create initial commit with project structure",
        "Create Supabase account and set up database tables (users, tasks, projects)",
        "Design database schema and relationships",
        "Build basic UI layout (navbar, sidebar, main content area)",
      ],
      resources: [
        "Next.js 14 App Router docs",
        "Git & GitHub setup guide",
        "Best practices for .gitignore files",
        "Supabase Quick Start Guide",
        "Tailwind CSS Documentation",
      ],
    },
    {
      number: 2,
      title: "Authentication System",
      goals: [
        "Implement Supabase Auth (email/password + Google OAuth)",
        "Create login, signup, and password reset pages",
        "Set up protected routes and middleware",
        "Build user profile page with edit functionality",
        "Commit auth system with clear commit messages",
      ],
      resources: [
        "Supabase Auth Documentation",
        "Next.js Middleware Guide",
        "Protected Routes Pattern",
      ],
    },
    {
      number: 3,
      title: "Core Features - Task CRUD",
      goals: [
        "Build task creation form with validation",
        "Implement task list view with filtering (status, priority)",
        "Add edit and delete task functionality",
        "Create API routes for all CRUD operations",
      ],
      resources: [
        "Next.js API Routes",
        "React Hook Form for validation",
        "Supabase CRUD operations",
      ],
    },
    {
      number: 4,
      title: "Real-time Updates & Advanced Features",
      goals: [
        "Implement Supabase Realtime for live task updates",
        "Add drag-and-drop task reordering",
        "Build project/workspace creation and management",
        "Add task assignment to team members",
      ],
      resources: [
        "Supabase Realtime Subscriptions",
        "dnd-kit or react-beautiful-dnd library",
        "Multi-tenancy patterns",
      ],
    },
    {
      number: 5,
      title: "UI Polish & User Experience",
      goals: [
        "Add loading states and skeleton screens",
        "Implement toast notifications for user actions",
        "Create dashboard with task statistics and charts",
        "Make app fully responsive (mobile, tablet, desktop)",
      ],
      resources: [
        "React Hot Toast or Sonner",
        "Recharts for data visualization",
        "Tailwind responsive design utilities",
      ],
    },
    {
      number: 6,
      title: "Testing & Optimization",
      goals: [
        "Write basic unit tests for key functions",
        "Optimize images and implement lazy loading",
        "Set up error boundaries and error handling",
        "Run Lighthouse audit and fix performance issues",
      ],
      resources: [
        "Jest & React Testing Library",
        "Next.js Image optimization",
        "Chrome DevTools Performance",
      ],
    },
    {
      number: 7,
      title: "Deployment & Documentation",
      goals: [
        "Deploy to Vercel with environment variables",
        "Create production branch and tag release version",
        "Set up custom domain (optional)",
        "Write comprehensive README with setup instructions",
        "Create demo video or screenshots for portfolio",
        "Final testing on production environment",
      ],
      resources: [
        "Vercel Deployment Guide",
        "Environment Variables Best Practices",
        "README Template for projects",
      ],
    },
  ],
};

let currentEditingDay = null;
let editDayModalInstance = null;

// Theme Management
function initTheme() {
  const savedTheme = localStorage.getItem("theme") || "light";
  const savedColor = localStorage.getItem("colorScheme") || "purple";

  document.documentElement.setAttribute("data-theme", savedTheme);
  document.documentElement.setAttribute("data-color", savedColor);

  updateThemeButton(savedTheme);
  document.getElementById("colorScheme").value = savedColor;
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "light" ? "dark" : "light";

  document.documentElement.setAttribute("data-theme", newTheme);
  localStorage.setItem("theme", newTheme);
  updateThemeButton(newTheme);
}

function updateThemeButton(theme) {
  const icon = document.getElementById("themeIcon");
  const text = document.getElementById("themeText");
  if (theme === "dark") {
    icon.className = "bi bi-sun";
    text.textContent = "Light Mode";
  } else {
    icon.className = "bi bi-moon-stars";
    text.textContent = "Dark Mode";
  }
}

function changeColorScheme(scheme) {
  document.documentElement.setAttribute("data-color", scheme);
  localStorage.setItem("colorScheme", scheme);
}

// Date and Time Management
function updateDateTime() {
  const now = new Date();
  const options = {
    weekday: "short",
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  };
  const formattedDateTime = now.toLocaleDateString("en-US", options);
  const dateTimeDisplay = document.getElementById("dateTimeDisplay");
  if (dateTimeDisplay) {
    dateTimeDisplay.textContent = formattedDateTime;
  }
}

function initDateTime() {
  updateDateTime();
  // Update every second
  setInterval(updateDateTime, 1000);
}

// Page Navigation
function showPage(pageName) {
  // Hide all pages
  document.querySelectorAll(".page-content").forEach((page) => {
    page.classList.remove("active");
  });

  // Show selected page
  const pageMap = {
    home: "homePage",
    about: "aboutPage",
  };

  const pageId = pageMap[pageName];
  if (pageId) {
    document.getElementById(pageId).classList.add("active");
  }

  // Scroll to top
  window.scrollTo({ top: 0, behavior: "smooth" });
}

// Scroll to Top Button
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

// Show/hide scroll to top button based on scroll position
window.addEventListener("scroll", function () {
  const scrollBtn = document.getElementById("scrollTopBtn");
  if (window.pageYOffset > 300) {
    scrollBtn.classList.add("show");
  } else {
    scrollBtn.classList.remove("show");
  }
});

// Initialize
function init() {
  initTheme();
  initDateTime();
  loadFromLocalStorage();
  renderProjectInfo();
  renderTimeline();
  updateProgress();
  editDayModalInstance = new bootstrap.Modal(
    document.getElementById("editDayModal"),
  );
}

// Project Editor
function toggleProjectEditor() {
  const editor = document.getElementById("projectEditor");
  editor.style.display = editor.style.display === "none" ? "block" : "none";

  if (editor.style.display === "block") {
    document.getElementById("projectTitle").value = timelineData.project.title;
    document.getElementById("projectProblem").value =
      timelineData.project.problem;
    document.getElementById("projectSolution").value =
      timelineData.project.solution;
    renderTechList();
  }
}

function addTech() {
  const input = document.getElementById("techInput");
  const tech = input.value.trim();
  if (tech && !timelineData.project.techStack.includes(tech)) {
    timelineData.project.techStack.push(tech);
    renderTechList();
    input.value = "";
  }
}

function removeTech(index) {
  timelineData.project.techStack.splice(index, 1);
  renderTechList();
}

function renderTechList() {
  const container = document.getElementById("techList");
  container.innerHTML = timelineData.project.techStack
    .map(
      (tech, i) =>
        `<span class="badge bg-secondary tech-badge">${tech} <button onclick="removeTech(${i})" class="btn-close btn-close-white" style="font-size: 0.6rem; vertical-align: middle;"></button></span>`,
    )
    .join("");
}

function saveProjectInfo() {
  timelineData.project.title = document.getElementById("projectTitle").value;
  timelineData.project.problem =
    document.getElementById("projectProblem").value;
  timelineData.project.solution =
    document.getElementById("projectSolution").value;

  renderProjectInfo();
  toggleProjectEditor();
  saveToLocalStorage();
}

function renderProjectInfo() {
  document.getElementById("displayTitle").innerHTML =
    '<i class="bi bi-lightbulb"></i> ' + timelineData.project.title;
  document.getElementById("displayProblem").textContent =
    timelineData.project.problem;
  document.getElementById("displaySolution").textContent =
    timelineData.project.solution;

  const techContainer = document.getElementById("displayTechStack");
  techContainer.innerHTML = timelineData.project.techStack
    .map((tech) => `<span class="badge bg-secondary tech-badge">${tech}</span>`)
    .join("");
}

// Timeline Management
function renderTimeline() {
  const timeline = document.getElementById("timeline");
  timeline.innerHTML = timelineData.days
    .map(
      (day) => `
        <div class="timeline-item" data-day="${day.number}">
            <div class="timeline-badge">Day ${day.number}</div>
            <div class="card shadow timeline-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0">${day.title}</h5>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" onclick="editDay(${day.number})" title="Edit day">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="deleteDay(${day.number})" title="Delete day">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="fw-bold"><i class="bi bi-list-check"></i> Goals:</h6>
                        <div class="list-group">
                            ${day.goals
                              .map(
                                (goal, i) => `
                                <div class="list-group-item goal-item d-flex align-items-start">
                                    <input class="form-check-input me-2 mt-1 goal-checkbox" type="checkbox" data-day="${day.number}" data-goal="${i}" ${isGoalCompleted(day.number, i) ? "checked" : ""}>
                                    <span class="flex-grow-1 ${isGoalCompleted(day.number, i) ? "completed-goal" : ""}" ondblclick="editGoal(${day.number}, ${i})">${goal}</span>
                                    <button class="btn btn-sm btn-outline-danger btn-delete ms-2" onclick="deleteGoal(${day.number}, ${i})">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            `,
                              )
                              .join("")}
                        </div>
                        <button class="btn btn-sm btn-outline-primary mt-2" onclick="toggleAddGoal(${day.number})">
                            <i class="bi bi-plus"></i> Add Goal
                        </button>
                        <div class="mt-2 collapse" id="addGoalForm${day.number}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="newGoal${day.number}" placeholder="Enter new goal...">
                                <button class="btn btn-success" onclick="addGoal(${day.number})">Add</button>
                                <button class="btn btn-secondary" onclick="toggleAddGoal(${day.number})">Cancel</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-top pt-3">
                        <h6 class="fw-bold"><i class="bi bi-book"></i> Resources:</h6>
                        <ul class="list-unstyled">
                            ${day.resources
                              .map(
                                (resource, i) => `
                                <li class="mb-1 d-flex align-items-center">
                                    <i class="bi bi-arrow-right text-primary me-2"></i>
                                    <span class="flex-grow-1">${resource}</span>
                                    <button class="btn btn-sm btn-outline-danger btn-delete ms-2" onclick="deleteResource(${day.number}, ${i})">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </li>
                            `,
                              )
                              .join("")}
                        </ul>
                        <button class="btn btn-sm btn-outline-primary" onclick="toggleAddResource(${day.number})">
                            <i class="bi bi-plus"></i> Add Resource
                        </button>
                        <div class="mt-2 collapse" id="addResourceForm${day.number}">
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="newResource${day.number}" placeholder="Enter resource...">
                                <button class="btn btn-success" onclick="addResource(${day.number})">Add</button>
                                <button class="btn btn-secondary" onclick="toggleAddResource(${day.number})">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    )
    .join("");

  attachCheckboxListeners();
}

function addNewDay() {
  const newDayNumber = timelineData.days.length + 1;
  timelineData.days.push({
    number: newDayNumber,
    title: `Day ${newDayNumber}`,
    goals: ["New goal - double click to edit"],
    resources: ["Resource link or description"],
  });
  renderTimeline();
  saveToLocalStorage();
}

function editDay(dayNumber) {
  const day = timelineData.days.find((d) => d.number === dayNumber);
  currentEditingDay = dayNumber;
  document.getElementById("editDayTitle").value = day.title;
  editDayModalInstance.show();
}

function saveDayEdit() {
  const day = timelineData.days.find((d) => d.number === currentEditingDay);
  day.title = document.getElementById("editDayTitle").value;
  editDayModalInstance.hide();
  renderTimeline();
  saveToLocalStorage();
}

function deleteDay(dayNumber) {
  if (confirm("Are you sure you want to delete this day?")) {
    const index = timelineData.days.findIndex((d) => d.number === dayNumber);
    timelineData.days.splice(index, 1);
    timelineData.days.forEach((day, i) => {
      day.number = i + 1;
    });
    renderTimeline();
    saveToLocalStorage();
    updateProgress();
  }
}

// Goal Management
function toggleAddGoal(dayNumber) {
  const form = document.getElementById(`addGoalForm${dayNumber}`);
  const collapse = new bootstrap.Collapse(form, { toggle: true });
}

function addGoal(dayNumber) {
  const input = document.getElementById(`newGoal${dayNumber}`);
  const goal = input.value.trim();
  if (goal) {
    const day = timelineData.days.find((d) => d.number === dayNumber);
    day.goals.push(goal);
    input.value = "";
    toggleAddGoal(dayNumber);
    renderTimeline();
    saveToLocalStorage();
  }
}

function editGoal(dayNumber, goalIndex) {
  const day = timelineData.days.find((d) => d.number === dayNumber);
  const newText = prompt("Edit goal:", day.goals[goalIndex]);
  if (newText !== null && newText.trim()) {
    day.goals[goalIndex] = newText.trim();
    renderTimeline();
    saveToLocalStorage();
  }
}

function deleteGoal(dayNumber, goalIndex) {
  if (confirm("Delete this goal?")) {
    const day = timelineData.days.find((d) => d.number === dayNumber);
    day.goals.splice(goalIndex, 1);
    renderTimeline();
    saveToLocalStorage();
    updateProgress();
  }
}

// Resource Management
function toggleAddResource(dayNumber) {
  const form = document.getElementById(`addResourceForm${dayNumber}`);
  const collapse = new bootstrap.Collapse(form, { toggle: true });
}

function addResource(dayNumber) {
  const input = document.getElementById(`newResource${dayNumber}`);
  const resource = input.value.trim();
  if (resource) {
    const day = timelineData.days.find((d) => d.number === dayNumber);
    day.resources.push(resource);
    input.value = "";
    toggleAddResource(dayNumber);
    renderTimeline();
    saveToLocalStorage();
  }
}

function deleteResource(dayNumber, resourceIndex) {
  const day = timelineData.days.find((d) => d.number === dayNumber);
  day.resources.splice(resourceIndex, 1);
  renderTimeline();
  saveToLocalStorage();
}

// Progress Tracking
function attachCheckboxListeners() {
  document.querySelectorAll(".goal-checkbox").forEach((checkbox) => {
    checkbox.addEventListener("change", function () {
      const dayNumber = parseInt(this.dataset.day);
      const goalIndex = parseInt(this.dataset.goal);
      saveGoalProgress(dayNumber, goalIndex, this.checked);

      const span = this.nextElementSibling;
      if (this.checked) {
        span.classList.add("completed-goal");
      } else {
        span.classList.remove("completed-goal");
      }
      updateProgress();
    });
  });
}

function isGoalCompleted(dayNumber, goalIndex) {
  const key = `goal-${dayNumber}-${goalIndex}`;
  return localStorage.getItem(key) === "true";
}

function saveGoalProgress(dayNumber, goalIndex, completed) {
  const key = `goal-${dayNumber}-${goalIndex}`;
  localStorage.setItem(key, completed);
}

function updateProgress() {
  let totalGoals = 0;
  let completedGoals = 0;

  timelineData.days.forEach((day) => {
    day.goals.forEach((_, i) => {
      totalGoals++;
      if (isGoalCompleted(day.number, i)) {
        completedGoals++;
      }
    });
  });

  const percentage =
    totalGoals > 0 ? Math.round((completedGoals / totalGoals) * 100) : 0;
  const progressFill = document.getElementById("progressFill");
  progressFill.style.width = percentage + "%";
  progressFill.setAttribute("aria-valuenow", percentage);
  progressFill.querySelector("span").textContent = percentage + "%";
}

// Save/Load
function saveToLocalStorage() {
  localStorage.setItem("timelineData", JSON.stringify(timelineData));
}

function loadFromLocalStorage() {
  const saved = localStorage.getItem("timelineData");
  if (saved) {
    timelineData = JSON.parse(saved);
  }
}

function saveTimeline() {
  saveToLocalStorage();
  const toast = new bootstrap.Toast(document.createElement("div"));
  alert("Timeline saved successfully!");
}

function loadTimeline() {
  if (confirm("Load saved timeline? This will replace current timeline.")) {
    loadFromLocalStorage();
    renderProjectInfo();
    renderTimeline();
    updateProgress();
  }
}

function exportTimeline() {
  const dataStr = JSON.stringify(timelineData, null, 2);
  const dataBlob = new Blob([dataStr], { type: "application/json" });
  const url = URL.createObjectURL(dataBlob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "skillsprint-timeline.json";
  link.click();
  URL.revokeObjectURL(url);
}

function importTimeline() {
  document.getElementById("importFile").click();
}

function handleImport(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (e) {
      try {
        timelineData = JSON.parse(e.target.result);
        renderProjectInfo();
        renderTimeline();
        updateProgress();
        saveToLocalStorage();
        alert("Timeline imported successfully!");
      } catch (error) {
        alert("Error importing timeline. Please check the file format.");
      }
    };
    reader.readAsText(file);
  }
}

// Initialize on load
init();

// Register Service Worker for PWA
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("service-worker.js")
      .then((registration) => {
        console.log(
          "Service Worker registered successfully:",
          registration.scope,
        );
      })
      .catch((error) => {
        console.log("Service Worker registration failed:", error);
      });
  });
}

// PWA Install Prompt
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  deferredPrompt = e;

  const installBtn = document.createElement("button");
  installBtn.className = "btn btn-gradient position-fixed bottom-0 end-0 m-3";
  installBtn.innerHTML = '<i class="bi bi-phone"></i> Install App';
  installBtn.style.zIndex = "1000";

  installBtn.addEventListener("click", async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      console.log(`User response: ${outcome}`);
      deferredPrompt = null;
      installBtn.remove();
    }
  });

  document.body.appendChild(installBtn);
});