script.js

// GenPassX — script v2 with entropy, localStorage, per-password download & accessibility

// Elements
const lengthRange = document.getElementById("lengthRange");
const lengthValue = document.getElementById("lengthValue");
const generateBtn = document.getElementById("generateBtn");
const downloadAllBtn = document.getElementById("downloadAll");
const clearBtn = document.getElementById("clearBtn");
const themeToggle = document.getElementById("themeToggle");
const autoRegenerate = document.getElementById("autoRegenerate");
const showPasswords = document.getElementById("showPasswords");

const passwordInputs = document.querySelectorAll(".password-input");
const copyButtons = document.querySelectorAll(".copy-btn");
const regenButtons = document.querySelectorAll(".regen-btn");
const downloadButtons = document.querySelectorAll(".download-btn");

const bitsEls = document.querySelectorAll(".entropy .bits");
const strTextEls = document.querySelectorAll(".str-text");

const historyList = document.getElementById("historyList");
const meterBar = document.querySelector(".meter-bar");
const globalEntropy = document.getElementById("globalEntropy");
const globalStrength = document.getElementById("globalStrength");

// Options
const uppercase = document.getElementById("uppercase");
const lowercase = document.getElementById("lowercase");
const numbers = document.getElementById("numbers");
const symbols = document.getElementById("symbols");

// state & constants
const HISTORY_KEY = "genpassx_history_v2";
const AUTO_INTERVAL = 5000; // ms

lengthRange.addEventListener("input", () => {
  lengthValue.textContent = lengthRange.value;
});

// Utility: build charset and pool size
function getCharset() {
  let charset = "";
  if (uppercase.checked) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  if (lowercase.checked) charset += "abcdefghijklmnopqrstuvwxyz";
  if (numbers.checked) charset += "0123456789";
  if (symbols.checked) charset += "!@#$%^&*()_+-=[]{};:,.<>?/|";
  // remove duplicates and return as array
  return Array.from(new Set(charset.split("")));
}

// Generate password picking random chars
function generatePassword(len = +lengthRange.value) {
  const chars = getCharset();
  if (!chars.length) return "";
  let pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars[Math.floor(Math.random() * chars.length)];
  }
  const stats = calcEntropy(pwd, chars.length);
  return { pwd, stats };
}

// Calculate entropy (bits) and determine a simple strength label
function calcEntropy(password, poolSize) {
  // bits = length * log2(poolSize)
  // If poolSize not passed (for per-password estimation), compute from present categories
  if (!poolSize) {
    const pools = [
      /[A-Z]/.test(password) ? 26 : 0,
      /[a-z]/.test(password) ? 26 : 0,
      /[0-9]/.test(password) ? 10 : 0,
      /[^A-Za-z0-9]/.test(password) ? 32 : 0,
    ];
    poolSize = pools.reduce((a, b) => a + b, 0) || 1;
  }
  const bits = +(password.length * Math.log2(poolSize)).toFixed(2);
  // strength buckets (very rough)
  let strength = "Weak";
  if (bits >= 80) strength = "Excellent";
  else if (bits >= 60) strength = "Strong";
  else if (bits >= 40) strength = "Good";
  else if (bits >= 24) strength = "Fair";
  return { bits, strength };
}

// update UI for a password card
function setPasswordCard(index, pwdObj) {
  const input = passwordInputs[index];
  const bitsEl = bitsEls[index];
  const strText = strTextEls[index];

  input.value = pwdObj.pwd;
  const { bits, strength } = pwdObj.stats;
  bitsEl.textContent = bits;
  strText.textContent = strength;
  // update global meter using the first card's metrics (visual)
  updateGlobalMeter(bits, strength);
  // save to history
  pushHistory({ password: pwdObj.pwd, bits, strength, ts: Date.now() });
}

function updateGlobalMeter(bits, strength) {
  const maxBits = 128; // for visual scale
  const pct = Math.min(1, bits / maxBits);
  meterBar.style.transform = `scaleX(${pct})`;
  meterBar.style.opacity = 0.95;
  globalEntropy.textContent = bits;
  globalStrength.textContent = strength;
  meterBar.setAttribute("aria-valuenow", bits);
}

// Copy helper
async function copyToClipboard(text, btn) {
  try {
    await navigator.clipboard.writeText(text);
    btn.textContent = "✅";
    setTimeout(() => (btn.textContent = "📋"), 1000);
  } catch (e) {
    // fallback select
    const ta = document.createElement("textarea");
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
    btn.textContent = "✅";
    setTimeout(() => (btn.textContent = "📋"), 1000);
  }
}

// Download helper
function downloadText(filename, content) {
  const blob = new Blob([content], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

/* ---------- History (localStorage) ---------- */
function loadHistory() {
  try {
    const raw = localStorage.getItem(HISTORY_KEY);
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}
function saveHistory(arr) {
  localStorage.setItem(HISTORY_KEY, JSON.stringify(arr));
}
function pushHistory(entry) {
  // keep latest 50
  const hist = loadHistory();
  hist.unshift(entry);
  while (hist.length > 50) hist.pop();
  saveHistory(hist);
  renderHistory();
}
function renderHistory() {
  const hist = loadHistory();
  historyList.innerHTML = "";
  if (!hist.length) {
    const li = document.createElement("li");
    li.className = "history-item";
    li.innerHTML = `<div class="left" style="color:var(--muted)">No saved passwords yet — generated items appear here (masked).</div>`;
    historyList.appendChild(li);
    return;
  }
  hist.forEach((h, idx) => {
    const li = document.createElement("li");
    li.className = "history-item";
    // masked preview (first/last 2 chars)
    const pw = h.password || "";
    const masked = pw.length > 4 ? pw.slice(0,2) + "…" + pw.slice(-2) : "•".repeat(Math.max(1,pw.length));
    const time = new Date(h.ts).toLocaleString();
    li.innerHTML = `
      <div class="left">
        <div><strong>${masked}</strong> <span style="color:var(--muted);font-size:0.8rem">· ${h.bits} bits · ${h.strength}</span></div>
        <div style="color:var(--muted);font-size:0.8rem">${time}</div>
      </div>
      <div class="right">
        <button class="reveal-h" title="Reveal" aria-label="Reveal password">👁</button>
        <button class="copy-h" title="Copy" aria-label="Copy password">📋</button>
        <button class="dl-h" title="Download" aria-label="Download password">⬇️</button>
        <button class="del-h" title="Delete" aria-label="Delete history item">🗑</button>
      </div>
    `;
    // attach handlers
    li.querySelector(".reveal-h").addEventListener("click", () => {
      alert(`Password (full):\n\n${pw}`);
    });
    li.querySelector(".copy-h").addEventListener("click", () => copyToClipboard(pw, li.querySelector(".copy-h")));
    li.querySelector(".dl-h").addEventListener("click", () => downloadText(`GenPassX_pwd_${idx+1}.txt`, pw));
    li.querySelector(".del-h").addEventListener("click", () => {
      const arr = loadHistory();
      arr.splice(idx,1);
      saveHistory(arr);
      renderHistory();
    });
    historyList.appendChild(li);
  });
}

/* ---------- Events ---------- */

// Generate for all cards
function generateAllCards() {
  // For each password-input, create a pwd and set UI
  passwordInputs.forEach((input, i) => {
    const { pwd, stats } = generatePassword().pwd ? generatePassword() : { pwd: "", stats: { bits: 0, strength: "Weak" } };
    // note: generatePassword returns {pwd, stats}
    const res = typeof pwd === "object" ? pwd : { pwd, stats }; // compat
    // fix: call once
    const generated = generatePassword();
    setPasswordCard(i, generated);
  });
}

generateBtn.addEventListener("click", () => {
  // only accept when at least one charset selected
  if (getCharset().length === 0) {
    alert("Please enable at least one character set (uppercase/lowercase/numbers/symbols).");
    return;
  }
  // populate each card
  passwordInputs.forEach((input, idx) => {
    const { pwd, stats } = generatePassword();
    setPasswordCard(idx, { pwd, stats });
  });
});

// per-card regen / copy / download wiring
regenButtons.forEach((btn, idx) => {
  btn.addEventListener("click", () => {
    const { pwd, stats } = generatePassword();
    setPasswordCard(idx, { pwd, stats });
  });
});
copyButtons.forEach((btn, idx) => {
  btn.addEventListener("click", () => {
    const val = passwordInputs[idx].value;
    if (!val) return;
    copyToClipboard(val, btn);
  });
});
downloadButtons.forEach((btn, idx) => {
  btn.addEventListener("click", () => {
    const val = passwordInputs[idx].value;
    if (!val) return;
    downloadText(`GenPassX_password_${idx+1}.txt`, val);
  });
});

// show/hide toggle
showPasswords.addEventListener("change", () => {
  const type = showPasswords.checked ? "text" : "password";
  passwordInputs.forEach(inp => inp.type = type);
});

// download all (only non-empty ones)
downloadAllBtn.addEventListener("click", () => {
  const lines = Array.from(passwordInputs).map((inp, i) => {
    const v = inp.value || "";
    return `Password ${i+1}: ${v}`;
  }).filter(Boolean);
  if (!lines.length) { alert("No passwords to download."); return; }
  downloadText("GenPassX_Passwords.txt", lines.join("\n"));
});

// clear
clearBtn.addEventListener("click", () => {
  passwordInputs.forEach(inp => inp.value = "");
  // reset meter
  updateGlobalMeter(0, "—");
});

// theme toggle
themeToggle.addEventListener("click", () => {
  const isLight = document.body.classList.toggle("light");
  themeToggle.setAttribute("aria-pressed", String(isLight));
  themeToggle.textContent = isLight ? "☀️" : "🌙";
});

// Auto regenerate
let autoTimer = null;
autoRegenerate.addEventListener("change", () => {
  if (autoRegenerate.checked) {
    // safety: ensure charset exists
    if (getCharset().length === 0) { alert("Please enable at least one character set for auto-regenerate."); autoRegenerate.checked = false; return; }
    autoTimer = setInterval(() => {
      if (autoRegenerate.checked) {
        generateBtn.click();
      }
    }, AUTO_INTERVAL);
  } else {
    if (autoTimer) clearInterval(autoTimer);
  }
});

/* ---------- Initialization ---------- */
(function init() {
  lengthValue.textContent = lengthRange.value;
  renderHistory();
  // initial empty meter
  updateGlobalMeter(0, "—");
  // keyboard accessible: space/enter on generate button triggers click (browsers do this by default for buttons)
})();