{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-2xl mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-50 mb-4">
            <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
            </svg>
        </div>
        <h1 class="text-2xl font-bold">{{ integration.type_display }} installed</h1>
        <p class="text-sm text-gray-500 mt-1"><strong>{{ integration.name }}</strong> is now active in {{ current_org }}.</p>
    </div>

    {# ── API Token (shown once) ───────────────────────────────── #}
    {% if api_token %}
    <div class="mb-8 p-5 bg-amber-50 border border-amber-200 rounded-lg">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
            </svg>
            <div class="min-w-0 flex-1">
                <h3 class="text-sm font-semibold text-amber-800 mb-1">API Token</h3>
                <p class="text-sm text-amber-700 mb-3">This token allows the integration to query the Forage API. Copy it now &mdash; it won't be shown again.</p>
                <div class="relative">
                    <code id="api-token" class="block w-full px-3 py-2 text-sm font-mono bg-white border border-amber-300 rounded-md text-gray-900 break-all select-all">{{ api_token }}</code>
                    <button type="button" onclick="copyToken()" id="copy-btn" class="absolute top-1.5 right-1.5 px-2 py-1 text-xs bg-amber-100 text-amber-700 rounded hover:bg-amber-200 transition-colors">
                        Copy
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# ── What's next ──────────────────────────────────────────── #}
    <div class="mb-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
        <h3 class="text-sm font-semibold text-gray-700 mb-2">What's next</h3>
        <ul class="text-sm text-gray-600 space-y-1.5">
            <li class="flex items-start gap-2">
                <span class="text-gray-400 mt-0.5">1.</span>
                <span>Configure which events trigger notifications on the integration settings page</span>
            </li>
            <li class="flex items-start gap-2">
                <span class="text-gray-400 mt-0.5">2.</span>
                <span>Use the API token to query releases, projects, and notifications from your service</span>
            </li>
            <li class="flex items-start gap-2">
                <span class="text-gray-400 mt-0.5">3.</span>
                <span>Send a test event to verify your endpoint receives payloads correctly</span>
            </li>
        </ul>
    </div>

    <div class="flex gap-3">
        <a href="/orgs/{{ current_org }}/settings/integrations/{{ integration.id }}" class="flex-1 text-center px-4 py-2.5 text-sm font-medium bg-gray-900 text-white rounded-md hover:bg-gray-800 transition-colors">
            Configure integration
        </a>
        <a href="/orgs/{{ current_org }}/settings/integrations" class="flex-1 text-center px-4 py-2.5 text-sm font-medium border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
            Back to integrations
        </a>
    </div>
</section>

<script>
function copyToken() {
    var token = document.getElementById('api-token').textContent;
    navigator.clipboard.writeText(token).then(function() {
        var btn = document.getElementById('copy-btn');
        btn.textContent = 'Copied!';
        setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
    });
}
</script>
{% endblock %}