// Crypto Price Tracker functionality
let currentCurrency = 'usd';
let priceData = {};
let updateInterval;

// Popular cryptocurrencies to track
const cryptoList = [
  { id: 'bitcoin', name: 'Bitcoin', symbol: 'BTC' },
  { id: 'ethereum', name: 'Ethereum', symbol: 'ETH' },
  { id: 'binancecoin', name: 'BNB', symbol: 'BNB' },
  { id: 'cardano', name: 'Cardano', symbol: 'ADA' },
  { id: 'solana', name: 'Solana', symbol: 'SOL' },
  { id: 'ripple', name: 'XRP', symbol: 'XRP' },
  { id: 'polkadot', name: 'Polkadot', symbol: 'DOT' },
  { id: 'dogecoin', name: 'Dogecoin', symbol: 'DOGE' },
  { id: 'avalanche-2', name: 'Avalanche', symbol: 'AVAX' },
  { id: 'chainlink', name: 'Chainlink', symbol: 'LINK' },
  { id: 'polygon', name: 'Polygon', symbol: 'MATIC' },
  { id: 'litecoin', name: 'Litecoin', symbol: 'LTC' }
];

// Currency symbols and formatting
const currencyConfig = {
  usd: { symbol: '$', name: 'USD', decimals: 2 },
  eur: { symbol: '€', name: 'EUR', decimals: 2 },
  gbp: { symbol: '£', name: 'GBP', decimals: 2 },
  jpy: { symbol: '¥', name: 'JPY', decimals: 0 },
  cad: { symbol: 'C$', name: 'CAD', decimals: 2 },
  aud: { symbol: 'A$', name: 'AUD', decimals: 2 }
};

async function fetchCryptoPrices(currency = 'usd') {
  const cryptoIds = cryptoList.map(crypto => crypto.id).join(',');
  const url = `https://api.coingecko.com/api/v3/simple/price?ids=${cryptoIds}&vs_currencies=${currency}&include_24hr_change=true`;
  
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Failed to fetch crypto prices');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching crypto prices:', error);
    throw error;
  }
}

function formatPrice(price, currency) {
  const config = currencyConfig[currency];
  const formattedPrice = price.toLocaleString(undefined, {
    minimumFractionDigits: config.decimals,
    maximumFractionDigits: config.decimals
  });
  return `${config.symbol}${formattedPrice}`;
}

function formatPercentage(change) {
  const isPositive = change >= 0;
  const sign = isPositive ? '+' : '';
  return {
    value: `${sign}${change.toFixed(2)}%`,
    isPositive
  };
}

function createCryptoCard(crypto, priceInfo, currency) {
  const price = priceInfo[currency];
  const change24h = priceInfo[`${currency}_24h_change`];
  const changeFormatted = formatPercentage(change24h);
  
  return `
    <div class="crypto-card rounded-2xl p-6 transition-all duration-300 hover:scale-105">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <div class="w-12 h-12 bg-gradient-to-r from-orange-400 to-orange-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
            ${crypto.symbol.charAt(0)}
          </div>
          <div>
            <h3 class="font-bold text-gray-800 text-lg">${crypto.name}</h3>
            <p class="text-gray-500 text-sm uppercase">${crypto.symbol}</p>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-gray-800 mb-1">
            ${formatPrice(price, currency)}
          </div>
          <div class="flex items-center ${changeFormatted.isPositive ? 'text-green-500' : 'text-red-500'}">
            <i class="fas fa-arrow-${changeFormatted.isPositive ? 'up' : 'down'} mr-1 text-sm"></i>
            <span class="font-semibold text-sm">${changeFormatted.value}</span>
          </div>
        </div>
      </div>
      
      <div class="pt-4 border-t border-white/20">
        <div class="flex justify-between text-sm text-gray-600">
          <span>24h Change</span>
          <span class="${changeFormatted.isPositive ? 'text-green-500' : 'text-red-500'} font-semibold">
            ${changeFormatted.value}
          </span>
        </div>
      </div>
    </div>
  `;
}

function showLoadingState() {
  const loadingState = document.getElementById('loading-state');
  const cryptoGrid = document.getElementById('crypto-grid');
  const errorState = document.getElementById('error-state');
  const lastUpdated = document.getElementById('last-updated');
  
  if (loadingState) loadingState.classList.remove('hidden');
  if (cryptoGrid) cryptoGrid.classList.add('hidden');
  if (errorState) errorState.classList.add('hidden');
  if (lastUpdated) lastUpdated.classList.add('hidden');
}

function showErrorState() {
  const loadingState = document.getElementById('loading-state');
  const cryptoGrid = document.getElementById('crypto-grid');
  const errorState = document.getElementById('error-state');
  const lastUpdated = document.getElementById('last-updated');
  
  if (loadingState) loadingState.classList.add('hidden');
  if (cryptoGrid) cryptoGrid.classList.add('hidden');
  if (errorState) errorState.classList.remove('hidden');
  if (lastUpdated) lastUpdated.classList.add('hidden');
}

function showCryptoGrid() {
  const loadingState = document.getElementById('loading-state');
  const cryptoGrid = document.getElementById('crypto-grid');
  const errorState = document.getElementById('error-state');
  const lastUpdated = document.getElementById('last-updated');
  
  if (loadingState) loadingState.classList.add('hidden');
  if (cryptoGrid) cryptoGrid.classList.remove('hidden');
  if (errorState) errorState.classList.add('hidden');
  if (lastUpdated) lastUpdated.classList.remove('hidden');
}

function updateCurrencyButtons(selectedCurrency) {
  const buttons = document.querySelectorAll('.currency-btn');
  buttons.forEach(btn => {
    const currency = btn.getAttribute('data-currency');
    if (currency === selectedCurrency) {
      btn.classList.add('active', 'bg-blue-500', 'text-white', 'shadow-lg');
      btn.classList.remove('bg-white/50', 'text-gray-700');
    } else {
      btn.classList.remove('active', 'bg-blue-500', 'text-white', 'shadow-lg');
      btn.classList.add('bg-white/50', 'text-gray-700');
    }
  });
}

async function updatePrices(currency = currentCurrency) {
  showLoadingState();
  
  try {
    const data = await fetchCryptoPrices(currency);
    priceData = data;
    currentCurrency = currency;
    
    const cryptoGrid = document.getElementById('crypto-grid');
    if (cryptoGrid) {
      const cardsHtml = cryptoList.map(crypto => {
        const priceInfo = data[crypto.id];
        if (priceInfo) {
          return createCryptoCard(crypto, priceInfo, currency);
        }
        return '';
      }).join('');
      
      cryptoGrid.innerHTML = cardsHtml;
    }
    
    // Update last updated time
    const updateTime = document.getElementById('update-time');
    if (updateTime) {
      updateTime.textContent = new Date().toLocaleTimeString();
    }
    
    updateCurrencyButtons(currency);
    showCryptoGrid();
    
  } catch (error) {
    console.error('Failed to update prices:', error);
    showErrorState();
  }
}

function handleCurrencyButtonClick(event) {
  const button = event.target.closest('.currency-btn');
  if (button) {
    const newCurrency = button.getAttribute('data-currency');
    if (newCurrency && newCurrency !== currentCurrency) {
      updatePrices(newCurrency);
    }
  }
}

function handleRetryClick() {
  updatePrices(currentCurrency);
}

function init() {
  // Price tracker functionality - use specific container for price tracker
  const priceTrackerContainer = document.querySelector('#sja08b .backdrop-blur-lg');
  if (priceTrackerContainer) {
    priceTrackerContainer.addEventListener('click', handleCurrencyButtonClick);
  }
  
  const retryBtn = document.getElementById('retry-btn');
  if (retryBtn) {
    retryBtn.addEventListener('click', handleRetryClick);
  }
  
  // Initial setup
  updatePrices('usd');
  
  // Set up auto-refresh for price tracker
  updateInterval = setInterval(() => {
    updatePrices(currentCurrency);
  }, 30000);
}

function teardown() {
  // Remove event listeners
  const priceTrackerContainer = document.querySelector('#sja08b .backdrop-blur-lg');
  if (priceTrackerContainer) {
    priceTrackerContainer.removeEventListener('click', handleCurrencyButtonClick);
  }
  
  const retryBtn = document.getElementById('retry-btn');
  if (retryBtn) {
    retryBtn.removeEventListener('click', handleRetryClick);
  }
  
  // Clear update interval
  if (updateInterval) {
    clearInterval(updateInterval);
    updateInterval = null;
  }
}

// Export functions for the website system
export { init, teardown };