/* =========================================================
   FOOTBALL STATS API - LOGIQUE PRINCIPALE (FRONT/BACK MIX)
   ---------------------------------------------------------
   Ici on gère toute la logique de l'application :
   - joueurs
   - équipes
   - tournois
   - statistiques
   - stockage local (localStorage)
========================================================= */


/* =========================
   STOCKAGE LOCAL (MEMOIRE)
   -------------------------
   On récupère les données si elles existent déjà dans le navigateur.
   Sinon on initialise des tableaux vides.
========================= */

let players = JSON.parse(localStorage.getItem("players")) || [];
let teams = JSON.parse(localStorage.getItem("teams")) || [];
let tournaments = JSON.parse(localStorage.getItem("tournaments")) || [];


/* =========================
   SAUVEGARDE AUTOMATIQUE
   -------------------------
   Permet de sauvegarder toutes les données à chaque modification.
   Ici on utilise localStorage pour simuler une base de données locale.
========================= */

function save(){
  localStorage.setItem("players", JSON.stringify(players));
  localStorage.setItem("teams", JSON.stringify(teams));
  localStorage.setItem("tournaments", JSON.stringify(tournaments));
}


/* =========================
   NAVIGATION ENTRE ONGLETS
   -------------------------
   Fonction simple pour afficher un onglet et cacher les autres.
========================= */

function showTab(id){
  document.querySelectorAll(".tab").forEach(t => t.style.display = "none");
  document.getElementById(id).style.display = "block";
}


/* =========================
   MODULE JOUEURS
   -------------------------
   Gestion complète des joueurs :
   - ajout
   - affichage
   - suppression
========================= */

function addPlayer(){
  const name = document.getElementById("playerName").value;

  // Création d’un objet joueur avec stats par défaut
  players.push({
    id: Date.now(), // ID unique basé sur le timestamp
    name,
    goals: 0,
    assists: 0,
    fouls: 0
  });

  save();
  renderPlayers();
  renderStats();
}


/* Affichage des joueurs dans l'interface */
function renderPlayers(){
  const div = document.getElementById("playersList");
  div.innerHTML = "";

  players.forEach(p => {
    div.innerHTML += `
      <div class="card player-card">
        <div class="player-info">
          <b>${p.name}</b>
          <div class="stats">
            ⚽ ${p.goals} | 🎯 ${p.assists} | ❌ ${p.fouls}
          </div>
        </div>

        <button class="delete-btn" onclick="deletePlayer(${p.id})">✖</button>
      </div>
    `;
  });
}


/* Suppression d’un joueur + nettoyage dans les équipes */
function deletePlayer(id){

  // suppression du joueur
  players = players.filter(p => p.id != id);

  // suppression du joueur dans toutes les équipes
  teams.forEach(t => {
    t.players = t.players.filter(pid => pid != id);
  });

  save();

  renderPlayers();
  renderTeams();
  renderStats();
}


/* =========================
   MODULE EQUIPES
   -------------------------
   Création et gestion des équipes + assignation des joueurs
========================= */

function addTeam(){
  const name = document.getElementById("teamName").value;

  teams.push({
    id: Date.now(),
    name,
    players: [] // liste des IDs joueurs
  });

  save();
  renderTeams();
}


/* Ajouter un joueur dans une équipe */
function addPlayerToTeam(playerId, teamId){
  const team = teams.find(t => t.id == teamId);

  if(!team.players.includes(playerId)){
    team.players.push(playerId);
  }

  save();
  renderTeams();
}


/* Retirer un joueur d’une équipe */
function removePlayerFromTeam(playerId, teamId){
  const team = teams.find(t => t.id == teamId);
  team.players = team.players.filter(p => p != playerId);

  save();
  renderTeams();
}


/* Affichage des équipes */
function renderTeams(){
  const div = document.getElementById("teamsList");
  div.innerHTML = "";

  teams.forEach(t => {
    div.innerHTML += `
      <div class="card">
        
        <!-- HEADER -->
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <b>${t.name}</b>
          <button class="delete-btn" onclick="deleteTeam(${t.id})">✖</button>
        </div>

        <!-- JOUEURS DANS L'ÉQUIPE -->
        <div style="margin-top:10px;">
          ${t.players.map(pid => {
            const player = players.find(p => p.id == pid);
            if(!player) return "";

            return `
              <div style="display:flex;justify-content:space-between;align-items:center;margin:5px 0;">
                ${player.name}
                <button onclick="removePlayerFromTeam(${player.id}, ${t.id})">❌</button>
              </div>
            `;
          }).join("")}
        </div>

        <!-- AJOUT JOUEUR -->
        <div style="margin-top:10px;">
          <select onchange="addPlayerToTeam(Number(this.value), ${t.id})">
            <option>Ajouter joueur</option>
            ${players
              .filter(p => !t.players.includes(p.id))
              .map(p => `<option value="${p.id}">${p.name}</option>`)
              .join("")
            }
          </select>
        </div>

      </div>
    `;
  });
}
/* Suppression équipe */
function deleteTeam(id){
  teams = teams.filter(t => t.id != id);
  save();
  renderTeams();
}


/* =========================
   MODULE TOURNOIS
========================= */

function addTournament(){
  const name = document.getElementById("tournamentName").value;

  tournaments.push({
    id: Date.now(),
    name,
    teams: [],
    matches: []
  });

  save();
  renderTournaments();
}


/* Ajout d’équipe dans un tournoi */
function addTeamToTournament(teamId, tournamentId){
  const t = tournaments.find(x => x.id == tournamentId);

  if(!t.teams.includes(teamId)){
    t.teams.push(teamId);
  }

  save();
  renderTournaments();
}


/* Ajout d’un match dans un tournoi */
function addMatch(tournamentId, team1, team2, s1, s2){
  const t = tournaments.find(x => x.id == tournamentId);

  t.matches.push({
    team1,
    team2,
    score1: s1,
    score2: s2
  });

  save();
  renderTournaments();
}


/* Affichage tournois */
function renderTournaments(){
  const div = document.getElementById("tournamentsList");
  div.innerHTML = "";

  tournaments.forEach(t => {
    div.innerHTML += `
      <div class="card">

        <!-- HEADER -->
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <b>${t.name}</b>
          <button class="delete-btn" onclick="deleteTournament(${t.id})">✖</button>
        </div>

        <br>

        <!-- EQUIPES -->
        <div>
          <b>Teams:</b><br>
          ${
            t.teams.length > 0
              ? t.teams.map(id => teams.find(x => x.id == id)?.name).join(" vs ")
              : "Aucune équipe"
          }
        </div>

        <br>

        <!-- AJOUT EQUIPE -->
        <select onchange="addTeamToTournament(Number(this.value), ${t.id})">
          <option>Ajouter équipe</option>
          ${teams.map(x => `<option value="${x.id}">${x.name}</option>`).join("")}
        </select>

        <br><br>

        <!-- AJOUT MATCH -->
        <button onclick="renderMatchForm(${t.id})">Ajouter match</button>

        <div id="match-${t.id}" style="margin-top:10px;"></div>

        <!-- MATCHS -->
        <div style="margin-top:10px;">
          ${
            t.matches.length > 0
              ? t.matches.map(m => `
                ${teams.find(x => x.id == m.team1)?.name || "?"} ${m.score1}
                - ${m.score2}
                ${teams.find(x => x.id == m.team2)?.name || "?"}
              `).join("<br>")
              : "Aucun match"
          }
        </div>

      </div>
    `;
  });
}
// Supprimer un tournoi
function deleteTournament(id){
  tournaments = tournaments.filter(t => t.id != id);

  save();              // sauvegarde en localStorage
  renderTournaments(); // refresh affichage
}

/* Formulaire dynamique de match */
function renderMatchForm(id){
  const div = document.getElementById("match-" + id);

  div.innerHTML = `
    <select id="t1-${id}">
      ${teams.map(t => `<option value="${t.id}">${t.name}</option>`).join("")}
    </select>

    <select id="t2-${id}">
      ${teams.map(t => `<option value="${t.id}">${t.name}</option>`).join("")}
    </select>

    <input id="s1-${id}" placeholder="score 1">
    <input id="s2-${id}" placeholder="score 2">

    <button onclick="
      addMatch(
        ${id},
        Number(document.getElementById('t1-${id}').value),
        Number(document.getElementById('t2-${id}').value),
        Number(document.getElementById('s1-${id}').value),
        Number(document.getElementById('s2-${id}').value)
      )
    ">Valider</button>
  `;
}


/* =========================
   MODULE STATS JOUEURS
========================= */

function renderStats(){
  const div = document.getElementById("statsList");
  div.innerHTML = "";

  players.forEach(p => {
    div.innerHTML += `
      <div class="card">
        <b>${p.name}</b><br>

        Goals:
        <input id="g${p.id}" value="${p.goals}">

        Assists:
        <input id="a${p.id}" value="${p.assists}">

        Fouls:
        <input id="f${p.id}" value="${p.fouls}">

        <button onclick="saveStats(${p.id})">Save</button>
      </div>
    `;
  });
}


/* Sauvegarde des stats */
function saveStats(id){
  const p = players.find(x => x.id == id);

  p.goals = Number(document.getElementById("g" + id).value);
  p.assists = Number(document.getElementById("a" + id).value);
  p.fouls = Number(document.getElementById("f" + id).value);

  save();
  renderPlayers();
}


/* =========================
   INITIALISATION APP
========================= */

window.onload = () => {
  showTab("players");
  renderPlayers();
  renderTeams();
  renderTournaments();
  renderStats();
};