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

@push('styles')
    <style>
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 60px 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .upload-area:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }

        .upload-area.dragover {
            border-color: #007bff;
            background-color: #e7f1ff;
        }

        .upload-icon {
            font-size: 48px;
            color: #6c757d;
            margin-bottom: 20px;
        }

        .upload-text {
            font-size: 18px;
            color: #6c757d;
            margin-bottom: 10px;
        }

        .upload-hint {
            font-size: 14px;
            color: #adb5bd;
        }

        .file-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .plugin-preview {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .progress {
            height: 25px;
        }

        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-bottom: 10px;
        }

        .requirements-list {
            list-style: none;
            padding: 0;
        }

        .requirements-list li {
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .requirements-list li:last-child {
            border-bottom: none;
        }

        .req-check {
            color: #28a745;
            margin-right: 10px;
        }

        .req-cross {
            color: #dc3545;
            margin-right: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-3xl font-bold">Upload Plugin</h1>
        <a href="{{ route('admin.plugins.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left"></i> Back to Plugins
        </a>
    </div>

    <!-- Requirements Check -->
    <div class="card mb-4">
        <div class="card-header px-6 py-4 border-b border-gray-200">
            <h5 class="text-lg font-semibold"><i class="fas fa-check-circle text-green-500"></i> System Requirements</h5>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <ul class="requirements-list">
                        <li>
                            <i class="fas fa-check req-check"></i>
                            PHP Version: {{ PHP_VERSION }} (Required: 8.2+)
                        </li>
                        <li>
                            <i class="fas fa-check req-check"></i>
                            Laravel Version: {{ app()->version() }} (Required: 11.0+)
                        </li>
                        <li>
                            <i class="fas fa-check req-check"></i>
                            ZipArchive Extension: Available
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="requirements-list">
                        <li>
                            <i class="fas fa-check req-check"></i>
                            File Upload: {{ ini_get('file_uploads') ? 'Enabled' : 'Disabled' }}
                        </li>
                        <li>
                            <i class="fas fa-check req-check"></i>
                            Max Upload Size: {{ ini_get('upload_max_filesize') }}
                        </li>
                        <li>
                            <i class="fas fa-check req-check"></i>
                            Plugin Directory: Writable
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Form -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="card">
                <div class="card-header px-6 py-4 border-b border-gray-200">
                    <h5 class="text-lg font-semibold">Upload Plugin Package</h5>
                </div>
                <div class="px-6 py-4">
                    <form action="{{ route('admin.plugins.store-upload') }}" method="POST" enctype="multipart/form-data"
                        id="plugin-upload-form">
                        @csrf

                        <!-- Drag & Drop Upload Area -->
                        <div class="upload-area" id="upload-area">
                            <div class="upload-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <div class="upload-text">
                                Drag & Drop your plugin zip file here
                            </div>
                            <div class="upload-hint">
                                or click to browse files (Max: 50MB)
                            </div>
                            <input type="file" name="plugin_file" id="plugin-file" accept=".zip" style="display: none;"
                                required>
                        </div>

                        <!-- Error Display -->
                        @if ($errors->any())
                            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mt-3">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <!-- File Information -->
                        <div id="file-info" class="file-info" style="display: none;">
                            <h6 class="text-base font-medium mb-2">Selected File:</h6>
                            <div class="file-item">
                                <div>
                                    <strong id="file-name"></strong>
                                    <br>
                                    <small class="text-gray-500">
                                        Size: <span id="file-size"></span> |
                                        Type: <span id="file-type"></span>
                                    </small>
                                </div>
                                <button type="button" class="border border-red-500 text-red-500 hover:bg-red-500 hover:text-white font-medium py-1 px-3 rounded text-sm transition duration-200" id="remove-file">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Upload Progress -->
                        <div id="upload-progress" class="mt-3" style="display: none;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Upload Progress:</label>
                            <div class="w-full bg-gray-200 rounded-full h-6">
                                <div class="progress bg-blue-600 h-6 rounded-full text-xs font-medium text-blue-100 text-center p-0.5 leading-none transition-all duration-300" role="progressbar"
                                    style="width: 0%" id="progress-bar">
                                    0%
                                </div>
                            </div>
                        </div>

                        <!-- Plugin Preview -->
                        <div id="plugin-preview" class="plugin-preview" style="display: none;">
                            <h6 class="text-base font-medium mb-2">Plugin Information Preview:</h6>
                            <div id="preview-content">
                                <!-- Will be populated by JavaScript -->
                            </div>
                        </div>

                        <!-- Upload Options -->
                        <div class="mt-4">
                            <div>
                                <div class="flex items-center">
                                    <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="auto-activate" name="auto_activate">
                                    <label class="ml-2 block text-sm text-gray-900" for="auto-activate">
                                        Automatically activate plugin after installation
                                    </label>
                                </div>
                                <div class="flex items-center mt-2">
                                    <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="overwrite-existing"
                                        name="overwrite_existing">
                                    <label class="ml-2 block text-sm text-gray-900" for="overwrite-existing">
                                        Overwrite existing plugin if it exists
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="mt-4">
                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg text-lg transition duration-200" id="upload-btn" disabled>
                                <i class="fas fa-upload"></i> Upload Plugin
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div>
            <!-- Plugin Development Guidelines -->
            <div class="card">
                <div class="card-header px-6 py-4 border-b border-gray-200">
                    <h5 class="text-lg font-semibold">Plugin Requirements</h5>
                </div>
                <div class="px-6 py-4">
                    <h6 class="text-base font-medium mb-2">Required Files:</h6>
                    <ul class="space-y-2">
                        <li class="flex items-center"><i class="fas fa-file-code text-blue-500 mr-2"></i> plugin.json</li>
                        <li class="flex items-center"><i class="fas fa-file-code text-gray-500 mr-2"></i> composer.json</li>
                        <li class="flex items-center"><i class="fas fa-folder text-yellow-500 mr-2"></i> src/ directory</li>
                        <li class="flex items-center"><i class="fas fa-file-alt text-blue-400 mr-2"></i> Main plugin class</li>
                    </ul>

                    <h6 class="text-base font-medium mb-2 mt-3">Optional Files:</h6>
                    <ul class="space-y-2">
                        <li class="flex items-center"><i class="fas fa-file text-gray-400 mr-2"></i> functions.php</li>
                        <li class="flex items-center"><i class="fas fa-folder text-gray-400 mr-2"></i> resources/</li>
                        <li class="flex items-center"><i class="fas fa-folder text-gray-400 mr-2"></i> database/</li>
                        <li class="flex items-center"><i class="fas fa-folder text-gray-400 mr-2"></i> routes/</li>
                    </ul>
                </div>
            </div>

            <!-- Upload Tips -->
            <div class="card mt-4">
                <div class="card-header px-6 py-4 border-b border-gray-200">
                    <h5 class="text-lg font-semibold">Upload Tips</h5>
                </div>
                <div class="px-6 py-4">
                    <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded">
                        <h6 class="font-medium mb-2"><i class="fas fa-info-circle"></i> Important:</h6>
                        <ul class="mb-0 space-y-1">
                            <li>Max file size: 50MB</li>
                            <li>Only .zip files accepted</li>
                            <li>Plugin structure must be valid</li>
                            <li>plugin.json is required</li>
                        </ul>
                    </div>

                    <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded mt-4">
                        <h6 class="font-medium mb-2"><i class="fas fa-exclamation-triangle"></i> Security:</h6>
                        <p class="mb-0">Only upload plugins from trusted sources. Malicious plugins can compromise your
                            system.</p>
                    </div>
                </div>
            </div>

            <!-- Recent Uploads -->
            <div class="card mt-4">
                <div class="card-header px-6 py-4 border-b border-gray-200">
                    <h5 class="text-lg font-semibold">Recent Uploads</h5>
                </div>
                <div class="px-6 py-4">
                    <p class="text-gray-500">No recent uploads found.</p>
                    <!-- This would show recent plugin uploads -->
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const uploadArea = $('#upload-area');
            const fileInput = $('#plugin-file');
            const fileInfo = $('#file-info');
            const uploadBtn = $('#upload-btn');
            const uploadProgress = $('#upload-progress');
            const progressBar = $('#progress-bar');
            const pluginPreview = $('#plugin-preview');

            // Drag and drop functionality
            uploadArea.on('click', function() {
                fileInput.click();
            });

            uploadArea.on('dragover', function(e) {
                e.preventDefault();
                $(this).addClass('dragover');
            });

            uploadArea.on('dragleave', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');
            });

            uploadArea.on('drop', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');

                const files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    const file = files[0];
                    if (file.type === 'application/zip' || file.name.endsWith('.zip')) {
                        fileInput[0].files = files;
                        handleFileSelect(file);
                    } else {
                        toastr.error('Please select a ZIP file.');
                    }
                }
            });

            // File input change
            fileInput.on('change', function() {
                const file = this.files[0];
                if (file) {
                    handleFileSelect(file);
                }
            });

            // Remove file
            $('#remove-file').on('click', function() {
                fileInput.val('');
                fileInfo.hide();
                uploadBtn.prop('disabled', true);
                pluginPreview.hide();
                uploadArea.show();
            });

            function handleFileSelect(file) {
                // Validate file
                if (!file.type.includes('zip') && !file.name.endsWith('.zip')) {
                    toastr.error('Please select a ZIP file.');
                    return;
                }

                if (file.size > 50 * 1024 * 1024) { // 50MB
                    toastr.error('File size must be less than 50MB.');
                    return;
                }

                // Display file info
                $('#file-name').text(file.name);
                $('#file-size').text(formatFileSize(file.size));
                $('#file-type').text(file.type || 'application/zip');

                fileInfo.show();
                uploadBtn.prop('disabled', false);
                uploadArea.hide();

                // Try to preview plugin info (this would require server-side processing)
                // For now, just show a placeholder
                showPluginPreview(file);
            }

            function showPluginPreview(file) {
                // This is a placeholder. In a real implementation, you'd need to:
                // 1. Upload the file temporarily
                // 2. Extract and read plugin.json
                // 3. Return the plugin information

                const previewContent = `
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <strong>Plugin Name:</strong><br>
                            <span class="text-gray-500">Will be detected after upload</span>
                        </div>
                        <div>
                            <strong>Version:</strong><br>
                            <span class="text-gray-500">Will be detected after upload</span>
                        </div>
                    </div>
                    <div class="mt-2">
                        <strong>Description:</strong><br>
                        <span class="text-gray-500">Will be detected after upload</span>
                    </div>
                `;

                $('#preview-content').html(previewContent);
                pluginPreview.show();
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // Form submission with progress
            $('#plugin-upload-form').on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);

                uploadProgress.show();
                uploadBtn.prop('disabled', true).html(
                '<i class="fas fa-spinner fa-spin"></i> Uploading...');

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        const xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(evt) {
                            if (evt.lengthComputable) {
                                const percentComplete = (evt.loaded / evt.total) * 100;
                                progressBar.css('width', percentComplete + '%')
                                    .text(Math.round(percentComplete) + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(response) {
                        toastr.success('Plugin uploaded successfully!');
                        setTimeout(function() {
                            window.location.href = '{{ route('admin.plugins.index') }}';
                        }, 1500);
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        let errorMessage = 'Upload failed. Please try again.';

                        if (response && response.errors) {
                            errorMessage = Object.values(response.errors).flat().join('<br>');
                        } else if (response && response.message) {
                            errorMessage = response.message;
                        }

                        toastr.error(errorMessage);
                        uploadBtn.prop('disabled', false).html(
                            '<i class="fas fa-upload"></i> Upload Plugin');
                        uploadProgress.hide();
                    }
                });
            });
        });
    </script>
@endpush