app.js

// ✅ Helper function to handle API errors
function handleAPIError(response) {
    if (response.status === 404) {
        throw new Error("User not found! Please check the username.");
    } else if (response.status === 403) {
        throw new Error("API rate limit exceeded. Please try again later.");
    } else if (!response.ok) {
        throw new Error(`HTTP Error: ${response.status}`);
    }
}

// ✅ Format date nicely
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
}

// ✅ Get GitHub User
async function getGitHubUser(username) {
    try {
        console.log(`Making HTTP GET request for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}`);
        handleAPIError(response);
        const userData = await response.json();
        return userData;
    } catch (error) {
        console.log("Error getting user:", error.message);
        throw error;
    }
}

// ✅ Get Repositories
async function getUserRepositories(username) {
    try {
        console.log(`Fetching repositories for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}/repos`);
        handleAPIError(response);
        const repos = await response.json();
        return repos;
    } catch (error) {
        console.log("Error getting repositories:", error.message);
        throw error;
    }
}

// ✅ Get Followers
async function getUserFollowers(username) {
    try {
        console.log(`Fetching followers for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}/followers`);
        handleAPIError(response);
        const followers = await response.json();
        return followers;
    } catch (error) {
        console.log("Error getting followers:", error.message);
        throw error;
    }
}

// ✅ Get Following
async function getUserFollowing(username) {
    try {
        console.log(`Fetching following list for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}/following`);
        handleAPIError(response);
        const following = await response.json();
        return following;
    } catch (error) {
        console.log("Error getting following:", error.message);
        throw error;
    }
}

// ✅ Get Events
async function getUserEvents(username) {
    try {
        console.log(`Fetching recent events for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}/events/public`);
        handleAPIError(response);
        const events = await response.json();
        return events.slice(0, 10);
    } catch (error) {
        console.log("Error getting events:", error.message);
        throw error;
    }
}

// ✅ Get Organizations
async function getUserOrganizations(username) {
    try {
        console.log(`Fetching organizations for user: ${username}`);
        const response = await fetch(`https://api.github.com/users/${username}/orgs`);
        handleAPIError(response);
        const orgs = await response.json();
        return orgs;
    } catch (error) {
        console.log("Error getting organizations:", error.message);
        throw error;
    }
}

// ✅ BONUS: Repository Details
async function getRepositoryDetails(owner, repo) {
    try {
        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
        handleAPIError(response);
        const repoDetails = await response.json();
        return repoDetails;
    } catch (error) {
        console.log("❌ Error getting repository details:", error.message);
        throw error;
    }
}

// ✅ BONUS: Repository Languages
async function getRepositoryLanguages(owner, repo) {
    try {
        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/languages`);
        handleAPIError(response);
        const languages = await response.json();
        return languages;
    } catch (error) {
        console.log("❌ Error getting repository languages:", error.message);
        throw error;
    }
}

// ✅ BONUS: Repository Contributors
async function getRepositoryContributors(owner, repo) {
    try {
        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
        handleAPIError(response);
        const contributors = await response.json();
        return contributors;
    } catch (error) {
        console.log("❌ Error getting repository contributors:", error.message);
        throw error;
    }
}

// ==============================================
// ✅ UI Handling Section
// ==============================================

const usernameInput = document.getElementById("usernameInput");
const searchBtn = document.getElementById("searchBtn");
const loadingMessage = document.getElementById("loadingMessage");
const errorSection = document.getElementById("errorSection");
const errorText = document.getElementById("errorText");
const tryAgainBtn = document.getElementById("tryAgainBtn");

// Display containers
const userProfileCard = document.getElementById("userProfileCard");
const repositoriesContainer = document.getElementById("repositoriesContainer");
const activityContainer = document.getElementById("activityContainer");
const followersContainer = document.getElementById("followersContainer");
const followingContainer = document.getElementById("followingContainer");
const organizationsContainer = document.getElementById("organizationsContainer");

// Profile fields
const userAvatar = document.getElementById("userAvatar");
const userName = document.getElementById("userName");
const userUsername = document.getElementById("userUsername");
const userBio = document.getElementById("userBio");
const userCompany = document.getElementById("userCompany");
const userLocation = document.getElementById("userLocation");
const userBlog = document.getElementById("userBlog");
const userJoined = document.getElementById("userJoined");
const repoCount = document.getElementById("repoCount");
const followerCount = document.getElementById("followerCount");
const followingCount = document.getElementById("followingCount");

searchBtn.addEventListener("click", async () => {
    const username = usernameInput.value.trim();
    if (!username) return alert("Please enter a GitHub username!");

    // Reset UI
    errorSection.classList.add("hidden");
    userProfileCard.classList.add("hidden");
    repositoriesContainer.classList.add("hidden");
    activityContainer.classList.add("hidden");
    organizationsContainer.classList.add("hidden");
    loadingMessage.classList.remove("hidden");

    try {
        // Fetch all data parallelly
        const [user, repos, events, followers, following, orgs] = await Promise.all([
            getGitHubUser(username),
            getUserRepositories(username),
            getUserEvents(username),
            getUserFollowers(username),
            getUserFollowing(username),
            getUserOrganizations(username)
        ]);

        displayUserProfile(user);
        displayRepositories(repos);
        displayEvents(events);
        displayFollowers(followers);
        displayFollowing(following);
        displayOrganizations(orgs);

        loadingMessage.classList.add("hidden");
    } catch (error) {
        loadingMessage.classList.add("hidden");
        errorSection.classList.remove("hidden");
        errorText.textContent = error.message;
    }
});

tryAgainBtn.addEventListener("click", () => {
    errorSection.classList.add("hidden");
    usernameInput.value = "";
});

// ✅ Display Functions
function displayUserProfile(user) {
    userProfileCard.classList.remove("hidden");
    userAvatar.src = user.avatar_url;
    userName.textContent = user.name || "No Name Provided";
    userUsername.textContent = `@${user.login}`;
    userBio.textContent = user.bio || "No bio available.";
    userCompany.textContent = user.company || "N/A";
    userLocation.textContent = user.location || "N/A";
    userBlog.href = user.blog || "#";
    userBlog.textContent = user.blog ? "Visit" : "N/A";
    userJoined.textContent = formatDate(user.created_at);
    repoCount.textContent = user.public_repos;
    followerCount.textContent = user.followers;
    followingCount.textContent = user.following;
}

function displayRepositories(repos) {
    repositoriesContainer.innerHTML = "";
    repositoriesContainer.classList.remove("hidden");
    if (!repos.length) {
        repositoriesContainer.innerHTML = `<p class="no-data">No repositories found.</p>`;
        return;
    }
    repos.forEach(repo => {
        const card = document.createElement("div");
        card.classList.add("repo-card");
        card.innerHTML = `
            <h4><a href="${repo.html_url}" target="_blank">${repo.name}</a></h4>
            <p>${repo.description || "No description"}</p>
            <div class="repo-info">
                <span class="language">${repo.language || "N/A"}</span>
                <span class="stars">⭐ ${repo.stargazers_count}</span>
                <span class="forks">🍴 ${repo.forks_count}</span>
            </div>
        `;
        repositoriesContainer.appendChild(card);
    });
}

function displayEvents(events) {
    activityContainer.innerHTML = "";
    activityContainer.classList.remove("hidden");
    if (!events.length) {
        activityContainer.innerHTML = `<p class="no-data">No recent activity found.</p>`;
        return;
    }
    events.forEach(event => {
        const card = document.createElement("div");
        card.classList.add("activity-card");
        card.innerHTML = `
            <div class="activity-info">
                <span class="activity-type">${event.type}</span>
                <span class="activity-date">${formatDate(event.created_at)}</span>
            </div>
            <p>Repo: ${event.repo.name}</p>
        `;
        activityContainer.appendChild(card);
    });
}

function displayFollowers(followers) {
    followersContainer.innerHTML = "";
    if (!followers.length) {
        followersContainer.innerHTML = `<p class="no-data">No followers found.</p>`;
        return;
    }
    followers.forEach(user => {
        const card = document.createElement("div");
        card.classList.add("user-mini-card");
        card.innerHTML = `
            <img src="${user.avatar_url}" class="mini-avatar" alt="${user.login}">
            <a href="${user.html_url}" target="_blank">${user.login}</a>
        `;
        followersContainer.appendChild(card);
    });
}

function displayFollowing(following) {
    followingContainer.innerHTML = "";
    if (!following.length) {
        followingContainer.innerHTML = `<p class="no-data">No following found.</p>`;
        return;
    }
    following.forEach(user => {
        const card = document.createElement("div");
        card.classList.add("user-mini-card");
        card.innerHTML = `
            <img src="${user.avatar_url}" class="mini-avatar" alt="${user.login}">
            <a href="${user.html_url}" target="_blank">${user.login}</a>
        `;
        followingContainer.appendChild(card);
    });
}

function displayOrganizations(orgs) {
    organizationsContainer.innerHTML = "";
    organizationsContainer.classList.remove("hidden");
    if (!orgs.length) {
        organizationsContainer.innerHTML = `<p class="no-data">No organizations found.</p>`;
        return;
    }
    orgs.forEach(org => {
        const card = document.createElement("div");
        card.classList.add("org-card");
        card.innerHTML = `
            <img src="${org.avatar_url}" class="org-avatar" alt="${org.login}">
            <div class="org-info">
                <h4><a href="https://github.com/${org.login}" target="_blank">${org.login}</a></h4>
                <p>${org.description || "No description available"}</p>
            </div>
        `;
        organizationsContainer.appendChild(card);
    });
}