{% extends "base.html" %}
{% block title %}Integrations{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-title-block">
    <h1 class="page-title glitch-text" data-text="Integrations">Integrations</h1>
    <p class="page-subtitle">API keys and available data sources</p>
  </div>
</div>

<div class="settings-layout">

  <!-- API Keys section -->
  <div class="settings-section">
    <div class="section-header">
      <span class="section-icon neon-green">🔑</span>
      <span class="section-title">API KEYS — DATA SOURCES</span>
    </div>
    <form action="{{ url_for('settings.save_api_keys') }}" method="POST">
      <div class="api-keys-grid">
        {% set api_groups = {
          'Network & Infrastructure': ['shodan', 'censys', 'censys_id', 'censys_secret', 'zoomeye', 'binaryedge', 'securitytrails', 'spyse'],
          'Threat Intelligence': ['virustotal', 'abuseipdb', 'greynoise', 'alienvault', 'urlscan'],
          'Email & Identity': ['hunter', 'hibp', 'fullcontact', 'clearbit'],
          'People Search': ['pipl', 'spokeo', 'whitepages', 'intelius'],
          'Geolocation': ['ipinfo'],
          'Social Media': ['github', 'twitter_bearer', 'instagram', 'tiktok_client_key', 'tiktok_client_secret', 'linkedin_rapidapi', 'youtube'],
          'Domain & WHOIS': ['whoisxml', 'google_cse', 'google_cse_id', 'bing'],
          'Notifications': ['telegram', 'slack_token']
        } %}
        {% for group, key_names in api_groups.items() %}
        <div class="key-group">
          <div class="key-group-title">{{ group }}</div>
          {% for key_name in key_names %}
          <div class="key-row">
            <div class="key-row-header">
              <span class="key-name">{{ key_name }}</span>
              <span class="key-status {% if config.api_keys.get(key_name) %}key-set{% else %}key-missing{% endif %}">
                {% if config.api_keys.get(key_name) %}● SET{% else %}○ NOT SET{% endif %}
              </span>
              {% if config.api_keys.get(key_name) %}
              <button type="button" class="btn-test btn-sm" onclick="testAPI('{{ key_name }}', this)">TEST</button>
              {% endif %}
            </div>
            <div class="key-input-row">
              <input type="hidden" name="api_name" value="{{ key_name }}">
              <input type="password" name="api_key"
                     class="input-field key-input"
                     placeholder="{% if config.api_keys.get(key_name) %}***REDACTED***{% else %}Enter API key...{% endif %}"
                     autocomplete="new-password">
            </div>
          </div>
          {% endfor %}
        </div>
        {% endfor %}
      </div>
      <button type="submit" class="btn btn-primary btn-glow" style="margin-top:1.5rem;">
        🔑 Save API Keys
      </button>
    </form>
  </div>

  <!-- All available APIs reference -->
  <div class="settings-section">
    <div class="section-header">
      <span class="section-icon neon-purple">◉</span>
      <span class="section-title">SUPPORTED DATA SOURCES</span>
    </div>
    <div class="api-ref-grid">
      {% for api in apis %}
      <div class="api-ref-card {% if api.is_configured %}api-configured{% else %}api-not-configured{% endif %}">
        <div class="api-ref-header">
          <span class="api-ref-name">{{ api.name }}</span>
          <span class="api-tier tier-{{ api.tier }}">{{ api.tier }}</span>
          <span class="api-ref-status {% if api.is_configured %}text-green{% else %}text-dim{% endif %}">
            {{ '● ONLINE' if api.is_configured else '○ OFFLINE' }}
          </span>
        </div>
        <p class="api-ref-desc">{{ api.description }}</p>
        <div class="api-ref-meta">
          <span class="api-categories">{{ api.categories|join(', ') }}</span>
          {% if api.sign_up_url %}
          <a href="{{ api.sign_up_url }}" target="_blank" class="api-signup-link">GET KEY ↗</a>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function testAPI(apiName, btn) {
  btn.textContent = '...';
  btn.disabled = true;
  fetch(`/settings/api/test/${apiName}`)
    .then(r => r.json())
    .then(data => {
      const keyRow = btn.closest('.key-row');
      const badge = keyRow ? keyRow.querySelector('.key-status') : null;

      if (data.status === 'ok') {
        btn.textContent = '✓ OK';
        btn.style.color = '#00ff41';
        showToast(`${apiName} — verified (${data.result_count} results)`, 'success');
      } else if (data.status === 'invalid_key') {
        btn.textContent = '⚠ INVALID';
        btn.style.color = '#ffaa00';
        if (badge) {
          badge.textContent = '⚠ INVALID';
          badge.className = 'key-status key-invalid';
        }
        showToast(`${apiName} — key rejected by API. Grab a fresh key.`, 'error');
      } else {
        btn.textContent = '✗ FAIL';
        btn.style.color = '#ff2d55';
        showToast(`${apiName} — ${data.message}`, 'error');
      }
    })
    .catch(() => { btn.textContent = '✗ ERR'; btn.style.color = '#ff2d55'; })
    .finally(() => { setTimeout(() => { btn.textContent = 'TEST'; btn.disabled = false; btn.style.color = ''; }, 3000); });
}
</script>
{% endblock %}