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

{% block main_content %}
<!-- Enhanced Page Header -->
{% set breadcrumbs = [
    {"name": t('nav.home'), "url": "/", "icon": "fas fa-home"},
    {"name": t('nav.projects'), "icon": "fas fa-folder-open"}
] %}
{% set header_title = t('nav.projects') %}
{% set header_subtitle = t('projects.title') %}
{% set header_icon = "fas fa-folder-open" %}
{% set header_actions = [
    {
        "type": "button",
        "text": t('projects.new'),
        "url": "/projects/new",
        "icon": "fas fa-plus",
        "style": "primary"
    },
    {
        "type": "dropdown",
        "text": t('common.actions'),
        "icon": "fas fa-ellipsis-v",
        "style": "secondary",
        "items": [
            {"text": t('common.import'), "url": "/projects/import", "icon": "fas fa-upload"},
            {"text": t('common.export'), "url": "/projects/export", "icon": "fas fa-download"},
            {"text": t('nav.settings'), "url": "/settings", "icon": "fas fa-cog"}
        ]
    }
] %}
{% include "components/page_header.html" %}

<div class="space-y-6">

    <!-- Filters and Search -->
    <div class="card">
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2">
                    <label for="search" class="sr-only">{{ t('projects.search') }}</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="search" name="search" 
                               class="form-input pl-10" 
                               placeholder="{{ t('projects.search_placeholder') }}"
                               hx-get="/projects/search" 
                               hx-trigger="keyup changed delay:300ms" 
                               hx-target="#projects-list">
                    </div>
                </div>
                <div>
                    <select id="type-filter" name="type" class="form-select"
                            hx-get="/projects/filter" 
                            hx-trigger="change" 
                            hx-target="#projects-list">
                        <option value="">{{ t('projects.all_types') }}</option>
                        <option value="general">{{ t('projects.type_general') }}</option>
                        <option value="sequenced">{{ t('projects.type_sequenced') }}</option>
                        <option value="llm_comparison">{{ t('projects.type_llm_comparison') }}</option>
                        <option value="developer">{{ t('projects.type_developer') }}</option>
                    </select>
                </div>
                <div>
                    <select id="sort-filter" name="sort" class="form-select"
                            hx-get="/projects/filter" 
                            hx-trigger="change" 
                            hx-target="#projects-list">
                        <option value="updated_desc">{{ t('projects.sort_recently_updated') }}</option>
                        <option value="created_desc">{{ t('projects.sort_newest') }}</option>
                        <option value="created_asc">{{ t('projects.sort_oldest') }}</option>
                        <option value="name_asc">{{ t('projects.sort_name_asc') }}</option>
                        <option value="name_desc">{{ t('projects.sort_name_desc') }}</option>
                    </select>
                </div>
                {% if is_multi_tenant_mode %}
                <div>
                    <select id="access-filter" name="access" class="form-select"
                            hx-get="/projects/filter" 
                            hx-trigger="change" 
                            hx-target="#projects-list">
                        <option value="">{{ t('projects.all_access') }}</option>
                        <option value="owned">{{ t('projects.owned_by_me') }}</option>
                        <option value="shared">{{ t('projects.shared_with_me') }}</option>
                        <option value="public">{{ t('projects.public_only') }}</option>
                        <option value="private">{{ t('projects.private_only') }}</option>
                    </select>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Projects List -->
    <div id="projects-list">
        {% if projects %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for project in projects %}
                    <div class="bg-white shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
                        <div class="p-6">
                            <!-- Project Header -->
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <div class="flex items-center">
                                        <h3 class="text-lg font-semibold text-gray-900 truncate">
                                            {{ project.title }}
                                        </h3>
                                        {% if project.user_role == 'owner' or project.user_id == current_user_id %}
                                            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                                <i class="fas fa-crown mr-1"></i>
                                                {{ t('projects.owner') }}
                                            </span>
                                        {% elif project.user_role %}
                                            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                                {{ t('projects.role_' + project.user_role) }}
                                            </span>
                                        {% endif %}
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">{{ project.name }}</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <!-- Project Type Badge -->
                                    {% if project.project_type == 'general' %}
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            <i class="fas fa-folder mr-1"></i>
                                            {{ t('projects.type_general') }}
                                        </span>
                                    {% elif project.project_type == 'sequenced' %}
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            <i class="fas fa-list-ol mr-1"></i>
                                            {{ t('projects.type_sequenced') }}
                                        </span>
                                    {% elif project.project_type == 'llm_comparison' %}
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                            <i class="fas fa-balance-scale mr-1"></i>
                                            {{ t('projects.type_llm_comparison') }}
                                        </span>
                                    {% elif project.project_type == 'developer' %}
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            <i class="fas fa-code mr-1"></i>
                                            {{ t('projects.type_developer') }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Project Description -->
                            <div class="mb-4">
                                <p class="text-sm text-gray-600 line-clamp-2">
                                    {{ project.description or t('projects.no_description') }}
                                </p>
                            </div>

                            <!-- Project Stats -->
                            <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
                                <div class="flex items-center space-x-4">
                                    <div class="flex items-center">
                                        <i class="fas fa-file-text mr-1"></i>
                                        <span>{{ project.prompt_count or 0 }} {{ t('projects.prompts') }}</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-rules mr-1"></i>
                                        <span>{{ project.rule_count or 0 }} {{ t('projects.rules') }}</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-users mr-1"></i>
                                        <span>{{ project.member_count or 1 }} {{ t('projects.members') }}</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span>v{{ project.version or 1 }}</span>
                                </div>
                            </div>

                            <!-- Visibility and Sharing -->
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-2">
                                    {% if project.visibility == 'public' %}
                                        <div class="flex items-center text-green-600">
                                            <i class="fas fa-globe mr-1"></i>
                                            <span class="text-xs">{{ t('projects.public') }}</span>
                                        </div>
                                    {% else %}
                                        <div class="flex items-center text-gray-500">
                                            <i class="fas fa-lock mr-1"></i>
                                            <span class="text-xs">{{ t('projects.private') }}</span>
                                        </div>
                                    {% endif %}
                                    {% if project.shared_with_tenant %}
                                        <div class="flex items-center text-blue-600">
                                            <i class="fas fa-share-alt mr-1"></i>
                                            <span class="text-xs">{{ t('projects.shared_tenant') }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ t('projects.updated') }} {{ project.updated_at }}
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                                <div class="flex items-center space-x-2">
                                    <a href="/projects/{{ project.id }}" 
                                       class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                                        <i class="fas fa-eye mr-1"></i>
                                        {{ t('common.view') }}
                                    </a>
                                    {% if project.user_role in ['owner', 'member'] or project.user_id == current_user_id %}
                                        <a href="/projects/{{ project.id }}/edit" 
                                           class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                                            <i class="fas fa-edit mr-1"></i>
                                            {{ t('common.edit') }}
                                        </a>
                                    {% endif %}
                                </div>
                                <div class="flex items-center space-x-1">
                                    {% if project.project_type == 'sequenced' %}
                                        <button class="text-gray-400 hover:text-blue-600 transition-colors duration-200"
                                                title="{{ t('projects.execute_sequence') }}"
                                                onclick="executeSequence({{ project.id }})">
                                            <i class="fas fa-play"></i>
                                        </button>
                                    {% elif project.project_type == 'llm_comparison' %}
                                        <button class="text-gray-400 hover:text-purple-600 transition-colors duration-200"
                                                title="{{ t('projects.run_comparison') }}"
                                                onclick="runComparison({{ project.id }})">
                                            <i class="fas fa-balance-scale"></i>
                                        </button>
                                    {% endif %}
                                    <button class="text-gray-400 hover:text-green-600 transition-colors duration-200"
                                            title="{{ t('projects.export') }}"
                                            onclick="exportProject({{ project.id }})">
                                        <i class="fas fa-download"></i>
                                    </button>
                                    {% if project.user_id == current_user_id %}
                                        <button class="text-gray-400 hover:text-red-600 transition-colors duration-200"
                                                title="{{ t('common.delete') }}"
                                                onclick="confirmDeleteProject({{ project.id }}, '{{ project.title }}')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- Pagination -->
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg mt-6">
                <div class="flex-1 flex justify-between sm:hidden">
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        {{ t('common.previous') }}
                    </a>
                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        {{ t('common.next') }}
                    </a>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            {{ t('projects.showing_results', count_start=1, count_end=projects|length, total=projects|length) }}
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">{{ t('common.previous') }}</span>
                                <i class="fas fa-chevron-left"></i>
                            </a>
                            <a href="#" class="bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">{{ t('common.next') }}</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="bg-white shadow rounded-lg">
                <div class="text-center py-12">
                    <i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ t('projects.no_projects_found') }}</h3>
                    <p class="text-gray-500 mb-6">{{ t('projects.get_started_message') }}</p>
                    <a href="/projects/new" class="btn-primary">
                        <i class="fas fa-plus mr-2"></i>
                        {{ t('projects.create_first') }}
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-project-modal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDeleteProject()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">{{ t('projects.delete_title') }}</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                {{ t('projects.delete_confirmation') }} "<span id="delete-project-name" class="font-medium"></span>"? {{ t('common.action_cannot_be_undone') }}
                            </p>
                            <p class="text-sm text-gray-500 mt-2">
                                {{ t('projects.delete_warning') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button id="delete-project-confirm-btn" class="btn-danger sm:ml-3">
                    <i class="fas fa-trash mr-2"></i>
                    {{ t('common.delete') }}
                </button>
                <button onclick="closeDeleteProject()" class="btn-secondary mt-3 sm:mt-0">{{ t('common.cancel') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
function executeSequence(projectId) {
    window.location.href = `/projects/${projectId}/execute`;
}

function runComparison(projectId) {
    window.location.href = `/projects/${projectId}/compare`;
}

function exportProject(projectId) {
    window.location.href = `/projects/${projectId}/export`;
}

function confirmDeleteProject(id, name) {
    document.getElementById('delete-project-name').textContent = name;
    document.getElementById('delete-project-modal').classList.remove('hidden');
    
    // Set up delete confirmation
    document.getElementById('delete-project-confirm-btn').onclick = function() {
        // Use HTMX to delete
        htmx.ajax('DELETE', `/projects/${id}`, {
            target: '#projects-list',
            swap: 'outerHTML'
        });
        closeDeleteProject();
        showToast(`Project "${name}" deleted successfully`, 'success');
    };
}

function closeDeleteProject() {
    document.getElementById('delete-project-modal').classList.add('hidden');
}
</script>
{% endblock %}