{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.plugins'|trans }}{% endblock %}

{% block body %}
    {% set canPluginsView = has_permission('ALLOW_PLUGINS_VIEW', app.user) %}
    {% set canPluginsInstall = has_permission('ALLOW_PLUGINS_INSTALL', app.user) %}
    {% set canPluginsEdit = has_permission('ALLOW_PLUGINS_EDIT', app.user) %}
    {% set canPluginsDelete = has_permission('ALLOW_PLUGINS_DELETE', app.user) %}
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="admin-header mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-puzzle-fill me-3"></i>
                                {{ 'admin.plugins'|trans }}
                            </h2>
                            <p class="text-muted mb-0">{{ 'admin.manage_plugins_description'|trans }}</p>
                        </div>
                        <div class="d-flex flex-column flex-md-row justify-content-around align-items-md-center gap-2">
                            {% if canPluginsView %}
                            <button class="btn btn-primary btn-lg" onclick="refreshPlugins()">
                                <i class="bi bi-arrow-clockwise me-2"></i>
                                {{ 'admin.reload_plugins'|trans }}
                            </button>
                            {% endif %}

                            {% if canPluginsInstall %}
                            <form id="plugin-upload-form" method="post" action="{{ path('admin_plugins_upload') }}" enctype="multipart/form-data" class="d-inline">
                                <input id="plugin-upload-input" type="file" name="plugin_zip" accept=".zip" required style="display:none;">
                                <button type="button" class="btn btn-success btn-lg" id="plugin-upload-btn" title="{{ 'admin.upload_plugin'|trans }}">
                                    <i class="bi bi-upload"></i>
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Flash Messages -->
        {% for message in app.flashes('success') %}
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            </div>
        {% endfor %}

        {% for message in app.flashes('error') %}
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            </div>
        {% endfor %}

        <!-- Search and Filters -->
        <div class="row">
            <div class="col-12">
                <div class="admin-card p-3">
                    <form method="get" class="row g-3">
                        <div class="col-12 col-md-8">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-search"></i>
                                </span>
                                <input type="text" name="search" class="form-control" 
                                       placeholder="{{ 'admin.search_plugins_placeholder'|trans }}" value="{{ search }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-search me-2"></i>
                                {{ 'admin.search_button'|trans }}
                            </button>
                        </div>
                    </form>
                    <div class="mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="filter-active-plugins" onchange="filterActivePlugins()">
                            <label class="form-check-label fw-semibold" for="filter-active-plugins">
                                {{ 'admin.filter_active_plugins_only'|trans }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plugins Grid -->
        <div class="row">
            <div class="col-12">
                <div class="admin-card p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:48px;"></th>
                                    <th>{{ 'admin.plugins'|trans }}</th>
                                    <th>{{ 'admin.version'|trans }}</th>
                                    <th>{{ 'admin.author'|trans }}</th>
                                    <th>{{ 'admin.status'|trans }}</th>
                                    <th class="text-end">{{ 'admin.actions'|trans }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for name, status in pluginStatuses %}
                                <tr class="plugin-row {{ status.active ? 'plugin-active' : 'plugin-inactive' }} {{ status.active ? 'table-primary' : '' }}">
                                    <td class="text-center">
                                        {% if status.icon %}
                                            <i class="bi bi-{{ status.icon }} text-primary" style="font-size:1.5rem;"></i>
                                        {% else %}
                                            <i class="bi bi-puzzle text-primary" style="font-size:1.5rem;"></i>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ status.label|trans }}</div>
                                        <div class="text-muted small">{{ status.description|trans }}</div>
                                    </td>
                                    <td><span class="badge bg-light text-dark">{{ status.version|trans }}</span></td>
                                    <td><span class="badge bg-light text-dark">{{ status.author|trans }}</span></td>
                                    <td>
                                        <span class="badge bg-{{ status.installed ? 'success' : 'secondary' }} me-1">
                                            <i class="bi bi-{{ status.installed ? 'check-circle' : 'x-circle' }} me-1"></i>
                                            {{ status.installed ? 'admin.installed'|trans : 'admin.not_installed'|trans }}
                                        </span>
                                        <span class="badge {{ status.active ? 'bg-primary' : 'bg-secondary text-white' }}">
                                            <i class="bi bi-{{ status.active ? 'play-circle' : 'pause-circle' }} me-1"></i>
                                            {{ status.active ? 'admin.active'|trans : 'admin.inactive'|trans }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="d-flex flex-wrap gap-1 justify-content-end">
                                            {% if canPluginsView %}
                                            <a href="{{ path('admin_plugins_details', {name: name|trans}) }}" class="btn btn-secondary btn-sm px-3" title="{{ 'admin.details'|trans }}">
                                                <i class="bi bi-info-circle me-1"></i>{{ 'admin.details'|trans }}
                                            </a>
                                            {% endif %}
                                            {% if canPluginsEdit and status.configuration and status.installed %}
                                                <a href="{{ path('admin_plugins_configure', {name: name|trans}) }}" class="btn btn-primary btn-sm px-3" title="{{ 'admin.configure'|trans }}">
                                                    <i class="bi bi-gear me-1"></i>{{ 'admin.configure'|trans }}
                                                </a>
                                            {% endif %}
                                            {% if status.index_url %}
                                                <a href="{{ status.index_url|trans }}" class="btn btn-primary btn-sm px-3" title="{{ 'admin.open'|trans }}">
                                                    <i class="bi bi-box-arrow-up-right me-1"></i>{{ 'admin.open'|trans }}
                                                </a>
                                            {% endif %}
                                            {% if canPluginsInstall and not status.installed %}
                                                <form method="post" action="{{ path('admin_plugins_install', {name: name|trans}) }}" class="d-inline" id="installForm{{ loop.index }}">
                                                    <button type="button" class="btn btn-success btn-sm px-3" title="{{ 'admin.install'|trans }}" onclick="handlePluginInstall('{{ loop.index }}', '{{ name|trans }}')">
                                                        <i class="bi bi-download me-1"></i>{{ 'admin.install'|trans }}
                                                    </button>
                                                </form>
                                            {% else %}
                                                {% if canPluginsEdit and not status.active %}
                                                    <form method="post" action="{{ path('admin_plugins_activate', {name: name|trans}) }}" class="d-inline">
                                                        <button type="submit" class="btn btn-primary btn-sm px-3" title="{{ 'admin.activate'|trans }}">
                                                            <i class="bi bi-play-circle me-1"></i>{{ 'admin.activate'|trans }}
                                                        </button>
                                                    </form>
                                                {% elseif canPluginsEdit and status.active %}
                                                    <form method="post" action="{{ path('admin_plugins_deactivate', {name: name|trans}) }}" class="d-inline" id="deactivateForm{{ loop.index }}">
                                                        <button type="button" class="btn btn-warning btn-sm px-3" title="{{ 'admin.deactivate'|trans }}" onclick="handlePluginDeactivate('{{ loop.index }}', '{{ name|trans }}')">
                                                            <i class="bi bi-pause-circle me-1"></i>{{ 'admin.deactivate'|trans }}
                                                        </button>
                                                    </form>
                                                {% endif %}
                                                {% if canPluginsDelete %}
                                                <form method="post" action="{{ path('admin_plugins_uninstall', {name: name|trans}) }}" class="d-inline" id="uninstallForm{{ loop.index }}">
                                                    <button type="button" class="btn btn-danger btn-sm px-3" title="{{ 'admin.uninstall'|trans }}" onclick="handlePluginUninstall('{{ loop.index }}', '{{ name|trans }}')">
                                                        <i class="bi bi-trash me-1"></i>{{ 'admin.uninstall'|trans }}
                                                    </button>
                                                </form>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-5">
                                        <i class="bi bi-puzzle" style="font-size:2rem;"></i><br>
                                        <div class="mt-2">{{ 'admin.no_plugins_found'|trans }}</div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        {% if totalPages > 1 %}
            <div class="row">
                <div class="col-12">
                    <div class="p-3">
                        {% include 'administration/pagination.html.twig' with {
                            'paginationPath': 'admin_plugins',
                            'totalPages': totalPages,
                            'currentPage': currentPage,
                            'search': search
                        } %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <script>
        function refreshPlugins() {
            // Make an ajax call to route admin_api_plugins_refresh and reload the page
            fetch('{{ path('admin_api_reload_plugins') }}')
                .then(response => {
                    if (response.ok) {
                        window.location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error refreshing plugins:', error);
                });

        }

        function filterActivePlugins() {
            const onlyActive = document.getElementById('filter-active-plugins').checked;
            const pluginRows = document.querySelectorAll('tr.plugin-row');

            pluginRows.forEach(row => {
                if (onlyActive && !row.classList.contains('plugin-active')) {
                    row.style.display = 'none';
                } else {
                    row.style.display = '';
                }
            });
        }

        // Upload Button Logic
        document.addEventListener('DOMContentLoaded', function () {
            const uploadBtn = document.getElementById('plugin-upload-btn');
            const uploadInput = document.getElementById('plugin-upload-input');
            const uploadForm = document.getElementById('plugin-upload-form');

            uploadBtn.addEventListener('click', function (e) {
                e.preventDefault();
                uploadInput.click();
            });

            uploadInput.addEventListener('change', function () {
                if (uploadInput.files.length > 0) {
                    uploadForm.requestSubmit();
                }
            });
        });

        // Plugin Management Functions
        async function handlePluginInstall(formIndex, pluginName) {
            const message = t('admin.plugin.install_confirm_message').replace('{pluginName}', pluginName);
            const confirmed = await showConfirm(
                message,
                t('admin.plugin.install_confirm_title'),
                {
                    confirmText: t('admin.plugin.install'),
                    confirmClass: 'btn-success',
                    icon: 'bi-download text-success'
                }
            );
            
            if (confirmed) {
                document.getElementById('installForm' + formIndex).requestSubmit();
            }
        }

        async function handlePluginDeactivate(formIndex, pluginName) {
            const message = t('admin.plugin.deactivate_confirm_message').replace('{pluginName}', pluginName);
            const confirmed = await showConfirm(
                message,
                t('admin.plugin.deactivate_confirm_title'),
                {
                    confirmText: t('admin.plugin.deactivate'),
                    confirmClass: 'btn-warning',
                    icon: 'bi-pause-circle text-warning'
                }
            );
            
            if (confirmed) {
                document.getElementById('deactivateForm' + formIndex).requestSubmit();
            }
        }

        async function handlePluginUninstall(formIndex, pluginName) {
            const message = t('admin.plugin.uninstall_confirm_message').replace('{pluginName}', pluginName) + '<br><small class="text-muted">' + t('admin.plugin.uninstall_warning') + '</small>';
            const confirmed = await showConfirm(
                message,
                t('admin.plugin.uninstall_confirm_title'),
                {
                    confirmText: t('admin.plugin.uninstall'),
                    confirmClass: 'btn-danger',
                    icon: 'bi-trash text-danger'
                }
            );
            
            if (confirmed) {
                document.getElementById('uninstallForm' + formIndex).requestSubmit();
            }
        }
    </script>
{% endblock %}