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

{% block title %}{% trans "Doctor Rating Import Jobs" %} - PX360{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-6">
    <div class="flex items-center justify-between">
        <div>
            <div class="flex items-center gap-2 text-sm text-slate mb-2">
                <a href="{% url 'physicians:individual_ratings_list' %}" class="hover:text-navy">{% trans "Physician Ratings" %}</a>
                <i data-lucide="chevron-right" class="w-4 h-4"></i>
                <span class="font-bold text-navy">{% trans "Import History" %}</span>
            </div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
                    <i data-lucide="clock" class="w-5 h-5 text-blue"></i>
                </div>
                {% trans "Import History" %}
            </h1>
            <p class="text-slate text-sm mt-1">{% trans "Track doctor rating import jobs" %}</p>
        </div>
        <a href="{% url 'physicians:doctor_rating_import' %}" 
           class="px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2 shadow-lg shadow-navy/20">
            <i data-lucide="plus-circle" class="w-5 h-5"></i>
            {% trans "New Import" %}
        </a>
    </div>
</div>

<!-- Jobs Table -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    {% if jobs %}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Job Name" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Hospital" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Source" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Status" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Progress" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Results" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Created" %}</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-4 px-6">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                {% for job in jobs %}
                <tr class="hover:bg-light/30 transition">
                    <td class="py-4 px-6">
                        <p class="text-sm font-semibold text-navy">{{ job.name|truncatechars:40 }}</p>
                    </td>
                    <td class="py-4 px-6">
                        <p class="text-sm text-slate">{{ job.hospital.name }}</p>
                    </td>
                    <td class="py-4 px-6">
                        {% if job.source == 'his_api' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">
                            <i data-lucide="database" class="w-3 h-3 mr-1"></i>
                            {% trans "HIS API" %}
                        </span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-700">
                            <i data-lucide="upload" class="w-3 h-3 mr-1"></i>
                            {% trans "CSV Upload" %}
                        </span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6">
                        {% if job.status == 'pending' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-700">
                            <i data-lucide="clock" class="w-3 h-3 mr-1"></i>
                            {% trans "Pending" %}
                        </span>
                        {% elif job.status == 'processing' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">
                            <i data-lucide="loader-2" class="w-3 h-3 mr-1 animate-spin"></i>
                            {% trans "Processing" %}
                        </span>
                        {% elif job.status == 'completed' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">
                            <i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
                            {% trans "Completed" %}
                        </span>
                        {% elif job.status == 'failed' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-red-100 text-red-700">
                            <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i>
                            {% trans "Failed" %}
                        </span>
                        {% elif job.status == 'partial' %}
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-amber-100 text-amber-700">
                            <i data-lucide="alert-circle" class="w-3 h-3 mr-1"></i>
                            {% trans "Partial" %}
                        </span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 h-2 bg-slate-100 rounded-full overflow-hidden" style="min-width: 80px;">
                                <div class="h-full {% if job.status == 'failed' %}bg-red-500{% elif job.status == 'completed' %}bg-green-500{% else %}bg-blue-500{% endif %} rounded-full transition-all"
                                     style="width: {{ job.progress_percentage }}%"></div>
                            </div>
                            <span class="text-xs font-semibold text-slate w-10">{{ job.progress_percentage }}%</span>
                        </div>
                    </td>
                    <td class="py-4 px-6">
                        {% if job.is_complete %}
                        <div class="flex items-center gap-3">
                            <span class="inline-flex items-center gap-1 text-xs font-semibold text-green-600">
                                <i data-lucide="check" class="w-3 h-3"></i>
                                {{ job.success_count }}
                            </span>
                            {% if job.failed_count > 0 %}
                            <span class="inline-flex items-center gap-1 text-xs font-semibold text-red-600">
                                <i data-lucide="x" class="w-3 h-3"></i>
                                {{ job.failed_count }}
                            </span>
                            {% endif %}
                        </div>
                        {% else %}
                        <span class="text-xs text-slate">{{ job.processed_count }} / {{ job.total_records }}</span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-6">
                        <p class="text-sm text-slate">{{ job.created_at|date:"Y-m-d H:i" }}</p>
                    </td>
                    <td class="py-4 px-6">
                        <a href="{% url 'physicians:doctor_rating_job_status' job.id %}"
                           class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 text-blue rounded-lg text-xs font-semibold hover:bg-blue-50 transition">
                            <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                            {% trans "View" %}
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="py-16 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-4">
            <i data-lucide="inbox" class="w-10 h-10 text-slate-400"></i>
        </div>
        <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Import Jobs" %}</h3>
        <p class="text-slate text-sm mb-6">{% trans "No import jobs found. Start by importing doctor ratings." %}</p>
        <a href="{% url 'physicians:doctor_rating_import' %}" 
           class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition shadow-lg shadow-navy/20">
            <i data-lucide="upload" class="w-5 h-5"></i>
            {% trans "Import Ratings" %}
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}