{% extends "base.html" %}
{% block title %}Valoraciones - TheL4FPRO{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', path='css/common.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/valoraciones.css') }}">
<style>
  .eval-card .card-body,
  .eval-header,
  .eval-header .title { color: var(--text-primary); }
  .eval-header .meta { color: var(--text-muted); }
  .eval-header { background: transparent; border: none; }
  #ratingsList table th,
  #ratingsList table td { color: var(--text-secondary); }
  #ratingsList .muted { color: var(--text-muted); }

  select {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 6px;
    font-weight: 500;
    outline: 0;
    appearance: none;
  }

  option {
    background: #fff;
    color: #000;
  }
</style>

{% endblock %}

{% block content %}
<section class="container" style="max-width: 960px;">
  <h1 class="page-title">Valoraciones</h1>
  <p class="muted">Selecciona un jugador y completa el cuestionario por áreas. Marca una escala 1–5 y añade observaciones por indicador.</p>

  <div class="card">
    <div class="card-body">
      <form id="evalForm" class="form-grid" autocomplete="off">
        <div class="form-row">
          <label for="playerSelect">Jugador</label>
          <select id="playerSelect" class="form-select" required></select>
        </div>

        <div class="form-actions" style="margin-top:.25rem">
          <button type="button" id="viewHistoryBtn" class="btn btn-secondary">
            <i class="fas fa-list"></i> Ver Histórico
          </button>
        </div>

        <div id="questionnaire"></div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Guardar evaluación
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="card" id="historyCard">
    <div class="card-body" id="historySection">
      <h2 class="h3">Histórico</h2>
      <div class="muted" id="ratingsHint">Selecciona un jugador para ver su histórico.</div>
      <div id="ratingsList" class="table-responsive"></div>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
(function(){
  window.navControl?.setActiveLink?.("valoraciones");

  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
  const playerSelect = document.getElementById('playerSelect');
  const questionnaire = document.getElementById('questionnaire');
  const form = document.getElementById('evalForm');
  const ratingsList = document.getElementById('ratingsList');
  const ratingsHint = document.getElementById('ratingsHint');
  const viewHistoryBtn = document.getElementById('viewHistoryBtn');
  const historySection = document.getElementById('historySection');

  const FORM_DEF = [
    {
      area: "TÉCNICA",
      blocks: [
        { subescala:"Control", indicadores:["Capacidad para dominar el balón en diferentes superficies (planta, interior, empeine, muslo)."]},
        { subescala:"Conducción de balón", indicadores:["Capacidad para conducir el balón con ambas piernas, mantenerlo cerca del cuerpo, cambiar de dirección y protegerlo ante oposición."]},
        { subescala:"Pase", indicadores:["Precisión y fuerza en pase corto, medio y largo con ambas piernas."]},
        { subescala:"Golpeo", indicadores:["Capacidad de golpeo con interior, empeine y rosca. Dominio de pierna no dominante."]},
        { subescala:"Definición", indicadores:["Eficacia y técnica al finalizar jugadas, variedad de golpeos y toma de decisión ante portería."]},
        { subescala:"Defensa individual", indicadores:["Posicionamiento corporal, timing de entrada, uso del cuerpo y capacidad para recuperar balón."]},
      ]
    },
    {
      area: "FÍSICA",
      blocks: [
        { subescala:"Movilidad", indicadores:["Rango de movimiento articular, dorsiflexión, flexibilidad de cadera y columna."]},
        { subescala:"Control corporal y coordinación", indicadores:["Estabilidad, equilibrio y dominio postural en carrera, salto o cambio de dirección."]},
        { subescala:"Velocidad", indicadores:["Capacidad de aceleración y sprint (5–20 m), reacción motora ante estímulo."]},
        { subescala:"Salto / Potencia", indicadores:["Coordinación entre tren superior e inferior (test Abalakov)."]},
      ]
    },
    {
      area: "TÁCTICA",
      blocks: [
        { subescala:"Desmarque y perfilación", indicadores:["Capacidad para ofrecer línea de pase, orientarse y perfilar el cuerpo correctamente."]},
        { subescala:"Velocidad de reacción táctica", indicadores:["Capacidad para anticipar jugadas, decidir y ejecutar con rapidez."]},
        { subescala:"Visión y lectura de juego", indicadores:["Levanta la cabeza, interpreta espacios y reacciones del rival."]},
        { subescala:"Entendimiento colectivo", indicadores:["Comprende las fases del juego (atacar/defender/transición)."]},
      ]
    },
    {
      area: "ACTITUD Y MENTALIDAD",
      blocks: [
        { subescala:"Concentración", indicadores:["Capacidad de mantener atención durante tareas prolongadas."]},
        { subescala:"Esfuerzo", indicadores:["Nivel de implicación, constancia y entrega en el entrenamiento."]},
        { subescala:"Actitud ante el error", indicadores:["Capacidad de resiliencia y reacción positiva ante fallos."]},
        { subescala:"Estilo de vida", indicadores:["Hábitos fuera del campo: descanso, alimentación, estudios, redes, sueño, etc."]},
      ]
    }
  ];

  function escId(s){ return s.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9\-]/g,''); }

  function renderQuestionnaire() {
    const pid = playerSelect.value;
    questionnaire.innerHTML = '';
    if (!pid) return;
    let html = '';
    for (const area of FORM_DEF) {
      html += `<div class="card">
        <div class="card-body">
          <h3 class="h4">${area.area}</h3>`;
      for (const b of area.blocks) {
        html += `<div>
          <h4 class="h5">${b.subescala}</h4>`;
        for (const ind of b.indicadores) {
          const key = `${escId(area.area)}__${escId(b.subescala)}__${escId(ind).slice(0,60)}`;
          html += `
            <div class="card" style="padding:.75rem; margin:.5rem 0;">
              <div class="muted">${ind}</div>
              <div class="form-row">
                <div>
                  <label>Escala</label>
                  <div class="scale-group">
                    ${[1,2,3,4,5].map(v => `
                      <label style="display:inline-flex; align-items:center; gap:.25rem;">
                        <input type="radio" name="${key}-score" value="${v}" required> ${v}
                      </label>`).join('')}
                  </div>
                </div>
                <div>
                  <label for="${key}-obs">Observaciones</label>
                  <textarea id="${key}-obs" class="form-textarea" data-area="${area.area}" data-subescala="${b.subescala}" data-indicador="${ind}" rows="2" placeholder="Opcional"></textarea>
                </div>
              </div>
            </div>`;
        }
        html += `</div>`;
      }
      html += `</div></div>`;
    }
    questionnaire.innerHTML = html;
  }

  async function fetchJSON(url){ const r=await fetch(url,{credentials:'include'}); if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); }
  async function postJSON(url,data){
    const r=await fetch(url,{
      method:'POST',
      credentials:'include',
      headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},
      body:JSON.stringify(data)
    });
    if(!r.ok){ throw new Error('HTTP '+r.status+' '+await r.text().catch(()=>'')); }
    return r.json();
  }

  function collectPayload(){
    const player_id = parseInt(playerSelect.value||'0',10);
    const items = [];
    const textareas = questionnaire.querySelectorAll('textarea[id$="-obs"]');
    for (const ta of textareas) {
      const area = ta.dataset.area;
      const subescala = ta.dataset.subescala;
      const indicador = ta.dataset.indicador;
      const key = `${escId(area)}__${escId(subescala)}__${escId(indicador).slice(0,60)}`;
      const scoreEl = questionnaire.querySelector(`input[name="${key}-score"]:checked`);
      if (!scoreEl) return null;
      items.push({
        area, subescala, indicador,
        score: parseInt(scoreEl.value,10),
        observaciones: (ta.value||'').trim() || null
      });
    }
    return { player_id, items };
  }

  function renderHistory(rows){
    if(!rows || !rows.length){
      ratingsList.innerHTML = '<div class="muted">Sin valoraciones para este jugador.</div>';
      return;
    }
    const byEval = new Map();
    for(const r of rows){
      if(!byEval.has(r.eval_id)) byEval.set(r.eval_id, {meta:r, items:[]});
      byEval.get(r.eval_id).items.push(r);
    }

    let html = '';
    for(const [eval_id, grp] of byEval){
      const meta = grp.meta;

      const byArea = new Map();
      for(const it of grp.items){
        if(!byArea.has(it.area)) byArea.set(it.area, new Map());
        const sub = byArea.get(it.area);
        if(!sub.has(it.subescala)) sub.set(it.subescala, []);
        sub.get(it.subescala).push(it);
      }

      let details = '';
      for(const [area, subMap] of byArea){
        details += `<div class="card" style="margin:.5rem 0; padding:.5rem;">
          <div class="card-body" style="padding:0;">
            <h4 class="h5">${area}</h4>`;
        for(const [subescala, items] of subMap){
          details += `<div>
            <h5 class="h6">${subescala}</h5>
            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th style="min-width:280px;">Indicador</th>
                    <th style="width:90px;">Score</th>
                    <th>Observaciones</th>
                  </tr>
                </thead>
                <tbody>
                  ${items.map(it=>`
                    <tr>
                      <td>${it.indicador}</td>
                      <td>${it.score}</td>
                      <td>${(it.observaciones||'').replaceAll('<','&lt;')}</td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </div>`;
        }
        details += `</div></div>`;
      }

      html += `
        <div class="card eval-card" data-eval-id="${eval_id}">
          <div class="card-body">
            <button class="eval-header" type="button" aria-expanded="false" aria-controls="eval-${eval_id}-details">
              <div class="title">Evaluación ${eval_id}</div>
              <div class="meta">
                <span>Docente: ${meta.docente_name || ('#'+meta.docente_id)}</span>
                <span>•</span>
                <span>${(meta.created_at||'').replace('T',' ')}</span>
                <i class="fas fa-chevron-right eval-chevron" aria-hidden="true"></i>
              </div>
            </button>
            <div id="eval-${eval_id}-details" class="eval-details" hidden>
              ${details}
            </div>
          </div>
        </div>`;
    }

    ratingsList.innerHTML = html;
  }

  async function loadPlayers(){
    playerSelect.innerHTML = '<option value="">Cargando…</option>';
    const data = await fetchJSON('/api/users?role=alumno');
    const options = ['<option value="">-- Selecciona jugador --</option>'];
    for(const u of data){ options.push(`<option value="${u.id}">${u.name} (${u.email})</option>`); }
    playerSelect.innerHTML = options.join('');
  }

  async function loadHistory(playerId){
    if(!playerId){ ratingsHint.style.display=''; ratingsList.innerHTML=''; return; }
    ratingsHint.style.display = '';
    ratingsHint.textContent = 'Cargando histórico…';
    const rows = await fetchJSON('/api/valoraciones_jugador?player_id='+encodeURIComponent(playerId));
    ratingsHint.style.display = 'none';
    renderHistory(rows);
  }

  form.addEventListener('submit', async (e)=>{
    e.preventDefault();
    const payload = collectPayload();
    if(!payload){ alert('Faltan puntuaciones en algún indicador.'); return; }
    if(!payload.player_id){ alert('Selecciona un jugador'); return; }
    try{
      await postJSON('/api/valoraciones_jugador', payload);
      await loadHistory(payload.player_id);
      alert('Evaluación guardada');
    }catch(err){
      console.error(err);
      alert('Error al guardar la evaluación');
    }
  });

  playerSelect.addEventListener('change', ()=>{
    renderQuestionnaire();
    loadHistory(playerSelect.value);
  });

  ratingsList.addEventListener('click', (ev) => {
    const header = ev.target.closest('.eval-header');
    if(!header) return;
    const card = header.closest('.eval-card');
    if(!card) return;
    const details = card.querySelector('.eval-details');
    const chevron = header.querySelector('.eval-chevron');
    const open = details.classList.contains('open');
    details.classList.toggle('open', !open);
    if(open){
      details.setAttribute('hidden','');
      header.setAttribute('aria-expanded','false');
      chevron?.classList.remove('rotate');
    }else{
      details.removeAttribute('hidden');
      header.setAttribute('aria-expanded','true');
      chevron?.classList.add('rotate');
    }
  });

  viewHistoryBtn.addEventListener('click', ()=>{
    historySection?.scrollIntoView({behavior:'smooth', block:'start'});
  });

  loadPlayers().then(()=>{
    if(playerSelect.value){ renderQuestionnaire(); loadHistory(playerSelect.value); }
  }).catch(()=>{
    playerSelect.innerHTML = '<option value="">Error al cargar jugadores</option>';
  });
})();
</script>
{% endblock %}