script.js

// Global variables
let allCountries = [];
let filteredCountries = [];
let currentTheme = 'light';

// DOM elements
const themeToggle = document.getElementById('themeToggle');
const searchInput = document.getElementById('searchInput');
const regionFilter = document.getElementById('regionFilter');
const countriesGrid = document.getElementById('countriesGrid');
const loading = document.getElementById('loading');
const error = document.getElementById('error');
const countryModal = document.getElementById('countryModal');
const countryDetail = document.getElementById('countryDetail');
const backButton = document.getElementById('backButton');

// API endpoints
const REST_COUNTRIES_API = 'https://restcountries.com/v2/all';
const LOCAL_DATA_PATH = './data.json';

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    initializeTheme();
    setupEventListeners();
    loadCountries();
});

// Theme management
function initializeTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
}

function setTheme(theme) {
    currentTheme = theme;
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);

    const themeIcon = themeToggle.querySelector('i');
    const themeText = themeToggle.querySelector('span');

    if (theme === 'dark') {
        themeIcon.className = 'fas fa-sun';
        themeText.textContent = 'Light Mode';
    } else {
        themeIcon.className = 'fas fa-moon';
        themeText.textContent = 'Dark Mode';
    }
}

function toggleTheme() {
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
}

// Event listeners
function setupEventListeners() {
    themeToggle.addEventListener('click', toggleTheme);
    searchInput.addEventListener('input', handleSearch);
    regionFilter.addEventListener('change', handleRegionFilter);
    backButton.addEventListener('click', closeCountryDetail);

    // Close modal when clicking outside
    countryModal.addEventListener('click', function(e) {
        if (e.target === countryModal) {
            closeCountryDetail();
        }
    });

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && countryModal.classList.contains('active')) {
            closeCountryDetail();
        }
    });
}

// Data loading
async function loadCountries() {
    showLoading();

    try {
        // Try to fetch from REST Countries API first
        const response = await fetch(REST_COUNTRIES_API);

        if (!response.ok) {
            throw new Error('API request failed');
        }

        allCountries = await response.json();
    } catch (apiError) {
        console.warn('Failed to fetch from API, falling back to local data:', apiError);

        try {
            // Fallback to local data
            const response = await fetch(LOCAL_DATA_PATH);

            if (!response.ok) {
                throw new Error('Local data request failed');
            }

            allCountries = await response.json();
        } catch (localError) {
            console.error('Failed to load local data:', localError);
            showError();
            return;
        }
    }

    filteredCountries = [...allCountries];
    hideLoading();
    renderCountries();
}

// UI state management
function showLoading() {
    loading.style.display = 'block';
    error.style.display = 'none';
    countriesGrid.style.display = 'none';
}

function hideLoading() {
    loading.style.display = 'none';
    countriesGrid.style.display = 'grid';
}

function showError() {
    loading.style.display = 'none';
    error.style.display = 'block';
    countriesGrid.style.display = 'none';
}

// Search and filter functionality
function handleSearch(e) {
    const searchTerm = e.target.value.toLowerCase().trim();
    applyFilters(searchTerm, regionFilter.value);
}

function handleRegionFilter(e) {
    const selectedRegion = e.target.value;
    applyFilters(searchInput.value.toLowerCase().trim(), selectedRegion);
}

function applyFilters(searchTerm, selectedRegion) {
    filteredCountries = allCountries.filter(country => {
        const matchesSearch = !searchTerm ||
            country.name.toLowerCase().includes(searchTerm) ||
            (country.capital && country.capital.toLowerCase().includes(searchTerm));

        const matchesRegion = !selectedRegion || country.region === selectedRegion;

        return matchesSearch && matchesRegion;
    });

    renderCountries();
}

// Rendering functions
function renderCountries() {
    if (filteredCountries.length === 0) {
        countriesGrid.innerHTML = `
            <div class="no-results">
                <p>No countries found matching your criteria.</p>
            </div>
        `;
        return;
    }

    countriesGrid.innerHTML = filteredCountries.map(country => createCountryCard(country)).join('');

    // Add click event listeners to country cards
    const countryCards = document.querySelectorAll('.country-card');
    countryCards.forEach((card, index) => {
        card.addEventListener('click', () => showCountryDetail(filteredCountries[index]));
    });
}

function createCountryCard(country) {
    const flagUrl = country.flags?.png || country.flag || 'https://via.placeholder.com/320x160?text=No+Flag';
    const countryName = country.name || 'Unknown Country';
    const population = formatNumber(country.population);
    const region = country.region || 'Unknown Region';
    const capital = country.capital || 'N/A';

    return `
        <div class="country-card">
            <img src="${flagUrl}" alt="${countryName} flag" class="country-flag" loading="lazy" onerror="this.src='https://via.placeholder.com/320x160?text=No+Flag'">
            <div class="country-info">
                <h3 class="country-name">${countryName}</h3>
                <div class="country-details">
                    <p class="country-detail-item">
                        <span class="country-detail-label">Population:</span> ${population}
                    </p>
                    <p class="country-detail-item">
                        <span class="country-detail-label">Region:</span> ${region}
                    </p>
                    <p class="country-detail-item">
                        <span class="country-detail-label">Capital:</span> ${capital}
                    </p>
                </div>
            </div>
        </div>
    `;
}

// Country detail modal
function showCountryDetail(country) {
    const detailHTML = createCountryDetailHTML(country);
    countryDetail.innerHTML = detailHTML;
    countryModal.classList.add('active');
    document.body.style.overflow = 'hidden';

    // Add event listeners to border country buttons
    const borderButtons = document.querySelectorAll('.border-country');
    borderButtons.forEach(button => {
        button.addEventListener('click', () => {
            const borderCode = button.dataset.code;
            const borderCountry = allCountries.find(c => c.alpha3Code === borderCode);
            if (borderCountry) {
                showCountryDetail(borderCountry);
            }
        });
    });
}

function closeCountryDetail() {
    countryModal.classList.remove('active');
    document.body.style.overflow = 'auto';
}

function createCountryDetailHTML(country) {
    const flagUrl = country.flags?.png || country.flag || 'https://via.placeholder.com/560x315?text=No+Flag';
    const countryName = country.name || 'Unknown Country';
    const nativeName = country.nativeName || country.name || 'Unknown';
    const population = formatNumber(country.population);
    const region = country.region || 'Unknown Region';
    const subregion = country.subregion || 'N/A';
    const capital = country.capital || 'N/A';

    const currencies = country.currencies ?
        country.currencies.map(c => c.name).join(', ') : 'N/A';

    const languages = country.languages ?
        country.languages.map(l => l.name).join(', ') : 'N/A';

    const topLevelDomain = country.topLevelDomain ?
        country.topLevelDomain.join(', ') : 'N/A';

    const borderCountries = country.borders ?
        country.borders.map(borderCode => {
            const borderCountry = allCountries.find(c => c.alpha3Code === borderCode);
            return borderCountry ?
                `<button class="border-country" data-code="${borderCode}">${borderCountry.name}</button>` : '';
        }).filter(Boolean).join('') : '';

    return `
        <div class="country-detail">
            <img src="${flagUrl}" alt="${countryName} flag" class="country-detail-flag" onerror="this.src='https://via.placeholder.com/560x315?text=No+Flag'">
            <div class="country-detail-info">
                <h2>${countryName}</h2>
                <div class="country-detail-content">
                    <div class="country-detail-section">
                        <p class="country-detail-item">
                            <span class="country-detail-label">Native Name:</span> ${nativeName}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Population:</span> ${population}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Region:</span> ${region}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Sub Region:</span> ${subregion}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Capital:</span> ${capital}
                        </p>
                    </div>
                    <div class="country-detail-section">
                        <p class="country-detail-item">
                            <span class="country-detail-label">Top Level Domain:</span> ${topLevelDomain}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Currencies:</span> ${currencies}
                        </p>
                        <p class="country-detail-item">
                            <span class="country-detail-label">Languages:</span> ${languages}
                        </p>
                    </div>
                </div>
                ${borderCountries ? `
                    <div class="border-countries">
                        <h3>Border Countries:</h3>
                        <div class="border-list">
                            ${borderCountries}
                        </div>
                    </div>
                ` : ''}
            </div>
        </div>
    `;
}

// Utility functions
function formatNumber(num) {
    if (typeof num !== 'number') return 'N/A';
    return num.toLocaleString();
}