{% extends "admin/base.html" %}

{% block title %}Fleets — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, input, badge, empty_state, pagination, page_header %}

{% set _fleet_actions = [
  {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw', 'attrs': '@click="load()"'},
] %}
{% if user.is_server_admin %}
  {% set _fleet_actions = _fleet_actions + [
    {'label': 'New fleet', 'kind': 'primary', 'icon': 'plus', 'attrs': '@click="openModal()"'},
  ] %}
{% endif %}
<div class="space-y-6" x-data="fleetsPage()" x-init="load()">
  {{ page_header('Fleets', 'Switch between fleets or create a new one.',
                 help_anchor='fleets', actions=_fleet_actions) }}

  <!-- Create modal -->
  <template x-teleport="body">
  <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeModal()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1">Create fleet</h3>
      <p class="text-[11px] text-ink-500 mb-5">Fleets are isolated tenants — separate members, machines, and keys.</p>
      <form @submit.prevent="createFleet()" class="space-y-4">
        {{ input("name", label="Name", placeholder="My Fleet", required=true) }}
        {{ input("slug", label="Slug", placeholder="my-fleet", required=true, attrs='pattern="^[a-z0-9][a-z0-9-]*$" title="lowercase letters, numbers, hyphens"') }}
        <p x-show="formError" x-cloak class="text-[12px] text-red-300" x-text="formError"></p>
        <div class="flex justify-end gap-3 pt-2">
          <button type="button" @click="closeModal()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button type="submit" :disabled="creating" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50">
            <span x-text="creating ? 'Creating…' : 'Create'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
  </template>

  {% call card() %}
    <!-- Loading state -->
    <div x-show="pagination.loading" x-cloak class="py-8 text-center text-[13px] text-ink-500">
      <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>
      Loading fleets…
    </div>

    <!-- Error state -->
    <div x-show="!pagination.loading && pagination.error" x-cloak class="py-8 text-center">
      <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
      <p class="text-[13px] text-ink-200">Couldn't load fleets.</p>
      <p class="text-[12px] text-ink-500 mt-1" x-text="pagination.error"></p>
      <button @click="load()" class="mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">
        Try again
      </button>
    </div>

    <!-- Empty state -->
    <div x-show="!pagination.loading && !pagination.error && pagination.items.length === 0" x-cloak class="py-12 text-center">
      <i data-lucide="boxes" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
      <p class="text-[13px] font-medium text-ink-200">No fleets yet</p>
      <p class="text-[12px] text-ink-500 mt-1">
        {% if user.is_server_admin %}
        Click <b class="text-ink-200">+ New fleet</b> to create your first one.
        {% else %}
        Ask a server admin to add you to a fleet.
        {% endif %}
      </p>
    </div>

    <!-- List -->
    <div x-show="!pagination.loading && !pagination.error && pagination.items.length > 0" x-cloak class="divide-y divide-white/[0.06]">
      <template x-for="f in pagination.items" :key="f.id">
        <div class="flex items-center justify-between gap-3 py-4 group">
          <div class="flex items-center gap-4 min-w-0">
            <div class="w-9 h-9 rounded-md bg-white/[0.04] border border-white/[0.06] flex items-center justify-center text-ink-100 font-semibold text-[13px] flex-shrink-0" x-text="f.name ? f.name[0].toUpperCase() : '·'"></div>
            <div class="min-w-0">
              <div class="flex items-center gap-2">
                <p class="text-[13px] font-medium text-ink-100 truncate" :title="f.name" x-text="f.name"></p>
                <template x-if="f.id === ACTIVE_FLEET_ID">
                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium border border-cmdop-500/30 text-cmdop-300">active</span>
                </template>
              </div>
              <p class="text-[11px] text-ink-500 font-mono truncate">
                <span x-text="f.slug"></span>
                <span class="text-ink-600 mx-1">·</span>
                <span :title="new Date(f.created_at).toLocaleString()" x-text="'Created ' + formatRelative(f.created_at)"></span>
              </p>
            </div>
          </div>
          <div class="flex items-center gap-3 flex-shrink-0">
            <template x-if="f.role">
              <span class="text-[11px] px-2 py-0.5 rounded border border-white/[0.08] text-ink-300" x-text="f.role"></span>
            </template>
            <template x-if="f.disabled_at">
              <span class="text-[11px] px-2 py-0.5 rounded border border-red-500/30 text-red-300">disabled</span>
            </template>
            <template x-if="f.id === ACTIVE_FLEET_ID">
              <span class="text-[12px] text-ink-500">Current</span>
            </template>
            <template x-if="f.id !== ACTIVE_FLEET_ID">
              <a :href="'/admin/switch-fleet?fleet_id=' + f.id" class="text-[13px] text-cmdop-400 hover:text-cmdop-300 font-medium inline-flex items-center gap-1">
                Switch
                <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
              </a>
            </template>
          </div>
        </div>
      </template>
    </div>
    {{ pagination('pagination', per_page_options=[10, 25, 50]) }}
  {% endcall %}
</div>

<script>
const ACTIVE_FLEET_ID = '{{ fleet.id if fleet else "" }}';

function fleetsPage() {
  return {
    ACTIVE_FLEET_ID,
    showModal: false,
    creating: false,
    formError: '',
    // Plan 60 Phase 1.5 — pagination state.
    pagination: paginationState({
      mode: 'offset',
      endpoint: '/api/fleets',
      perPage: 25,
      storageKey: 'cmdop.pagination.fleets.perPage',
    }),

    openModal() {
      this.formError = '';
      this.showModal = true;
      this.$nextTick(() => document.getElementById('name')?.focus());
    },
    closeModal() {
      this.showModal = false;
      this.formError = '';
    },

    async load() {
      await this.pagination.fetch();
      this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
    },

    async createFleet() {
      this.creating = true;
      this.formError = '';
      const body = {
        name: document.getElementById('name').value,
        slug: document.getElementById('slug').value,
        mfa_required: 'none',
      };
      try {
        const res = await fetch('/api/fleets', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (res.ok) {
          toast('Fleet created', 'success');
          this.closeModal();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          this.formError = data.detail || `Failed to create fleet (${res.status})`;
        }
      } catch (e) {
        this.formError = e.message || 'Network error';
      } finally {
        this.creating = false;
      }
    },

    formatRelative(iso) {
      if (!iso) return '—';
      const t = new Date(iso).getTime();
      if (!t) return '—';
      const diff = Math.max(0, Date.now() - t);
      const s = Math.floor(diff / 1000);
      if (s < 60) return `${s}s ago`;
      const m = Math.floor(s / 60);
      if (m < 60) return `${m}m ago`;
      const h = Math.floor(m / 60);
      if (h < 24) return `${h}h ago`;
      const d = Math.floor(h / 24);
      if (d < 7) return `${d}d ago`;
      return new Date(iso).toLocaleDateString();
    },
  };
}
</script>
{% endblock %}