app.js

// 1) Firebase config
const firebaseConfig = {
  apiKey: "AIzaSyBdcqSSWmjGnn3fsi8eDQTXtFDFUiYbtfU",
  authDomain: "devtrackr-149be.firebaseapp.com",
  projectId: "devtrackr-149be",
  storageBucket: "devtrackr-149be.firebasestorage.app",
  messagingSenderId: "936962359530",
  appId: "1:936962359530:web:0a27728821a2a02ea91793",
  measurementId: "G-VX3H0BDW39",
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();
const db = firebase.firestore();

// 2) Auth elements
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const btnSignup = document.getElementById("btn-signup");
const btnLogin = document.getElementById("btn-login");

const authSection = document.getElementById("auth-section");
const appSection = document.getElementById("app-section");

// Sign up and login
btnSignup.onclick = () => {
  auth
    .createUserWithEmailAndPassword(emailInput.value, passwordInput.value)
    .catch(alert);
};

btnLogin.onclick = () => {
  auth
    .signInWithEmailAndPassword(emailInput.value, passwordInput.value)
    .catch(alert);
};

// 3) Show app after login
auth.onAuthStateChanged((user) => {
  if (user) {
    authSection.style.display = "none";
    appSection.style.display = "block";
    loadLogs();
    loadGithubUsername();
  } else {
    authSection.style.display = "block";
    appSection.style.display = "none";
  }
});

// 4) Daily logs
const btnAddLog = document.getElementById("btn-add-log");
const logsList = document.getElementById("logs-list");
const streakText = document.getElementById("streak-text");

btnAddLog.onclick = async () => {
  const user = auth.currentUser;
  if (!user) return alert("Login first");

  const title = document.getElementById("log-title").value;
  const desc = document.getElementById("log-desc").value;
  const tag = document.getElementById("log-tag").value;

  await db.collection("logs").add({
    userId: user.uid,
    title,
    desc,
    tag,
    date: new Date().toISOString().slice(0, 10), // YYYY-MM-DD
    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
  });

  document.getElementById("log-title").value = "";
  document.getElementById("log-desc").value = "";
  loadLogs();
};

// 5) GitHub section
const githubUsernameInput = document.getElementById("github-username");
const btnSaveGithub = document.getElementById("btn-save-github");
const btnLoadGithub = document.getElementById("btn-load-github");
const githubReposList = document.getElementById("github-repos");

// save username to Firestore
btnSaveGithub.onclick = async () => {
  const user = auth.currentUser;
  if (!user) return;
  await db
    .collection("users")
    .doc(user.uid)
    .set(
      {
        githubUsername: githubUsernameInput.value,
      },
      { merge: true }
    );
  alert("GitHub username saved");
};

async function loadGithubUsername() {
  const user = auth.currentUser;
  if (!user) return;
  const docSnap = await db.collection("users").doc(user.uid).get();
  if (docSnap.exists && docSnap.data().githubUsername) {
    githubUsernameInput.value = docSnap.data().githubUsername;
  }
}

btnLoadGithub.onclick = async () => {
  const username = githubUsernameInput.value.trim();
  if (!username) return alert("Enter username");

  const res = await fetch(`https://api.github.com/users/${username}/repos`);
  const repos = await res.json();

  githubReposList.innerHTML = "";
  repos.slice(0, 5).forEach((r) => {
    const last = r.pushed_at
      ? new Date(r.pushed_at).toDateString()
      : "N/A";
    const li = document.createElement("li");
    li.textContent = `${r.name} - Last commit: ${last}`;
    githubReposList.appendChild(li);
  });
};

// 6) Weekly summary (local)
const btnGenerateSummary = document.getElementById("btn-generate-summary");
const summaryText = document.getElementById("summary-text");

btnGenerateSummary.onclick = async () => {
  const user = auth.currentUser;
  if (!user) return alert("Login first");

  summaryText.textContent = "Generating...";

  const snap = await db
    .collection("logs")
    .where("userId", "==", user.uid)
    .orderBy("date", "desc")
    .limit(7)
    .get();

  const items = [];
  const tags = {};
  snap.forEach((doc) => {
    const d = doc.data();
    items.push(`• ${d.date}: [${d.tag}] ${d.title}`);
    tags[d.tag] = (tags[d.tag] || 0) + 1;
  });

  if (items.length === 0) {
    summaryText.textContent =
      "No logs this week. Add some activity to see a summary.";
    return;
  }

  const mainTag = Object.entries(tags).sort((a, b) => b[1] - a[1])[0][0];

  summaryText.textContent =
    `This week you focused mainly on ${mainTag}. ` +
    `You logged ${items.length} coding sessions. ` +
    `Highlights:\n` +
    items.join("\n") +
    `\n\nNext steps: continue this streak, document important learnings, and pick one mini-project to consolidate your skills.`;
};

// 7) Logs + streak + chart
let logsChartInstance = null;

async function loadLogs() {
  const user = auth.currentUser;
  if (!user) return;

  const snap = await db
    .collection("logs")
    .where("userId", "==", user.uid)
    .orderBy("date", "desc")
    .limit(30)
    .get();

  const logs = [];
  logsList.innerHTML = "";
  snap.forEach((doc) => {
    const data = doc.data();
    logs.push(data);
    const li = document.createElement("li");
    li.textContent = `${data.date} - [${data.tag}] ${data.title}`;
    logsList.appendChild(li);
  });

  updateStreak(logs);
  drawLogsChart(logs);
}

// compute consecutive streak ending today
function updateStreak(logs) {
  const datesSet = new Set(logs.map((l) => l.date));
  let streak = 0;
  let current = new Date();

  while (true) {
    const dStr = current.toISOString().slice(0, 10);
    if (datesSet.has(dStr)) {
      streak++;
      current.setDate(current.getDate() - 1);
    } else {
      break;
    }
  }
  streakText.textContent = `Current streak: ${streak} day(s)`;
}

// Chart: count logs per day
function drawLogsChart(logs) {
  const byDate = {};
  logs.forEach((l) => {
    byDate[l.date] = (byDate[l.date] || 0) + 1;
  });

  const labels = Object.keys(byDate).sort();
  const values = labels.map((d) => byDate[d]);

  const ctx = document.getElementById("logsChart").getContext("2d");
  if (logsChartInstance) logsChartInstance.destroy();
  logsChartInstance = new Chart(ctx, {
    type: "bar",
    data: {
      labels,
      datasets: [
        {
          label: "Logs per day",
          data: values,
          backgroundColor: "rgba(37, 99, 235, 0.6)",
        },
      ],
    },
  });
}

// 8) Simple JavaScript playground
const codeInput = document.getElementById("code-input");
const codeStdin = document.getElementById("code-stdin");
const btnRunCode = document.getElementById("btn-run-code");
const codeOutput = document.getElementById("code-output");

btnRunCode.onclick = () => {
  const input = codeStdin.value; // user input variable
  const code = codeInput.value;
  codeOutput.textContent = "";

  try {
    const result = eval(code);
    if (result !== undefined) {
      codeOutput.textContent = String(result);
    } else if (!codeOutput.textContent) {
      codeOutput.textContent = "Code executed (no return value).";
    }
  } catch (e) {
    codeOutput.textContent = "Error: " + e.message;
  }
};

// 9) Tabs behavior
const tabButtons = document.querySelectorAll(".tab-button");
const tabContents = {
  overview: document.getElementById("tab-overview"),
  github: document.getElementById("tab-github"),
  playground: document.getElementById("tab-playground"),
};

tabButtons.forEach((btn) => {
  btn.onclick = () => {
    const tab = btn.dataset.tab;
    tabButtons.forEach((b) => b.classList.remove("active"));
    Object.values(tabContents).forEach((c) => c.classList.remove("active"));
    btn.classList.add("active");
    tabContents[tab].classList.add("active");
  };
});