{% extends "console_page.html" %}

{% block console_content %}
<div class="space-y-6 pb-6">
  <!-- Header -->
  <div class="bg-white/80 backdrop-blur-sm shadow-xl rounded-xl overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200/70">
      <div>
        <h1 class="text-2xl font-semibold text-gray-800">Contact Requests</h1>
        <p class="text-sm text-gray-500 mt-1">Your agent <span class="font-medium">{{ agent.name }}</span> has requested permission to contact the following people</p>
        <a href="{% url 'agent_detail' agent.id %}" class="group flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800 transition-colors mt-3">
          <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
          Back to Agent
        </a>
      </div>
    </div>
  </div>

  <!-- Contact Limit Info -->
  <div class="bg-gray-50/80 backdrop-blur-sm border border-gray-200/60 shadow-xl rounded-xl overflow-hidden">
    <div class="p-4 sm:p-6">
      <div class="flex gap-x-4">
        <div class="flex-shrink-0">
          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-800 mb-1">Contact Limit Status</h3>
          <p class="text-sm text-gray-700">
            Currently using <span class="font-semibold">{{ total_count }}</span>
            {% if contact_cap_unlimited %}
              contacts (unlimited)
            {% else %}
              of <span class="font-semibold">{{ max_contacts }}</span> allowed contacts
            {% endif %}
            {% if pending_invites > 0 %}
              (includes {{ pending_invites }} pending invitation{{ pending_invites|pluralize }})
            {% endif %}
          </p>
          {% if not contact_cap_unlimited %}
            {% if remaining_slots <= 0 %}
              <p class="text-sm text-orange-700 mt-1 font-semibold">
                ⚠️ Contact limit reached. You must remove existing contacts before sending new invitations.
              </p>
            {% elif remaining_slots <= 3 %}
              <p class="text-sm text-orange-700 mt-1">
                Only {{ remaining_slots }} slot{{ remaining_slots|pluralize }} remaining.
              </p>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {% if not has_pending_requests %}
    <!-- No Pending Requests -->
    <div class="bg-gray-50/80 backdrop-blur-sm border border-gray-200/60 shadow-xl rounded-xl overflow-hidden">
      <div class="p-8 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h2 class="mt-2 text-lg font-medium text-gray-900">No Pending Requests</h2>
        <p class="mt-1 text-sm text-gray-500">This agent hasn't requested permission to contact anyone.</p>
        <div class="mt-6">
          <a href="{% url 'agent_detail' agent.id %}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Return to Agent
          </a>
        </div>
      </div>
    </div>
  {% else %}
    <!-- Contact Approval Form -->
    <div class="gobii-card-base">
      <div class="px-6 py-4 border-b border-gray-200/70">
        <h2 class="text-lg font-semibold text-gray-800">Review Contact Requests</h2>
        <p class="text-sm text-gray-500 mt-1">Select which contacts to approve for <span class="font-medium">{{ agent.name }}</span></p>
      </div>
      
      <div class="p-6">
        <form method="post">
          {% csrf_token %}
          
          <div class="space-y-4">
            {% for request in pending_requests %}
              {% with request.is_expired as is_expired %}
              <div class="border border-gray-200 rounded-lg p-4 transition-colors {% if is_expired %}opacity-60 bg-gray-50{% else %}hover:bg-gray-50{% endif %}">
                <div class="flex items-start gap-x-3">
                  <div class="flex h-6 items-center">
                    <input 
                      type="checkbox" 
                      name="approve_{{ request.id }}" 
                      id="approve_{{ request.id }}"
                      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                      {% if not is_expired %}checked{% endif %}
                      {% if is_expired %}disabled aria-disabled="true" data-expired="true"{% endif %}
                      onchange="toggleDirectionCheckboxes('{{ request.id }}')"
                    >
                  </div>
                  <div class="flex-1">
                    <label for="approve_{{ request.id }}" class="text-sm font-medium text-gray-900 cursor-pointer">
                      <div class="flex items-center gap-2">
                        {% if request.channel == "email" %}
                          <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                          </svg>
                        {% else %}
                          <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                          </svg>
                        {% endif %}
                        <span>{{ request.name|default:request.address }}</span>
                        <span class="text-xs text-gray-500">({{ request.address }})</span>
                        {% if is_expired %}
                          <span class="ml-2 inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600">
                            Expired
                          </span>
                        {% endif %}
                      </div>
                    </label>
                    
                    <div class="mt-2 space-y-1">
                      <p class="text-sm text-gray-600">
                        <span class="font-medium">Purpose:</span> {{ request.purpose }}
                      </p>
                      <p class="text-sm text-gray-600">
                        <span class="font-medium">Reason:</span> {{ request.reason }}
                      </p>
                      <p class="text-xs text-gray-500">
                        Requested {{ request.requested_at|timesince }} ago
                      </p>
                      
                      <!-- Direction checkboxes -->
                      <div class="mt-3 ml-7 space-y-2" id="direction_{{ request.id }}">
                        <div class="flex items-center gap-x-2">
                          <input 
                            type="checkbox" 
                            name="inbound_{{ request.id }}" 
                            id="inbound_{{ request.id }}"
                            class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500"
                            {% if request.request_inbound %}checked{% endif %}
                            {% if is_expired %}disabled aria-disabled="true"{% endif %}
                          >
                          <label for="inbound_{{ request.id }}" class="text-sm text-gray-700 cursor-pointer flex items-center gap-1">
                            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                            </svg>
                            Allow receiving messages from this contact
                          </label>
                        </div>
                        <div class="flex items-center gap-x-2">
                          <input 
                            type="checkbox" 
                            name="outbound_{{ request.id }}" 
                            id="outbound_{{ request.id }}"
                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                            {% if request.request_outbound %}checked{% endif %}
                            {% if is_expired %}disabled aria-disabled="true"{% endif %}
                          >
                          <label for="outbound_{{ request.id }}" class="text-sm text-gray-700 cursor-pointer flex items-center gap-1">
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                            </svg>
                            Allow sending messages to this contact
                          </label>
                        </div>
                        {% if request.channel == "sms" %}
                        <div class="flex items-start gap-x-2 rounded-lg border border-amber-200 bg-amber-50/70 px-3 py-2">
                          <input
                            type="checkbox"
                            name="sms_permission_attested_{{ request.id }}"
                            id="sms_permission_attested_{{ request.id }}"
                            class="mt-0.5 w-4 h-4 text-amber-600 bg-gray-100 border-gray-300 rounded focus:ring-amber-500"
                            {% if request.sms_contact_permission_attested %}checked{% endif %}
                            {% if is_expired %}disabled aria-disabled="true"{% endif %}
                          >
                          <label for="sms_permission_attested_{{ request.id }}" class="text-sm text-gray-700 cursor-pointer">
                            I confirm I have permission to contact this number by SMS.
                          </label>
                        </div>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {% endwith %}
            {% endfor %}
          </div>

          <!-- Quick Actions -->
          <div class="mt-4 flex items-center gap-x-4">
            <button type="button" onclick="toggleAll(true)" class="text-sm text-blue-600 hover:text-blue-800">
              Select All
            </button>
            <button type="button" onclick="toggleAll(false)" class="text-sm text-gray-600 hover:text-gray-800">
              Deselect All
            </button>
          </div>

          <!-- Form Actions -->
          <div class="mt-8 flex items-center justify-end gap-x-3">
            <a href="{% url 'agent_detail' agent.id %}" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
              Cancel
            </a>
            <button type="submit" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
              Approve
            </button>
          </div>
        </form>
      </div>
    </div>
  {% endif %}
</div>

<script>
function toggleAll(checked) {
  const checkboxes = document.querySelectorAll('input[type="checkbox"][name^="approve_"]');
  checkboxes.forEach(checkbox => {
    // Skip expired/disabled requests so they remain untouched
    if (!checkbox.disabled) {
      checkbox.checked = checked;
    }
    // Get the request ID from the checkbox name
    const requestId = checkbox.name.replace('approve_', '');
    toggleDirectionCheckboxes(requestId);
  });
}

function toggleDirectionCheckboxes(requestId) {
  const approveCheckbox = document.getElementById('approve_' + requestId);
  const directionDiv = document.getElementById('direction_' + requestId);
  const inboundCheckbox = document.getElementById('inbound_' + requestId);
  const outboundCheckbox = document.getElementById('outbound_' + requestId);
  const smsPermissionCheckbox = document.getElementById('sms_permission_attested_' + requestId);
  
  if (approveCheckbox && directionDiv) {
    const shouldDisable = approveCheckbox.disabled || !approveCheckbox.checked;

    if (shouldDisable) {
      directionDiv.style.display = 'none';
    } else {
      directionDiv.style.display = 'block';
    }

    if (inboundCheckbox) inboundCheckbox.disabled = shouldDisable;
    if (outboundCheckbox) outboundCheckbox.disabled = shouldDisable;
    if (smsPermissionCheckbox) smsPermissionCheckbox.disabled = shouldDisable;
  }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  const approveCheckboxes = document.querySelectorAll('input[type="checkbox"][name^="approve_"]');
  approveCheckboxes.forEach(checkbox => {
    const requestId = checkbox.name.replace('approve_', '');
    toggleDirectionCheckboxes(requestId);
  });
});
</script>
{% endblock %}