{% extends "django_program/manage/base.html" %}

{% block title %}Visa Letters Report{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb">
  <a href="{% url 'manage:dashboard' conference.slug %}">Dashboard</a>
  <span class="breadcrumb-separator"></span>
  <a href="{% url 'manage:reports-dashboard' conference.slug %}">Reports</a>
  <span class="breadcrumb-separator"></span>
  Visa Letters
</div>
{% endblock %}

{% block page_title %}
<h1>Visa Invitation Letters</h1>
<p>Letter request statistics and status breakdown for {{ conference.name }}</p>
{% endblock %}

{% block page_actions %}
{% if perms.program_conference.export_reports %}
<a href="{% url 'manage:report-visa-letters-export' conference.slug %}" class="btn btn-secondary btn-sm">Export CSV</a>
{% endif %}
{% endblock %}

{% block content %}

{% include "django_program/manage/charts/_chart_utils.html" %}

<div class="stat-grid" style="margin-bottom: 1.5rem;">
  <div class="stat-card">
    <div class="stat-card-value">{{ letter_summary.total }}</div>
    <div class="stat-card-label">Total Requests</div>
  </div>
  <div class="stat-card">
    <div class="stat-card-value" style="color: var(--color-warning);">{{ letter_summary.pending_count }}</div>
    <div class="stat-card-label">Pending Review</div>
  </div>
  <div class="stat-card">
    <div class="stat-card-value" style="color: var(--color-success);">{{ letter_summary.completion_rate|floatformat:1 }}%</div>
    <div class="stat-card-label">Completion Rate</div>
  </div>
  <div class="stat-card">
    <div class="stat-card-value">{% if letter_summary.avg_processing_days is not None %}{{ letter_summary.avg_processing_days|floatformat:1 }}{% else %}--{% endif %}</div>
    <div class="stat-card-label">Avg Processing Days</div>
  </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem;">
  <div class="card card--static">
    <div style="padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light);">
      <div style="font-weight: 700; font-size: 0.95rem; color: var(--color-text);">Status Breakdown</div>
      <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Requests by workflow status</div>
    </div>
    <div style="padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center;">
      <canvas id="chart-visa-status" style="width: 240px; height: 240px; display: block;"></canvas>
      <div id="chart-visa-status-legend" style="margin-left: 1.5rem;"></div>
    </div>
  </div>

  <div class="card card--static">
    <div style="padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light);">
      <div style="font-weight: 700; font-size: 0.95rem; color: var(--color-text);">Top Nationalities</div>
      <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Requests by nationality (top 10)</div>
    </div>
    <div style="padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center;">
      <canvas id="chart-visa-nationality" style="width: 240px; height: 240px; display: block;"></canvas>
      <div id="chart-visa-nationality-legend" style="margin-left: 1.5rem;"></div>
    </div>
  </div>
</div>

{% if letter_requests %}
<table class="data-table">
  <thead>
    <tr>
      <th>Passport Name</th>
      <th>Nationality</th>
      <th>Travel Dates</th>
      <th>Embassy</th>
      <th>Status</th>
      <th>Submitted</th>
      <th>Reviewed By</th>
    </tr>
  </thead>
  <tbody>
    {% for lr in letter_requests %}
    <tr>
      <td>
        {{ lr.passport_name }}
        {% if lr.user.email %}<br><span style="font-size: 0.78rem; color: var(--color-text-muted);">{{ lr.user.email }}</span>{% endif %}
      </td>
      <td>{{ lr.nationality }}</td>
      <td style="font-size: 0.82rem;">{{ lr.travel_from|date:"M j" }} &ndash; {{ lr.travel_until|date:"M j, Y" }}</td>
      <td style="font-size: 0.82rem;">{{ lr.embassy_name|default:"--" }}</td>
      <td>
        {% if lr.status == "submitted" %}
        <span class="badge badge--active">Submitted</span>
        {% elif lr.status == "under_review" %}
        <span class="badge badge--warning">Under Review</span>
        {% elif lr.status == "approved" %}
        <span class="badge badge--active">Approved</span>
        {% elif lr.status == "generated" %}
        <span class="badge badge--active">Generated</span>
        {% elif lr.status == "sent" %}
        <span class="badge badge--active">Sent</span>
        {% elif lr.status == "rejected" %}
        <span class="badge badge--inactive">Rejected</span>
        {% endif %}
      </td>
      <td>{{ lr.created_at|date:"N j, Y" }}</td>
      <td>
        {% if lr.reviewed_by %}
        <span style="font-size: 0.82rem;">{{ lr.reviewed_by.get_full_name|default:lr.reviewed_by.username }}</span>
        {% if lr.reviewed_at %}<br><span style="font-size: 0.72rem; color: var(--color-text-muted);">{{ lr.reviewed_at|date:"N j" }}</span>{% endif %}
        {% else %}
        <span style="color: var(--color-text-muted);">--</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="empty-state">
  <p>No visa letter requests for this conference.</p>
</div>
{% endif %}

<script>
(function() {
  var u = window._chartUtils;
  if (!u) return;
  var rawData = JSON.parse('{{ chart_data|escapejs }}');

  var PALETTE = ['#4338ca','#0d9488','#7c3aed','#d97706','#059669','#dc2626','#2563eb','#c026d3','#f59e0b','#06b6d4'];

  var STATUS_COLORS = {
    'submitted': '#2563eb',
    'under_review': '#d97706',
    'approved': '#059669',
    'generated': '#0d9488',
    'sent': '#4338ca',
    'rejected': '#dc2626'
  };

  function drawDonut(canvasId, legendId, chartData, colors) {
    var canvas = document.getElementById(canvasId);
    var legendEl = document.getElementById(legendId);
    if (!canvas) return;

    function draw() {
      var s = u.setupCanvas(canvas);
      var ctx = s.ctx, w = s.w, h = s.h;
      if (!chartData.length || chartData.every(function(d) { return d.value === 0; })) {
        u.drawEmpty(ctx, w, h, 'No data');
        if (legendEl) legendEl.innerHTML = '';
        return;
      }

      var cx = w / 2, cy = h / 2;
      var outerR = Math.min(w, h) / 2 - 8;
      var innerR = outerR * 0.62;
      var total = chartData.reduce(function(acc, d) { return acc + d.value; }, 0);

      var segments = [];
      var cumAngle = -Math.PI / 2;
      for (var i = 0; i < chartData.length; i++) {
        var sweep = (chartData[i].value / total) * Math.PI * 2;
        segments.push({ start: cumAngle, end: cumAngle + sweep, idx: i });
        cumAngle += sweep;
      }

      u.animate(900, function(t) {
        var progress = u.easeOutQuart ? u.easeOutQuart(t) : u.easeOutCubic(t);
        var maxAngle = -Math.PI / 2 + Math.PI * 2 * progress;
        ctx.clearRect(0, 0, w, h);

        ctx.save();
        ctx.beginPath();
        ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
        ctx.arc(cx, cy, innerR, 0, Math.PI * 2, true);
        ctx.fillStyle = '#f0f1f4';
        ctx.fill();
        ctx.restore();

        for (var i = 0; i < segments.length; i++) {
          var seg = segments[i];
          var drawEnd = Math.min(seg.end, maxAngle);
          if (drawEnd <= seg.start) continue;
          ctx.save();
          ctx.beginPath();
          ctx.arc(cx, cy, outerR, seg.start, drawEnd);
          ctx.arc(cx, cy, innerR, drawEnd, seg.start, true);
          ctx.closePath();
          ctx.fillStyle = colors[i];
          ctx.fill();
          ctx.restore();
        }

        if (progress > 0.5) {
          var a = Math.min(1, (progress - 0.5) / 0.3);
          ctx.save();
          ctx.globalAlpha = a;
          ctx.fillStyle = '#1a1a2e';
          ctx.font = '800 22px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(u.formatNumber(total), cx, cy - 6);
          ctx.fillStyle = '#8889a0';
          ctx.font = '600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
          ctx.fillText('REQUESTS', cx, cy + 14);
          ctx.restore();
        }
      }, function() {
        if (legendEl) {
          var html = '';
          for (var i = 0; i < chartData.length; i++) {
            var pct = total > 0 ? Math.round(chartData[i].value / total * 100) : 0;
            html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">' +
              '<span style="width:10px;height:10px;border-radius:3px;background:' + colors[i] + ';flex-shrink:0;"></span>' +
              '<span style="font-size:12px;color:#555770;min-width:80px;">' + chartData[i].label + '</span>' +
              '<span style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;color:#1a1a2e;">' + u.formatNumber(chartData[i].value) + '</span>' +
              '<span style="font-size:10px;color:#8889a0;">(' + pct + '%)</span>' +
              '</div>';
          }
          legendEl.innerHTML = html;
        }

        canvas.addEventListener('mousemove', function(e) {
          var rect = canvas.getBoundingClientRect();
          var mx = e.clientX - rect.left - cx;
          var my = e.clientY - rect.top - cy;
          var dist = Math.sqrt(mx * mx + my * my);
          var angle = Math.atan2(my, mx);
          if (angle < -Math.PI / 2) angle += Math.PI * 2;

          if (dist >= innerR && dist <= outerR) {
            for (var i = 0; i < segments.length; i++) {
              if (angle >= segments[i].start && angle < segments[i].end) {
                canvas.style.cursor = 'pointer';
                var pct = total > 0 ? (chartData[i].value / total * 100).toFixed(1) : '0';
                u.showTooltip(e,
                  '<div style="font-weight:700;margin-bottom:2px;">' + chartData[i].label + '</div>' +
                  '<div>Count: <strong>' + u.formatNumber(chartData[i].value) + '</strong> (' + pct + '%)</div>'
                );
                return;
              }
            }
          }
          canvas.style.cursor = 'default';
          u.hideTooltip();
        });
        canvas.addEventListener('mouseleave', function() {
          u.hideTooltip();
          canvas.style.cursor = 'default';
        });
      });
    }

    requestAnimationFrame(draw);
    window.addEventListener('resize', (function() {
      var timer;
      return function() { clearTimeout(timer); timer = setTimeout(draw, 200); };
    })());
  }

  /* Status donut */
  var statusData = [];
  var statusColors = [];
  var statusLabels = {
    'submitted': 'Submitted', 'under_review': 'Under Review',
    'approved': 'Approved', 'generated': 'Generated',
    'sent': 'Sent', 'rejected': 'Rejected'
  };
  for (var key in rawData.by_status) {
    if (rawData.by_status[key] > 0) {
      statusData.push({ label: statusLabels[key] || u.capitalize(key), value: rawData.by_status[key] });
      statusColors.push(STATUS_COLORS[key] || PALETTE[statusData.length % PALETTE.length]);
    }
  }
  drawDonut('chart-visa-status', 'chart-visa-status-legend', statusData, statusColors);

  /* Nationality donut */
  var natData = rawData.by_nationality.map(function(d) {
    return { label: d.nationality, value: d.count };
  });
  var natColors = natData.map(function(_, i) { return PALETTE[i % PALETTE.length]; });
  drawDonut('chart-visa-nationality', 'chart-visa-nationality-legend', natData, natColors);
})();
</script>

{% endblock %}