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

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

{% block content %}
<div class="space-y-6">
    <!-- Header with Add Site button -->
    <div class="flex items-center justify-between">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ t.my_sites }}</h2>
        <a href="/dashboard/sites/add{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
           class="btn-primary px-4 py-2 rounded-lg text-white text-sm font-medium"
           title="{{ t.add_site }}">
            + {{ t.add_site }}
        </a>
    </div>

    <!-- Flash messages -->
    {% if msg %}
    <div class="bg-green-50 dark:bg-green-500/20 border border-green-200 dark:border-green-500/50 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg">
        {{ msg }}
    </div>
    {% endif %}
    {% if error %}
    <div class="bg-red-50 dark:bg-red-500/20 border border-red-200 dark:border-red-500/50 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
        {{ error }}
    </div>
    {% endif %}

    {% if sites %}
    <!-- Sites table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50 dark:bg-gray-700/50">
                <tr>
                    <th class="px-6 py-4 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.site_alias }}</th>
                    <th class="px-6 py-4 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.plugin_type }}</th>
                    <th class="px-6 py-4 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.site_url }}</th>
                    <th class="px-6 py-4 text-{{ 'right' if lang == 'fa' else 'left' }} text-sm font-medium text-gray-500 dark:text-gray-300">{{ t.status }}</th>
                    <th class="px-6 py-4 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 site in sites %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors" id="site-{{ site.id }}">
                    <td class="px-6 py-4">
                        <span class="text-gray-900 dark:text-white font-medium">{{ site.alias }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300">
                            {{ plugin_names.get(site.plugin_type, site.plugin_type) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-gray-500 dark:text-gray-400 text-sm max-w-xs truncate">{{ site.url }}</td>
                    <td class="px-6 py-4">
                        {% if site.status == 'active' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300">{{ t.active }}</span>
                        {% elif site.status == 'error' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300">{{ t.error }}</span>
                        {% elif site.status == 'pending' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-300">Pending</span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400">{{ site.status }}</span>
                        {% endif %}
                        {% if site.status_msg %}
                        <p class="text-xs text-gray-500 mt-1">{{ site.status_msg[:60] }}</p>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-2">
                            <button onclick="testSite('{{ site.id }}')"
                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300"
                                    id="test-btn-{{ site.id }}">
                                {{ t.test_connection }}
                            </button>
                            <button onclick="deleteSite('{{ site.id }}')"
                                    class="text-sm text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300">
                                {{ t.delete }}
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <!-- Empty state -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
        <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">{{ t.no_sites }}</h3>
        <p class="text-gray-500 mb-6">{{ t.add_first_site }}</p>
        <a href="/dashboard/sites/add{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
           class="btn-primary px-6 py-2 rounded-lg text-white text-sm font-medium">
            + {{ t.add_site }}
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
async function testSite(siteId) {
    const btn = document.getElementById('test-btn-' + siteId);
    btn.textContent = '{{ t.testing }}';
    btn.disabled = true;
    try {
        const resp = await fetch('/api/sites/' + siteId + '/test', { method: 'POST' });
        const data = await resp.json();
        if (data.ok) {
            btn.textContent = '{{ t.connection_ok }}';
            btn.className = 'text-sm text-green-600 dark:text-green-400';
        } else {
            btn.textContent = data.message || '{{ t.connection_failed }}';
            btn.className = 'text-sm text-red-600 dark:text-red-400';
        }
    } catch (e) {
        btn.textContent = '{{ t.error }}';
        btn.className = 'text-sm text-red-600 dark:text-red-400';
    }
    setTimeout(() => {
        btn.textContent = '{{ t.test_connection }}';
        btn.className = 'text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300';
        btn.disabled = false;
    }, 3000);
}

async function deleteSite(siteId) {
    if (!confirm('Are you sure you want to delete this site?')) return;
    try {
        const resp = await fetch('/api/sites/' + siteId, { method: 'DELETE' });
        if (resp.ok) {
            document.getElementById('site-' + siteId).remove();
        }
    } catch (e) {
        alert('Failed to delete site');
    }
}
</script>
{% endblock %}