{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <p class="ui-eyebrow">Admin Only</p>
  <div class="mt-3 flex items-center justify-between">
    <div>
      <h1 class="ui-page-title mt-0">Sync Operation Details</h1>
      <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        <a href="/admin/configurations/{{ sync.config_id }}" class="text-brand-500 dark:text-brand-300 hover:text-brand-500 dark:hover:text-brand-200">{{ config.name }}</a>
      </p>
    </div>
    <span class="ui-pill uppercase tracking-wider
      {% if sync.status == 'completed' %}
        ui-pill-success
      {% elif sync.status == 'failed' %}
        ui-pill-danger
      {% elif sync.status == 'in_progress' %}
        ui-pill-blue
      {% elif sync.status == 'queued' %}
        ui-pill-warning
      {% else %}
        ui-pill-neutral
      {% endif %}
    ">{{ sync.status | replace('_', ' ') | title }}</span>
  </div>

  <!-- Sync Metrics -->
  <div class="mt-6 grid gap-4 md:grid-cols-4">
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Queued At</div>
      <div class="mt-1 text-sm text-slate-700 dark:text-slate-200">
        {{ sync.queued_at.strftime('%Y-%m-%d %H:%M:%S UTC') if sync.queued_at else '-' }}
      </div>
    </div>
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Started At</div>
      <div class="mt-1 text-sm text-slate-700 dark:text-slate-200">
        {{ sync.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') if sync.started_at else '-' }}
      </div>
    </div>
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Completed At</div>
      <div class="mt-1 text-sm text-slate-700 dark:text-slate-200">
        {{ sync.completed_at.strftime('%Y-%m-%d %H:%M:%S UTC') if sync.completed_at else '-' }}
      </div>
    </div>
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Duration</div>
      <div class="mt-1 text-sm text-slate-700 dark:text-slate-200">
        {% if sync.started_at and sync.completed_at %}
          {{ ((sync.completed_at - sync.started_at).total_seconds()) | round(1) }}s
        {% elif sync.started_at %}
          Running...
        {% else %}
          -
        {% endif %}
      </div>
    </div>
  </div>

  <div class="mt-4 grid gap-4 md:grid-cols-2">
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Jobs Retrieved</div>
      <div class="mt-1 text-2xl font-bold text-slate-700 dark:text-slate-200">{{ sync.jobs_retrieved_count or 0 }}</div>
    </div>
    <div class="rounded-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 p-4">
      <div class="text-[13px] uppercase tracking-wider text-slate-500 dark:text-slate-400">Manifests Updated</div>
      <div class="mt-1 text-2xl font-bold text-slate-700 dark:text-slate-200">{{ sync.manifests_updated_count or 0 }}</div>
    </div>
  </div>

  <!-- Errors Section -->
  {% if sync.errors and sync.errors|length > 0 %}
  <div class="mt-8">
    <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Errors ({{ sync.errors|length }})</h2>
    <div class="mt-3 space-y-3">
      {% for error in sync.errors %}
      <div class="rounded-none border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/20 p-4">
        <div class="flex items-start justify-between">
          <div>
            <span class="rounded-sm bg-red-200 dark:bg-red-900/60 px-2 py-0.5 text-[13px] font-medium text-red-700 dark:text-red-300">{{ error.error_type }}</span>
            {% if error.step_context %}
            <span class="ml-2 text-[13px] text-slate-500 dark:text-slate-400">Step: {{ error.step_context }}</span>
            {% endif %}
          </div>
          <span class="text-[13px] text-slate-400 dark:text-slate-500">{{ error.error_timestamp.strftime('%H:%M:%S') if error.error_timestamp else '' }}</span>
        </div>
        <p class="mt-2 text-sm text-red-700 dark:text-red-200">{{ error.error_message }}</p>

        {% if error.related_entity_id %}
        <p class="mt-2 text-[13px] text-slate-400 dark:text-slate-500">Related entity: {{ error.related_entity_id }}</p>
        {% endif %}

        <!-- Actionable guidance for common errors -->
        {% if 'access denied' in error.error_message.lower() or 'permission' in error.error_message.lower() %}
        <div class="mt-3 border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/20 p-3">
          <p class="text-[13px] font-medium text-amber-600 dark:text-amber-400">Suggested Action:</p>
          <p class="mt-1 text-[13px] text-amber-700 dark:text-amber-300/80">
            Check that the service account has the required permissions. For BigQuery, ensure <code class="bg-slate-200 dark:bg-slate-800 px-1 rounded-sm">roles/bigquery.dataViewer</code> and <code class="bg-slate-200 dark:bg-slate-800 px-1 rounded-sm">roles/bigquery.resourceViewer</code> are granted.
            For GCS, ensure <code class="bg-slate-200 dark:bg-slate-800 px-1 rounded-sm">roles/storage.objectViewer</code> is granted on the manifest bucket.
          </p>
        </div>
        {% elif 'quota' in error.error_message.lower() %}
        <div class="mt-3 border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/20 p-3">
          <p class="text-[13px] font-medium text-amber-600 dark:text-amber-400">Suggested Action:</p>
          <p class="mt-1 text-[13px] text-amber-700 dark:text-amber-300/80">
            BigQuery quota exceeded. Wait a few minutes and retry, or check your project's quota limits in the Google Cloud Console.
          </p>
        </div>
        {% elif 'not found' in error.error_message.lower() %}
        <div class="mt-3 border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/20 p-3">
          <p class="text-[13px] font-medium text-amber-600 dark:text-amber-400">Suggested Action:</p>
          <p class="mt-1 text-[13px] text-amber-700 dark:text-amber-300/80">
            The requested resource was not found. Verify that the GCS bucket and manifest path are correct in the project configuration.
          </p>
        </div>
        {% elif 'timeout' in error.error_message.lower() or 'timed out' in error.error_message.lower() %}
        <div class="mt-3 border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/20 p-3">
          <p class="text-[13px] font-medium text-amber-600 dark:text-amber-400">Suggested Action:</p>
          <p class="mt-1 text-[13px] text-amber-700 dark:text-amber-300/80">
            The operation timed out. This may occur with large datasets. Try again - if the issue persists, consider increasing timeout limits or reducing the query scope.
          </p>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% elif sync.status == 'completed' %}
  <div class="mt-8 rounded-none border border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/20 p-4">
    <p class="text-sm text-brand-500 dark:text-brand-300">Sync completed successfully with no errors.</p>
  </div>
  {% endif %}

  <!-- Sync ID and metadata -->
  <div class="mt-8 border-t border-slate-200 dark:border-slate-800 pt-4 text-[13px] text-slate-400 dark:text-slate-500">
    <p>Sync ID: <span class="font-mono text-slate-500 dark:text-slate-400">{{ sync.id }}</span></p>
    {% if sync.initiated_by_id %}
    <p class="mt-1">Initiated by: <span class="text-slate-500 dark:text-slate-400">{{ sync.initiated_by_id }}</span></p>
    {% endif %}
  </div>

  <!-- Back link -->
  <div class="mt-6">
    <a href="/admin/configurations/{{ sync.config_id }}" class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 transition-colors">
      &larr; Back to Configuration
    </a>
  </div>
</section>
{% endblock %}