script.js

document.addEventListener('DOMContentLoaded', () => {
    const repoForm = document.getElementById('repoForm');
    const loading = document.getElementById('loading');
    const results = document.getElementById('results');

    repoForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const username = document.getElementById('username').value.trim();
        const repo = document.getElementById('repo').value.trim();
        
        if (!username || !repo) {
            alert('Please enter both GitHub username and repository name');
            return;
        }

        // Show loading indicator
        loading.classList.remove('hidden');
        results.classList.add('hidden');
        
        try {
            const response = await fetch(`https://api.github.com/repos/${username}/${repo}`);
            if (!response.ok) {
                throw new Error('Repository not found or API rate limit exceeded');
            }
            
            const data = await response.json();
            displayResults(data, username, repo);
            
            // Fetch README.md content
            const readmeResponse = await fetch(`https://api.github.com/repos/${username}/${repo}/readme`, {
                headers: {
                    'Accept': 'application/vnd.github.v3.raw'
                }
            });
            
            if (readmeResponse.ok) {
                const readmeContent = await readmeResponse.text();
                displayReadme(readmeContent);
            }
            
        } catch (error) {
            results.innerHTML = `
                <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i data-feather="alert-circle" class="text-red-500"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Error fetching repository</h3>
                            <div class="mt-2 text-sm text-red-700">
                                <p>${error.message}</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            feather.replace();
        } finally {
            loading.classList.add('hidden');
            results.classList.remove('hidden');
        }
    });

    function displayResults(data, username, repo) {
        results.innerHTML = `
            <div class="mb-8">
                <div class="flex items-start">
                    <img src="${data.owner.avatar_url}" alt="Avatar" class="w-16 h-16 rounded-full mr-4">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">${data.name}</h2>
                        <p class="text-gray-600 mb-2">${data.description || 'No description'}</p>
                        <div class="flex flex-wrap gap-4 text-sm">
                            <span class="flex items-center text-gray-600">
                                <i data-feather="star" class="w-4 h-4 mr-1"></i> ${data.stargazers_count}
                            </span>
                            <span class="flex items-center text-gray-600">
                                <i data-feather="eye" class="w-4 h-4 mr-1"></i> ${data.watchers_count}
                            </span>
                            <span class="flex items-center text-gray-600">
                                <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> ${data.forks_count}
                            </span>
                            <span class="flex items-center text-gray-600">
                                <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> ${data.open_issues_count}
                            </span>
                            <a href="${data.html_url}" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
                                <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View on GitHub
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-gray-700 mb-2">Repository Details</h3>
                    <ul class="space-y-2">
                        <li class="flex"><span class="text-gray-600 w-32">Language</span> ${data.language || 'Not specified'}</li>
                        <li class="flex"><span class="text-gray-600 w-32">License</span> ${data.license?.name || 'Not specified'}</li>
                        <li class="flex"><span class="text-gray-600 w-32">Created</span> ${new Date(data.created_at).toLocaleDateString()}</li>
                        <li class="flex"><span class="text-gray-600 w-32">Last Updated</span> ${new Date(data.updated_at).toLocaleDateString()}</li>
                        <li class="flex"><span class="text-gray-600 w-32">Size</span> ${Math.round(data.size / 1024)} MB</li>
                        <li class="flex"><span class="text-gray-600 w-32">Default Branch</span> ${data.default_branch}</li>
                    </ul>
                </div>
                
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-gray-700 mb-2">Quick Links</h3>
                    <div class="space-y-2">
                        <a href="${data.html_url}/archive/refs/heads/${data.default_branch}.zip" class="flex items-center text-blue-600 hover:text-blue-800">
                            <i data-feather="download" class="w-4 h-4 mr-2"></i> Download as ZIP
                        </a>
                        <a href="${data.html_url}/blob/${data.default_branch}/README.md" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
                            <i data-feather="file-text" class="w-4 h-4 mr-2"></i> View README
                        </a>
                        <a href="${data.html_url}/issues" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
                            <i data-feather="alert-circle" class="w-4 h-4 mr-2"></i> View Issues
                        </a>
                        <a href="${data.html_url}/pulls" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
                            <i data-feather="git-pull-request" class="w-4 h-4 mr-2"></i> View Pull Requests
                        </a>
                    </div>
                </div>
            </div>
            
            <div id="readme-container" class="mb-8">
                <h3 class="font-semibold text-gray-700 mb-4">README</h3>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <div id="readme-content" class="prose max-w-none">
                        Loading README...
                    </div>
                </div>
            </div>
        `;
        feather.replace();
    }
    
    function displayReadme(content) {
        const readmeContainer = document.getElementById('readme-content');
        if (content) {
            // Simple markdown to HTML conversion for basic formatting
            let htmlContent = content
                .replace(/^#\s(.+)$/gm, '<h1>$1</h1>')
                .replace(/^##\s(.+)$/gm, '<h2>$1</h2>')
                .replace(/^###\s(.+)$/gm, '<h3>$1</h3>')
                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
                .replace(/\*(.+?)\*/g, '<em>$1</em>')
                .replace(/`(.+?)`/g, '<code>$1</code>')
                .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">')
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>');
                
            readmeContainer.innerHTML = htmlContent;
        } else {
            readmeContainer.innerHTML = '<p class="text-gray-500">No README found for this repository.</p>';
        }
    }
});