{% extends "base.html" %}
{% block title %}Esplora{% endblock %}
{% block content %}

{% if flash %}
<div class="flash">{{ flash }}</div>
{% endif %}

{% if courses %}
<div style="text-align:center;margin-bottom:1.5rem;">
  <h1 style="margin-bottom:0.3rem;">Knowledge Base</h1>
  <p style="font-family:system-ui,sans-serif;color:var(--muted);font-size:0.9rem;">
    <strong>{{ stats.n_courses }}</strong> corso{% if stats.n_courses != 1 %}i{% endif %}
    &middot; <strong>{{ stats.n_topics }}</strong> argomento{% if stats.n_topics != 1 %}i{% endif %}
    &middot; <strong>{{ stats.n_documents }}</strong> documento{% if stats.n_documents != 1 %}i{% endif %}
  </p>
</div>

<div style="background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-bottom:2rem;overflow:hidden;box-shadow:0 2px 8px rgba(61,44,36,0.03);">
  <svg id="graphSvg" width="100%" height="380" style="display:block;"></svg>
</div>
<script>
(function() {
  var data = {{ graph_data|tojson }};
  var nodes = data.nodes;
  var edges = data.edges;
  if (!nodes.length) return;

  var svg = document.getElementById('graphSvg');
  var W = svg.clientWidth || 800;
  var H = 380;

  nodes.forEach(function(n) {
    n.x = 80 + Math.random() * (W - 160);
    n.y = 60 + Math.random() * (H - 120);
  });

  var iterations = 100;
  var repulsion = 4000;
  var attraction = 0.008;
  var gravity = 0.003;

  for (var iter = 0; iter < iterations; iter++) {
    var fx = new Array(nodes.length).fill(0);
    var fy = new Array(nodes.length).fill(0);

    for (var i = 0; i < nodes.length; i++) {
      for (var j = i + 1; j < nodes.length; j++) {
        var dx = nodes[i].x - nodes[j].x;
        var dy = nodes[i].y - nodes[j].y;
        var d = Math.sqrt(dx * dx + dy * dy) + 0.1;
        var f = repulsion / (d * d);
        fx[i] += (dx / d) * f;
        fy[i] += (dy / d) * f;
        fx[j] -= (dx / d) * f;
        fy[j] -= (dy / d) * f;
      }
    }

    edges.forEach(function(e) {
      var s = nodes[e.source];
      var t = nodes[e.target];
      var dx = t.x - s.x;
      var dy = t.y - s.y;
      var d = Math.sqrt(dx * dx + dy * dy) + 0.1;
      var f = attraction * d;
      fx[e.source] += (dx / d) * f;
      fy[e.source] += (dy / d) * f;
      fx[e.target] -= (dx / d) * f;
      fy[e.target] -= (dy / d) * f;
    });

    var cx = W / 2, cy = H / 2;
    for (var k = 0; k < nodes.length; k++) {
      fx[k] += (cx - nodes[k].x) * gravity;
      fy[k] += (cy - nodes[k].y) * gravity;
    }

    var damping = 0.08 + 0.12 * (1 - iter / iterations);
    for (var m = 0; m < nodes.length; m++) {
      nodes[m].x += fx[m] * damping;
      nodes[m].y += fy[m] * damping;
      nodes[m].x = Math.max(30, Math.min(W - 30, nodes[m].x));
      nodes[m].y = Math.max(20, Math.min(H - 20, nodes[m].y));
    }
  }

  var radius = {course: 22, topic: 14, doc: 9};
  var fill = {course: 'var(--accent)', topic: 'var(--muted)', doc: 'var(--green)'};
  var hoverColors = {course: 'rgba(188,108,74,0.15)', topic: 'rgba(139,115,85,0.12)', doc: 'rgba(107,124,79,0.12)'};

  var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  svg.appendChild(g);

  edges.forEach(function(e) {
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', nodes[e.source].x);
    line.setAttribute('y1', nodes[e.source].y);
    line.setAttribute('x2', nodes[e.target].x);
    line.setAttribute('y2', nodes[e.target].y);
    line.setAttribute('stroke', 'var(--border)');
    line.setAttribute('stroke-width', '1');
    line.setAttribute('opacity', '0.6');
    line.setAttribute('data-edge', e.source + '-' + e.target);
    g.appendChild(line);
  });

  nodes.forEach(function(n) {
    var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('cx', n.x);
    circle.setAttribute('cy', n.y);
    circle.setAttribute('r', radius[n.type]);
    circle.setAttribute('fill', fill[n.type]);
    circle.setAttribute('opacity', '0.85');
    circle.setAttribute('data-node', n.id);
    circle.setAttribute('data-type', n.type);
    circle.style.cursor = 'pointer';
    circle.style.transition = 'r 0.2s, opacity 0.2s';

    circle.addEventListener('mouseenter', function() {
      circle.setAttribute('r', radius[n.type] * 1.5);
      circle.setAttribute('opacity', '1');
      var nid = circle.getAttribute('data-node');
      svg.querySelectorAll('line').forEach(function(l) {
        var parts = l.getAttribute('data-edge').split('-');
        if (parts[0] === nid || parts[1] === nid) {
          l.setAttribute('stroke', fill[n.type]);
          l.setAttribute('stroke-width', '2');
          l.setAttribute('opacity', '0.9');
        } else {
          l.setAttribute('opacity', '0.15');
        }
      });
      svg.querySelectorAll('circle').forEach(function(c) {
        if (c.getAttribute('data-node') !== nid) {
          c.setAttribute('opacity', '0.25');
        }
      });
    });

    circle.addEventListener('mouseleave', function() {
      circle.setAttribute('r', radius[n.type]);
      circle.setAttribute('opacity', '0.85');
      svg.querySelectorAll('line').forEach(function(l) {
        l.setAttribute('stroke', 'var(--border)');
        l.setAttribute('stroke-width', '1');
        l.setAttribute('opacity', '0.6');
      });
      svg.querySelectorAll('circle').forEach(function(c) {
        c.setAttribute('opacity', '0.85');
      });
    });

    circle.addEventListener('click', function() {
      if (n.type === 'doc') {
        window.location.href = '/ask?q=' + encodeURIComponent(n.label);
      }
    });

    group.appendChild(circle);

    var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.setAttribute('x', n.x);
    txt.setAttribute('y', n.y + radius[n.type] + 13);
    txt.setAttribute('text-anchor', 'middle');
    txt.setAttribute('font-family', 'system-ui, sans-serif');
    var fs = n.type === 'course' ? '11' : n.type === 'topic' ? '9.5' : '8.5';
    txt.setAttribute('font-size', fs + 'px');
    txt.setAttribute('fill', n.type === 'course' ? 'var(--accent)' : 'var(--muted)');
    var maxLen = n.type === 'doc' ? 18 : 22;
    var lbl = n.label.length > maxLen ? n.label.slice(0, maxLen) + '...' : n.label;
    txt.textContent = lbl;
    group.appendChild(txt);

    g.appendChild(group);
  });
})();
</script>

{% for course in courses %}
<div class="card" style="cursor:pointer;" onclick="toggleCourse(this)">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <div>
      <h2 style="margin:0;font-style:normal;color:var(--text);">{{ course.name }}</h2>
      <span style="font-family:system-ui,sans-serif;font-size:0.8rem;color:var(--muted);">
        {{ course.topics|length }} argomento{% if course.topics|length != 1 %}i{% endif %}
        &middot; {{ course.doc_count }} documento{% if course.doc_count != 1 %}i{% endif %}
      </span>
    </div>
    <span style="font-size:1.2rem;color:var(--muted);transform:rotate(0deg);transition:transform 0.25s;" class="toggle-arrow">&#9660;</span>
  </div>

  <div class="course-detail" style="display:none;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);">
    {% for topic in course.topics %}
    <div class="card" style="padding:0.8rem 1rem;margin-bottom:0.6rem;border-left:3px solid var(--accent);">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <strong style="color:var(--text);font-size:0.95rem;">{{ topic.name }}</strong>
        <span style="font-family:system-ui,sans-serif;font-size:0.78rem;color:var(--muted);">
          {{ topic.documents|length }} doc
        </span>
      </div>

      <div style="display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.5rem;">
        {% for d in topic.documents %}
        <span style="background:var(--bg);padding:0.15rem 0.5rem;border-radius:3px;font-family:system-ui,sans-serif;font-size:0.78rem;color:var(--muted);"
              title="Score: {{ '%.2f'|format(d.get('final_score', 0)) }}">
          {{ d.get('filename', d.get('source_id', '')) }}
          <span style="color:var(--green);font-size:0.7rem;">{{ '%.0f'|format(d.get('final_score', 0)*100) }}%</span>
        </span>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}

<script>
function toggleCourse(el) {
  var detail = el.querySelector('.course-detail');
  var arrow = el.querySelector('.toggle-arrow');
  if (detail.style.display === 'none') {
    detail.style.display = 'block';
    arrow.style.transform = 'rotate(180deg)';
  } else {
    detail.style.display = 'none';
    arrow.style.transform = 'rotate(0deg)';
  }
}
</script>

{% else %}
<div style="text-align:center;padding:4rem 1rem;">
  <h1 style="margin-bottom:1rem;">Benvenuto in StudyGraph</h1>
  <p style="color:var(--muted);font-family:system-ui,sans-serif;font-size:0.95rem;max-width:500px;margin:0 auto 2rem;">
    StudyGraph trasforma i tuoi PDF in una knowledge base interrogabile —
    carica i tuoi appunti e ottieni risposte con citazioni, ricerca semantica,
    e una mappa visuale dei tuoi materiali.
  </p>
  <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
    <a href="/upload" class="btn">Carica i tuoi PDF</a>
    <a href="/run-demo" class="btn btn-ghost">Prova la demo</a>
  </div>
  <div style="margin-top:3rem;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;text-align:left;max-width:460px;margin-left:auto;margin-right:auto;">
    <h3 style="font-size:0.9rem;color:var(--accent);margin-bottom:0.6rem;font-weight:normal;">In 3 step:</h3>
    <p style="font-family:system-ui,sans-serif;font-size:0.82rem;color:var(--muted);margin-bottom:0.3rem;">
      1. <strong>Carica</strong> i PDF dei tuoi corsi
    </p>
    <p style="font-family:system-ui,sans-serif;font-size:0.82rem;color:var(--muted);margin-bottom:0.3rem;">
      2. <strong>Cerca</strong> tra tutti i documenti con un solo comando
    </p>
    <p style="font-family:system-ui,sans-serif;font-size:0.82rem;color:var(--muted);">
      3. <strong>Fai domande</strong> e ricevi risposte con citazioni alle fonti
    </p>
  </div>
</div>
{% endif %}
{% endblock %}