{% extends "base.html" %}

{% block title %}API Key - LSMC Atlas{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">
                    Important: Save this API key now!
                </h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>This is the only time you will see this API key. Store it securely.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6 mb-6">
        <h1 class="text-3xl font-bold mb-6">{{ 'New' if action == 'created' else 'Rotated' }} API Key</h1>

        <div class="mb-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Client Name</h3>
            <p class="text-lg font-semibold text-gray-900">{{ client.client_name }}</p>
        </div>

        <div class="mb-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">API Key</h3>
            <div class="flex items-center gap-2">
                <input
                    type="text"
                    id="api_key"
                    value="{{ api_key }}"
                    readonly
                    class="flex-1 px-4 py-3 border-2 border-blue-300 rounded-md font-mono text-sm bg-blue-50 focus:outline-none"
                />
                <button
                    onclick="copyApiKey()"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded font-medium"
                >
                    Copy
                </button>
            </div>
            <p class="text-xs text-gray-500 mt-2">
                Use this key in the <code class="bg-gray-100 px-1 py-0.5 rounded">X-API-Key</code> header when making requests.
            </p>
        </div>

        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
            <h3 class="text-sm font-medium text-gray-700 mb-2">Example Usage</h3>
            <pre class="text-xs font-mono text-gray-800 overflow-x-auto">curl -H "X-API-Key: {{ api_key }}" \
     https://hub.lsmc.bio/api/integrations/dewey/v1/storage-targets/resolve</pre>
        </div>

        <div class="flex gap-3">
            <a href="/api-clients/{{ client.euid }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-medium inline-block">
                View Client Details
            </a>
            <a href="/api-clients" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded font-medium inline-block">
                Back to API Clients
            </a>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <h2 class="text-xl font-bold mb-4">Security Best Practices</h2>
        <ul class="list-disc list-inside space-y-2 text-sm text-gray-700">
            <li>Store the API key in a secure location (e.g., environment variables, secrets manager)</li>
            <li>Never commit the API key to version control</li>
            <li>Rotate the key regularly or if you suspect it has been compromised</li>
            <li>Use HTTPS for all API requests</li>
            <li>Monitor API usage logs for suspicious activity</li>
            <li>Set appropriate rate limits and IP allowed lists</li>
        </ul>
    </div>
</div>

<script>
function copyApiKey() {
    const input = document.getElementById('api_key');
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices
    
    navigator.clipboard.writeText(input.value).then(() => {
        const button = event.target;
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.classList.add('bg-green-600');
        button.classList.remove('bg-blue-600');
        
        setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove('bg-green-600');
            button.classList.add('bg-blue-600');
        }, 2000);
    }).catch(err => {
        alert('Failed to copy: ' + err);
    });
}
</script>
{% endblock %}