{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Research Metrics Dashboard" %}{% endblock %}

{% block content %}
<section class="section fade-in">
  <div class="container">

    <h1 class="h2">{% trans "Research Metrics Dashboard" %}</h1>

    <!-- Current Metrics -->
    {% if metrics_by_year %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Current Metrics" %}</h2>
      <div class="metrics-dashboard">
        {% for metric in metrics_by_year %}
        <div class="metric-card large">
          <h3>{{ metric.year }}</h3>
          <div class="metric-stats">
            <div class="stat">
              <span class="stat-label">h-index</span>
              <span class="stat-value">{{ metric.h_index }}</span>
            </div>
            <div class="stat">
              <span class="stat-label">{% trans "Citations" %}</span>
              <span class="stat-value">{{ metric.citations }}</span>
            </div>
            <div class="stat">
              <span class="stat-label">{% trans "Publications" %}</span>
              <span class="stat-value">{{ metric.publications }}</span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Publications by Year -->
    {% if publications_by_year %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Publications by Year" %}</h2>
      <div class="chart-container">
        <canvas id="publicationsChart"></canvas>
      </div>
      <div class="data-table">
        <table>
          <thead>
            <tr>
              <th>{% trans "Year" %}</th>
              <th>{% trans "Publications" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for item in publications_by_year %}
            <tr>
              <td>{{ item.year }}</td>
              <td>{{ item.count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    {% endif %}

    <!-- Citations by Year -->
    {% if citations_by_year %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Citations by Year" %}</h2>
      <div class="chart-container">
        <canvas id="citationsChart"></canvas>
      </div>
      <div class="data-table">
        <table>
          <thead>
            <tr>
              <th>{% trans "Year" %}</th>
              <th>{% trans "Citations" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for item in citations_by_year %}
            <tr>
              <td>{{ item.year }}</td>
              <td>{{ item.total }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    {% endif %}

    <!-- Publications by Type -->
    {% if publications_by_type %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Publications by Type" %}</h2>
      <div class="chart-container">
        <canvas id="typesChart"></canvas>
      </div>
      <div class="data-table">
        <table>
          <thead>
            <tr>
              <th>{% trans "Type" %}</th>
              <th>{% trans "Count" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for item in publications_by_type %}
            <tr>
              <td>{{ item.publication_type|title }}</td>
              <td>{{ item.count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    {% endif %}

    <!-- Top Cited Publications -->
    {% if top_cited %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Most Cited Publications" %}</h2>
      <div class="publications-list">
        {% for pub in top_cited %}
        <div class="publication-item">
          <h4><a href="{% url 'publication_detail' pub.pk %}">{{ pub.title }}</a></h4>
          <p class="authors">{{ pub.authors }}</p>
          <p class="citations"><strong>{% trans "Citations" %}:</strong> {{ pub.citation_count }}</p>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Add chart rendering logic here if needed
</script>
{% endblock %}