script.js

let currentRepos = [];
const searchBtn = document.getElementById('search-btn');
const userInput = document.getElementById('username-input');
const statusArea = document.getElementById('status-area');
const profileResult = document.getElementById('profile-result');
const reposGrid = document.getElementById('repos-grid');
const sortArea = document.getElementById('sort-area');
const sortSelect = document.getElementById('sort-select');

searchBtn.addEventListener('click', async () => {
    const username = userInput.value.trim();
    if (!username) return;
    profileResult.innerHTML = '';
    reposGrid.innerHTML = '';
    sortArea.classList.remove('visible');
    statusArea.innerHTML = `<div class="loader"></div><p style="color: #58a6ff; font-weight: bold;">DECRYPTING PROFILE...</p>`;

    setTimeout(async () => {
        try {
            const userRes = await fetch(`https://api.github.com/users/${username}`);
            if (userRes.status === 404) {
                statusArea.innerHTML = `<p style="color:#f85149">User not found.</p>`;
                return;
            }
            const userData = await userRes.json();
            const repoRes = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=6`);
            currentRepos = await repoRes.json();

            statusArea.innerHTML = ''; 
            renderProfile(userData);
            sortArea.classList.add('visible');
            renderRepos(currentRepos);

        } catch (error) {
            statusArea.innerHTML = `<p style="color:#f85149">Connection failed.</p>`;
        }
    }, 3000);
});

function renderProfile(data) {
    profileResult.innerHTML = `
        <div class="profile-card" id="main-card">
            <div class="avatar-frame"><img src="${data.avatar_url}"></div>
            <div class="profile-info">
                <h2>${data.name || data.login}</h2>
                <a href="${data.html_url}" target="_blank" style="color:#58a6ff; text-decoration:none;">@${data.login}</a>
                <p>${data.bio || "This developer prefers to keep their bio a secret."}</p>
                <div class="stats-bar">
                    <span><b>${data.public_repos}</b> Repos</span>
                    <span><b>${data.followers}</b> Followers</span>
                    <span><b>${data.following}</b> Following</span>
                </div>
            </div>
        </div>
    `;
    setTimeout(() => document.getElementById('main-card').classList.add('active'), 50);
}

function renderRepos(repos) {
    reposGrid.innerHTML = '';
    repos.forEach((repo, index) => {
        const card = document.createElement('div');
        card.className = 'repo-card';
        card.style.transitionDelay = `${index * 150}ms`;
        card.innerHTML = `
            <a href="${repo.html_url}" target="_blank" class="repo-name">${repo.name}</a>
            <p class="repo-desc">${repo.description || "A mysterious project with no description provided."}</p>
            <div class="repo-footer">
                <span><i class="fas fa-circle" style="color:#58a6ff; font-size:10px"></i> ${repo.language || 'Code'}</span>
                <span><i class="fas fa-star" style="color:#e3b341"></i> ${repo.stargazers_count}</span>
            </div>
        `;
        reposGrid.appendChild(card);
        setTimeout(() => card.classList.add('show'), 100);
    });
}
sortSelect.addEventListener('change', () => {
    const sortBy = sortSelect.value;
    const cards = document.querySelectorAll('.repo-card');
    
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(10px) scale(0.95)';
    });

    setTimeout(() => {
        if (sortBy === 'stars') currentRepos.sort((a, b) => a.stargazers_count - b.stargazers_count);
        else if (sortBy === 'alpha') currentRepos.sort((a, b) => a.name.localeCompare(b.name));
        else currentRepos.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
        renderRepos(currentRepos);
    }, 400);
});

userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchBtn.click(); });