{% 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;
  }

  .player-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }

  .player-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #3a3a3a;
    color: #e0e0e0;
    transition: background-color 0.2s;
  }

  .player-dropdown-item:hover,
  .player-dropdown-item:focus {
    background-color: #3a3a3a;
    outline: none;
  }

  .player-dropdown-item:last-child {
    border-bottom: none;
  }

  .player-dropdown-item .player-name {
    font-weight: 600;
    color: #ffffff;
  }

  .player-dropdown-item .player-email {
    font-size: 0.9em;
    color: #aaa;
    margin-left: 4px;
  }

  .player-dropdown-empty {
    padding: 12px;
    text-align: center;
    color: #888;
  }
</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="playerSearchInput">Jugador</label>
          <div style="position: relative;">
            <input type="text" id="playerSearchInput" class="form-select" placeholder="Buscar por nombre o email..."
              autocomplete="off" />
            <input type="hidden" id="playerSelect" required />
            <div id="playerDropdown" class="player-dropdown" style="display: none;"></div>
          </div>
        </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 playerSearchInput = document.getElementById('playerSearchInput');
    const playerDropdown = document.getElementById('playerDropdown');
    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');

    let allPlayers = [];
    let selectedPlayer = null;

    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;
    }

    function getUserDisplayName(user) {
      const firstName = user.first_name || '';
      const lastName = user.last_name || '';
      const fullName = `${firstName} ${lastName}`.trim() || user.name || 'Sin nombre';
      return `${fullName} (${user.email})`;
    }

    function filterPlayers(searchTerm) {
      if (!searchTerm) {
        return allPlayers;
      }
      const term = searchTerm.toLowerCase();
      return allPlayers.filter(player => {
        const firstName = (player.first_name || '').toLowerCase();
        const lastName = (player.last_name || '').toLowerCase();
        const email = (player.email || '').toLowerCase();
        const name = (player.name || '').toLowerCase();

        return firstName.includes(term) ||
          lastName.includes(term) ||
          email.includes(term) ||
          name.includes(term);
      });
    }

    function renderDropdown(players) {
      if (players.length === 0) {
        playerDropdown.innerHTML = '<div class="player-dropdown-empty">No se encontraron jugadores</div>';
      } else {
        const html = players.map(player => `
        <div class="player-dropdown-item" data-id="${player.id}" data-name="${getUserDisplayName(player)}" tabindex="0">
          <span class="player-name">${player.first_name || ''} ${player.last_name || ''}</span>
          <span class="player-email">(${player.email})</span>
        </div>
      `).join('');
        playerDropdown.innerHTML = html;
      }
      playerDropdown.style.display = 'block';
    }

    function selectPlayer(player) {
      selectedPlayer = player;
      playerSelect.value = player.id;
      playerSearchInput.value = getUserDisplayName(player);
      playerDropdown.style.display = 'none';
      renderQuestionnaire();
      loadHistory(player.id);
    }

    async function loadPlayers() {
      try {
        playerSearchInput.placeholder = 'Cargando…';
        playerSearchInput.disabled = true;
        allPlayers = await fetchJSON('/api/users?role=alumno');
        playerSearchInput.placeholder = 'Buscar por nombre o email...';
        playerSearchInput.disabled = false;
        playerSearchInput.focus();
      } catch (err) {
        console.error('Error loading players:', err);
        playerSearchInput.placeholder = 'Error al cargar jugadores';
      }
    }

    // Search input event
    playerSearchInput.addEventListener('input', (e) => {
      const searchTerm = e.target.value.trim();
      const filtered = filterPlayers(searchTerm);
      renderDropdown(filtered);
    });

    playerSearchInput.addEventListener('focus', (e) => {
      const searchTerm = e.target.value.trim();
      const filtered = filterPlayers(searchTerm);
      if (filtered.length > 0 || allPlayers.length > 0) {
        renderDropdown(filtered.length > 0 ? filtered : allPlayers);
      }
    });

    // Click on dropdown item
    playerDropdown.addEventListener('click', (e) => {
      const item = e.target.closest('.player-dropdown-item');
      if (item) {
        const playerId = parseInt(item.dataset.id);
        const player = allPlayers.find(p => p.id === playerId);
        if (player) {
          selectPlayer(player);
        }
      }
    });

    // Keyboard navigation
    playerDropdown.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        const item = e.target.closest('.player-dropdown-item');
        if (item) {
          const playerId = parseInt(item.dataset.id);
          const player = allPlayers.find(p => p.id === playerId);
          if (player) {
            selectPlayer(player);
          }
        }
      }
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('#playerSearchInput') && !e.target.closest('#playerDropdown')) {
        playerDropdown.style.display = 'none';
      }
    });

    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');
      }
    });

    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().catch((err) => {
      console.error('Failed to load players:', err);
    });
  })();
</script>
{% endblock %}