import { fetchFormations } from "./api.js"
import { createFormation } from "./formation.js"

let lastFormations = []

const button = document.getElementById("btn-test")
const output = document.getElementById("output")
const searchInput = document.getElementById("search")

function showDetail(index) {
  const f = lastFormations[index]

  output.innerHTML = `
    <div style="border:1px solid #ccc; padding:10px; margin:10px;">
      <h2>${f.nom}</h2>
      <p><b>Établissement :</b> ${f.etablissement}</p>
      <p><b>Ville :</b> ${f.ville}</p>
      <p><b>Département :</b> ${f.departement}</p>
      <p><b>Filière :</b> ${f.filiere}</p>
      <p><b>Sélectivité :</b> ${f.selectivite}</p>
      <p><b>Capacité :</b> ${f.capacite}</p>
      <p><b>Candidats :</b> ${f.candidats}</p>
      <p><b>Admis :</b> ${f.admis}</p>
      <p><b>Taux d'accès :</b> ${f.tauxAcces}%</p>
      <button id="back-btn">Retour</button>
    </div>
  `

  const backBtn = document.getElementById("back-btn")
  backBtn.addEventListener("click", testAPI)
}

window.showDetail = showDetail

async function testAPI() {
  output.textContent = "Chargement..."

  try {
    const query = searchInput.value

    const data = await fetchFormations(query)

    if (data.results && data.results.length > 0) {
      const formations = []

      for (let i = 0; i < data.results.length; i++) {
        const raw = data.results[i]
        const formation = createFormation(raw)
        formations.push(formation)
      }

      lastFormations = formations

      let html = ""

      for (let i = 0; i < formations.length; i++) {
        const f = formations[i]

        html += `
          <div style="border:1px solid #ccc; padding:10px; margin:10px;">
            <h3>${f.nom}</h3>
            <p><b>Établissement :</b> ${f.etablissement}</p>
            <p><b>Ville :</b> ${f.ville} (${f.departement})</p>
            <p><b>Filière :</b> ${f.filiere}</p>
            <p><b>Taux d'accès :</b> ${f.tauxAcces}%</p>
            <button onclick="showDetail(${i})">Voir détail</button>
          </div>
        `
      }

      output.innerHTML = html
    } else {
      output.textContent = "Aucun résultat trouvé"
    }
  } catch (error) {
    console.error("Erreur :", error)
    output.textContent = "Erreur lors de la requête"
  }
}

button.addEventListener("click", testAPI)