{% extends "base.html" %}
{% block title %}Upgrade — K8s Dashboard{% endblock %}

{% block content %}
<div x-data="upgradePage()">

  <!-- Header -->
  <div class="flex items-start justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-white">Image Upgrades</h1>
      <p class="text-sm text-gray-500 mt-0.5">
        Review outdated images and trigger the GitOps upgrade workflow.
      </p>
    </div>
    {% if is_checking %}
      <span class="flex items-center gap-2 text-blue-400 text-sm bg-blue-950 px-3 py-1.5 rounded-full ring-1 ring-blue-800">
        <svg class="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
        </svg>
        Checking versions…
      </span>
    {% elif not last_updated %}
      <a href="/"
         class="text-sm text-yellow-400 bg-yellow-950 px-3 py-1.5 rounded ring-1 ring-yellow-800 hover:bg-yellow-900 transition-colors">
        ⚠ No version data — go to Images to start a check
      </a>
    {% else %}
      <span class="text-xs text-gray-500">Data from {{ last_updated }}</span>
    {% endif %}
  </div>

  <!-- Two-column layout -->
  <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

    <!-- Left: outdated images (2/3 width) -->
    <div class="xl:col-span-2 space-y-4">

      <div class="flex items-center justify-between">
        <h2 class="text-base font-semibold text-gray-200">
          Outdated Images
          {% if outdated_apps %}
            <span class="ml-2 text-xs font-normal bg-red-950 text-red-400 ring-1 ring-red-800 px-2 py-0.5 rounded-full">
              {{ outdated_apps | map(attribute='containers') | sum(start=[]) | list | length }} images
            </span>
          {% endif %}
        </h2>
      </div>

      {% if not last_updated %}
        <div class="bg-gray-900 border border-gray-800 rounded-lg px-6 py-12 text-center">
          <div class="text-4xl mb-3">📋</div>
          <div class="text-gray-400 font-medium">No version data yet</div>
          <div class="text-sm text-gray-600 mt-1">
            Visit the <a href="/" class="text-blue-400 hover:underline">Images page</a> to trigger a version check.
          </div>
        </div>
      {% elif not outdated_apps %}
        <div class="bg-gray-900 border border-green-900 rounded-lg px-6 py-12 text-center">
          <div class="text-4xl mb-3">✅</div>
          <div class="text-green-400 font-medium">All images are up to date</div>
          <div class="text-sm text-gray-600 mt-1">Last checked: {{ last_updated }}</div>
        </div>
      {% else %}
        {% for app_data in outdated_apps %}
        <div class="bg-gray-900 border border-gray-800 rounded-lg overflow-hidden">
          <!-- App header -->
          <div class="flex items-center gap-3 px-4 py-2.5 bg-gray-950 border-b border-gray-800">
            <span class="text-xs font-mono px-1.5 py-0.5 rounded
                         {% if app_data.kind == 'Deployment' %}bg-blue-900 text-blue-300{% elif app_data.kind == 'StatefulSet' %}bg-purple-900 text-purple-300{% elif app_data.kind == 'DaemonSet' %}bg-orange-900 text-orange-300{% elif app_data.kind == 'CronJob' %}bg-teal-900 text-teal-300{% else %}bg-gray-700 text-gray-400{% endif %}">
              {{ app_data.kind }}
            </span>
            <span class="text-sm font-semibold text-gray-100">{{ app_data.app }}</span>
            <span class="text-xs text-gray-500 font-mono">{{ app_data.namespace }}</span>
          </div>
          <!-- Containers -->
          <table class="w-full text-xs">
            <thead>
              <tr class="text-gray-600">
                <th class="text-left px-4 py-2 font-medium w-32">Container</th>
                <th class="text-left px-4 py-2 font-medium">Image</th>
                <th class="text-left px-4 py-2 font-medium w-28">Current</th>
                <th class="text-left px-4 py-2 font-medium w-28">Latest</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
              {% for c in app_data.containers %}
              <tr>
                <td class="px-4 py-2.5 text-gray-400 font-mono">{{ c.name }}</td>
                <td class="px-4 py-2.5 text-gray-300 font-mono break-all">
                  {{ c.image_short.rsplit(':', 1)[0] if ':' in c.image_short else c.image_short }}
                </td>
                <td class="px-4 py-2.5 font-mono text-gray-500">{{ c.tag }}</td>
                <td class="px-4 py-2.5 font-mono text-red-400 font-semibold">{{ c.latest_tag or '—' }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% endfor %}
      {% endif %}
    </div>

    <!-- Right: trigger + history (1/3 width) -->
    <div class="space-y-6">

      <!-- Trigger card -->
      <div class="bg-gray-900 border border-gray-800 rounded-lg p-5">
        <h2 class="text-base font-semibold text-gray-200 mb-1">Trigger Upgrade</h2>
        <p class="text-xs text-gray-500 mb-4">
          Creates a Job from the <code class="text-gray-400">upgrade-requester</code> CronJob.
          The workflow checks outdated images, requests Mattermost approval, then commits
          updated image tags to the ArgoCD GitOps repo.
        </p>

        <!-- Info rows -->
        <div class="space-y-2 mb-5 text-xs">
          <div class="flex justify-between">
            <span class="text-gray-500">Approval timeout</span>
            <span class="text-gray-300">60 min</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">Applies changes via</span>
            <span class="text-gray-300">GitOps / ArgoCD</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">Scheduled run</span>
            <span class="text-gray-300">Every Monday 09:00 UTC</span>
          </div>
        </div>

        <button @click="trigger()"
                :disabled="triggering || triggerDone"
                class="w-full py-2.5 rounded-lg text-sm font-semibold transition-all
                       bg-blue-600 hover:bg-blue-500 text-white
                       disabled:opacity-50 disabled:cursor-not-allowed">
          <span x-show="!triggering && !triggerDone">⚡ Trigger Upgrade Now</span>
          <span x-show="triggering" x-cloak class="flex items-center justify-center gap-2">
            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
            </svg>
            Creating job…
          </span>
          <span x-show="triggerDone" x-cloak>✓ Job Created</span>
        </button>

        <!-- Result -->
        <div x-show="triggerResult" x-cloak class="mt-3 p-2.5 rounded text-xs font-mono break-all"
             :class="triggerError ? 'bg-red-950 text-red-400 ring-1 ring-red-800' : 'bg-green-950 text-green-400 ring-1 ring-green-800'"
             x-text="triggerResult">
        </div>
      </div>

      <!-- Recent jobs -->
      <div class="bg-gray-900 border border-gray-800 rounded-lg p-5">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base font-semibold text-gray-200">Recent Jobs</h2>
          <button @click="refreshJobs()"
                  class="text-xs text-gray-500 hover:text-gray-300 transition-colors">
            ↻ Refresh
          </button>
        </div>

        <div x-show="!jobs.length" class="text-xs text-gray-600 text-center py-4">
          No upgrade jobs found
        </div>

        <div class="space-y-2">
          <template x-for="job in jobs" :key="job.name">
            <div class="flex items-start gap-3 p-2.5 bg-gray-950 rounded border border-gray-800">
              <!-- Status dot -->
              <div class="mt-0.5 w-2 h-2 rounded-full flex-shrink-0"
                   :class="{
                     'bg-green-500': job.status === 'succeeded',
                     'bg-red-500':   job.status === 'failed',
                     'bg-blue-400 animate-pulse': job.status === 'running'
                   }">
              </div>
              <div class="min-w-0 flex-1">
                <div class="text-xs font-mono text-gray-300 truncate" x-text="job.name"></div>
                <div class="flex items-center gap-2 mt-0.5">
                  <span class="text-xs capitalize font-medium"
                        :class="{
                          'text-green-400': job.status === 'succeeded',
                          'text-red-400':   job.status === 'failed',
                          'text-blue-400':  job.status === 'running'
                        }"
                        x-text="job.status">
                  </span>
                  <span class="text-xs text-gray-600"
                        x-text="job.created ? new Date(job.created).toLocaleString() : ''">
                  </span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
function upgradePage() {
  return {
    triggering: false,
    triggerDone: false,
    triggerResult: '',
    triggerError: false,
    jobs: {{ jobs | tojson }},

    async trigger() {
      this.triggering = true;
      this.triggerResult = '';
      this.triggerError = false;
      try {
        const res = await fetch('/api/upgrade/trigger', { method: 'POST' });
        const data = await res.json();
        if (!res.ok) {
          this.triggerError = true;
          this.triggerResult = data.error || 'Unknown error';
        } else {
          this.triggerDone = true;
          this.triggerResult = 'Job created: ' + data.job_name;
          setTimeout(() => this.refreshJobs(), 1000);
        }
      } catch (e) {
        this.triggerError = true;
        this.triggerResult = e.message;
      } finally {
        this.triggering = false;
      }
    },

    async refreshJobs() {
      try {
        const res = await fetch('/api/upgrade/jobs');
        const data = await res.json();
        this.jobs = data.jobs;
      } catch (e) {
        console.error('Failed to refresh jobs:', e);
      }
    }
  }
}
</script>
{% endblock %}