{% 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><a href="{{ graphs_url }}">Insight Graphs</a></li>
          <li class="is-active"><a aria-current="page">{{ metric.title }}</a></li>
        </ul>
      </nav>
    </div>
    <div class="column is-12">
      <h1 class="title is-4" style="margin-bottom: 0.35rem;">{{ metric.title }}: {{ person.name }}</h1>
      <p class="is-size-7 has-text-grey">Conversation {{ workspace_conversation.id }}</p>
      {% include "partials/ai-insight-nav.html" %}
    </div>
    <div class="column is-5">
      <div class="box">
        <p class="heading">{{ metric_group.title }}</p>
        <p class="title is-5" style="margin-bottom: 0.5rem;">{{ metric.title }}</p>
        <p><strong>Current Value:</strong> {{ metric_value|default:"-" }}</p>
        <p style="margin-top: 0.65rem;"><strong>How It Is Calculated</strong></p>
        <p>{{ metric.calculation }}</p>
        <p style="margin-top: 0.65rem;"><strong>Psychological Interpretation</strong></p>
        <p>{{ metric.psychology }}</p>
        {% if metric_psychology_hint %}
          <article class="message is-info is-light" style="margin-top: 0.75rem;">
            <div class="message-body">
              {{ metric_psychology_hint }}
            </div>
          </article>
        {% endif %}
      </div>
    </div>
    <div class="column is-7">
      <div class="box">
        <p class="heading">History</p>
        {% if graph_applicable %}
          <div style="height: 360px;">
            <canvas id="metric-detail-chart"></canvas>
          </div>
          {% if not graph_points %}
            <p class="is-size-7 has-text-grey" style="margin-top: 0.65rem;">
              No historical points yet for this metric.
            </p>
          {% endif %}
        {% else %}
          <article class="message is-light">
            <div class="message-body">
              This is a point-in-time metric and is not charted.
            </div>
          </article>
        {% endif %}
      </div>
    </div>
  </div>

  {{ graph_points|json_script:"metric-detail-points" }}
  <script src="{% static 'js/chart.js' %}"></script>
  <script>
    (function() {
      var node = document.getElementById("metric-detail-points");
      if (!node) {
        return;
      }
      var points = JSON.parse(node.textContent || "[]");
      var shouldRender = {{ graph_applicable|yesno:"true,false" }};
      if (!shouldRender) {
        return;
      }
      var labels = points.map(function(row) {
        var dt = new Date(row.x);
        return dt.toLocaleString();
      });
      var values = points.map(function(row) {
        return row.y;
      });
      var ctx = document.getElementById("metric-detail-chart");
      if (!ctx) {
        return;
      }
      new Chart(ctx.getContext("2d"), {
        type: "line",
        data: {
          labels: labels,
          datasets: [
            {
              label: "{{ metric.title|escapejs }}",
              data: values,
              borderColor: "#3273dc",
              backgroundColor: "rgba(50,115,220,0.12)",
              borderWidth: 2,
              pointRadius: 2,
              tension: 0.28,
              spanGaps: true
            }
          ]
        },
        options: {
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: true
            }
          }
        }
      });
    })();
  </script>
{% endblock %}