{% extends 'base.html' %}
{% block title %}Panel de Control{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2 mb-2 mb-md-0">Visualización de señales</h1>

  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group me-2">
      <!-- btnShare: comparte el enlace actual -->
      <button id="btnShare" class="btn btn-sm btn-outline-secondary" title="Compartir enlace">
        <i class="bi bi-share"></i> Share
      </button>
      <!-- btnExport: descarga la gráfica PNG -->
      <button id="btnExport" class="btn btn-sm btn-outline-secondary" title="Descargar imagen PNG">
        <i class="bi bi-download"></i> Export
      </button>
    </div>
  </div>
</div>

<!-- Canvas de la gráfica -->
<canvas id="grafica" class="w-100" style="max-height:400px;" height="200"></canvas>

<h5 class="mt-4">Señales almacenadas</h5>

<div class="table-responsive">
<table class="table table-striped align-middle">
  <thead>
    <tr>
      <th>ID</th><th>Fecha</th><th>Inicio (MHz)</th><th>Final (MHz)</th>
      <th>Duración (s)</th><th>Ver</th>
    </tr>
  </thead>
  <tbody>
    {% for s in señales %}
    <tr>
      <td>{{ s.id_barrido }}</td>
      <td>{{ s.inicio }}</td>
      <td>{{ '%.2f' % (s.frecuencia_inicio / 1e6) }}</td>
      <td>{{ '%.2f' % (s.frecuencia_final / 1e6) }}</td>
      <td>{{ '%.1f' % s.tiempo_total }}</td>
      <td>
        <button class="btn btn-sm btn-info" onclick="cargarGrafica({{ s.id_barrido }})">
          <i class="bi bi-graph-up"></i> Graficar
        </button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>

<script>
  let graficoLineal;
  const MAX_PUNTOS = 10000;

  // --------- cargar y dibujar gráfica ---------
  function cargarGrafica(id) {
    fetch(`/grafico/${id}`)
      .then(r => r.json())
      .then(data => {
        if (data.error) { alert(data.error); return; }

        const freqs = data.freqs.map(f => f / 1e6);
        const power = data.power;

        const downFreqs = [], downPower = [];
        const paso = Math.max(1, Math.floor(freqs.length / MAX_PUNTOS));
        for (let i = 0; i < freqs.length; i += paso) {
          downFreqs.push(promedio(freqs.slice(i, i + paso)));
          downPower.push(promedio(power.slice(i, i + paso)));
        }

        const ctx = document.getElementById('grafica').getContext('2d');
        if (graficoLineal) graficoLineal.destroy();

        graficoLineal = new Chart(ctx, {
          type: 'line',
          data: {
            labels: downFreqs.map(f => f.toFixed(2)),
            datasets: [{
              label: 'Potencia (dB)',
              data: downPower,
              borderColor: '#0d6efd',
              tension: 0.1,
              pointRadius: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: false,
            scales: {
              x: { title: { display: true, text: 'Frecuencia (MHz)' } },
              y: { title: { display: true, text: 'Potencia (dB)' } }
            },
            plugins: { legend: { display: false } }
          }
        });
      });
  }

  const promedio = arr => arr.reduce((a, v) => a + v, 0) / arr.length;

  // --------- Exportar imagen PNG ---------
  function descargarImagen() {
    if (!graficoLineal) { alert('Primero genera la gráfica.'); return; }
    const url = document.getElementById('grafica').toDataURL('image/png');
    const a = document.createElement('a');
    a.href = url;
    a.download = 'grafica.png';
    a.click();
  }

  // --------- Compartir enlace ---------
  async function compartirEnlace() {
    const urlActual = window.location.href;
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'Dashboard E3T - Gráfica',
          text: 'Consulta esta señal en el dashboard E3T',
          url: urlActual
        });
      } catch(e) { /* usuario canceló */ }
    } else {
      try {
        await navigator.clipboard.writeText(urlActual);
        alert('Enlace copiado al portapapeles');
      } catch(err) {
        alert('No se pudo copiar el enlace.');
      }
    }
  }

  // --------- listeners botones ---------
  document.getElementById('btnExport').addEventListener('click', descargarImagen);
  document.getElementById('btnShare').addEventListener('click', compartirEnlace);

  // cargar la última al iniciar
  window.addEventListener('DOMContentLoaded', () => {
    const primeraFila = document.querySelector('table tbody tr');
    if (primeraFila) primeraFila.querySelector('button').click();
  });
</script>
{% endblock %}