script.js

const byId = (id) => document.getElementById(id);

const fields = {
  projectName: byId("projectName"),
  tagline: byId("tagline"),
  description: byId("description"),
  repoUrl: byId("repoUrl"),
  demoUrl: byId("demoUrl"),
  version: byId("version"),
  author: byId("author"),
  features: byId("features"),
  tech: byId("tech"),
  install: byId("install"),
  configuration: byId("configuration"),
  structure: byId("structure"),
  screenshots: byId("screenshots"),
  license: byId("license"),
  contribUrl: byId("contribUrl"),
  support: byId("support"),
  // FAQ handled separately
  socialGithub: byId("socialGithub"),
  socialCodepen: byId("socialCodepen"),
  socialMedium: byId("socialMedium"),
  socialTelegram: byId("socialTelegram"),
  socialInstagram: byId("socialInstagram"),
  socialPinterest: byId("socialPinterest"),
  credits: byId("credits"),
  acknowledgements: byId("acknowledgements"),
};

const previewPanel = byId("previewPanel");
const preview = byId("preview");
const previewCode = byId("previewCode");
const wordCount = byId("wordCount");
const charCount = byId("charCount");
const btnToggle = byId("btnToggle");
const btnPreview = byId("btnPreview");
const btnOpenPreview = byId("btnOpenPreview");
const autosaveStatus = byId("autosaveStatus");
const btnReset = byId("btnReset");
const techBadgeSelect = byId("techBadgeSelect");
const btnCopyMarkdownView = byId("btnCopyMarkdownView");
const faqList = byId("faqList");
const btnAddFaq = byId("btnAddFaq");

let autosaveTimer;

const sanitizeList = (raw) =>
  raw
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);

const sanitizeLines = (raw) =>
  raw
    .split("\n")
    .map((line) => line.trim())
    .filter(Boolean);

const titleCase = (value) =>
  value
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");

const toBullets = (lines) => lines.map((item) => `- ${item}`).join("\n");

const toParagraphs = (raw) =>
  raw
    .split("\n")
    .map((line) => line.trim())
    .filter(Boolean)
    .join("\n\n");

const slugify = (value) =>
  value
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g, "")
    .trim()
    .replace(/\s+/g, "-");


const parseRepoSlug = (repoUrl) => {
  if (!repoUrl) return null;
  try {
    const url = new URL(repoUrl);
    if (!url.hostname.includes("github.com")) return null;
    const parts = url.pathname.split("/").filter(Boolean);
    if (parts.length < 2) return null;
    return `${parts[0]}/${parts[1].replace(/\.git$/, "")}`;
  } catch (err) {
    return null;
  }
};

const buildBadges = (name, repoUrl, license) => {
  if (!name) return "";
  const slug = name.toLowerCase().replace(/\s+/g, "-");
  const repoSlug = parseRepoSlug(repoUrl);
  const badgeSet = [
    `![Status](https://img.shields.io/badge/status-active-22c55e?style=flat-square)`,
    `![Made With](https://img.shields.io/badge/made%20with-${slug}-0ea5e9?style=flat-square)`,
  ];

  if (repoSlug) {
    badgeSet.push(
      `![Stars](https://img.shields.io/github/stars/${repoSlug}?style=flat-square)`,
      `![Forks](https://img.shields.io/github/forks/${repoSlug}?style=flat-square)`,
      `![Issues](https://img.shields.io/github/issues/${repoSlug}?style=flat-square)`,
      `![Pull Requests](https://img.shields.io/github/issues-pr/${repoSlug}?style=flat-square)`,
      `![Contributors](https://img.shields.io/github/contributors/${repoSlug}?style=flat-square)`
    );
  }

  if (license) {
    badgeSet.push(
      `![License](https://img.shields.io/badge/license-${encodeURIComponent(license)}-f97316?style=flat-square)`
    );
  }

  return badgeSet.join(" ");
};

const buildGenericBadge = (label, url, color, logo) => {
  if (!url) return "";
  const safeLabel = label.replace(/\s+/g, "_");
  const logoPart = logo ? `&logo=${logo}&logoColor=white` : "";
  return `[![${label}](https://img.shields.io/badge/${safeLabel}-${color}?style=for-the-badge${logoPart})](${url})`;
};

const buildSocialBadges = (links) => {
  const entries = Object.entries(links).filter(([, url]) => url);
  if (!entries.length) return "";
  const map = {
    GitHub: {
      color: "181717",
      logo: "github",
    },
    CodePen: {
      color: "000000",
      logo: "codepen",
    },
    Medium: {
      color: "12100E",
      logo: "medium",
    },
    Telegram: {
      color: "2CA5E0",
      logo: "telegram",
    },
    Instagram: {
      color: "E4405F",
      logo: "instagram",
    },
    Pinterest: {
      color: "BD081C",
      logo: "pinterest",
    },
  };
  return entries
    .map(([label, url]) => {
      const meta = map[label] || { color: "64748b", logo: "" };
      return `[![${label}](https://img.shields.io/badge/${label}-${meta.color}?style=for-the-badge&logo=${meta.logo}&logoColor=white)](${url})`;
    })
    .join("\n");
};

const section = (title, body) => `${title}\n\n${body}\n`;

const getFieldValue = (node) => {
  if (!node) return "";
  return node.value.trim();
};

const buildTableOfContents = (titles) => {
  if (!titles.length) return "";
  return titles.map((title) => `- [${title}](#${slugify(title)})`).join("\n");
};

const buildMarkdown = () => {
  const data = Object.fromEntries(
    Object.entries(fields).map(([key, node]) => [key, getFieldValue(node)])
  );

  const features = sanitizeList(data.features);
  const tech = sanitizeList(data.tech);
  const screenshots = sanitizeLines(data.screenshots);
  const faqs = getFaqItems();

  const name = data.projectName || "README";
  const tagline = data.tagline ? `> ${data.tagline}` : "";

  let md = `# ${titleCase(name)}\n\n`;

  const badges = buildBadges(name, data.repoUrl, data.license);
  if ((data.repoUrl || data.license) && badges) {
    const communityLine =
      "Awesome GitHub Profile README · Awesome GitHub Profiles (Product Hunt) · Awesome Badge website · Join Community";
    md += `<div align=\"center\">\n\n${communityLine}\n\n${badges}\n\n</div>\n\n---\n\n`;
  }

  if (tagline) {
    md += `${tagline}\n\n`;
  }

  if (data.version) {
    md += section("## Version", data.version);
  }

  const sectionTitles = [
    ...(data.description ? ["What It Is"] : []),
    ...(data.demoUrl ? ["Demo"] : []),
    ...(screenshots.length ? ["Screenshots"] : []),
    ...(features.length ? ["Features"] : []),
    ...(tech.length ? ["Tech Stack"] : []),
    ...(data.install ? ["Installation"] : []),
    ...(data.configuration ? ["Configuration"] : []),
    ...(data.structure ? ["Project Structure"] : []),
    ...(data.contribUrl ? ["Contributing"] : []),
    ...(data.support ? ["Support"] : []),
    ...(faqs.length ? ["FAQ"] : []),
    ...(data.socialGithub ||
    data.socialCodepen ||
    data.socialMedium ||
    data.socialTelegram ||
    data.socialInstagram ||
    data.socialPinterest
      ? ["Connect With Me"]
      : []),
    ...(data.repoUrl ? ["Repository"] : []),
    ...(data.author ? ["Author"] : []),
    ...(data.credits ? ["Author & Credits"] : []),
    ...(data.acknowledgements ? ["Acknowledgements"] : []),
    ...(data.license ? ["License"] : []),
  ];

  if (sectionTitles.length > 3) {
    const toc = buildTableOfContents(sectionTitles);
    if (toc) {
      md += section("## Table of Contents", toc);
      md += "---\n\n";
    }
  }

  if (data.description) {
    md += section("## What It Is", data.description);
  }

  if (data.demoUrl) {
    const demoBadge = buildGenericBadge("Live_Demo", data.demoUrl, "22c55e", "vercel");
    md += section("## Demo", demoBadge || data.demoUrl);
  }

  if (screenshots.length) {
    const shotLines = screenshots.map((url, idx) => `![Screenshot ${idx + 1}](${url})`).join("\n\n");
    md += section("## Screenshots", shotLines);
  }

  if (features.length) {
    md += section("## Features", features.map((item) => `- ${item}`).join("\n"));
  }

  if (tech.length) {
    md += section("## Tech Stack", tech.map((item) => `- ${item}`).join("\n"));
  }

  if (data.install) {
    md += section("## Installation", `\`\`\`\n${data.install}\n\`\`\``);
  }

  if (data.configuration) {
    md += section("## Configuration", toParagraphs(data.configuration));
  }

  if (data.structure) {
    md += section("## Project Structure", toParagraphs(data.structure));
  }

  if (data.contribUrl) {
    const contribBadge = buildGenericBadge("Contributing", data.contribUrl, "f97316", "github");
    const contribText = contribBadge || `See ${data.contribUrl} for contribution guidelines.`;
    md += section("## Contributing", contribText);
  }

  if (data.support) {
    md += section("## Support", toParagraphs(data.support));
  }

  if (faqs.length) {
    const faqLines = faqs
      .map((item) => `**Q: ${item.question}**\n\nA: ${item.answer}`)
      .join("\n\n");
    md += section("## FAQ", faqLines);
  }

  const socialBadges = buildSocialBadges({
    GitHub: data.socialGithub,
    CodePen: data.socialCodepen,
    Medium: data.socialMedium,
    Telegram: data.socialTelegram,
    Instagram: data.socialInstagram,
    Pinterest: data.socialPinterest,
  });
  if (socialBadges) {
    md += `## 📫 Connect With Me\n\n<div align=\"center\">\n\n${socialBadges}\n\n</div>\n\n`;
  }

  if (data.repoUrl) {
    const repoBadge = buildGenericBadge("Repository", data.repoUrl, "0ea5e9", "github");
    md += section("## Repository", repoBadge || data.repoUrl);
  }

  if (data.author) {
    md += section("## Author", data.author);
  }

  if (data.credits) {
    md += section("## Author & Credits", toParagraphs(data.credits));
  }

  if (data.acknowledgements) {
    md += section("## Acknowledgements", toParagraphs(data.acknowledgements));
  }

  if (data.license) {
    md += section("## License", `Distributed under the ${data.license} License.`);
  }

  return md.trim() + "\n";
};

const renderMarkdown = (md) => {
  if (window.marked) {
    const raw = marked.parse(md, { mangle: false, headerIds: true });
    return window.DOMPurify ? DOMPurify.sanitize(raw) : raw;
  }
  return md.replace(/\n/g, "<br>");
};

const addCopyButtonsToCode = (container) => {
  if (!container) return;
  const blocks = container.querySelectorAll("pre");
  blocks.forEach((block) => {
    if (block.querySelector(".copy-code-btn")) return;
    const button = document.createElement("button");
    button.type = "button";
    button.className = "copy-code-btn";
    button.textContent = "Copy";
    button.addEventListener("click", async () => {
      const code = block.querySelector("code");
      const text = code ? code.textContent : block.textContent;
      try {
        await navigator.clipboard.writeText(text.trim());
        button.textContent = "Copied";
        setTimeout(() => {
          button.textContent = "Copy";
        }, 1500);
      } catch (err) {
        button.textContent = "Failed";
        setTimeout(() => {
          button.textContent = "Copy";
        }, 1500);
      }
    });
    block.appendChild(button);
  });
};

const updatePreview = () => {
  const md = buildMarkdown();
  previewCode.textContent = md;
  preview.innerHTML = renderMarkdown(md);
  addCopyButtonsToCode(preview);
  const words = md.trim().split(/\s+/).filter(Boolean);
  wordCount.textContent = `${words.length} words`;
  charCount.textContent = `${md.length} chars`;
  scheduleAutosave();
};

const copyMarkdown = async () => {
  const md = buildMarkdown();
  try {
    await navigator.clipboard.writeText(md);
    if (btnCopyMarkdownView) btnCopyMarkdownView.textContent = "Copied";
    setTimeout(() => {
      if (btnCopyMarkdownView) btnCopyMarkdownView.textContent = "Copy Markdown";
    }, 1600);
  } catch (err) {
    alert("Copy failed. Try selecting the preview text and copying manually.");
  }
};

const clearTechBadges = () => {
  if (!techBadgeSelect) return;
  Array.from(techBadgeSelect.querySelectorAll(".badge-option")).forEach((btn) =>
    btn.classList.remove("is-active")
  );
  fields.tech.value = "";
};

const getFaqItems = () => {
  if (!faqList) return [];
  return Array.from(faqList.querySelectorAll(".faq-item"))
    .map((item) => {
      const question = item.querySelector(".faq-question")?.value.trim() || "";
      const answer = item.querySelector(".faq-answer")?.value.trim() || "";
      return { question, answer };
    })
    .filter((item) => item.question || item.answer);
};

const addFaqItem = () => {
  if (!faqList) return;
  const wrapper = document.createElement("div");
  wrapper.className = "faq-item";
  wrapper.innerHTML = `
    <input class="faq-question" type="text" placeholder="Question" />
    <textarea class="faq-answer" rows="2" placeholder="Answer"></textarea>
  `;
  faqList.appendChild(wrapper);
  const inputs = wrapper.querySelectorAll("input, textarea");
  inputs.forEach((node) => {
    node.addEventListener("input", updatePreview);
    node.addEventListener("change", updatePreview);
  });
};

const setTechBadges = (stack) => {
  if (!techBadgeSelect) return;
  const normalized = stack.map((item) => item.toLowerCase());
  const selected = [];
  const buttons = Array.from(techBadgeSelect.querySelectorAll(".badge-option"));
  const existingValues = buttons.map((btn) => (btn.dataset.value || btn.textContent).trim().toLowerCase());
  stack.forEach((item) => {
    if (!existingValues.includes(item.toLowerCase())) {
      const newBtn = document.createElement("button");
      newBtn.type = "button";
      newBtn.className = "badge-option";
      newBtn.dataset.value = item;
      newBtn.textContent = item;
      techBadgeSelect.appendChild(newBtn);
    }
  });
  Array.from(techBadgeSelect.querySelectorAll(".badge-option")).forEach((btn) => {
    const value = (btn.dataset.value || btn.textContent).trim();
    const match = normalized.includes(value.toLowerCase());
    if (match) {
      btn.classList.add("is-active");
      selected.push(value);
    } else {
      btn.classList.remove("is-active");
    }
  });
  fields.tech.value = selected.join(", ");
};

const toggleTechBadge = (event) => {
  const target = event.target.closest(".badge-option");
  if (!target) return;
  target.classList.toggle("is-active");
  const selected = Array.from(techBadgeSelect.querySelectorAll(".badge-option.is-active")).map(
    (btn) => btn.dataset.value || btn.textContent
  );
  fields.tech.value = selected.join(", ");
  updatePreview();
};

const resetForm = () => {
  Object.values(fields).forEach((node) => {
    node.value = "";
  });
  clearTechBadges();
  if (faqList) {
    faqList.innerHTML = `
      <div class="faq-item">
        <input class="faq-question" type="text" placeholder="Question" />
        <textarea class="faq-answer" rows="2" placeholder="Answer"></textarea>
      </div>
    `;
  }
  localStorage.removeItem("readmeStudioDraft");
  updatePreview();
};

const toggleView = () => {
  if (previewPanel.classList.contains("is-collapsed")) {
    return;
  }
  const showingCode = !previewCode.parentElement.classList.contains("is-hidden");
  if (showingCode) {
    previewCode.parentElement.classList.add("is-hidden");
    preview.classList.remove("is-hidden");
    previewPanel.classList.remove("markdown-only");
    btnToggle.textContent = "Show Markdown";
  } else {
    preview.classList.add("is-hidden");
    previewCode.parentElement.classList.remove("is-hidden");
    previewPanel.classList.add("markdown-only");
    btnToggle.textContent = "Show Preview";
  }
};

const setPreviewState = (open) => {
  if (open) {
    previewPanel.classList.remove("is-collapsed");
    document.body.classList.add("preview-fullscreen");
    btnPreview.textContent = "Exit Fullscreen";
    btnToggle.disabled = false;
    previewCode.parentElement.classList.add("is-hidden");
    preview.classList.remove("is-hidden");
    previewPanel.classList.remove("markdown-only");
    btnToggle.textContent = "Show Markdown";
  } else {
    previewPanel.classList.add("is-collapsed");
    document.body.classList.remove("preview-fullscreen");
    btnPreview.textContent = "Exit Fullscreen";
    btnToggle.disabled = true;
  }
};

const togglePreview = () => {
  const isOpen = !previewPanel.classList.contains("is-collapsed");
  setPreviewState(!isOpen);
};

const openPreview = () => setPreviewState(true);

const scheduleAutosave = () => {
  clearTimeout(autosaveTimer);
  autosaveTimer = setTimeout(() => {
    const data = Object.fromEntries(
      Object.entries(fields).map(([key, node]) => [key, getFieldValue(node)])
    );
    const draft = { data, tech: fields.tech.value };
    localStorage.setItem("readmeStudioDraft", JSON.stringify(draft));
    if (autosaveStatus) autosaveStatus.textContent = "Saved";
  }, 400);
};

const init = () => {
  Object.values(fields).forEach((node) => {
    node.addEventListener("input", updatePreview);
    node.addEventListener("change", updatePreview);
  });

  btnCopyMarkdownView?.addEventListener("click", copyMarkdown);
  btnReset?.addEventListener("click", resetForm);
  btnToggle?.addEventListener("click", toggleView);
  btnPreview?.addEventListener("click", togglePreview);
  btnOpenPreview?.addEventListener("click", openPreview);

  if (techBadgeSelect) {
    techBadgeSelect.addEventListener("click", toggleTechBadge);
  }
  if (btnAddFaq) {
    btnAddFaq.addEventListener("click", () => {
      addFaqItem();
    });
  }
  if (faqList) {
    faqList.querySelectorAll("input, textarea").forEach((node) => {
      node.addEventListener("input", updatePreview);
      node.addEventListener("change", updatePreview);
    });
  }

  updatePreview();
};

if (document.readyState === "loading") {
  window.addEventListener("DOMContentLoaded", init);
} else {
  init();
}