script.js

const GITHUB_USERNAME = "Mokshitha1303";
const GITHUB_REPOS_URL = `https://api.github.com/users/${GITHUB_USERNAME}/repos?per_page=100&sort=updated&direction=desc`;

const PROJECT_OVERRIDES = {
  "Agentic-NLQ-Copilot": {
    title: "Agentic NLQ Copilot",
    category: "GenAI Systems",
    featured: true,
    badge: "Featured",
    accent: "rgba(47, 118, 255, 0.22)",
    summary:
      "A LangGraph-powered copilot that translates natural-language business questions into safe executable SQL with guardrails, schema retrieval, and benchmark-driven reliability.",
    story:
      "This project turns a difficult enterprise problem into an agentic workflow: accept ambiguous business language, ground it in schema context, generate SQL safely, and return execution-backed answers. The emphasis is not just on LLM output quality, but on system design, auditability, and production-minded safeguards.",
    highlights: [
      "Uses LangGraph orchestration for multi-step NLQ to SQL reasoning.",
      "Builds in SQL safety guardrails and execution-aware validation.",
      "Targets enterprise-style use cases instead of a toy chatbot demo."
    ],
    tech: ["LangGraph", "FastAPI", "Python", "SQL", "Spider dataset", "Benchmarking"]
  },
  RAGOps: {
    title: "RAGOps on SciFact",
    category: "GenAI Systems",
    featured: false,
    badge: "RAG",
    accent: "rgba(71, 126, 214, 0.18)",
    summary:
      "A retrieval-augmented question answering project built on the SciFact dataset to combine document retrieval with evidence-grounded answer generation.",
    story:
      "This project extends the portfolio's GenAI work beyond NLQ-to-SQL by focusing on retrieval-augmented reasoning. It is a useful complement because it demonstrates how answer quality depends not only on generation, but also on document retrieval, ranking, and evidence grounding.",
    highlights: [
      "Explores retrieval-augmented QA rather than pure generation.",
      "Uses SciFact, which keeps the task tied to evidence-backed scientific claims.",
      "Strengthens the portfolio's system-design story around modern LLM workflows."
    ],
    tech: ["Python", "RAG", "SciFact", "Information retrieval", "Question answering"]
  },
  "Real-Time-Earthquake-Analytics": {
    title: "Real-Time Earthquake Analytics",
    category: "Analytics Platform",
    featured: true,
    badge: "Live",
    accent: "rgba(18, 162, 133, 0.24)",
    summary:
      "A real-time analytics pipeline that ingests USGS earthquake feeds, validates data quality, detects anomalies, and surfaces insights through a live dashboard.",
    story:
      "This repository shows end-to-end data engineering and analytics thinking. It combines ingestion, validation, clustering, anomaly detection, explainability, and presentation in a single pipeline, which makes it stronger than a standalone notebook or dashboard-only build.",
    highlights: [
      "Automates data ingestion and scheduling instead of relying on manual runs.",
      "Pairs data quality checks with anomaly detection and dashboard delivery.",
      "Includes a live Streamlit deployment and database-backed workflow."
    ],
    tech: ["Python", "Streamlit", "USGS API", "Postgres", "ML", "Geospatial analytics"]
  },
  "ChestXray14_Swin_base_classification": {
    title: "ChestXray14 Swin-Base Training Repo",
    category: "Healthcare AI",
    featured: true,
    badge: "Research",
    accent: "rgba(234, 105, 82, 0.22)",
    summary:
      "A runnable PyTorch training repository for multi-label thoracic disease classification on NIH ChestX-ray14 using a Swin-Base transformer.",
    story:
      "Rather than keeping this work at the notebook level, the repository is structured like a proper training project. It includes configuration, checkpoints, official dataset splits, evaluation outputs, and performance-minded training options, which makes it much more representative of research engineering practice.",
    highlights: [
      "Uses weighted BCE loss, EMA weights, and resume-safe checkpoints.",
      "Handles official dataset splits for more reproducible evaluation.",
      "Documents A100 and large-image training considerations."
    ],
    tech: ["PyTorch", "Swin Transformer", "Medical imaging", "ChestX-ray14", "Training pipeline"]
  },
  "Classification_ChestXray_14_Swin_Base": {
    title: "ChestX-ray14 Swin-Base Classification",
    category: "Healthcare AI",
    featured: false,
    badge: "Model",
    accent: "rgba(227, 88, 64, 0.2)",
    summary:
      "An implementation of ChestX-ray14 disease classification using a Swin-Base transformer with detailed training and evaluation configuration.",
    story:
      "This project focuses on multi-label chest X-ray classification using transformer-based vision modeling. It shows an applied healthcare AI workflow with attention to training setup, split management, and practical evaluation for a medically relevant dataset.",
    highlights: [
      "Uses 512x512 image inputs for richer spatial detail.",
      "Adds early stopping and checkpoint management for training stability.",
      "Organizes configuration, scripts, plots, and source code clearly."
    ],
    tech: ["Python", "PyTorch", "Transformers", "Medical imaging", "Swin-Base"]
  },
  "Segmentation_pneumothorax_SwinBase": {
    title: "Pneumothorax Segmentation with Swin-UNet",
    category: "Healthcare AI",
    featured: true,
    badge: "Segmentation",
    accent: "rgba(187, 77, 105, 0.22)",
    summary:
      "An end-to-end Swin-UNet segmentation pipeline for pneumothorax imaging with training, evaluation, and visualization support.",
    story:
      "This project shifts from image-level classification to pixel-level medical understanding. The repository shows how transformer backbones can be adapted into a segmentation pipeline, including dataset handling, training defaults, evaluation metrics, and visual outputs that make the results interpretable.",
    highlights: [
      "Uses a Swin-UNet style architecture with a custom decoder.",
      "Covers data preparation, training, testing, and result visualization.",
      "Moves beyond classification into clinically relevant segmentation work."
    ],
    tech: ["PyTorch", "Swin-UNet", "DICOM", "Medical segmentation", "AdamW"]
  },
  "Parkinsons-Disease-Prediction": {
    title: "Parkinson's Disease Detection",
    category: "Healthcare AI",
    featured: false,
    badge: "CNN",
    accent: "rgba(246, 154, 74, 0.2)",
    summary:
      "A deep learning project that classifies spiral drawings to detect signs of Parkinson's disease.",
    story:
      "This work combines image preprocessing and CNN-based classification to address a healthcare screening problem. It is a strong example of taking a domain-specific signal, converting it into a usable computer vision pipeline, and evaluating the model with relevant classification metrics.",
    highlights: [
      "Builds a CNN around spiral drawing classification.",
      "Uses validation and test splits for model evaluation.",
      "Targets a practical health screening use case."
    ],
    tech: ["Python", "CNN", "TensorFlow/Keras", "Medical AI", "Image preprocessing"]
  },
  "Punjabi-to-English-Translator": {
    title: "Punjabi to English Translator",
    category: "NLP",
    featured: false,
    badge: "Translation",
    accent: "rgba(121, 97, 255, 0.18)",
    summary:
      "A translation-focused NLP project built to translate between Punjabi and English in both directions.",
    story:
      "This repository demonstrates interest in language technology beyond general classification tasks. It addresses bilingual translation, which brings its own challenges in preprocessing, sequence modeling, and preserving meaning across languages.",
    highlights: [
      "Supports translation in both Punjabi to English and English to Punjabi directions.",
      "Explores multilingual NLP rather than single-language text tasks.",
      "Adds breadth to the portfolio across vision, healthcare, and language."
    ],
    tech: ["NLP", "Machine translation", "Jupyter", "Language modeling"]
  },
  "Canny-Edge-Detection": {
    title: "Canny Edge Detection",
    category: "Vision Fundamentals",
    featured: false,
    badge: "CV Basics",
    accent: "rgba(54, 101, 175, 0.18)",
    summary:
      "A clean OpenCV implementation of the Canny edge detection pipeline with preprocessing and side-by-side visualization.",
    story:
      "This project shows command of core computer vision fundamentals. While simpler than the larger model repositories, it demonstrates understanding of the mechanics behind gradient-based edge detection and the importance of preprocessing choices in image analysis.",
    highlights: [
      "Applies grayscale conversion and Gaussian blur before edge detection.",
      "Uses the classic two-threshold Canny process for edge extraction.",
      "Visualizes input and output clearly for fast inspection."
    ],
    tech: ["OpenCV", "Python", "Computer vision", "Edge detection"]
  },
  "HOG-Histogram-of-Oriented-Gradients-": {
    title: "HOG Object Detection",
    category: "Vision Fundamentals",
    featured: false,
    badge: "CV Basics",
    accent: "rgba(36, 131, 145, 0.18)",
    summary:
      "An object detection project using HOG descriptors with a pre-trained SVM detector to localize people in images.",
    story:
      "This repository captures a foundational object detection technique that predates current deep learning approaches but remains important for understanding feature engineering. It demonstrates how handcrafted descriptors and classical classifiers can still solve practical detection tasks.",
    highlights: [
      "Uses HOG features for robust visual pattern extraction.",
      "Combines feature descriptors with an SVM detector.",
      "Visualizes bounding-box detections for interpretable output."
    ],
    tech: ["OpenCV", "HOG", "SVM", "Object detection", "Matplotlib"]
  },
  SIFT: {
    title: "SIFT Feature Detection",
    category: "Vision Fundamentals",
    featured: false,
    badge: "CV Basics",
    accent: "rgba(16, 124, 90, 0.18)",
    summary:
      "A SIFT-based feature detection project that identifies keypoints, computes descriptors, and visualizes the result.",
    story:
      "This work highlights the feature extraction side of classical computer vision. It is useful in a portfolio because it shows you understand not only end-to-end models, but also the lower-level representation techniques that shaped modern vision systems.",
    highlights: [
      "Detects scale- and rotation-invariant visual keypoints.",
      "Computes descriptors for matching and downstream analysis.",
      "Reports keypoint counts and descriptor dimensions for inspection."
    ],
    tech: ["OpenCV", "SIFT", "Feature extraction", "Computer vision"]
  },
  "Credit-card-number-detection": {
    title: "Credit Card Number Detection",
    category: "Data Processing",
    featured: false,
    badge: "Regex",
    accent: "rgba(237, 172, 82, 0.22)",
    summary:
      "A Python workflow that generates files, compresses and extracts them, then detects credit card numbers using regex-based pattern matching.",
    story:
      "This repository is less about model training and more about practical data handling. It demonstrates file generation, ZIP workflows, pattern detection, and chronological inspection, which makes it a useful example of applied scripting and data processing.",
    highlights: [
      "Generates and scans multiple text files for card-like patterns.",
      "Combines file handling, ZIP extraction, and regex detection.",
      "Shows practical automation beyond machine learning notebooks."
    ],
    tech: ["Python", "Regex", "File handling", "ZIP processing"]
  },
  "Bert-Question_Answering_Model": {
    title: "BERT Question Answering Model",
    category: "NLP",
    featured: false,
    badge: "NLP",
    accent: "rgba(140, 88, 225, 0.18)",
    summary:
      "A question-answering project that uses a BERT-family model to extract answer spans from a given context.",
    story:
      "This is a focused NLP application built around extractive question answering. It shows how transformer language models can be adapted to practical knowledge retrieval tasks, and it complements the translation project by showing a different class of text understanding problem.",
    highlights: [
      "Uses a BERT-family QA model fine-tuned for span extraction.",
      "Accepts a question plus context and returns targeted answers.",
      "Demonstrates a foundation for assistants, search, and support tools."
    ],
    tech: ["BERT", "RoBERTa", "NLP", "Question answering", "Transformers"]
  }
};

const FALLBACK_REPOS = [
  {
    name: "Agentic-NLQ-Copilot",
    html_url: "https://github.com/Mokshitha1303/Agentic-NLQ-Copilot",
    description:
      "Agentic NLQ Copilot is a LangGraph-powered FastAPI and CLI system that converts natural-language business questions into safe executable SQL.",
    language: "Python",
    stargazers_count: 0,
    updated_at: "2026-03-03T00:00:00Z",
    topics: ["langgraph", "fastapi", "sql", "nlq"]
  },
  {
    name: "Real-Time-Earthquake-Analytics",
    html_url: "https://github.com/Mokshitha1303/Real-Time-Earthquake-Analytics",
    description:
      "Real-time earthquake analytics platform with automated USGS data ingestion, quality validation, anomaly detection, and a live Streamlit dashboard.",
    language: "Python",
    stargazers_count: 0,
    updated_at: "2026-02-26T00:00:00Z",
    homepage: "https://real-time-earthquake-analytics-57bvnvydgnv5gz8bgnurfu.streamlit.app",
    topics: ["python", "data-science", "machine-learning", "real-time", "sql", "dashboard", "geospatial"]
  },
  {
    name: "ChestXray14_Swin_base_classification",
    html_url: "https://github.com/Mokshitha1303/ChestXray14_Swin_base_classification",
    description: "ChestX-ray14 Swin-Base training repository for thoracic disease classification.",
    language: "Python",
    stargazers_count: 0,
    updated_at: "2026-02-08T00:00:00Z",
    topics: ["pytorch", "medical-imaging", "swin-transformer", "classification"]
  },
  {
    name: "Classification_ChestXray_14_Swin_Base",
    html_url: "https://github.com/Mokshitha1303/Classification_ChestXray_14_Swin_Base",
    description: "Implementation of Classification using Swin-Base Transformer on the ChestXray-14 dataset.",
    language: "Python",
    stargazers_count: 0,
    updated_at: "2026-02-07T00:00:00Z",
    topics: ["pytorch", "swin-transformer", "chest-xray", "classification"]
  },
  {
    name: "Segmentation_pneumothorax_SwinBase",
    html_url: "https://github.com/Mokshitha1303/Segmentation_pneumothorax_SwinBase",
    description: "Segmentation model on Pneumothorax dataset using SwinBase backbone.",
    language: "Python",
    stargazers_count: 0,
    updated_at: "2025-12-08T00:00:00Z",
    topics: ["segmentation", "medical-imaging", "swin-unet", "pneumothorax"]
  },
  {
    name: "Parkinsons-Disease-Prediction",
    html_url: "https://github.com/Mokshitha1303/Parkinsons-Disease-Prediction",
    description: "Deep learning model for Parkinson's disease prediction from spiral drawings.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2025-01-24T00:00:00Z",
    topics: ["cnn", "healthcare", "image-classification"]
  },
  {
    name: "Punjabi-to-English-Translator",
    html_url: "https://github.com/Mokshitha1303/Punjabi-to-English-Translator",
    description: "Model built to translate Punjabi to English and English to Punjabi.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2025-01-24T00:00:00Z",
    topics: ["translation", "nlp", "multilingual"]
  },
  {
    name: "Canny-Edge-Detection",
    html_url: "https://github.com/Mokshitha1303/Canny-Edge-Detection",
    description: "Canny edge detection using OpenCV.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2024-12-10T00:00:00Z",
    topics: ["opencv", "computer-vision", "edge-detection"]
  },
  {
    name: "HOG-Histogram-of-Oriented-Gradients-",
    html_url: "https://github.com/Mokshitha1303/HOG-Histogram-of-Oriented-Gradients-",
    description: "Object detection using the Histogram of Oriented Gradients descriptor with an SVM detector.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2024-12-10T00:00:00Z",
    topics: ["opencv", "hog", "svm", "object-detection"]
  },
  {
    name: "SIFT",
    html_url: "https://github.com/Mokshitha1303/SIFT",
    description: "Scale-Invariant Feature Transform keypoint detection and descriptor computation.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2024-12-10T00:00:00Z",
    topics: ["opencv", "sift", "feature-detection"]
  },
  {
    name: "Credit-card-number-detection",
    html_url: "https://github.com/Mokshitha1303/Credit-card-number-detection",
    description:
      "Generates files, extracts archives, and detects credit card numbers with regex-based pattern matching.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2024-12-10T00:00:00Z",
    topics: ["regex", "python", "automation"]
  },
  {
    name: "Bert-Question_Answering_Model",
    html_url: "https://github.com/Mokshitha1303/Bert-Question_Answering_Model",
    description: "A simple BERT question answering model.",
    language: "Jupyter Notebook",
    stargazers_count: 0,
    updated_at: "2024-12-09T00:00:00Z",
    topics: ["bert", "question-answering", "nlp", "transformers"]
  }
];

const FILTERS = [
  "All",
  "GenAI Systems",
  "Analytics Platform",
  "Healthcare AI",
  "NLP",
  "Vision Fundamentals",
  "Data Processing"
];

const state = {
  projects: [],
  activeFilter: "All",
  searchTerm: "",
  selectedProject: null,
  dataSource: "Curated snapshot",
  lastTrigger: null
};

const grid = document.querySelector("#project-grid");
const template = document.querySelector("#project-card-template");
const filtersRoot = document.querySelector("#filters");
const searchInput = document.querySelector("#search-input");
const resultsSummary = document.querySelector("#results-summary");
const overlay = document.querySelector("#overlay");
const detailPanel = document.querySelector("#detail-panel");
const detailClose = document.querySelector("#detail-close");

const detailRefs = {
  kicker: document.querySelector("#detail-kicker"),
  title: document.querySelector("#detail-title"),
  summary: document.querySelector("#detail-summary"),
  meta: document.querySelector("#detail-meta"),
  story: document.querySelector("#detail-story"),
  highlights: document.querySelector("#detail-highlights"),
  tech: document.querySelector("#detail-tech"),
  repoLink: document.querySelector("#detail-repo-link")
};

function toTitleCase(value) {
  return value
    .replace(/[-_]+/g, " ")
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function formatUpdatedDate(isoDate) {
  const date = new Date(isoDate);
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric"
  }).format(date);
}

function createFallbackNarrative(repo) {
  return `This repository extends ${repo.language || "software"} work around ${repo.description || repo.name}. It adds range to the portfolio by showing how different problem types were approached, documented, and organized in code.`;
}

function createFallbackHighlights(repo) {
  const topicHighlights = (repo.topics || []).slice(0, 3).map((topic) => `Explores ${topic.replace(/-/g, " ")} as part of the implementation.`);
  if (topicHighlights.length) {
    return topicHighlights;
  }

  return [
    "Presents the project in a repository format that is easy to review.",
    "Adds practical implementation depth beyond a one-line project title.",
    "Strengthens the overall breadth of the portfolio."
  ];
}

function normalizeRepo(repo) {
  const override = PROJECT_OVERRIDES[repo.name] || {};
  const topics = [...new Set([...(override.tech || []), ...(repo.topics || []).map(toTitleCase)])].slice(0, 6);

  return {
    id: repo.name,
    name: override.title || toTitleCase(repo.name),
    rawName: repo.name,
    category: override.category || "Selected Work",
    featured: Boolean(override.featured),
    badge: override.badge || (repo.stargazers_count > 0 ? `${repo.stargazers_count} stars` : "Project"),
    accent: override.accent || "rgba(209, 88, 61, 0.18)",
    summary: override.summary || repo.description || "Project details available in the repository.",
    story: override.story || createFallbackNarrative(repo),
    highlights: override.highlights || createFallbackHighlights(repo),
    tech: topics.length ? topics : [repo.language || "Software"],
    language: repo.language || "Project",
    updatedAt: repo.updated_at,
    updatedLabel: formatUpdatedDate(repo.updated_at),
    stars: repo.stargazers_count || 0,
    repoUrl: repo.html_url,
    liveUrl: repo.homepage || "",
    searchText: [
      override.title,
      repo.name,
      repo.description,
      override.category,
      ...(repo.topics || []),
      ...(override.tech || [])
    ]
      .filter(Boolean)
      .join(" ")
      .toLowerCase()
  };
}

function sortProjects(projects) {
  return [...projects].sort((left, right) => {
    if (left.featured !== right.featured) {
      return Number(right.featured) - Number(left.featured);
    }

    return new Date(right.updatedAt) - new Date(left.updatedAt);
  });
}

function getFilterOptions() {
  const categorySet = new Set(state.projects.map((project) => project.category));
  const visibleDefaults = FILTERS.filter((filter) => filter === "All" || categorySet.has(filter));
  const extras = [...categorySet].filter((category) => !visibleDefaults.includes(category)).sort();
  return [...visibleDefaults, ...extras];
}

function renderFilters() {
  filtersRoot.innerHTML = "";

  getFilterOptions().forEach((filter) => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = `filter-chip${state.activeFilter === filter ? " is-active" : ""}`;
    button.textContent = filter;
    button.setAttribute("role", "tab");
    button.setAttribute("aria-selected", String(state.activeFilter === filter));

    button.addEventListener("click", () => {
      state.activeFilter = filter;
      renderFilters();
      renderProjects();
    });

    filtersRoot.appendChild(button);
  });
}

function getVisibleProjects() {
  return state.projects.filter((project) => {
    const matchesFilter = state.activeFilter === "All" || project.category === state.activeFilter;
    const matchesSearch = !state.searchTerm || project.searchText.includes(state.searchTerm);
    return matchesFilter && matchesSearch;
  });
}

function renderProjects() {
  const visibleProjects = getVisibleProjects();
  grid.innerHTML = "";

  if (state.selectedProject && !visibleProjects.some((project) => project.id === state.selectedProject)) {
    closeProject();
  }

  if (!visibleProjects.length) {
    const empty = document.createElement("article");
    empty.className = "project-card";
    empty.innerHTML = `
      <div class="project-hitbox">
        <div class="project-card-top">
          <div>
            <p class="project-category">No matches</p>
            <h3 class="project-title">Try a different search or category.</h3>
          </div>
        </div>
        <p class="project-description">The full portfolio is still here, but nothing matches the current filter state.</p>
      </div>
    `;
    grid.appendChild(empty);
  }

  visibleProjects.forEach((project, index) => {
    const fragment = template.content.cloneNode(true);
    const card = fragment.querySelector(".project-card");
    const button = fragment.querySelector(".project-hitbox");

    card.dataset.projectId = project.id;
    card.style.setProperty("--card-accent", project.accent);
    card.style.animationDelay = `${index * 55}ms`;
    fragment.querySelector(".project-category").textContent = project.category;
    fragment.querySelector(".project-title").textContent = project.name;
    fragment.querySelector(".project-badge").textContent = project.badge;
    fragment.querySelector(".project-description").textContent = project.summary;
    fragment.querySelector(".project-language").textContent = project.language;
    fragment.querySelector(".project-updated").textContent = `Updated ${project.updatedLabel}`;

    const tagsRoot = fragment.querySelector(".project-tags");
    project.tech.slice(0, 3).forEach((tag) => {
      const chip = document.createElement("span");
      chip.textContent = tag;
      tagsRoot.appendChild(chip);
    });

    button.addEventListener("click", () => openProject(project.id, button));
    grid.appendChild(fragment);
  });

  const featuredCount = visibleProjects.filter((project) => project.featured).length;
  resultsSummary.textContent = `${visibleProjects.length} projects visible | ${featuredCount} featured | ${state.dataSource} | click any card for the full story`;
  syncSelectedCard();
}

function fillStat(key, value) {
  const target = document.querySelector(`[data-stat="${key}"]`);
  if (target) {
    target.textContent = String(value);
  }
}

function syncStats() {
  fillStat("projects", state.projects.length);
  fillStat("publication-count", 1);
  fillStat("sections", 3);
}

function syncSelectedCard() {
  document.querySelectorAll(".project-card").forEach((card) => {
    card.classList.toggle("is-selected", card.dataset.projectId === state.selectedProject);
  });
}

function openProject(projectId, trigger = null) {
  const project = state.projects.find((entry) => entry.id === projectId);
  if (!project) {
    return;
  }

  state.selectedProject = projectId;
  state.lastTrigger = trigger || state.lastTrigger;
  detailRefs.kicker.textContent = project.category;
  detailRefs.title.textContent = project.name;
  detailRefs.summary.textContent = project.summary;

  detailRefs.meta.innerHTML = "";
  [project.language, `${project.stars} star${project.stars === 1 ? "" : "s"}`, `Updated ${project.updatedLabel}`].forEach((item) => {
    const chip = document.createElement("span");
    chip.textContent = item;
    detailRefs.meta.appendChild(chip);
  });

  detailRefs.story.textContent = project.story;

  detailRefs.highlights.innerHTML = "";
  project.highlights.forEach((highlight) => {
    const item = document.createElement("li");
    item.textContent = highlight;
    detailRefs.highlights.appendChild(item);
  });

  detailRefs.tech.innerHTML = "";
  project.tech.forEach((tag) => {
    const chip = document.createElement("span");
    chip.textContent = tag;
    detailRefs.tech.appendChild(chip);
  });

  detailRefs.repoLink.href = project.repoUrl;

  overlay.hidden = false;
  detailPanel.classList.add("is-open");
  detailPanel.setAttribute("aria-hidden", "false");
  document.body.classList.add("panel-open");
  syncSelectedCard();
  detailClose.focus();
}

function closeProject() {
  state.selectedProject = null;
  detailPanel.classList.remove("is-open");
  detailPanel.setAttribute("aria-hidden", "true");
  document.body.classList.remove("panel-open");
  overlay.hidden = true;
  syncSelectedCard();

  if (state.lastTrigger) {
    state.lastTrigger.focus();
    state.lastTrigger = null;
  }
}

function mergeRepoSources(liveRepos) {
  const fallbackByName = new Map(FALLBACK_REPOS.map((repo) => [repo.name, repo]));
  const merged = [];
  const seen = new Set();

  liveRepos
    .filter((repo) => !repo.fork)
    .forEach((repo) => {
      const fallback = fallbackByName.get(repo.name) || {};
      merged.push({
        ...fallback,
        ...repo,
        topics: repo.topics && repo.topics.length ? repo.topics : fallback.topics || [],
        homepage: repo.homepage || fallback.homepage || ""
      });
      seen.add(repo.name);
    });

  FALLBACK_REPOS.forEach((repo) => {
    if (!seen.has(repo.name)) {
      merged.push(repo);
    }
  });

  return merged;
}

async function loadProjects() {
  let repos = FALLBACK_REPOS;

  try {
    const response = await fetch(GITHUB_REPOS_URL, {
      headers: {
        Accept: "application/vnd.github+json"
      }
    });

    if (!response.ok) {
      throw new Error(`GitHub request failed with ${response.status}`);
    }

    const liveRepos = await response.json();
    if (Array.isArray(liveRepos) && liveRepos.length) {
      repos = mergeRepoSources(liveRepos);
      state.dataSource = "Live GitHub sync";
    }
  } catch (error) {
    console.warn("Using fallback GitHub data.", error);
  }

  state.projects = sortProjects(repos.map(normalizeRepo));
  syncStats();
  renderFilters();
  renderProjects();

}

searchInput.addEventListener("input", (event) => {
  state.searchTerm = event.target.value.trim().toLowerCase();
  renderProjects();
});

overlay.addEventListener("click", closeProject);
detailClose.addEventListener("click", closeProject);

window.addEventListener("keydown", (event) => {
  if (event.key === "Escape" && state.selectedProject) {
    closeProject();
  }
});

loadProjects();