{% extends "base.html" %}

{% block title %}{{ t("import_history.title") }} - IssueDeck{% endblock %}

{% block content %}
<div class="space-y-6 max-w-6xl">
  <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
    <div>
      <h1 class="text-2xl font-display font-bold text-gray-900 dark:text-gray-100">
        {{ t("import_history.title") }}
      </h1>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
        {{ t("import_history.description") }}
      </p>
    </div>
    <div class="flex flex-col gap-2 sm:flex-row">
      <a href="/dashboard/{{ project_key }}/imports/github"
         class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        {{ t("nav.import_github") }}
      </a>
      <a href="/dashboard/{{ project_key }}/imports/files"
         class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold bg-primary-600 text-white hover:bg-primary-700 transition-colors">
        {{ t("nav.import_files") }}
      </a>
    </div>
  </div>

  <form method="get"
        action="/dashboard/{{ project_key }}/imports"
        class="grid gap-3 rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto_auto] md:items-end">
    <div>
      <label for="import-source" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
        {{ t("import_history.filter_source") }}
      </label>
      <select id="import-source"
              name="source"
              class="mt-1 w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
        <option value="all" {% if selected_source == "all" %}selected{% endif %}>{{ t("import_history.source_all") }}</option>
        {% for source_key in ["github", "csv", "json", "markdown"] %}
          <option value="{{ source_key }}" {% if selected_source == source_key %}selected{% endif %}>
            {{ t("import_history.source_" ~ source_key) }}
          </option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="import-state" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
        {{ t("import_history.filter_state") }}
      </label>
      <select id="import-state"
              name="batch_state"
              class="mt-1 w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
        {% for state_key in ["all", "active", "deleted", "mixed"] %}
          <option value="{{ state_key }}" {% if selected_batch_state == state_key %}selected{% endif %}>
            {{ t("import_history.state_" ~ state_key) }}
          </option>
        {% endfor %}
      </select>
    </div>
    <button type="submit"
            class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold bg-ledger-surfaceAlt dark:bg-ledger-darkPanelAlt text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
      {{ t("common.filter") }}
    </button>
    <a href="/dashboard/{{ project_key }}/imports"
       class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
      {{ t("common.reset") }}
    </a>
  </form>

  {% if deleted_count is not none %}
    <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-900 dark:bg-green-950 dark:text-green-200">
      {{ t("import_history.delete_success", count=deleted_count) }}
    </div>
  {% elif restored_count is not none %}
    <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-900 dark:bg-green-950 dark:text-green-200">
      {{ t("import_history.restore_success", count=restored_count) }}
    </div>
  {% elif delete_empty %}
    <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
      {{ t("import_history.delete_empty") }}
    </div>
  {% elif restore_empty %}
    <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
      {{ t("import_history.restore_empty") }}
    </div>
  {% elif delete_missing %}
    <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
      {{ t("import_history.delete_missing") }}
    </div>
  {% elif restore_missing %}
    <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
      {{ t("import_history.restore_missing") }}
    </div>
  {% endif %}

  {% if batches %}
    <div class="space-y-3">
      {% for batch in batches %}
        {% set has_active_items = batch.active_items > 0 %}
        {% set has_deleted_items = batch.deleted_items > 0 %}
        <article class="rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-4">
          <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-950 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300">
                  {{ t("import_history.source_" ~ batch.source_type) }}
                </span>
                <span class="text-xs text-gray-500 dark:text-gray-400">
                  {{ batch.created_at }}
                </span>
              </div>
              <h2 class="mt-2 text-base font-display font-semibold text-gray-900 dark:text-gray-100 truncate">
                {{ batch.source_name }}
              </h2>
              <p class="mt-1 break-words text-xs text-gray-500 dark:text-gray-400">
                {{ t("import_history.batch_tag") }}:
                <code class="font-mono text-gray-700 dark:text-gray-200">{{ batch.batch_tag }}</code>
              </p>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row lg:justify-end">
              <a href="{{ batch.triage_url }}"
                 class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold bg-ledger-surfaceAlt dark:bg-ledger-darkPanelAlt text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                {{ t("import_history.triage_batch") }}
              </a>
              <form method="post" action="/dashboard/{{ project_key }}/imports/{{ batch.batch_tag }}/restore">
                <button type="submit"
                        {% if not has_deleted_items %}disabled aria-disabled="true"{% endif %}
                        class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-green-200 text-green-700 hover:bg-green-50 dark:border-green-900 dark:text-green-300 dark:hover:bg-green-950 transition-colors disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent"
                        data-confirm="{{ t('import_history.confirm_restore_batch') }}"
                        onclick="return confirm(this.dataset.confirm)">
                  {{ t("import_history.restore_batch") }}
                </button>
              </form>
              <form method="post" action="/dashboard/{{ project_key }}/imports/{{ batch.batch_tag }}/delete">
                <button type="submit"
                        {% if not has_active_items %}disabled aria-disabled="true"{% endif %}
                        class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-red-200 text-red-700 hover:bg-red-50 dark:border-red-900 dark:text-red-300 dark:hover:bg-red-950 transition-colors disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent"
                        data-confirm="{{ t('import_history.confirm_delete_batch') }}"
                        onclick="return confirm(this.dataset.confirm)">
                  {{ t("import_history.delete_batch") }}
                </button>
              </form>
            </div>
          </div>

          <dl class="mt-4 grid grid-cols-2 gap-3 md:grid-cols-5">
            {% for label_key, value in [
              ("import_history.planned", batch.items_planned),
              ("import_history.written", batch.items_written),
              ("import_history.active_items", batch.active_items),
              ("import_history.deleted_items", batch.deleted_items),
              ("import_history.skipped", batch.skipped_count),
              ("import_history.status_mapped", batch.status_mapped),
              ("import_history.external_links", batch.external_links)
            ] %}
              <div class="rounded-md border border-ledger-line dark:border-ledger-darkLine px-3 py-2">
                <dt class="text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ t(label_key) }}</dt>
                <dd class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ value }}</dd>
              </div>
            {% endfor %}
          </dl>
        </article>
      {% endfor %}
    </div>
    <div class="flex flex-col gap-3 border-t border-ledger-line pt-4 dark:border-ledger-darkLine sm:flex-row sm:items-center sm:justify-between">
      <p class="text-sm text-gray-500 dark:text-gray-400">
        {{ t("import_history.pagination_summary", start=page_start, end=page_end, total=total_matches) }}
      </p>
      <div class="flex gap-2">
        {% if previous_page_url %}
          <a href="{{ previous_page_url }}"
             class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            {{ t("common.previous") }}
          </a>
        {% else %}
          <span class="inline-flex cursor-not-allowed items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-400 opacity-60">
            {{ t("common.previous") }}
          </span>
        {% endif %}
        {% if next_page_url %}
          <a href="{{ next_page_url }}"
             class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            {{ t("common.next") }}
          </a>
        {% else %}
          <span class="inline-flex cursor-not-allowed items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-semibold border border-ledger-line dark:border-ledger-darkLine text-gray-400 opacity-60">
            {{ t("common.next") }}
          </span>
        {% endif %}
      </div>
    </div>
  {% else %}
    <div class="rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-8 text-center">
      <h2 class="text-base font-display font-semibold text-gray-900 dark:text-gray-100">
        {{ t("import_history.empty_title") }}
      </h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
        {{ t("import_history.empty_body") }}
      </p>
    </div>
  {% endif %}
</div>
{% endblock %}