@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Plugin Management')

@push('styles')
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <style>
        .plugin-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .plugin-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .plugin-icon {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .plugin-status {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .badge-active {
            background-color: #28a745;
        }

        .badge-inactive {
            background-color: #6c757d;
        }

        .plugin-actions .btn {
            margin: 2px;
        }
    </style>
@endpush

@section('content')
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-3xl font-bold">Plugin Management</h1>
        <div class="flex gap-2">
            <a href="{{ route('admin.plugins.upload') }}" class="btn btn-primary">
                <i class="fas fa-upload mr-2"></i> Upload Plugin
            </a>
            <button class="btn btn-primary" id="check-updates">
                <i class="fas fa-sync mr-2"></i> Check Updates
            </button>
            <button class="btn btn-secondary" id="clear-cache">
                <i class="fas fa-trash mr-2"></i> Clear Cache
            </button>
        </div>
    </div>

    <!-- Plugin Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <h5 class="text-2xl font-bold text-gray-900">{{ $plugins->count() }}</h5>
            <p class="text-gray-600">Total Plugins</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <h5 class="text-2xl font-bold text-green-600">{{ $activePlugins->count() }}</h5>
            <p class="text-gray-600">Active Plugins</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <h5 class="text-2xl font-bold text-yellow-500">{{ $plugins->count() - $activePlugins->count() }}</h5>
            <p class="text-gray-600">Inactive Plugins</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <h5 class="text-2xl font-bold text-blue-500">0</h5>
            <p class="text-gray-600">Updates Available</p>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="bg-white rounded-lg shadow mb-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h5 class="text-lg font-semibold">Filters</h5>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="input-with-label">
                    <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="input-with-label">
                    <label for="search-filter" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                    <input type="text"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        id="search-filter" placeholder="Search plugins...">
                </div>
                <div class="flex items-end">
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Plugins Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="plugins-container">
        @foreach ($plugins as $pluginName => $plugin)
            <div class="plugin-item bg-white rounded-lg shadow-md overflow-visible h-full transition-all duration-300 hover:shadow-lg"
                data-status="{{ $activePlugins->contains($pluginName) ? 'active' : 'inactive' }}"
                data-name="{{ strtolower($plugin['title'] ?? $pluginName) }}">
                <div class="p-6 relative h-full flex flex-col">
                    <!-- Plugin Status Badge -->
                    @php
                        $isActive = $activePlugins->contains($pluginName);
                    @endphp
                    <span
                        class="absolute top-4 right-4 px-2 py-1 text-xs font-semibold rounded {{ $isActive ? 'bg-green-500 text-white' : 'bg-gray-500 text-white' }}">
                        {{ $isActive ? 'Active' : 'Inactive' }}
                    </span>

                    <!-- Plugin Header -->
                    <div class="flex items-center mb-3">
                        <div class="plugin-icon mr-3">
                            {{ strtoupper(substr($plugin['title'] ?? $pluginName, 0, 2)) }}
                        </div>
                        <div>
                            <h5 class="text-lg font-semibold mb-1">{{ $plugin['title'] ?? $pluginName }}</h5>
                            <small class="text-gray-500">v{{ $plugin['version'] ?? '1.0.0' }}</small>
                        </div>
                    </div>

                    <!-- Plugin Description -->
                    <p class="text-gray-600 mb-4 flex-grow">
                        {{ Str::limit($plugin['description'] ?? 'No description available.', 100) }}
                    </p>

                    <!-- Plugin Author -->
                    @if (isset($plugin['author']))
                        <p class="text-sm text-gray-500 mb-2">
                            <strong>Author:</strong>
                            @if (is_array($plugin['author']))
                                {{ $plugin['author']['name'] ?? 'Unknown' }}
                            @else
                                {{ $plugin['author'] }}
                            @endif
                        </p>
                    @endif

                    <!-- Plugin Features -->
                    @if (isset($plugin['features']) && is_array($plugin['features']))
                        <div class="mb-4">
                            <small class="text-gray-500 font-semibold">Features:</small>
                            <div class="mt-1 flex flex-wrap gap-1">
                                @foreach (array_slice($plugin['features'], 0, 3) as $feature)
                                    <span
                                        class="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded">{{ $feature }}</span>
                                @endforeach
                                @if (count($plugin['features']) > 3)
                                    <span
                                        class="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded">+{{ count($plugin['features']) - 3 }}
                                        more</span>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Plugin Actions -->
                    <div class="plugin-actions mt-auto">
                        <div class="flex justify-center gap-2 items-center mb-2">
                            @if ($isActive)
                                <button
                                    class="btn btn-secondary deactivate-btn"
                                    data-plugin="{{ $pluginName }}">
                                    <i class="fas fa-pause mr-1"></i> Deactivate
                                </button>

                                @if (isset($plugin['settings']['has_settings']) && $plugin['settings']['has_settings'])
                                    <a href="{{ route('admin.plugins.settings', $pluginName) }}"
                                        class="flex items-center px-3 py-1 bg-blue-500 text-white text-sm font-medium rounded hover:bg-blue-600 transition-colors">
                                        <i class="fas fa-cog mr-1"></i> Settings
                                    </a>
                                @endif
                            @else
                                <button
                                    class="flex items-center px-3 py-1 bg-green-500 text-white text-sm font-medium rounded hover:bg-green-600 transition-colors activate-btn"
                                    data-plugin="{{ $pluginName }}">
                                    <i class="fas fa-play mr-1"></i> Activate
                                </button>
                            @endif

                            <a href="{{ route('admin.plugins.show', $pluginName) }}"
                                class="flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors">
                                <i class="fas fa-eye mr-1"></i> Details
                            </a>
                        </div>

                        <div class="flex justify-center gap-2 items-center">
                            <button
                                class="flex items-center px-3 py-1 bg-green-600 text-white text-sm font-medium rounded hover:bg-green-700 transition-colors install-btn"
                                data-plugin="{{ $pluginName }}">
                                <i class="fas fa-download mr-1"></i> Install
                            </button>
                            <button
                                class="btn btn-secondary uninstall-btn"
                                data-plugin="{{ $pluginName }}">
                                <i class="fas fa-trash mr-1"></i> Uninstall
                            </button>
                            <button
                                class="flex items-center px-3 py-1 bg-red-600 text-white text-sm font-medium rounded hover:bg-red-700 transition-colors delete-btn"
                                data-plugin="{{ $pluginName }}">
                                <i class="fas fa-times mr-1"></i> Delete
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        @endforeach

        @if ($plugins->isEmpty())
            <div class="col-span-full">
                <div class="text-center py-12">
                    <i class="fas fa-puzzle-piece text-6xl text-gray-400 mb-4"></i>
                    <h4 class="text-2xl font-semibold text-gray-600 mb-2">No Plugins Found</h4>
                    <p class="text-gray-500 mb-4">Start by uploading your first plugin to extend your application
                        functionality.</p>
                    <a href="{{ route('admin.plugins.upload') }}"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-upload mr-2"></i> Upload Plugin
                    </a>
                </div>
            </div>
        @endif
    </div>

    <!-- Bulk Actions -->
    @if ($plugins->isNotEmpty())
        <div class="bg-white rounded-lg shadow mt-4">
            <div class="p-6">
                <h6 class="text-lg font-semibold mb-4">Bulk Actions</h6>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="md:col-span-2">
                        <div class="flex">
                            <select
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                id="bulk-action">
                                <option value="">Choose bulk action...</option>
                                <option value="activate">Activate Selected</option>
                                <option value="deactivate">Deactivate Selected</option>
                                <option value="install">Install Selected</option>
                                <option value="uninstall">Uninstall Selected</option>
                                <option value="delete">Delete Selected</option>
                            </select>
                            <button
                                class="px-4 py-2 bg-blue-600 text-white font-medium rounded-r-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                id="execute-bulk-action" disabled>Execute</button>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="flex items-center">
                            <input class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                                type="checkbox" id="select-all-plugins">
                            <label class="ml-2 text-sm font-medium text-gray-700" for="select-all-plugins">
                                Select All Plugins
                            </label>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="selected-plugins">
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            let selectedPlugins = [];

            // Filter functionality
            $('#status-filter, #search-filter').on('input change', function() {
                filterPlugins();
            });

            function filterPlugins() {
                const statusFilter = $('#status-filter').val();
                const searchFilter = $('#search-filter').val().toLowerCase();

                $('.plugin-item').each(function() {
                    const $item = $(this);
                    const status = $item.data('status');
                    const name = $item.data('name');

                    let show = true;

                    if (statusFilter && status !== statusFilter) {
                        show = false;
                    }

                    if (searchFilter && !name.includes(searchFilter)) {
                        show = false;
                    }

                    $item.toggle(show);
                });
            }

            $('#reset-filters').click(function() {
                $('#status-filter').val('');
                $('#search-filter').val('');
                $('.plugin-item').show();
            });

            // Plugin actions
            $('.activate-btn').click(function() {
                const plugin = $(this).data('plugin');
                performPluginAction('activate', plugin, $(this));
            });

            $('.deactivate-btn').click(function() {
                const plugin = $(this).data('plugin');
                performPluginAction('deactivate', plugin, $(this));
            });

            $('.install-btn').click(function() {
                const plugin = $(this).data('plugin');
                performPluginAction('install', plugin, $(this));
            });

            $('.uninstall-btn').click(function() {
                const plugin = $(this).data('plugin');
                if (confirm(
                        'Are you sure you want to uninstall this plugin? This will remove all plugin data.'
                    )) {
                    performPluginAction('uninstall', plugin, $(this));
                }
            });

            $('.delete-btn').click(function() {
                const plugin = $(this).data('plugin');
                if (confirm('Are you sure you want to delete this plugin? This action cannot be undone.')) {
                    performPluginAction('delete', plugin, $(this));
                }
            });

            function performPluginAction(action, plugin, $button) {
                const originalText = $button.html();
                $button.html('<i class="fas fa-spinner fa-spin"></i> Processing...').prop('disabled', true);

                let url = `{{ route('admin.plugins.index') }}/${plugin}/${action}`;
                let method = 'POST';

                if (action === 'delete') {
                    method = 'DELETE';
                    url = `{{ route('admin.plugins.index') }}/${plugin}`;
                }

                $.ajax({
                    url: url,
                    type: method,
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            location.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        toastr.error(response ? response.message : 'An error occurred');
                    },
                    complete: function() {
                        $button.html(originalText).prop('disabled', false);
                    }
                });
            }

            // Check updates
            $('#check-updates').click(function() {
                const $button = $(this);
                const originalText = $button.html();
                $button.html('<i class="fas fa-spinner fa-spin"></i> Checking...').prop('disabled', true);

                $.ajax({
                    url: '{{ route('admin.plugins.check-updates') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            if (response.updates.length > 0) {
                                toastr.info(
                                    `Found ${response.updates.length} plugin updates available.`
                                );
                            } else {
                                toastr.success('All plugins are up to date.');
                            }
                        }
                    },
                    error: function() {
                        toastr.error('Failed to check for updates.');
                    },
                    complete: function() {
                        $button.html(originalText).prop('disabled', false);
                    }
                });
            });

            // Clear cache
            $('#clear-cache').click(function() {
                const $button = $(this);
                const originalText = $button.html();
                $button.html('<i class="fas fa-spinner fa-spin"></i> Clearing...').prop('disabled', true);

                $.ajax({
                    url: '{{ route('admin.plugins.clear-cache') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                        }
                    },
                    error: function() {
                        toastr.error('Failed to clear cache.');
                    },
                    complete: function() {
                        $button.html(originalText).prop('disabled', false);
                    }
                });
            });

            // Bulk actions (simplified for now)
            $('#select-all-plugins').change(function() {
                // Implementation for bulk selection would go here
                $('#execute-bulk-action').prop('disabled', !$(this).is(':checked'));
            });
        });
    </script>
@endpush