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

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

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

{# Plan 58 — Vercel polish.
   - Show fleets + per-fleet role.
   - Hide the password form when password login is disabled (SSO-only relay).
   - Don't send a stale display_name when only changing the password.
   - Account info reads as a metadata grid; explicit Save button. #}
<div class="max-w-2xl space-y-6" x-data="profilePage()">
  {{ page_header('Profile', 'Manage your account.', help_anchor='profile') }}

  {% call card(title="Account") %}
  <form @submit.prevent="updateDisplayName()" class="space-y-4">
    {{ input("display_name", label="Display name", value=user.display_name or '', placeholder="Your name") }}
    <div class="space-y-1.5">
      <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Email</label>
      <input type="email" value="{{ user.email }}" disabled aria-disabled="true"
             class="w-full px-3 py-2 bg-black border border-white/[0.06] rounded-md text-[13px] text-ink-500 cursor-not-allowed font-mono">
    </div>
    <div class="grid grid-cols-2 gap-4 text-[12px]">
      <div class="space-y-0.5">
        <p class="text-[11px] uppercase tracking-wider font-medium text-ink-500">User ID</p>
        <p class="font-mono text-ink-300 truncate" title="{{ user.id }}">{{ user.id }}</p>
      </div>
      <div class="space-y-0.5">
        <p class="text-[11px] uppercase tracking-wider font-medium text-ink-500">Joined</p>
        <p class="font-mono text-ink-300" title="{{ user.created_at.isoformat() if user.created_at else '' }}">
          {{ user.created_at.strftime('%Y-%m-%d') if user.created_at else '—' }}
        </p>
      </div>
    </div>
    <div class="flex flex-wrap items-center gap-1.5 pt-1">
      {% if user.is_server_admin %}
        {{ badge('Server admin', 'blue') }}
      {% endif %}
      {% if member_role %}
        {{ badge(member_role + ' @ ' + (fleet.name if fleet else 'fleet'), 'default') }}
      {% endif %}
    </div>
    <div class="flex justify-end pt-2">
      <button type="submit" :disabled="savingProfile"
              class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50 transition-colors">
        <span x-text="savingProfile ? 'Saving…' : 'Save changes'">Save changes</span>
      </button>
    </div>
  </form>
  {% endcall %}

  {% call card(title="Fleet memberships", subtitle="Roles per fleet you can access") %}
    {% if fleets %}
      <ul class="divide-y divide-white/[0.06] -my-2">
        {% for f, role in fleets %}
        <li class="flex items-center justify-between py-2.5 gap-3">
          <div class="min-w-0">
            <p class="text-[13px] text-ink-100 truncate">{{ f.name }}</p>
            <p class="text-[11px] text-ink-500 font-mono truncate" title="{{ f.id }}">{{ f.id }}</p>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            {{ badge(role, 'blue' if role == 'server-admin' else 'default') }}
            {% if fleet and f.id == fleet.id %}
              {{ badge('current', 'green') }}
            {% else %}
              <a href="/admin/switch-fleet?fleet_id={{ f.id }}"
                 class="inline-flex items-center gap-1 px-2 py-0.5 text-[11px] text-ink-400 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded transition-colors">
                Switch
              </a>
            {% endif %}
          </div>
        </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-[12px] text-ink-500 py-2">You don't belong to any fleet yet.</p>
    {% endif %}
  {% endcall %}

  {% if password_login_enabled %}
  {% call card(title="Change password", subtitle="Requires your current password") %}
  <form @submit.prevent="changePassword()" class="space-y-4">
    {{ input("current_password", label="Current password", type="password", required=true) }}
    {{ input("new_password", label="New password", type="password", required=true, attrs='minlength="8"') }}
    {{ input("confirm_password", label="Confirm new password", type="password", required=true, attrs='minlength="8"') }}
    <p class="text-[11px] text-ink-500">At least 8 characters.</p>
    <div class="flex justify-end pt-2">
      <button type="submit" :disabled="savingPassword"
              class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50 transition-colors">
        <span x-text="savingPassword ? 'Updating…' : 'Update password'">Update password</span>
      </button>
    </div>
  </form>
  {% endcall %}
  {% else %}
  {% call card(title="Password") %}
    <p class="text-[12px] text-ink-500">
      Password login is disabled on this relay. Sign in via your identity provider.
    </p>
  {% endcall %}
  {% endif %}
</div>

<script>
function profilePage() {
  return {
    savingProfile: false,
    savingPassword: false,

    async updateDisplayName() {
      this.savingProfile = true;
      const body = {display_name: document.getElementById('display_name').value || ''};
      try {
        const res = await fetch('/api/auth/profile', {
          method: 'PATCH',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(body),
        });
        if (res.ok) {
          toast('Profile updated', 'success');
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || `Failed to update (HTTP ${res.status})`, 'error');
        }
      } catch (e) {
        toast(`Network error: ${e.message}`, 'error');
      } finally {
        this.savingProfile = false;
      }
    },

    async changePassword() {
      const current = document.getElementById('current_password').value;
      const newPass = document.getElementById('new_password').value;
      const confirm = document.getElementById('confirm_password').value;

      if (newPass !== confirm) {
        toast('Passwords do not match', 'error');
        return;
      }
      if (newPass.length < 8) {
        toast('Password must be at least 8 characters', 'error');
        return;
      }

      this.savingPassword = true;
      // Send ONLY password fields — don't tunnel display_name through here.
      const body = {current_password: current, new_password: newPass};
      try {
        const res = await fetch('/api/auth/profile', {
          method: 'PATCH',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(body),
        });
        if (res.ok) {
          toast('Password updated', 'success');
          document.getElementById('current_password').value = '';
          document.getElementById('new_password').value = '';
          document.getElementById('confirm_password').value = '';
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || `Failed to update password (HTTP ${res.status})`, 'error');
        }
      } catch (e) {
        toast(`Network error: ${e.message}`, 'error');
      } finally {
        this.savingPassword = false;
      }
    },
  };
}
</script>
{% endblock %}