{% 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" id="status-cell-{{ site.id }}">
                        {% if site.status == 'active' %}
                        <span class="status-badge 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="status-badge 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="status-badge 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="status-badge 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 status-msg">{{ site.status_msg[:60] }}</p>
                        {% endif %}
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 last-tested-time">
                            {% if site.last_tested_at %}
                            {{ t.last_tested }}: {{ site.last_tested_at[:16] }}
                            {% else %}
                            {{ t.never_tested }}
                            {% endif %}
                        </p>
                    </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>
                            <a href="/dashboard/sites/{{ site.id }}{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
                               class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500">
                                {{ t.get('connect', 'Connect') }}
                            </a>
                            <a href="/dashboard/sites/{{ site.id }}/edit{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
                               class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
                                {{ t.edit }}
                            </a>
                            <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>
function updateStatusBadge(siteId, status) {
    const cell = document.getElementById('status-cell-' + siteId);
    if (!cell) return;
    const badge = cell.querySelector('.status-badge');
    if (badge) {
        const base = 'status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';
        if (status === 'active') {
            badge.className = base + ' bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300';
            badge.textContent = '{{ t.active }}';
        } else {
            badge.className = base + ' bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300';
            badge.textContent = '{{ t.error }}';
        }
    }
    const msgEl = cell.querySelector('.status-msg');
    if (msgEl) msgEl.remove();
    const timeEl = cell.querySelector('.last-tested-time');
    if (timeEl) {
        timeEl.textContent = '{{ t.last_tested }}: {{ t.just_now }}';
    }
}

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' });
        if (!resp.ok) {
            btn.textContent = '{{ t.connection_failed }}';
            btn.className = 'text-sm text-red-600 dark:text-red-400';
            updateStatusBadge(siteId, 'error');
            return;
        }
        const ct = resp.headers.get('content-type') || '';
        if (!ct.includes('application/json')) {
            btn.textContent = '{{ t.connection_failed }}';
            btn.className = 'text-sm text-red-600 dark:text-red-400';
            updateStatusBadge(siteId, 'error');
            return;
        }
        const data = await resp.json();
        if (data.ok) {
            btn.textContent = '{{ t.connection_ok }}';
            btn.className = 'text-sm text-green-600 dark:text-green-400';
            updateStatusBadge(siteId, data.status || 'active');
        } else {
            btn.textContent = '{{ t.connection_failed }}';
            btn.className = 'text-sm text-red-600 dark:text-red-400';
            updateStatusBadge(siteId, data.status || 'error');
        }
    } catch (e) {
        btn.textContent = '{{ t.connection_failed }}';
        btn.className = 'text-sm text-red-600 dark:text-red-400';
        updateStatusBadge(siteId, 'error');
    } finally {
        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 %}
