script.js

document.addEventListener('DOMContentLoaded', () => {
    fetchProjects();
    document.getElementById('year').textContent = new Date().getFullYear();
});

const CACHE_KEY = 'far_team_projects_cache';
const CACHE_DURATION = 1000 * 60 * 60;

async function fetchProjects() {
    const grid = document.getElementById('project-grid');
    const loader = document.getElementById('loader');
    const errorMsg = document.getElementById('error-message');

    grid.innerHTML = '';
    grid.classList.add('hidden');
    errorMsg.classList.add('hidden');
    loader.classList.remove('hidden');

    try {
        const cacheddata = localStorage.getItem(CACHE_KEY);
        if (cacheddata) {
            const { timestamp, data } = JSON.parse(cacheddata);
            if (Date.now() - timestamp < CACHE_DURATION) {
                console.log('Serving from cache');
                renderProjects(data);
                loader.classList.add('hidden');
                grid.classList.remove('hidden');
                return;
            }
        }

        const response = await fetch('https://api.github.com/search/repositories?q=org:FaR-Team&sort=updated&per_page=100');

        if (!response.ok) {
            if (response.status === 403) {
                throw new Error("Rate limit exceeded. Try again later.");
            }
            throw new Error(`GitHub API Error: ${response.status}`);
        }

        const data = await response.json();
        const projects = data.items;
        projects.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));

        const processedProjects = await processProjects(projects);

        localStorage.setItem(CACHE_KEY, JSON.stringify({
            timestamp: Date.now(),
            data: processedProjects
        }));

        renderProjects(processedProjects);

        loader.classList.add('hidden');
        grid.classList.remove('hidden');

    } catch (error) {
        console.error('Error fetching projects:', error);
        loader.classList.add('hidden');
        errorMsg.classList.remove('hidden');
        const p = errorMsg.querySelector('p');
        if (p) p.innerHTML = `${error.message} <button onclick="fetchProjects()">Retry</button>`;
    }
}

async function processProjects(projects) {
    const promises = projects.map(async project => {
        if (!project.has_pages && !project.homepage) return null;

        let projectUrl = project.homepage;
        if (!projectUrl) {
            projectUrl = `https://farteam.com.ar/${project.name}`;
        }

        let displayName = project.name.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

        try {
            const contentUrl = `https://raw.githubusercontent.com/${project.full_name}/${project.default_branch}/index.html`;
            const resp = await fetch(contentUrl);
            if (resp.ok) {
                const html = await resp.text();
                const match = html.match(/<title>(.*?)<\/title>/i);
                if (match && match[1]) {
                    displayName = match[1].trim();
                    displayName = displayName.replace(/ - FaR Team$/i, '');
                }
            }
        } catch (e) {
        }

        return { ...project, projectUrl, displayName };
    });

    return (await Promise.all(promises)).filter(p => p !== null);
}

function renderProjects(projects) {
    const grid = document.getElementById('project-grid');

    if (projects.length === 0) {
        grid.innerHTML = '<p style="text-align:center; grid-column: 1/-1; color: var(--text-secondary);">No projects found.</p>';
        return;
    }

    projects.forEach(project => {
        const description = project.description || "No description provided.";
        const language = project.language || "Misc";

        const card = document.createElement('div');
        card.className = 'card';

        card.innerHTML = `
            <div class="card-header">
                <a href="${project.projectUrl}" target="_blank" class="card-title">${project.displayName}</a>
                <span class="language-tag">${language}</span>
            </div>
            <p class="card-desc">${description}</p>
            <div class="card-footer">
                <a href="${project.projectUrl}" target="_blank" class="glow-btn">
                    <i class="fa-solid fa-play"></i> Open Project
                </a>
                <a href="${project.html_url}" target="_blank" class="repo-link" title="View Source">
                    <i class="fa-brands fa-github"></i>
                </a>
            </div>
        `;

        grid.appendChild(card);
    });
}