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

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

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

<div class="space-y-6" x-data="membersPage()" x-init="load()" @keydown.escape.window="closeAll()">
  <div class="flex items-center justify-between gap-4 flex-wrap">
    <div>
      <h1 class="text-[20px] font-semibold text-ink-100 tracking-tight">Members</h1>
      <p class="text-[12px] text-ink-500 mt-1">
        Fleet <span class="text-ink-300">{{ fleet.name }}</span> ·
        <a href="/admin/invites" class="text-cmdop-400 hover:text-cmdop-300">manage invitations →</a>
      </p>
    </div>
    <div class="flex items-center gap-2">
      <button @click="load()" class="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">
        <i data-lucide="refresh-cw" class="w-3 h-3"></i>
        Refresh
      </button>
      {% if member_role in ('owner', 'admin', 'server-admin') %}
      <button @click="openInvite()" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md transition-colors">
        + Invite member
      </button>
      {% endif %}
    </div>
  </div>

  <!-- Invite modal -->
  <template x-teleport="body">
  <div x-show="showInvite" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeInvite()"></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">Invite member</h3>
      <p class="text-[11px] text-ink-500 mb-5">Sends a one-shot accept URL — the next page shows it ready to copy.</p>
      <form @submit.prevent="inviteMember()" class="space-y-4">
        {{ input("email", label="Email", type="email", placeholder="colleague@example.com", required=true) }}
        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Role</label>
          <select id="role" x-model="form.role" class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors">
            <option value="member">Member — can use the fleet</option>
            <option value="admin">Admin — can invite + manage</option>
            <option value="guest">Guest — read-only</option>
            {% if member_role in ('owner', 'server-admin') %}
            <option value="owner">Owner — full control</option>
            {% endif %}
          </select>
        </div>
        <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="closeInvite()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button type="submit" :disabled="inviting" 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="inviting ? 'Inviting…' : 'Invite'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
  </template>

  <!-- Remove confirmation modal -->
  <template x-teleport="body">
  <div x-show="showRemove" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeRemove()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <div class="flex items-start gap-3 mb-4">
        <div class="flex-shrink-0 w-9 h-9 rounded-md bg-red-500/[0.08] border border-red-500/30 flex items-center justify-center">
          <i data-lucide="alert-triangle" class="w-4 h-4 text-red-300"></i>
        </div>
        <div>
          <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">Remove member?</h3>
          <p class="text-[13px] text-ink-400 mt-1">
            <span class="text-ink-200" x-text="removeTarget.label"></span> will lose access to this fleet immediately.
          </p>
          <p class="text-[11px] text-ink-500 mt-2">You can invite them again later.</p>
        </div>
      </div>
      <div class="flex justify-end gap-3">
        <button type="button" @click="closeRemove()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="button" @click="confirmRemove()" :disabled="removeLoading" class="px-3 py-1.5 border border-red-500/30 hover:border-red-500/50 bg-red-500/[0.06] hover:bg-red-500/[0.10] text-red-200 text-[13px] font-medium rounded-md disabled:opacity-50">
          <span x-text="removeLoading ? 'Removing…' : 'Remove'"></span>
        </button>
      </div>
    </div>
  </div>
  </template>

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">User</th>
          <th class="px-4 py-3 font-medium">
            {# Plan 61/2b-W4 — role tooltip explains each level. #}
            <span class="inline-flex items-center gap-1">Role {{ tooltip("Owner: full control, can delete the fleet. Admin: invite + manage members. Member: standard access. Guest: read-only.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">Joined</th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <!-- Loading -->
        <tr x-show="pagination.loading" x-cloak>
          <td colspan="4" class="px-4 py-8 text-center text-ink-500">
            <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>
            Loading members…
          </td>
        </tr>
        <!-- Error -->
        <tr x-show="!pagination.loading && pagination.error" x-cloak>
          <td colspan="4" class="px-4 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 members.</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>
          </td>
        </tr>
        <!-- Empty -->
        <tr x-show="!pagination.loading && !pagination.error && pagination.items.length === 0" x-cloak>
          <td colspan="4" class="px-4 py-12 text-center">
            <i data-lucide="users" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
            <p class="text-[13px] font-medium text-ink-200">No members yet</p>
            <p class="text-[12px] text-ink-500 mt-1">
              {% if member_role in ('owner', 'admin', 'server-admin') %}
              Click <b class="text-ink-200">+ Invite member</b> to add your first teammate.
              {% else %}
              Ask an admin to invite teammates.
              {% endif %}
            </p>
          </td>
        </tr>
        <!-- Rows -->
        <template x-for="m in pagination.items" :key="m.user_id">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3">
              <div class="flex items-center gap-3 min-w-0">
                <div class="w-8 h-8 rounded-full bg-white/[0.04] border border-white/[0.06] flex items-center justify-center text-ink-100 text-[12px] font-semibold flex-shrink-0" x-text="initialFor(m)"></div>
                <div class="min-w-0">
                  <p class="font-medium text-ink-100 truncate" :title="m.display_name || m.email" x-text="m.display_name || m.email"></p>
                  <p class="text-[11px] text-ink-500 font-mono truncate" :title="m.email" x-text="m.email"></p>
                </div>
              </div>
            </td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border" :class="roleClass(m.role)" x-text="m.role"></span>
            </td>
            <td class="px-4 py-3 text-ink-400 text-[12px] font-mono">
              <span :title="new Date(m.joined_at).toLocaleString()" x-text="formatRelative(m.joined_at)"></span>
            </td>
            <td class="px-4 py-3 text-right">
              <template x-if="canManage(m)">
                <button @click="askRemove(m)" class="text-[12px] text-red-400 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-500/40 rounded px-1.5 py-0.5" :aria-label="'Remove ' + (m.display_name || m.email)">Remove</button>
              </template>
              <template x-if="!canManage(m)">
                <span class="text-[12px] text-ink-600">—</span>
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {{ pagination('pagination') }}
  {% endcall %}
</div>

<script>
const FLEET_ID = '{{ fleet.id }}';
const MY_ROLE = '{{ member_role }}';
const MY_USER_ID = '{{ user.id }}';

function membersPage() {
  return {
    // Plan 60 Phase 1.5 — pagination state for the members table.
    pagination: paginationState({
      mode: 'offset',
      endpoint: `/api/fleets/${FLEET_ID}/members`,
      perPage: 50,
      storageKey: 'cmdop.pagination.members.perPage',
    }),

    showInvite: false,
    inviting: false,
    formError: '',
    form: { role: 'member' },

    showRemove: false,
    removeLoading: false,
    removeTarget: { user_id: '', label: '' },

    openInvite() {
      this.formError = '';
      this.form.role = 'member';
      this.showInvite = true;
      this.$nextTick(() => document.getElementById('email')?.focus());
    },
    closeInvite() {
      this.showInvite = false;
      this.formError = '';
    },

    askRemove(m) {
      this.removeTarget = { user_id: m.user_id, label: m.display_name || m.email };
      this.showRemove = true;
    },
    closeRemove() {
      this.showRemove = false;
      this.removeLoading = false;
    },

    closeAll() {
      if (this.showRemove) return this.closeRemove();
      if (this.showInvite) return this.closeInvite();
    },

    canManage(m) {
      if (m.user_id === MY_USER_ID) return false;
      if (MY_ROLE === 'owner' || MY_ROLE === 'server-admin') return true;
      if (MY_ROLE === 'admin' && m.role !== 'owner') return true;
      return false;
    },

    initialFor(m) {
      const src = (m.display_name || m.email || '·');
      return src[0].toUpperCase();
    },

    roleClass(role) {
      switch (role) {
        case 'owner': return 'border-cmdop-500/30 text-cmdop-300';
        case 'admin': return 'border-emerald-500/30 text-emerald-300';
        case 'guest': return 'border-amber-500/30 text-amber-300';
        default:      return 'border-white/[0.08] text-ink-300';
      }
    },

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

    async inviteMember() {
      this.inviting = true;
      this.formError = '';
      const body = {
        email: document.getElementById('email').value,
        role: this.form.role,
      };
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/members`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (res.ok) {
          toast('Member invited', 'success');
          this.closeInvite();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          this.formError = data.detail || `Failed to invite (${res.status})`;
        }
      } catch (e) {
        this.formError = e.message || 'Network error';
      } finally {
        this.inviting = false;
      }
    },

    async confirmRemove() {
      this.removeLoading = true;
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/members/${this.removeTarget.user_id}`, { method: 'DELETE' });
        if (res.ok || res.status === 204) {
          toast(`Removed ${this.removeTarget.label}`, 'success');
          this.closeRemove();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to remove', 'error');
          this.removeLoading = false;
        }
      } catch (e) {
        toast(e.message || 'Network error', 'error');
        this.removeLoading = 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 %}