{% extends "console_page.html" %}
{% load waffle_tags %}
{% 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 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <h1 class="text-2xl font-semibold text-gray-800">Agent Secrets</h1>
        <p class="text-sm text-gray-500 mt-1">Manage encrypted secrets for {{ agent.name }}</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 class="flex items-center gap-2">
        <a href="{% url 'agent_secrets_add_form' agent.id %}" class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors w-max sm:self-center">
          <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
          </svg>
          Add Secret
        </a>
      </div>
    </div>
  </div>

  <!-- Security Notice -->
  <div class="bg-blue-50/80 backdrop-blur-sm border border-blue-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-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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-blue-800 mb-1">Secure Encryption</h3>
          <p class="text-sm text-blue-700">
            All secrets are encrypted with AES-256-GCM before storage. Credential secrets can be used via placeholders like <code class="bg-blue-100 px-1 rounded text-xs">x_api_key</code>. Environment variable secrets are injected into sandbox execution.
          </p>
        </div>
      </div>
    </div>
  </div>


  <!-- Existing Secrets -->
  <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">Existing Secrets</h2>
      <p class="text-sm text-gray-500 mt-1">
        {% if has_secrets %}
          Credential and environment variable secrets configured
        {% else %}
          No secrets configured yet
        {% endif %}
      </p>
    </div>

    {% if has_secrets %}
      {% if secrets %}
      <div class="px-6 pt-4 pb-2">
        <h3 class="text-sm font-semibold text-gray-700">Credential Secrets (Domain Scoped)</h3>
      </div>
      <!-- Secrets Table -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">
                  Secret Name
                </span>
              </th>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">
                  Description
                </span>
              </th>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">
                  Status
                </span>
              </th>
              <th scope="col" class="px-6 py-3 text-end">
                <span class="text-xs font-semibold uppercase text-gray-800">
                  Actions
                </span>
              </th>
            </tr>
          </thead>
          
          <tbody class="divide-y divide-gray-200 bg-white">
            {% for domain, domain_secrets in secrets.items %}
              {% for secret_name, secret_data in domain_secrets.items %}
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                          <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1721 9z"/>
                          </svg>
                        </div>
                      </div>
                      <div class="ml-3">
                        <p class="text-sm font-medium text-gray-900">{{ secret_name }}</p>
                        <p class="text-xs text-gray-500">
                          Key: <code class="bg-gray-100 px-1 rounded text-xs">{{ secret_data.key }}</code>
                          {% if domain == "https://*.legacy-migrated.local" %}
                            • Legacy secret (no domain restriction)
                          {% else %}
                            • Restricted to: {{ domain }}
                          {% endif %}
                        </p>
                      </div>
                    </div>
                  </td>
                  
                  <td class="px-6 py-4">
                    {% if secret_data.description %}
                      <p class="text-sm text-gray-900">{{ secret_data.description }}</p>
                    {% else %}
                      <span class="text-sm text-gray-400 italic">No description provided</span>
                    {% endif %}
                  </td>
                  
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      <span class="w-1.5 h-1.5 inline-block bg-green-500 rounded-full"></span>
                      Encrypted
                    </span>
                  </td>
                  
                  <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                    <div class="flex items-center justify-end gap-2">
                      <!-- Edit Secret Button -->
                      <a href="{% url 'agent_secrets_edit' agent.id secret_data.id %}" 
                         class="py-1 px-2 text-xs font-medium rounded border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 transition-colors">
                        Edit
                      </a>
                      
                      <!-- Delete Secret -->
                      <form method="post" action="{% url 'agent_secrets_delete' agent.id secret_data.id %}" class="inline">
                        {% csrf_token %}
                        <button type="submit" 
                                onclick="return confirm('Are you sure you want to delete the secret \'{{ secret_name }}\'? This action cannot be undone.')"
                                class="py-1 px-2 text-xs font-medium rounded border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition-colors">
                          Delete
                        </button>
                      </form>
                      <!-- Re-request Secret -->
                      <form method="post" action="{% url 'agent_secret_rerequest' agent.id secret_data.id %}" class="inline">
                        {% csrf_token %}
                        <button type="submit"
                                onclick="return confirm('Re-request a new value for \"{{ secret_name }}\"? The current value will be cleared.')"
                                class="py-1 px-2 text-xs font-medium rounded border border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 transition-colors">
                          Re-request
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}

      {% if env_var_secrets %}
      <div class="px-6 pt-4 pb-2">
        <h3 class="text-sm font-semibold text-gray-700">Environment Variable Secrets (Global)</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">Secret Name</span>
              </th>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">Env Key</span>
              </th>
              <th scope="col" class="px-6 py-3 text-start">
                <span class="text-xs font-semibold uppercase text-gray-800">Description</span>
              </th>
              <th scope="col" class="px-6 py-3 text-end">
                <span class="text-xs font-semibold uppercase text-gray-800">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 bg-white">
            {% for secret in env_var_secrets %}
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ secret.name }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                <code class="bg-gray-100 px-1 rounded text-xs">{{ secret.key }}</code>
              </td>
              <td class="px-6 py-4">
                {% if secret.description %}
                  <p class="text-sm text-gray-900">{{ secret.description }}</p>
                {% else %}
                  <span class="text-sm text-gray-400 italic">No description provided</span>
                {% endif %}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                <div class="flex items-center justify-end gap-2">
                  <a href="{% url 'agent_secrets_edit' agent.id secret.id %}"
                     class="py-1 px-2 text-xs font-medium rounded border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 transition-colors">
                    Edit
                  </a>
                  <form method="post" action="{% url 'agent_secrets_delete' agent.id secret.id %}" class="inline">
                    {% csrf_token %}
                    <button type="submit"
                            onclick="return confirm('Are you sure you want to delete the secret \'{{ secret.name }}\'? This action cannot be undone.')"
                            class="py-1 px-2 text-xs font-medium rounded border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition-colors">
                      Delete
                    </button>
                  </form>
                  <form method="post" action="{% url 'agent_secret_rerequest' agent.id secret.id %}" class="inline">
                    {% csrf_token %}
                    <button type="submit"
                            onclick="return confirm('Re-request a new value for \"{{ secret.name }}\"? The current value will be cleared.')"
                            class="py-1 px-2 text-xs font-medium rounded border border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 transition-colors">
                      Re-request
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
    {% else %}
      <!-- Empty State -->
      <div class="p-8 text-center">
        <div class="flex justify-center mb-4">
          <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
            <svg class="w-8 h-8 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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
            </svg>
          </div>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">No secrets configured</h3>
        <p class="text-sm text-gray-500 mb-4">
          Add your first secret to get started. Secrets allow your agent to access sensitive data like API keys, passwords, and tokens securely.
        </p>
        <div class="text-xs text-gray-400">
          <p><strong>Example names:</strong> "X Password", "API Key", "Database Username"</p>
          <p>Secret keys will be generated automatically: <code>x_password</code>, <code>api_key</code>, <code>database_username</code></p>
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Requested Secrets Summary -->
  <div class="gobii-card-base">
    <div class="px-6 py-4 border-b border-gray-200/70 flex items-center justify-between">
      <div>
        <h2 class="text-lg font-semibold text-gray-800">Requested Secrets</h2>
        <p class="text-sm text-gray-500 mt-1">
          {% if has_requested_secrets %}
            {{ requested_secrets|length }} pending request{{ requested_secrets|length|pluralize }} awaiting values
          {% else %}
            No pending requests
          {% endif %}
        </p>
      </div>
      <div>
        <a href="{% url 'agent_secrets_request' agent.id %}"
          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100">
          Provide Values
        </a>
      </div>
    </div>
    {% if has_requested_secrets %}
      <div class="divide-y divide-gray-100">
        {% for s in requested_secrets %}
          <div class="px-6 py-4 flex items-center justify-between">
            <div>
              <div class="text-sm font-medium text-gray-900">{{ s.name }} <span class="text-xs text-gray-500">(Key: {{ s.key }})</span></div>
              {% if s.secret_type == "env_var" %}
                <div class="text-xs text-gray-500">Type: Environment Variable</div>
              {% else %}
                <div class="text-xs text-gray-500">Type: Credential • Domain: {{ s.domain_pattern }}</div>
              {% endif %}
            </div>
            <form method="post" action="{% url 'agent_requested_secret_remove' agent.id s.id %}">
              {% csrf_token %}
              <button type="submit" class="py-1 px-2 text-xs font-medium rounded border border-red-200 bg-red-50 text-red-700 hover:bg-red-100"
                onclick="return confirm('Remove request for {{ s.name }}?')">
                Remove
              </button>
            </form>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}