<estimation-chances>

  <h2>Estimer mes chances</h2>

  <div class="formulaire">

    <label>Série de bac :</label>
    <select onchange={ changerSerie }>
      <option value="bg">Bac Général</option>
      <option value="bt">Bac Technologique</option>
      <option value="bp">Bac Professionnel</option>
    </select>

    <label>Moyenne en terminale :</label>
    <input 
      type="number" 
      min="0" 
      max="20" 
      step="0.1"
      placeholder="Ex: 13.5"
      onchange={ changerMoyenne }>

  </div>

  <div if={ state.formations.length === 0 }>
    Aucune formation dans le comparateur.
  </div>

  <div each={ f in state.formations } class="estimation-ligne">

    <h3>{ f.fil_lib_voe_acc } — { f.g_ea_lib_vx }</h3>

    <div if={ state.serie && state.moyenne }>
      <p>Taux d'accès global : <b>{ f.taux_acces_ens }%</b></p>
      <p>% admis de ta série : <b>{ getPctSerie(f) }%</b></p>
      <p>Estimation : <b>{ getEstimation(f) }</b></p>
    </div>

    <div if={ !state.serie || !state.moyenne }>
      Remplis le formulaire ci-dessus pour voir ton estimation.
    </div>

  </div>

  <a href="#/comparateur">← Retour au comparateur</a>

  <style>

    .formulaire
    {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 300px;
      margin: 20px 0;
    }

    .estimation-ligne
    {
      border: 1px solid #ccc;
      padding: 15px;
      margin: 10px 0;
    }

  </style>

  <script>

    export default
    {
      state:
      {
        formations: [],
        serie: 'bg',
        moyenne: null
      },

      onMounted()
      {
        const saved = localStorage.getItem('comparateur')
        if (saved)
        {
          this.update({ formations: JSON.parse(saved) })
        }
      },

      changerSerie(e)
      {
        this.update({ serie: e.target.value })
      },

      changerMoyenne(e)
      {
        this.update({ moyenne: parseFloat(e.target.value) })
      },

      getPctSerie(formation)
      {
        const serie = this.state.serie
        if (serie === 'bg') return formation.pct_bg
        if (serie === 'bt') return formation.pct_bt
        if (serie === 'bp') return formation.pct_bp
        return 0
      },

      getEstimation(formation)
      {
        const taux = formation.taux_acces_ens
        const moyenne = this.state.moyenne
        const pctSerie = this.getPctSerie(formation)

        if (pctSerie === 0) return "Très faible — ta série est rarement admise"

        let score = taux

        if (moyenne >= 16) score += 20
        else if (moyenne >= 14) score += 10
        else if (moyenne >= 12) score += 0
        else if (moyenne >= 10) score -= 10
        else score -= 20

        if (score >= 70) return "Good ;D"
        if (score >= 40) return "Okay :)"
        if (score >= 20) return "Mehh :/"
        if (score >= 2)  return "Nope :("
        return "Your chances are so low i had to learn how to put an emoji to tell you how dead they were: 💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀 (i hope that many emoji wont break my page...)"
      }
    }

  </script>

</estimation-chances>