{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Bulk Survey Job Status" %} - PX360{% endblock %}

{% block content %}
<div class="p-6">
  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center gap-2 mb-2">
      <a href="{% url 'surveys:bulk_job_list' %}" class="text-blue hover:text-navy">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
      </a>
    </div>
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
      <i data-lucide="loader-2" class="w-7 h-7 {% if not is_complete %}animate-spin{% endif %}"></i>
      {% trans "Bulk Survey Job" %}
    </h1>
    <p class="text-slate mt-1">{{ job.name }}</p>
  </div>

  <!-- Status Card -->
  <div class="card mb-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold text-navy">{% trans "Job Status" %}</h2>
      <span class="px-3 py-1 rounded-full text-sm font-medium
        {% if job.status == 'completed' %}bg-green-100 text-green-800
        {% elif job.status == 'failed' %}bg-red-100 text-red-800
        {% elif job.status == 'processing' %}bg-blue-100 text-blue-800
        {% else %}bg-yellow-100 text-yellow-800{% endif %}">
        {{ job.get_status_display }}
      </span>
    </div>
    
    <!-- Progress Bar -->
    <div class="mb-4">
      <div class="flex justify-between text-sm mb-1">
        <span class="text-slate">{% trans "Progress" %}</span>
        <span class="font-medium">{{ progress }}%</span>
      </div>
      <div class="w-full bg-slate-200 rounded-full h-2.5">
        <div class="bg-blue h-2.5 rounded-full transition-all duration-500" style="width: {{ progress }}%"></div>
      </div>
    </div>
    
    <!-- Stats Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="bg-light rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-navy">{{ job.total_patients }}</div>
        <div class="text-xs text-slate">{% trans "Total" %}</div>
      </div>
      <div class="bg-green-50 rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-green-600">{{ job.success_count }}</div>
        <div class="text-xs text-green-700">{% trans "Success" %}</div>
      </div>
      <div class="bg-red-50 rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-red-600">{{ job.failed_count }}</div>
        <div class="text-xs text-red-700">{% trans "Failed" %}</div>
      </div>
      <div class="bg-blue-50 rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-blue-600">{{ job.processed_count }}</div>
        <div class="text-xs text-blue-700">{% trans "Processed" %}</div>
      </div>
    </div>
  </div>

  <!-- Job Details -->
  <div class="card mb-6">
    <h3 class="text-sm font-semibold text-navy mb-3">{% trans "Job Details" %}</h3>
    <div class="grid grid-cols-2 gap-4 text-sm">
      <div>
        <span class="text-slate">{% trans "Hospital:" %}</span>
        <span class="font-medium">{{ job.hospital.name }}</span>
      </div>
      <div>
        <span class="text-slate">{% trans "Survey Template:" %}</span>
        <span class="font-medium">{{ job.survey_template.name }}</span>
      </div>
      <div>
        <span class="text-slate">{% trans "Delivery Channel:" %}</span>
        <span class="font-medium">{{ job.get_delivery_channel_display|default:job.delivery_channel }}</span>
      </div>
      <div>
        <span class="text-slate">{% trans "Created By:" %}</span>
        <span class="font-medium">{{ job.created_by.get_full_name|default:"System" }}</span>
      </div>
      <div>
        <span class="text-slate">{% trans "Created At:" %}</span>
        <span class="font-medium">{{ job.created_at|date:"Y-m-d H:i" }}</span>
      </div>
      {% if job.started_at %}
      <div>
        <span class="text-slate">{% trans "Started At:" %}</span>
        <span class="font-medium">{{ job.started_at|date:"Y-m-d H:i" }}</span>
      </div>
      {% endif %}
      {% if job.completed_at %}
      <div>
        <span class="text-slate">{% trans "Completed At:" %}</span>
        <span class="font-medium">{{ job.completed_at|date:"Y-m-d H:i" }}</span>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Failed Patients (if any) -->
  {% if results.failed_patients %}
  <div class="card">
    <h3 class="text-sm font-semibold text-navy mb-3">
      {% trans "Failed Deliveries" %} ({{ results.failed_patients|length }})
    </h3>
    <div class="max-h-64 overflow-y-auto">
      <table class="w-full text-sm">
        <thead class="bg-light">
          <tr>
            <th class="p-2 text-left">{% trans "File Number" %}</th>
            <th class="p-2 text-left">{% trans "Patient Name" %}</th>
            <th class="p-2 text-left">{% trans "Reason" %}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          {% for failure in results.failed_patients %}
          <tr>
            <td class="p-2 font-mono text-xs">{{ failure.file_number|default:"-" }}</td>
            <td class="p-2">{{ failure.patient_name|default:"-" }}</td>
            <td class="p-2 text-red-600">{{ failure.reason }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- Actions -->
  <div class="flex gap-3 mt-6">
    <a href="{% url 'surveys:bulk_job_list' %}" class="btn-secondary">
      {% trans "Back to Jobs" %}
    </a>
    <a href="{% url 'surveys:instance_list' %}" class="btn-primary">
      {% trans "View Surveys" %}
    </a>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  lucide.createIcons();
  
  // Auto-refresh if job is not complete
  {% if not is_complete %}
  setTimeout(function() {
    window.location.reload();
  }, 5000); // Refresh every 5 seconds
  {% endif %}
</script>
{% endblock %}