{% extends "base.html" %}
{% load static %}

{% block content %}
  <div class="columns is-multiline">
    <div class="column is-12">
      <nav class="breadcrumb is-small" aria-label="breadcrumbs">
        <ul>
          <li><a href="{{ workspace_url }}">AI Workspace</a></li>
          <li class="is-active"><a aria-current="page">Insight Graphs</a></li>
        </ul>
      </nav>
    </div>
    <div class="column is-12">
      <h1 class="title is-4" style="margin-bottom: 0.35rem;">Insight Graphs: {{ person.name }}</h1>
      <p class="is-size-7 has-text-grey">
        Historical metrics for workspace {{ workspace_conversation.id }}
      </p>
      {% include "partials/ai-insight-nav.html" with active_tab="graphs" %}
    </div>

    {% for graph in graph_cards %}
      <div class="column is-6">
        <div class="box">
          <div class="is-flex is-justify-content-space-between is-align-items-center" style="margin-bottom: 0.45rem;">
            <div>
              <p class="heading">{{ graph.group_title }}</p>
              <p class="title is-6" style="margin-bottom: 0.2rem;">{{ graph.title }}</p>
              <p class="is-size-7 has-text-grey">{{ graph.count }} point{{ graph.count|pluralize }}</p>
            </div>
            <div class="buttons are-small" style="margin: 0;">
              <a class="button is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}">
                Detail
              </a>
              <a class="button is-light" href="{{ help_url }}#group-{{ graph.group }}">
                How It Works
              </a>
            </div>
          </div>
          <div style="height: 250px;">
            <canvas id="graph-{{ graph.slug }}"></canvas>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  {{ graph_cards|json_script:"insight-graph-cards" }}
  <script src="{% static 'js/chart.js' %}"></script>
  <script>
    (function() {
      var node = document.getElementById("insight-graph-cards");
      if (!node) {
        return;
      }
      var graphs = JSON.parse(node.textContent || "[]");
      var palette = ["#3273dc", "#23d160", "#ffdd57", "#ff3860", "#7957d5", "#00d1b2"];

      graphs.forEach(function(graph, idx) {
        var canvas = document.getElementById("graph-" + graph.slug);
        if (!canvas) {
          return;
        }
        var labels = (graph.points || []).map(function(row) {
          return new Date(row.x).toLocaleString();
        });
        var values = (graph.points || []).map(function(row) {
          return row.y;
        });
        var color = palette[idx % palette.length];
        var yScale = {};
        if (graph.y_min !== null && graph.y_min !== undefined) {
          yScale.min = graph.y_min;
        }
        if (graph.y_max !== null && graph.y_max !== undefined) {
          yScale.max = graph.y_max;
        }
        new Chart(canvas.getContext("2d"), {
          type: "line",
          data: {
            labels: labels,
            datasets: [
              {
                label: graph.title,
                data: values,
                borderColor: color,
                backgroundColor: color + "33",
                borderWidth: 2,
                pointRadius: 2,
                tension: 0.24,
                spanGaps: true
              }
            ]
          },
          options: {
            maintainAspectRatio: false,
            scales: {
              y: yScale
            },
            plugins: {
              legend: {
                display: false
              }
            }
          }
        });
      });
    })();
  </script>
{% endblock %}