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

{% block title %}{{ t.projects }}{% endblock %}
{% block page_title %}{{ t.projects }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
        <form method="GET" class="flex flex-wrap items-center gap-4">
            {% if lang and lang != 'en' %}<input type="hidden" name="lang" value="{{ lang }}">{% endif %}
            <!-- Plugin Type Filter -->
            <div class="flex items-center gap-2">
                <label class="text-sm text-gray-500 dark:text-gray-400">{{ t.filter }}:</label>
                <select name="plugin_type" onchange="this.form.submit()"
                    class="px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white text-sm focus:outline-none focus:border-primary-500">
                    <option value="">{{ t.all }} Types</option>
                    {% for plugin_type in available_plugin_types %}
                    <option value="{{ plugin_type }}" {% if selected_plugin_type==plugin_type %}selected{% endif %}>
                        {{ plugin_type|plugin_name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Status Filter -->
            <div class="flex items-center gap-2">
                <select name="status" onchange="this.form.submit()"
                    class="px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white text-sm focus:outline-none focus:border-primary-500">
                    <option value="">{% if lang == 'fa' %}همه وضعیت‌ها{% else %}All Status{% endif %}</option>
                    <option value="healthy" {% if selected_status=='healthy' %}selected{% endif %}>{{ t.healthy }}
                    </option>
                    <option value="warning" {% if selected_status=='warning' %}selected{% endif %}>{% if lang == 'fa'
                        %}هشدار{% else %}Warning{% endif %}</option>
                    <option value="unhealthy" {% if selected_status=='unhealthy' %}selected{% endif %}>{% if lang ==
                        'fa' %}ناسالم{% else %}Unhealthy{% endif %}</option>
                    <option value="unknown" {% if selected_status=='unknown' %}selected{% endif %}>{% if lang == 'fa'
                        %}نامشخص{% else %}Unknown{% endif %}</option>
                </select>
            </div>

            <!-- Search -->
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ search_query }}" placeholder="{{ t.search }}..."
                    class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white text-sm placeholder-gray-400 focus:outline-none focus:border-primary-500">
            </div>

            <button type="submit"
                class="px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg text-white text-sm transition-colors">
                {{ t.search }}
            </button>

            {% if search_query or selected_plugin_type or selected_status %}
            <a href="/dashboard/projects{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
                class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg text-gray-800 dark:text-white text-sm transition-colors">
                {{ t['clear'] }}
            </a>
            {% endif %}
        </form>
    </div>

    <!-- Projects Table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-700/50">
                    <tr>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}نوع{% else %}Plugin{% endif %}
                        </th>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}شناسه{% else %}Site ID{% endif %}
                        </th>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}نام مستعار{% else %}Alias{% endif %}
                        </th>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            URL
                        </th>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}وضعیت{% else %}Status{% endif %}
                        </th>
                        <th
                            class="px-6 py-4 text-{% if lang == 'fa' %}right{% else %}left{% endif %} text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}عملیات{% else %}Actions{% endif %}
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% if projects %}
                    {% for project in projects %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                        <!-- Plugin Type -->
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                {% set plugin_colors = {
                                'wordpress': 'bg-blue-500',
                                'woocommerce': 'bg-purple-500',
                                'wordpress_specialist': 'bg-indigo-500',
                                'gitea': 'bg-green-500',
                                'n8n': 'bg-orange-500',
                                'supabase': 'bg-emerald-500',
                                'openpanel': 'bg-cyan-500',
                                'appwrite': 'bg-pink-500',
                                'directus': 'bg-violet-500',
                                } %}
                                {% set plugin_icons = {
                                'wordpress': 'W',
                                'woocommerce': 'WC',
                                'wordpress_specialist': 'WS',
                                'gitea': 'G',
                                'n8n': 'n8n',
                                'supabase': 'SB',
                                'openpanel': 'OP',
                                'appwrite': 'AW',
                                'directus': 'DI',
                                } %}
                                <div
                                    class="w-8 h-8 {{ plugin_colors.get(project.plugin_type, 'bg-gray-500') }} rounded-lg flex items-center justify-center {% if lang == 'fa' %}ml-3{% else %}mr-3{% endif %}">
                                    <span class="text-xs font-bold text-white">{{ plugin_icons.get(project.plugin_type,
                                        project.plugin_type[:2]|upper) }}</span>
                                </div>
                                <span class="text-sm text-gray-900 dark:text-white">{{ project.plugin_type|plugin_name }}</span>
                            </div>
                        </td>

                        <!-- Site ID -->
                        <td class="px-6 py-4">
                            <span class="text-sm text-gray-700 dark:text-gray-300 font-mono">{{ project.site_id }}</span>
                        </td>

                        <!-- Alias -->
                        <td class="px-6 py-4">
                            {% if project.alias %}
                            <span class="px-2 py-1 bg-primary-500/20 text-primary-400 text-xs rounded-lg font-medium">
                                {{ project.alias }}
                            </span>
                            {% else %}
                            <span class="text-gray-500 text-sm">-</span>
                            {% endif %}
                        </td>

                        <!-- URL -->
                        <td class="px-6 py-4">
                            {% if project.url %}
                            <a href="{{ project.url }}" target="_blank"
                                class="text-sm text-blue-400 hover:text-blue-300 truncate max-w-[200px] block"
                                title="{{ project.url }}">
                                {{ project.url[:40] }}{% if project.url|length > 40 %}...{% endif %}
                            </a>
                            {% else %}
                            <span class="text-gray-500 text-sm">-</span>
                            {% endif %}
                        </td>

                        <!-- Status -->
                        <td class="px-6 py-4">
                            {% if project.health_status == 'healthy' %}
                            <div class="flex items-center">
                                <span
                                    class="w-2 h-2 bg-green-500 rounded-full status-pulse {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %}"></span>
                                <span class="text-sm text-green-400">{{ t.healthy }}</span>
                            </div>
                            {% elif project.health_status == 'warning' %}
                            <div class="flex items-center">
                                <span
                                    class="w-2 h-2 bg-yellow-500 rounded-full {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %}"></span>
                                <span class="text-sm text-yellow-400">{% if lang == 'fa' %}هشدار{% else %}Warning{%
                                    endif %}</span>
                            </div>
                            {% elif project.health_status == 'unhealthy' %}
                            <div class="flex items-center" {% if project.reason %}title="{{ project.reason }}" {% endif
                                %}>
                                <span
                                    class="w-2 h-2 bg-red-500 rounded-full {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %}"></span>
                                <span class="text-sm text-red-400">
                                    {% if lang == 'fa' %}ناسالم{% else %}Unhealthy{% endif %}
                                    {% if project.reason %}
                                    <svg class="w-4 h-4 inline-block ml-1 opacity-70" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    {% endif %}
                                </span>
                            </div>
                            {% else %}
                            <div class="flex items-center">
                                <span
                                    class="w-2 h-2 bg-gray-500 rounded-full {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %}"></span>
                                <span class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}نامشخص{% else %}Unknown{% endif
                                    %}</span>
                            </div>
                            {% endif %}
                        </td>

                        <!-- Actions -->
                        <td class="px-6 py-4">
                            <a href="/dashboard/projects/{{ project.full_id }}{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}"
                                class="inline-flex items-center px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg text-sm text-gray-800 dark:text-white transition-colors">
                                {{ t.view }}
                                <svg class="w-4 h-4 {% if lang == 'fa' %}mr-1 rotate-180{% else %}ml-1{% endif %}"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5l7 7-7 7" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <svg class="w-12 h-12 mx-auto mb-4 text-gray-500 opacity-50" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                            </svg>
                            <p class="text-gray-500 dark:text-gray-400">
                                {% if lang == 'fa' %}پروژه‌ای یافت نشد{% else %}No projects found{% endif %}
                            </p>
                            {% if search_query or selected_plugin_type %}
                            <p class="text-gray-500 text-sm mt-2">
                                {% if lang == 'fa' %}فیلترها را پاک کنید{% else %}Try clearing the filters{% endif %}
                            </p>
                            {% else %}
                            <p class="text-gray-500 text-sm mt-2">
                                {% if lang == 'fa' %}
                                سایت‌ها از طریق <a href="/dashboard/sites{% if lang and lang != 'en' %}?lang={{ lang }}{% endif %}" class="text-primary-400 hover:underline">صفحه سایت‌ها</a> مدیریت می‌شوند.
                                {% else %}
                                Sites are managed via the <a href="/dashboard/sites" class="text-primary-400 hover:underline">My Sites</a> page.
                                {% endif %}
                            </p>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if total_pages > 1 %}
        <div class="px-6 py-4 border-t border-gray-700 flex items-center justify-between">
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {% if lang == 'fa' %}
                نمایش {{ ((page_number - 1) * per_page) + 1 }} تا {{ [page_number * per_page, total_count]|min }} از {{
                total_count }} پروژه
                {% else %}
                Showing {{ ((page_number - 1) * per_page) + 1 }} to {{ [page_number * per_page, total_count]|min }} of
                {{ total_count }} projects
                {% endif %}
            </p>

            <div class="flex items-center gap-2">
                {% if page_number > 1 %}
                <a href="?page={{ page_number - 1 }}{% if selected_plugin_type %}&plugin_type={{ selected_plugin_type }}{% endif %}{% if search_query %}&search={{ search_query }}{% endif %}{% if lang and lang != 'en' %}&lang={{ lang }}{% endif %}"
                    class="px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg text-sm text-gray-800 dark:text-white transition-colors">
                    {% if lang == 'fa' %}قبلی{% else %}Previous{% endif %}
                </a>
                {% endif %}

                {% for page_num in range(1, total_pages + 1) %}
                {% if page_num == page_number %}
                <span class="px-3 py-1.5 bg-primary-600 rounded-lg text-sm text-white">{{ page_num }}</span>
                {% elif page_num == 1 or page_num == total_pages or (page_num >= page_number - 2 and page_num <=
                    page_number + 2) %} <a
                    href="?page={{ page_num }}{% if selected_plugin_type %}&plugin_type={{ selected_plugin_type }}{% endif %}{% if search_query %}&search={{ search_query }}{% endif %}{% if lang and lang != 'en' %}&lang={{ lang }}{% endif %}"
                    class="px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg text-sm text-gray-800 dark:text-white transition-colors">
                    {{ page_num }}
                    </a>
                    {% elif page_num == page_number - 3 or page_num == page_number + 3 %}
                    <span class="text-gray-500">...</span>
                    {% endif %}
                    {% endfor %}

                    {% if page_number < total_pages %} <a
                        href="?page={{ page_number + 1 }}{% if selected_plugin_type %}&plugin_type={{ selected_plugin_type }}{% endif %}{% if search_query %}&search={{ search_query }}{% endif %}{% if lang and lang != 'en' %}&lang={{ lang }}{% endif %}"
                        class="px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg text-sm text-gray-800 dark:text-white transition-colors">
                        {% if lang == 'fa' %}بعدی{% else %}Next{% endif %}
                        </a>
                        {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}