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

{% block title %}{% trans "Fetch Doctor Ratings from HIS" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .field-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }
</style>
{% endblock %}

{% block content %}
<div class="p-8">
  <!-- Header -->
  <header class="mb-8">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
          <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
            <i data-lucide="cloud-download" class="w-5 h-5 text-blue-600"></i>
          </div>
          {% trans "Fetch Doctor Ratings from HIS" %}
        </h1>
        <p class="text-slate mt-2 text-sm">{% trans "Fetch doctor ratings directly from HIS API by date range" %}</p>
      </div>
      <div class="flex items-center gap-3">
        <a href="{% url 'physicians:doctor_rating_import' %}"
           class="px-5 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 hover:border-slate-300 transition flex items-center gap-2">
          <i data-lucide="upload" class="w-4 h-4"></i>
          {% trans "CSV Import" %}
        </a>
        <a href="{% url 'physicians:doctor_rating_job_list' %}"
           class="px-5 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 hover:border-slate-300 transition flex items-center gap-2">
          <i data-lucide="clock" class="w-4 h-4"></i>
          {% trans "Import History" %}
        </a>
      </div>
    </div>
  </header>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Instructions & Form -->
    <div class="lg:col-span-2 space-y-6">
      <!-- Instructions Card -->
      <section class="bg-white rounded-2xl shadow-sm border border-slate-100">
        <div class="p-6 border-b border-slate-200">
          <h3 class="text-lg font-bold text-navy flex items-center gap-2">
            <i data-lucide="info" class="w-5 h-5 text-blue"></i>
            {% trans "How It Works" %}
          </h3>
        </div>
        <div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 class="font-bold text-navy mb-3">{% trans "Fetch Process:" %}</h4>
              <p class="text-slate text-sm mb-3">
                {% trans "Ratings are fetched from the HIS FetchDoctorRatingMAPI endpoint for the selected date range." %}
              </p>
              <ul class="space-y-2">
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
                  {% trans "Select a date range and submit" %}
                </li>
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
                  {% trans "A background job fetches and processes ratings" %}
                </li>
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
                  {% trans "Track progress on the job status page" %}
                </li>
              </ul>
            </div>
            <div>
              <h4 class="font-bold text-navy mb-3">{% trans "HIS Response Fields:" %}</h4>
              <ul class="space-y-2">
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="asterisk" class="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0"></i>
                  <span><strong class="text-navy">DoctorID</strong> / <strong class="text-navy">DoctorName</strong></span>
                </li>
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="asterisk" class="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0"></i>
                  <span><strong class="text-navy">HospitalName</strong> - {% trans "Matched to PX360 hospital" %}</span>
                </li>
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="asterisk" class="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0"></i>
                  <span><strong class="text-navy">Rating</strong> - {% trans "1-5 rating value" %}</span>
                </li>
                <li class="flex items-start gap-2 text-sm text-slate">
                  <i data-lucide="circle" class="w-4 h-4 text-slate-400 mt-0.5 flex-shrink-0"></i>
                  <span><strong class="text-navy">RatingDate, Department</strong> - {% trans "Optional" %}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- Fetch Form -->
      <section class="bg-white rounded-2xl shadow-sm border border-slate-100">
        <div class="p-6 border-b border-slate-200">
          <h3 class="text-lg font-bold text-navy">{% trans "Select Date Range" %}</h3>
        </div>
        <div class="p-6">
          <form method="post" class="space-y-6" data-loading data-loading-text="{% trans 'Fetching...' %}">
            {% csrf_token %}
            {{ form.hospital }}

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="{{ form.from_date.id_for_label }}" class="field-label block mb-2">
                  {% trans "From Date" %} <span class="text-red-600">*</span>
                </label>
                {{ form.from_date }}
                {% if form.from_date.errors %}
                <div class="text-red-600 text-sm mt-1">{{ form.from_date.errors.0 }}</div>
                {% endif %}
                <p class="text-slate text-xs mt-1">{% trans "Start date for fetching ratings" %}</p>
              </div>

              <div>
                <label for="{{ form.to_date.id_for_label }}" class="field-label block mb-2">
                  {% trans "To Date" %} <span class="text-red-600">*</span>
                </label>
                {{ form.to_date }}
                {% if form.to_date.errors %}
                <div class="text-red-600 text-sm mt-1">{{ form.to_date.errors.0 }}</div>
                {% endif %}
                <p class="text-slate text-xs mt-1">{% trans "End date for fetching ratings" %}</p>
              </div>
            </div>

            {% if form.non_field_errors %}
            <div class="bg-red-50 border border-red-200 rounded-xl p-4">
              {% for error in form.non_field_errors %}
              <p class="text-red-600 text-sm">{{ error }}</p>
              {% endfor %}
            </div>
            {% endif %}

            <div class="flex items-center gap-3 pt-4 border-t border-slate-200">
              <button type="submit" class="px-6 py-2.5 bg-navy text-white rounded-xl font-semibold shadow-md hover:bg-blue transition flex items-center gap-2">
                <i data-lucide="cloud-download" class="w-4 h-4"></i>
                {% trans "Fetch Ratings" %}
              </button>
              <a href="{% url 'physicians:physician_list' %}" class="px-6 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 hover:border-slate-300 transition flex items-center gap-2">
                <i data-lucide="x-circle" class="w-4 h-4"></i>
                {% trans "Cancel" %}
              </a>
            </div>
          </form>
        </div>
      </section>
    </div>

    <!-- Sidebar -->
    <div class="lg:col-span-1">
      <section class="bg-white rounded-2xl shadow-sm border border-slate-100 sticky top-8">
        <div class="p-6 border-b border-slate-200">
          <h3 class="text-lg font-bold text-navy flex items-center gap-2">
            <i data-lucide="zap" class="w-5 h-5 text-yellow-600"></i>
            {% trans "About HIS Fetch" %}
          </h3>
        </div>
        <div class="p-6">
          <p class="text-slate text-sm mb-4">
            {% trans "This fetches ratings directly from the HIS system via the FetchDoctorRatingMAPI API endpoint." %}
          </p>
          <div class="bg-slate-900 text-white p-4 rounded-xl font-mono text-sm space-y-2 mb-4">
            <div class="text-slate-400 text-xs">{% trans "# HIS API Endpoint" %}</div>
            <div class="text-green-400 break-all">GET ?FromDate=...&ToDate=...</div>
          </div>
          <p class="text-slate text-sm">
            <i data-lucide="info" class="w-4 h-4 inline mr-1 text-blue"></i>
            {% trans "The monthly scheduled task uses the same process." %}
          </p>
        </div>

        <!-- Quick Tips -->
        <div class="p-6 border-t border-slate-200">
          <h4 class="font-bold text-navy mb-3 flex items-center gap-2">
            <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-600"></i>
            {% trans "Quick Tips" %}
          </h4>
          <ul class="space-y-3">
            <li class="flex items-start gap-2 text-sm text-slate">
              <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
              {% trans "Use narrow date ranges for faster results" %}
            </li>
            <li class="flex items-start gap-2 text-sm text-slate">
              <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
              {% trans "Hospitals are matched by name from HIS data" %}
            </li>
            <li class="flex items-start gap-2 text-sm text-slate">
              <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
              {% trans "Duplicate ratings for same doctor/date are skipped" %}
            </li>
            <li class="flex items-start gap-2 text-sm text-slate">
              <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
              {% trans "Job runs in background — you can leave the page" %}
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  lucide.createIcons();
</script>
{% endblock %}