import { WrappedData } from './types.js';
import { DataLoader } from './data-loader.js';

interface LandingData {
  repoName: string;
  dateRange: string;
  totalCommits: number;
  totalLinesAdded: number;
  totalLinesDeleted: number;
}

async function loadData(): Promise<LandingData> {
  const loader = new DataLoader();
  const data = await loader.load();
  
  // Use team summary for totals
  const totalCommits = data.teamSummary.totalCommits;
  const totalLinesAdded = data.teamSummary.linesAdded;
  const totalLinesDeleted = data.teamSummary.linesDeleted;
  
  // Extract repo name and date range
  const repoName = data.repository || 'Repository';
  const dateRange = data.period ? `${data.period.start} to ${data.period.end}` : 'Last 12 months';
  
  return {
    repoName,
    dateRange,
    totalCommits,
    totalLinesAdded,
    totalLinesDeleted,
  };
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M';
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num.toLocaleString();
}

function renderLandingPage(data: LandingData): void {
  const app = document.getElementById('app');
  if (!app) return;

  app.innerHTML = `
    <div class="landing-screen">
      <div class="landing-header">
        <h1>Git Wrapped</h1>
        <div class="repo-info">${escapeHtml(data.repoName)}</div>
        <div class="date-range">${escapeHtml(data.dateRange)}</div>
      </div>

      <div class="nav-cards">
        <a href="hall-of-fame.html" class="nav-card">
          <div class="nav-card-icon">🏆</div>
          <div class="nav-card-title">Hall of Fame</div>
          <div class="nav-card-desc">Célébrez les champions uniques de votre équipe</div>
        </a>

        <a href="team-quiz.html" class="nav-card pink">
          <div class="nav-card-icon">🎮</div>
          <div class="nav-card-title">Team Quiz</div>
          <div class="nav-card-desc">Testez vos connaissances sur les stats de l'équipe</div>
        </a>

        <a href="team.html" class="nav-card purple">
          <div class="nav-card-icon">📊</div>
          <div class="nav-card-title">Stats de l'Équipe</div>
          <div class="nav-card-desc">Découvrez les performances de votre équipe ensemble</div>
        </a>
      </div>

      <div class="stats-summary">
        <div class="stats-summary-item">
          <div class="stats-summary-value">${formatNumber(data.totalCommits)}</div>
          <div class="stats-summary-label">Commits Totaux</div>
        </div>
        <div class="stats-summary-item">
          <div class="stats-summary-value">${formatNumber(data.totalLinesAdded)}</div>
          <div class="stats-summary-label">Lignes Ajoutées</div>
        </div>
        <div class="stats-summary-item">
          <div class="stats-summary-value">${formatNumber(data.totalLinesDeleted)}</div>
          <div class="stats-summary-label">Lignes Supprimées</div>
        </div>
      </div>
      <div style="position: fixed; bottom: 10px; right: 10px; font-size: 0.7rem; opacity: 0.5; color: var(--color-text-secondary);">v0.4.0</div>
    </div>
  `;
}

function escapeHtml(text: string): string {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function renderError(message: string): void {
  const app = document.getElementById('app');
  if (!app) return;

  app.innerHTML = `
    <div class="landing-screen">
      <div class="landing-header">
        <h1>Git Wrapped</h1>
        <div class="repo-info" style="color: var(--neon-pink);">Erreur de chargement des données</div>
        <div class="date-range">${escapeHtml(message)}</div>
      </div>
    </div>
  `;
}

async function init(): Promise<void> {
  try {
    const data = await loadData();
    renderLandingPage(data);
  } catch (error) {
    console.error('Failed to initialize landing page:', error);
    renderError(error instanceof Error ? error.message : 'Unknown error');
  }
}

// Start the app
init();