{% extends "console_page.html" %}

{% block console_content %}
<div class="space-y-6 pb-6" x-data="{}">
  <div class="gobii-card-base">
    <div class="px-6 py-5 border-b border-gray-200/70 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
      <div class="space-y-2">
        <h1 class="text-2xl font-semibold text-gray-800">{{ org.name }}</h1>
        <p class="text-sm text-gray-500">
          Manage members, invitations, and seat usage for this organization.
        </p>
      </div>
      {% if org_billing and can_manage_billing and stripe_enabled %}
        <a href="{% url 'billing' %}"
           class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
          Manage Seats
        </a>
      {% endif %}
    </div>

    {% if org_billing %}
      <div class="px-6 py-5 bg-gray-50/70">
        <dl class="grid gap-4 sm:grid-cols-3">
          <div class="rounded-xl border border-gray-200/80 bg-white px-4 py-3 shadow-sm">
            <dt class="text-xs font-semibold tracking-wide text-gray-500 uppercase">Seats Purchased</dt>
            <dd class="mt-1 text-lg font-semibold text-gray-900">{{ org_billing.purchased_seats }}</dd>
          </div>
          <div class="rounded-xl border border-gray-200/80 bg-white px-4 py-3 shadow-sm">
            <dt class="text-xs font-semibold tracking-wide text-gray-500 uppercase">In Use</dt>
            <dd class="mt-1 text-lg font-semibold text-gray-900">{{ org_billing.seats_reserved }}</dd>
          </div>
          <div class="rounded-xl border border-gray-200/80 bg-white px-4 py-3 shadow-sm">
            <dt class="text-xs font-semibold tracking-wide text-gray-500 uppercase">Available</dt>
            <dd class="mt-1 text-lg font-semibold text-gray-900">
              {{ org_billing.seats_available }}
            </dd>
          </div>
        </dl>
      </div>
    {% endif %}
  </div>

  <div class="gobii-card-base">
    <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h2 class="text-lg font-semibold text-gray-800">Members</h2>
        <p class="text-sm text-gray-500">{{ members|length }} member{{ members|length|pluralize }} in this organization.</p>
      </div>
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2">
        {% if can_manage_members %}
          {% if org_billing and org_billing.seats_available <= 0 %}
            <span class="inline-flex items-center gap-2 rounded-lg border border-yellow-200 bg-yellow-50 px-3 py-1.5 text-xs font-medium text-yellow-800">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 4h.01M10.29 3.86l-7.4 12.84A2 2 0 004.53 20h14.94a2 2 0 001.64-3.2L13.71 3.86a2 2 0 00-3.42 0z" />
              </svg>
              <span>No seats available for standard members</span>
            </span>
          {% endif %}
          <button type="button"
                  class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
                  hx-get="{% url 'org_invite_modal' org_id=org.id %}"
                  hx-target="#modal-container"
                  hx-swap="innerHTML">
            Invite Member
          </button>
        {% else %}
          <div class="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 4h.01M10.29 3.86l-7.4 12.84A2 2 0 004.53 20h14.94a2 2 0 001.64-3.2L13.71 3.86a2 2 0 00-3.42 0z" />
            </svg>
            <span>Read-only access</span>
          </div>
        {% endif %}
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200/70">
        <thead class="bg-gray-50/70">
          <tr>
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Member</th>
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Role</th>
            <th scope="col" class="px-3 md:px-6 py-3 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase">Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200/70">
          {% for member in members %}
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-3 md:px-6 py-4">
                <div class="flex flex-col">
                  <span class="text-sm font-medium text-gray-900">{{ member.user.email }}</span>
                  <span class="text-xs text-gray-500 capitalize">{{ member.get_role_display }}</span>
                </div>
              </td>
              <td class="px-3 md:px-6 py-4">
                {% if can_manage_members %}
                  <form method="post" action="{% url 'org_member_role_update_org' org.id member.user.id %}" class="flex flex-wrap items-center">
                    {% csrf_token %}
                            <select name="role"
                            class="rounded-lg border border-gray-300 bg-white py-2 text-sm text-gray-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            {% if is_org_admin and member.role in admin_locked_roles %}disabled{% else %}onchange="this.form.submit()"{% endif %}>
                      {% for value,label in allowed_role_choices %}
                        <option value="{{ value }}" {% if member.role == value %}selected{% endif %}
                                {% if is_org_admin and value in admin_locked_roles %}disabled{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </form>
                {% else %}
                  <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 capitalize">
                    {{ member.get_role_display }}
                  </span>
                {% endif %}
              </td>
              <td class="px-3 md:px-6 py-4">
                <div class="flex justify-end gap-2">
                  {% if can_manage_members and member.user.id != request.user.id %}
                    <button type="button"
                            class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-1"
                            @click="$dispatch('open-modal', { id: 'org-member-remove-modal', url: '{% url 'org_member_remove_org' org.id member.user.id %}' })">
                      Remove
                    </button>
                  {% endif %}
                  {% if member.user.id == request.user.id %}
                    <button type="button"
                            class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-1"
                            @click="$dispatch('open-modal', { id: 'org-leave-modal', url: '{% url 'org_leave_org' org.id %}' })">
                      Leave
                    </button>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="3" class="px-3 md:px-6 py-6 text-center text-sm text-gray-500">
                No standard members found for this organization.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if solutions_partners %}
    <div class="gobii-card-base">
      <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-lg font-semibold text-gray-800">Solutions Partners</h2>
          <p class="text-sm text-gray-500">{{ solutions_partners|length }} Solutions Partner{{ solutions_partners|length|pluralize }} in this organization.</p>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200/70">
          <thead class="bg-gray-50/70">
            <tr>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Member</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Role</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase">Actions</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200/70">
            {% for member in solutions_partners %}
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-3 md:px-6 py-4">
                  <div class="flex flex-col">
                    <span class="text-sm font-medium text-gray-900">{{ member.user.email }}</span>
                    <span class="text-xs text-gray-500 capitalize">{{ member.get_role_display }}</span>
                  </div>
                </td>
                <td class="px-3 md:px-6 py-4">
                  {% if can_manage_members %}
                    <form method="post" action="{% url 'org_member_role_update_org' org.id member.user.id %}" class="flex flex-wrap items-center">
                      {% csrf_token %}
                      <select name="role"
                              class="rounded-lg border border-gray-300 bg-white py-2 text-sm text-gray-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                              {% if is_org_admin and member.role in admin_locked_roles %}disabled{% else %}onchange="this.form.submit()"{% endif %}>
                        {% for value,label in allowed_role_choices %}
                          <option value="{{ value }}" {% if member.role == value %}selected{% endif %}
                                  {% if is_org_admin and value in admin_locked_roles %}disabled{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                    </form>
                  {% else %}
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 capitalize">
                      {{ member.get_role_display }}
                    </span>
                  {% endif %}
                </td>
                <td class="px-3 md:px-6 py-4">
                  <div class="flex justify-end gap-2">
                    {% if can_manage_members and member.user.id != request.user.id %}
                      <button type="button"
                              class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-1"
                              @click="$dispatch('open-modal', { id: 'org-member-remove-modal', url: '{% url 'org_member_remove_org' org.id member.user.id %}' })">
                        Remove
                      </button>
                    {% endif %}
                    {% if member.user.id == request.user.id %}
                      <button type="button"
                              class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-1"
                              @click="$dispatch('open-modal', { id: 'org-leave-modal', url: '{% url 'org_leave_org' org.id %}' })">
                        Leave
                      </button>
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}

  {% if pending_invites %}
    <div class="gobii-card-base">
      <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-lg font-semibold text-gray-800">Pending Member Invitations</h2>
          <p class="text-sm text-gray-500">{{ pending_invites|length }} invitation{{ pending_invites|length|pluralize }} awaiting acceptance.</p>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200/70">
          <thead class="bg-gray-50/70">
            <tr>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Email</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Details</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase">Actions</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200/70">
            {% for invite in pending_invites %}
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-3 md:px-6 py-4 text-sm font-medium text-gray-900">{{ invite.email }}</td>
                <td class="px-3 md:px-6 py-4 text-sm text-gray-600">
                  <span class="capitalize">{{ invite.get_role_display }}</span>
                  <span class="text-gray-400">·</span>
                  Invited by {{ invite.invited_by.email }}
                  <span class="text-gray-400">·</span>
                  Expires {{ invite.expires_at|date:"M j, Y" }}
                </td>
                <td class="px-3 md:px-6 py-4">
                  <div class="flex justify-end gap-2">
                    <form method="post" action="{% url 'org_invite_resend_org' org.id invite.token %}">
                      {% csrf_token %}
                      <button type="submit"
                              class="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:ring-offset-1">
                        Resend
                      </button>
                    </form>
                    <button type="button"
                            class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-1"
                            @click="$dispatch('open-modal', { id: 'org-invite-revoke-modal', url: '{% url 'org_invite_revoke_org' org.id invite.token %}' })">
                      Revoke
                    </button>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}

  {% if solutions_partner_invites %}
    <div class="gobii-card-base">
      <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-lg font-semibold text-gray-800">Pending Solutions Partner Invitations</h2>
          <p class="text-sm text-gray-500">{{ solutions_partner_invites|length }} invitation{{ solutions_partner_invites|length|pluralize }} awaiting acceptance.</p>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200/70">
          <thead class="bg-gray-50/70">
            <tr>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Email</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">Details</th>
              <th scope="col" class="px-3 md:px-6 py-3 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase">Actions</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200/70">
            {% for invite in solutions_partner_invites %}
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-3 md:px-6 py-4 text-sm font-medium text-gray-900">{{ invite.email }}</td>
                <td class="px-3 md:px-6 py-4 text-sm text-gray-600">
                  <span class="capitalize">{{ invite.get_role_display }}</span>
                  <span class="text-gray-400">·</span>
                  Invited by {{ invite.invited_by.email }}
                  <span class="text-gray-400">·</span>
                  Expires {{ invite.expires_at|date:"M j, Y" }}
                </td>
                <td class="px-3 md:px-6 py-4">
                  <div class="flex justify-end gap-2">
                    <form method="post" action="{% url 'org_invite_resend_org' org.id invite.token %}">
                      {% csrf_token %}
                      <button type="submit"
                              class="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:ring-offset-1">
                        Resend
                      </button>
                    </form>
                    <button type="button"
                            class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-1"
                            @click="$dispatch('open-modal', { id: 'org-invite-revoke-modal', url: '{% url 'org_invite_revoke_org' org.id invite.token %}' })">
                      Revoke
                    </button>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}

  {% include "partials/_org_invite_revoke_modal.html" %}
  {% include "partials/_org_member_remove_modal.html" %}
  {% include "partials/_org_leave_modal.html" %}
</div>
{% endblock %}