TP 9 : Gérer un carnet de contacts avec les objets et JSON

// =====================================================================
// TP 9 — Carnet de contacts : VOS FONCTIONS (les données uniquement)
// Un contact est un objet : { id, nom, telephone, email, ville, categorie, favori }
// Ces fonctions ne touchent pas à la page : elles reçoivent des données et
// renvoient des données. L'affichage (app.js) et les tests (tests.js) sont fournis.
// =====================================================================

// 1. Créer un contact propre à partir des données saisies.
//    - nom : espaces inutiles retirés, chaque mot avec une majuscule ("amina  tazi" → "Amina Tazi")
//    - telephone : tous les espaces retirés ; email : en minuscules, sans espaces autour
//    - ville : espaces retirés autour ; categorie : "amis" par défaut ; favori : false
function creerContact(donnees, id) {
  // À COMPLÉTER
}

// 2. Vérifier un contact : renvoie un TABLEAU de messages d'erreur (vide si tout va bien)
//    - "Le nom doit contenir au moins 2 caractères."
//    - "Le téléphone doit contenir 10 chiffres et commencer par 0."
//    - "L'e-mail n'est pas valide." (seulement s'il est renseigné et ne contient pas @)
function verifierContact(contact) {
  // À COMPLÉTER
}

// 3. Rechercher : contacts dont le nom, la ville ou l'e-mail contient le texte (sans tenir compte des majuscules)
function rechercher(contacts, texte) {
  // À COMPLÉTER
}

// 4. Filtrer par catégorie ("toutes" renvoie tous les contacts)
function filtrerParCategorie(contacts, categorie) {
  // À COMPLÉTER
}

// 5. Basculer le favori du contact d'identifiant id.
//    Renvoie un NOUVEAU tableau : le tableau et les contacts d'origine ne doivent pas être modifiés.
function basculerFavori(contacts, id) {
  // À COMPLÉTER
}

// 6. Compter les contacts par ville : { Rabat: 2, Fès: 1, … }
function compterParVille(contacts) {
  // À COMPLÉTER
}

// 7. Liste des villes distinctes, triées par ordre alphabétique
function villesDistinctes(contacts) {
  // À COMPLÉTER
}

// 8. Trier par nom (ordre alphabétique français), favoris en premier ; sans modifier le tableau reçu
function trier(contacts) {
  // À COMPLÉTER
}

// 9. Exporter en texte JSON lisible (indentation de 2 espaces)
function exporterJSON(contacts) {
  // À COMPLÉTER
}

// 10. Importer un texte JSON : renvoie un tableau de contacts recréés avec creerContact
//     (identifiants 1, 2, 3…) ; lance une Error("JSON invalide") si le texte n'est pas
//     du JSON ou n'est pas un tableau.
function importerJSON(texte) {
  // À COMPLÉTER
}

// =====================================================================
// Tests automatiques (fourni — ne pas modifier)
// =====================================================================
(function () {
  const liste = document.querySelector("#tests");
  let reussis = 0, total = 0;
  function test(description, calcul, attendu) {
    total++;
    const li = document.createElement("li");
    let obtenu;
    try { obtenu = calcul(); } catch (e) { obtenu = "Erreur : " + e.message; }
    const ok = JSON.stringify(obtenu) === JSON.stringify(attendu);
    if (ok) reussis++;
    li.className = ok ? "ok" : "ko";
    li.textContent = (ok ? "✓ " : "✗ ") + description;
    if (!ok) {
      const d = document.createElement("small");
      d.textContent = `attendu ${JSON.stringify(attendu)}, obtenu ${JSON.stringify(obtenu)}`;
      li.append(d);
    }
    liste.append(li);
  }
  const c = (nom, ville, categorie = "amis", favori = false, id = 1) =>
    ({ id, nom, telephone: "0600000000", email: "", ville, categorie, favori });
  const base = [c("Salma Idrissi", "Rabat", "travail", false, 1), c("Karim Benali", "Fès", "amis", true, 2), c("Élodie Martin", "Rabat", "famille", false, 3)];

  test("creerContact nettoie le nom", () => creerContact({ nom: "  amina   TAZI ", telephone: "06 12 34 56 78", email: " Amina@ISTA.ma ", ville: " Casablanca " }, 7).nom, "Amina Tazi");
  test("creerContact : objet complet", () => creerContact({ nom: "amina tazi", telephone: "06 12 34 56 78", email: " Amina@ISTA.ma ", ville: " Casablanca " }, 7),
    { id: 7, nom: "Amina Tazi", telephone: "0612345678", email: "amina@ista.ma", ville: "Casablanca", categorie: "amis", favori: false });
  test("creerContact garde la catégorie choisie", () => creerContact({ nom: "a b", telephone: "", email: "", ville: "", categorie: "travail" }, 1).categorie, "travail");
  test("verifierContact : contact correct → []", () => verifierContact(c("Salma Idrissi", "Rabat")), []);
  test("verifierContact : nom trop court et téléphone faux", () => verifierContact({ ...c("A", "Rabat"), telephone: "12345" }).length, 2);
  test("verifierContact : e-mail sans @", () => verifierContact({ ...c("Salma", "Rabat"), email: "salma.ista.ma" }), ["L'e-mail n'est pas valide."]);
  test("rechercher(\"rab\") trouve les 2 contacts de Rabat", () => rechercher(base, "rab").map((x) => x.id), [1, 3]);
  test("rechercher(\"KARIM\") ignore les majuscules", () => rechercher(base, "KARIM").length, 1);
  test("rechercher(\"\") renvoie tout", () => rechercher(base, "").length, 3);
  test("filtrerParCategorie(\"famille\")", () => filtrerParCategorie(base, "famille").map((x) => x.nom), ["Élodie Martin"]);
  test("filtrerParCategorie(\"toutes\")", () => filtrerParCategorie(base, "toutes").length, 3);
  test("basculerFavori : le contact 1 devient favori", () => basculerFavori(base, 1).find((x) => x.id === 1).favori, true);
  test("basculerFavori ne modifie pas l'original", () => { const r = basculerFavori(base, 1); return [base[0].favori, r !== base, r[1] === base[1]]; }, [false, true, true]);
  test("compterParVille", () => compterParVille(base), { Rabat: 2, "Fès": 1 });
  test("villesDistinctes triées", () => villesDistinctes(base), ["Fès", "Rabat"]);
  test("trier : favori d'abord, puis Élodie avant Salma", () => trier(base).map((x) => x.nom), ["Karim Benali", "Élodie Martin", "Salma Idrissi"]);
  test("trier ne modifie pas le tableau reçu", () => { const r = trier(base); return [Array.isArray(r), base.map((x) => x.id)]; }, [true, [1, 2, 3]]);
  test("exporterJSON produit un texte indenté", () => exporterJSON([base[0]]).split("\n")[2], '    "id": 1,');
  test("importerJSON relit un export", () => importerJSON(exporterJSON(base)).map((x) => [x.id, x.nom]), [[1, "Salma Idrissi"], [2, "Karim Benali"], [3, "Élodie Martin"]]);
  test("importerJSON refuse un texte invalide", () => { try { importerJSON("{nom: 'x'}"); return "aucune erreur"; } catch (e) { return e.message; } }, "JSON invalide");
  test("importerJSON refuse un JSON qui n'est pas un tableau", () => { try { importerJSON('{"nom": "x"}'); return "aucune erreur"; } catch (e) { return e.message; } }, "JSON invalide");

  const score = document.querySelector("#score");
  score.textContent = `${reussis} / ${total}`;
  score.classList.toggle("complet", reussis === total);
})();

// =====================================================================
// Interface du carnet (fourni — ne pas modifier). Utilise vos fonctions.
// =====================================================================
const $ = (s) => document.querySelector(s);
let prochainId = 1;
let contacts = [
  { nom: "salma idrissi", telephone: "06 61 22 33 44", email: "salma@ista.ma", ville: "Rabat", categorie: "travail" },
  { nom: "KARIM benali", telephone: "0670112233", email: "", ville: "Fès", categorie: "amis" },
  { nom: "élodie martin", telephone: "0522 33 44 55", email: "Elodie.Martin@mail.fr", ville: "Rabat", categorie: "famille" },
  { nom: "yassine alaoui", telephone: "0655443322", email: "yassine@ista.ma", ville: "Casablanca", categorie: "travail" },
].map((d) => creerContact(d, prochainId++)).filter(Boolean);

function afficher() {
  let visibles = filtrerParCategorie(contacts, $("#filtre").value) ?? contacts;
  visibles = rechercher(visibles, $("#recherche").value) ?? visibles;
  visibles = trier(visibles) ?? visibles;

  const ul = $("#liste");
  ul.replaceChildren();
  for (const ct of visibles) {
    const li = document.createElement("li");
    const fav = document.createElement("button");
    fav.className = "favori" + (ct.favori ? " oui" : "");
    fav.textContent = "★";
    fav.title = "Favori";
    fav.addEventListener("click", () => { contacts = basculerFavori(contacts, ct.id) ?? contacts; afficher(); });
    const infos = document.createElement("div");
    const nom = document.createElement("div"); nom.className = "nom"; nom.textContent = ct.nom;
    const details = document.createElement("div"); details.className = "details";
    details.textContent = [ct.telephone, ct.email, ct.ville].filter(Boolean).join(" · ");
    infos.append(nom, details);
    const cat = document.createElement("span"); cat.className = "categorie " + ct.categorie; cat.textContent = ct.categorie;
    const suppr = document.createElement("button"); suppr.className = "supprimer"; suppr.textContent = "×"; suppr.title = "Supprimer";
    suppr.addEventListener("click", () => { contacts = contacts.filter((x) => x.id !== ct.id); afficher(); });
    li.append(fav, infos, cat, suppr);
    ul.append(li);
  }
  $("#compteur").textContent = `${visibles.length} contact(s) affiché(s) sur ${contacts.length}`;

  const villes = villesDistinctes(contacts);
  $("#villes").textContent = villes ? `${villes.length} ville(s) : ${villes.join(", ")}` : "";
  $("#parVille").replaceChildren(...Object.entries(compterParVille(contacts) ?? {}).map(([v, n]) => {
    const li = document.createElement("li"); li.textContent = `${v} : ${n}`; return li;
  }));
}

$("#formulaire").addEventListener("submit", (ev) => {
  ev.preventDefault();
  const nouveau = creerContact({ nom: $("#nom").value, telephone: $("#telephone").value, email: $("#email").value, ville: $("#ville").value, categorie: $("#categorie").value }, prochainId);
  const erreurs = nouveau ? verifierContact(nouveau) ?? [] : ["creerContact n'est pas encore écrite."];
  $("#erreurs").replaceChildren(...erreurs.map((e) => { const li = document.createElement("li"); li.textContent = e; return li; }));
  if (erreurs.length > 0) return;
  contacts = [...contacts, nouveau];
  prochainId++;
  $("#formulaire").reset();
  afficher();
});
$("#recherche").addEventListener("input", afficher);
$("#filtre").addEventListener("change", afficher);
$("#exporter").addEventListener("click", () => {
  $("#json").value = exporterJSON(contacts) ?? "";
  $("#messageJson").textContent = "Carnet exporté.";
});
$("#importer").addEventListener("click", () => {
  try {
    const importes = importerJSON($("#json").value);
    if (!Array.isArray(importes)) throw new Error("importerJSON n'est pas encore écrite.");
    contacts = importes;
    prochainId = contacts.length + 1;
    $("#messageJson").textContent = `${contacts.length} contact(s) importé(s).`;
  } catch (e) {
    $("#messageJson").textContent = "Import impossible : " + e.message;
  }
  afficher();
});
afficher();