{% extends "dashboard/base.html" %}

{% block title %}{{ t.connect }} - MCP Hub{% endblock %}
{% block page_title %}{{ t.connect }}{% endblock %}

{% block content %}
<div class="space-y-8">

    <!-- API Keys Section -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t.api_keys }}</h3>
            <button onclick="createKey()" id="create-key-btn"
                    class="btn-primary px-4 py-2 rounded-lg text-white text-sm font-medium">
                + {{ t.generate_key }}
            </button>
        </div>

        <!-- New key alert -->
        {% if new_key %}
        <div class="bg-yellow-50 dark:bg-yellow-500/20 border border-yellow-200 dark:border-yellow-500/50 text-yellow-800 dark:text-yellow-300 px-4 py-3 rounded-lg mb-4">
            <p class="font-medium mb-1">{{ t.your_api_key }}</p>
            <div class="flex items-center gap-2">
                <code class="bg-gray-100 dark:bg-gray-900 px-3 py-1 rounded text-sm flex-1 overflow-x-auto text-gray-800 dark:text-gray-200">{{ new_key }}</code>
                <button onclick="copyText('{{ new_key }}')" class="text-sm text-yellow-700 dark:text-yellow-300 hover:text-yellow-600 dark:hover:text-yellow-200">{{ t['copy'] }}</button>
            </div>
            <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">{{ t.key_shown_once }}</p>
        </div>
        {% endif %}

        <!-- New Key Modal (stays open until user clicks Done) -->
        <div id="new-key-display" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 w-full max-w-lg mx-4">
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                        <svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {{ t.your_api_key }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/30 rounded-lg p-4">
                        <p class="text-sm text-yellow-700 dark:text-yellow-400">{{ t.key_shown_once }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">API Key</label>
                        <div class="flex items-center gap-2">
                            <code id="new-key-value" class="flex-1 bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-2 text-sm font-mono text-gray-800 dark:text-gray-200 overflow-x-auto"></code>
                            <button onclick="copyNewKey()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white text-sm transition-colors">{{ t['copy'] }}</button>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                    <button onclick="closeNewKeyModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white text-sm transition-colors">
                        {% if lang == 'fa' %}تأیید{% else %}Done{% endif %}
                    </button>
                </div>
            </div>
        </div>

        {% if api_keys %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-700/50">
                    <tr>
                        <th class="px-4 py-3 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.api_key_name }}</th>
                        <th class="px-4 py-3 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">Prefix</th>
                        <th class="px-4 py-3 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">
                            {% if lang == 'fa' %}دسترسی{% else %}Access{% endif %}
                        </th>
                        <th class="px-4 py-3 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">Uses</th>
                        <th class="px-4 py-3 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.actions }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    {% for key in api_keys %}
                    <tr id="key-{{ key.id }}">
                        <td class="px-4 py-3 text-gray-900 dark:text-white">{{ key.name }}</td>
                        <td class="px-4 py-3 text-gray-500 dark:text-gray-400 font-mono text-sm">mhu_{{ key.key_prefix }}...</td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400">
                                {% if lang == 'fa' %}دسترسی کامل{% else %}Full Access{% endif %}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ key.use_count }}</td>
                        <td class="px-4 py-3">
                            <button onclick="deleteKey('{{ key.id }}')" class="text-sm text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300">{{ t.delete }}</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ t.no_api_keys }}</p>
        {% endif %}
    </div>

    <!-- Config Snippets + Connection Guide (unified) -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ t.config_snippets }}</h3>

        {% if sites %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ t.select_site }}</label>
                <select id="config-site" onchange="updateConfig()"
                        class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2.5 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                    {% for site in sites %}
                    <option value="{{ site.alias }}" data-plugin="{{ site.plugin_type }}">{{ site.alias }} ({{ site.plugin_type }})</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ t.select_client }}</label>
                <select id="config-client" onchange="updateConfig()"
                        class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2.5 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                    {% for client in clients %}
                    <option value="{{ client.id }}">{{ client.label }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="relative">
            <pre id="config-output" class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 text-sm text-gray-700 dark:text-gray-300 overflow-x-auto border border-gray-200 dark:border-gray-700 min-h-[120px]">Select a site and client to generate configuration...</pre>
            <button onclick="copyConfig()" class="absolute top-2 {{ 'left-2' if lang == 'fa' else 'right-2' }} text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 px-3 py-1 rounded transition-colors" id="copy-config-btn">{{ t['copy'] }}</button>
        </div>

        <!-- Transport type info (hidden for web-based clients via JS) -->
        <div id="transport-note" class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
            <p class="text-sm text-blue-700 dark:text-blue-400">
                {% if lang == 'fa' %}
                <strong>نکته:</strong> تنظیمات بالا شامل نوع اتصال (<code>streamableHttp</code> برای Claude Desktop و <code>http</code> برای VS Code/Claude Code) می‌باشد. از <code>sse</code> استفاده نکنید — باعث خطای <code>400 Bad Request</code> می‌شود.
                {% else %}
                <strong>Note:</strong> Config above includes the correct transport type (<code>streamableHttp</code> for Claude Desktop, <code>http</code> for VS Code/Claude Code). Do not use <code>sse</code> — it will cause <code>400 Bad Request</code> errors.
                {% endif %}
            </p>
        </div>

        <!-- WordPress SEO plugin note (shown/hidden dynamically by JS based on selected site) -->
        <div id="wp-seo-note" style="display:none" class="mt-3 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-lg p-4">
            <p class="text-sm text-amber-700 dark:text-amber-400">
                {% if lang == 'fa' %}
                <strong>وردپرس:</strong> برای قابلیت‌های SEO، رسانه، و سایر ابزارهای کمکی، افزونه‌ی همراه
                <a href="https://github.com/airano-ir/mcphub/raw/main/wordpress-plugin/airano-mcp-bridge.zip" target="_blank" class="underline">Airano MCP Bridge</a>
                را دانلود و روی سایت وردپرسی خود نصب کنید.
                {% else %}
                <strong>WordPress:</strong> For SEO, media, and other helper tools, download and install the
                <a href="https://github.com/airano-ir/mcphub/raw/main/wordpress-plugin/airano-mcp-bridge.zip" target="_blank" class="underline">Airano MCP Bridge</a>
                companion plugin on your WordPress site.
                {% endif %}
            </p>
        </div>

        <!-- Connection tip (shown only for web-based clients via JS) -->
        <div id="connection-tip" style="display:none" class="mt-3 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30 rounded-lg p-4">
            <p class="text-sm text-green-700 dark:text-green-400">
                {% if lang == 'fa' %}
                <strong>نکته:</strong> فقط آدرس URL کافی است. هنگام اتصال می‌توانید با <strong>API Key</strong> یا <strong>GitHub/Google</strong> احراز هویت کنید.
                {% else %}
                <strong>Tip:</strong> You only need the URL above. When connecting, you can authenticate with an <strong>API Key</strong> or <strong>GitHub/Google</strong>.
                {% endif %}
            </p>
        </div>

        <!-- API Key hint for desktop/CLI clients (hidden for web clients via JS) -->
        <div id="bearer-hint" class="mt-3 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                {% if lang == 'fa' %}
                <strong>API Key:</strong> از بخش API Keys بالا بسازید و مقدار آن را در تنظیمات وارد کنید:
                {% else %}
                <strong>API Key:</strong> Create one above and use it in your config:
                {% endif %}
            </p>
            <code class="block bg-gray-100 dark:bg-gray-900 px-3 py-1.5 rounded text-xs font-mono text-gray-800 dark:text-gray-200">"Authorization": "Bearer mhu_YOUR_API_KEY_HERE"</code>
        </div>

        {% else %}
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ t.no_sites }}. <a href="/dashboard/sites/add{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">{{ t.add_site }}</a></p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function createKey() {
    const name = prompt('Key name (e.g., "Claude Desktop"):');
    if (!name) return;

    const btn = document.getElementById('create-key-btn');
    btn.disabled = true;

    try {
        const resp = await fetch('/api/keys', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: name }),
        });
        const data = await resp.json();
        if (resp.ok && data.key) {
            document.getElementById('new-key-value').textContent = data.key.key;
            document.getElementById('new-key-display').classList.remove('hidden');
            document.getElementById('new-key-display').classList.add('flex');
            // Modal stays open — user clicks "Done" to dismiss
        } else {
            alert(data.error || 'Failed to create key');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
    btn.disabled = false;
}

async function deleteKey(keyId) {
    if (!confirm('Delete this API key?')) return;
    try {
        const resp = await fetch('/api/keys/' + keyId, { method: 'DELETE' });
        if (resp.ok) {
            document.getElementById('key-' + keyId).remove();
        }
    } catch (e) {
        alert('Failed to delete key');
    }
}

const WEB_CLIENTS = ['claude_connectors', 'chatgpt'];
const WP_TYPES = ['wordpress', 'woocommerce'];

async function updateConfig() {
    const siteSelect = document.getElementById('config-site');
    const alias = siteSelect?.value;
    const client = document.getElementById('config-client')?.value;
    if (!alias || !client) return;

    const isWebClient = WEB_CLIENTS.includes(client);

    // Show/hide transport note
    const transportNote = document.getElementById('transport-note');
    if (transportNote) transportNote.style.display = isWebClient ? 'none' : '';

    // Show/hide connection tip (only for web clients)
    const connTip = document.getElementById('connection-tip');
    if (connTip) connTip.style.display = isWebClient ? '' : 'none';

    // Show/hide bearer hint (only for desktop/CLI clients)
    const bearerHint = document.getElementById('bearer-hint');
    if (bearerHint) bearerHint.style.display = isWebClient ? 'none' : '';

    // Show/hide WordPress SEO note based on selected site's plugin type
    const selectedOption = siteSelect.options[siteSelect.selectedIndex];
    const pluginType = selectedOption?.dataset?.plugin || '';
    const wpNote = document.getElementById('wp-seo-note');
    if (wpNote) wpNote.style.display = WP_TYPES.includes(pluginType) ? '' : 'none';

    try {
        const resp = await fetch('/api/config/' + alias + '?client=' + client);
        const data = await resp.json();
        if (resp.ok) {
            document.getElementById('config-output').textContent = data.config;
        }
    } catch (e) {
        document.getElementById('config-output').textContent = 'Error loading config';
    }
}

function copyText(text) {
    navigator.clipboard.writeText(text);
}

function copyNewKey() {
    const key = document.getElementById('new-key-value').textContent;
    navigator.clipboard.writeText(key);
}

function closeNewKeyModal() {
    document.getElementById('new-key-display').classList.add('hidden');
    document.getElementById('new-key-display').classList.remove('flex');
    location.reload();
}

function copyConfig() {
    const text = document.getElementById('config-output').textContent;
    navigator.clipboard.writeText(text);
    const btn = document.getElementById('copy-config-btn');
    btn.textContent = '{{ t.copied }}';
    setTimeout(() => btn.textContent = '{{ t['copy'] }}', 2000);
}

// Load config on page load
{% if sites %}
document.addEventListener('DOMContentLoaded', updateConfig);
{% endif %}
</script>
{% endblock %}