@php
$uploadMaxFilesize = (int)ini_get('upload_max_filesize');
$postMaxSize = (int)ini_get('post_max_size');
$serverMaxSize = min($uploadMaxFilesize, $postMaxSize);
$maxSizeBytes = $serverMaxSize * 1024 * 1024;
@endphp

@push('alpine-components')
    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
    <script>
        window.bitflanConvertComponent = function() {
            return {
                converting: false,
                error: null,
                maxSize: {{ $maxSizeBytes }},
                preview: null,
                fileSize: null,
                compressedSize: null,
                dimensions: null,
                isDragging: false,
                
                init: function() {
                    this.$watch('preview', function(value) {
                        if (value) {
                            this.$el.scrollIntoView({ behavior: 'smooth' });
                        }
                    }.bind(this));
                },
                
                validateFile: function(file) {
                    if (!file) {
                        return 'Please select a file.';
                    }

                    if (file.size > this.maxSize) {
                        const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                        const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(0);
                        return `File size (${sizeMB}MB) exceeds the server limit of ${maxSizeMB}MB. For larger images, please use an image compression tool first.`;
                    }

                    if (!['image/jpeg', 'image/jpg'].includes(file.type)) {
                        return 'Only JPG/JPEG files are allowed.';
                    }

                    return null;
                },

                handleFileSelect: async function(event) {
                    const file = event.target.files[0];
                    if (file) {
                        await this.processFile(file);
                    }
                },
                
                handleDrop: async function(event) {
                    event.preventDefault();
                    this.isDragging = false;
                    
                    if (event.dataTransfer.files.length > 0) {
                        const file = event.dataTransfer.files[0];
                        await this.processFile(file);
                    }
                },
                
                processFile: async function(file) {
                    this.error = this.validateFile(file);
                    
                    // Clear previous preview
                    if (this.preview) {
                        URL.revokeObjectURL(this.preview);
                        this.preview = null;
                        this.fileSize = null;
                        this.compressedSize = null;
                        this.dimensions = null;
                    }

                    // Show preview if valid
                    if (!this.error && file) {
                        try {
                            // Get original file size
                            this.fileSize = (file.size / 1024).toFixed(2);
                            
                            // Create preview
                            this.preview = URL.createObjectURL(file);
                            
                            // Get dimensions
                            const img = await new Promise((resolve) => {
                                const img = new Image();
                                img.onload = () => resolve(img);
                                img.src = this.preview;
                            });
                            
                            this.dimensions = `${img.width} × ${img.height}`;
                            
                            // Store the file for conversion
                            const dataTransfer = new DataTransfer();
                            dataTransfer.items.add(file);
                            this.$refs.upload.files = dataTransfer.files;
                        } catch (err) {
                            this.error = 'Error processing image: ' + err.message;
                        }
                    }
                },

                generate: async function() {
                    if (!this.$refs.upload.files.length) {
                        this.error = 'Please select a file first.';
                        return;
                    }

                    this.converting = true;
                    this.error = null;

                    try {
                        const file = this.$refs.upload.files[0];
                        const filename = file.name;
                        const dotIndex = filename.lastIndexOf(".");
                        const name = filename.substring(0, dotIndex);

                        // Create a new image to check dimensions
                        const img = await new Promise((resolve, reject) => {
                            const img = new Image();
                            img.onload = () => resolve(img);
                            img.onerror = () => reject(new Error('Failed to load image'));
                            img.src = URL.createObjectURL(file);
                        });

                        // Check image dimensions
                        const totalPixels = img.width * img.height;
                        const memorySizeMB = (totalPixels * 4) / (1024 * 1024);
                        
                        if (memorySizeMB > 100) {
                            throw new Error(`Image dimensions (${img.width}x${img.height}) are too large. This would require approximately ${memorySizeMB.toFixed(1)}MB of memory. Please resize the image first.`);
                        }

                        const canvas = this.$refs.canvas;
                        const ctx = canvas.getContext('2d');
                        const a = this.$refs.anchor;

                        // Set canvas size to match image
                        canvas.width = img.width;
                        canvas.height = img.height;

                        // Draw image and convert to WebP
                        ctx.drawImage(img, 0, 0);
                        const webpData = canvas.toDataURL('image/webp', 0.9);

                        // Set up download
                        a.href = webpData;
                        a.setAttribute('download', name + '.webp');
                        a.click();

                        // Clean up
                        URL.revokeObjectURL(img.src);
                    } catch (err) {
                        this.error = err.message || 'Failed to convert image. Please try again.';
                    } finally {
                        this.converting = false;
                    }
                },

                destroy: function() {
                    if (this.preview) {
                        URL.revokeObjectURL(this.preview);
                    }
                }
            };
        };
    </script>
    <style>
        /* Light theme styles */
        .custom-label {
            color: var(--color-black);
        }

        .custom-textarea {
            background-color: var(--color-white);
            color: var(--color-black);
            border-color: var(--color-border);
        }

        .card {
            background-color: var(--color-white);
            border-color: var(--color-border);
        }

        .card-header {
            background-color: var(--color-light);
            border-bottom-color: var(--color-border);
        }

        /* Image upload container styles */
        .upload-container {
            background-color: var(--color-white);
            border: 2px dashed var(--color-border);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .upload-container:hover {
            border-color: var(--color-primary);
            background-color: var(--color-light);
        }

        .upload-container.drag-over {
            border-color: var(--color-primary);
            background-color: var(--color-light);
        }

        /* Hide alerts by default */
        .alert-danger {
            display: none;
        }

        /* Show alerts only when they have content */
        .alert-info {
            display: block;
        }

        .alert-danger:has(li),
        .alert-danger:has(h5) {
            display: block;
        }

        /* Dark theme styles */
        [data-theme="dark"] .custom-label,
        .dark .custom-label {
            color: var(--color-white);
        }

        [data-theme="dark"] .upload-container,
        .dark .upload-container {
            background-color: var(--color-dark-secondary);
            border-color: var(--color-gray-light);
            color: var(--color-white);
        }

        [data-theme="dark"] .upload-container:hover,
        .dark .upload-container:hover,
        [data-theme="dark"] .upload-container.drag-over,
        .dark .upload-container.drag-over {
            border-color: var(--color-primary);
            background-color: var(--color-dark);
        }

        [data-theme="dark"] .card,
        .dark .card {
            background-color: var(--color-dark);
            border-color: var(--color-dark-border);
        }

        [data-theme="dark"] .card-header,
        .dark .card-header {
            background-color: var(--color-dark-secondary);
            border-bottom-color: var(--color-dark-border);
            color: var(--color-white);
        }

        [data-theme="dark"] .card-header h5,
        .dark .card-header h5 {
            color: var(--color-white);
        }

        [data-theme="dark"] .alert-danger,
        .dark .alert-danger {
            background-color: var(--color-danger);
            border-color: var(--color-danger);
            color: var(--color-white);
        }

        [data-theme="dark"] .form-check-label,
        .dark .form-check-label {
            color: var(--color-white);
        }

        [data-theme="dark"] .form-check-input,
        .dark .form-check-input {
            background-color: var(--color-dark);
            border-color: var(--color-dark-border);
        }

        [data-theme="dark"] .form-check-input:checked,
        .dark .form-check-input:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

        [data-theme="dark"] .custom-input,
        .dark .custom-input {
            background-color: var(--color-dark);
            color: var(--color-white);
            border-color: var(--color-dark-border);
        }

        [data-theme="dark"] .content-cats-inner,
        .dark .content-cats-inner {
            background-color: var(--color-dark);
            border-color: var(--color-dark-border);
        }

        [data-theme="dark"] .content-cats-inner h4,
        .dark .content-cats-inner h4 {
            color: var(--color-white);
        }

        [data-theme="dark"] .content-cats-inner p,
        .dark .content-cats-inner p {
            color: var(--color-gray-light);
        }

        /* File input styles */
        [data-theme="dark"] .custom-file-input::-webkit-file-upload-button,
        .dark .custom-file-input::-webkit-file-upload-button {
            background-color: var(--color-dark-secondary);
            color: var(--color-white);
            border-color: var(--color-dark-border);
        }

        [data-theme="dark"] .custom-file-input::file-selector-button,
        .dark .custom-file-input::file-selector-button {
            background-color: var(--color-dark-secondary);
            color: var(--color-white);
            border-color: var(--color-dark-border);
        }

        /* Progress bar styles */
        [data-theme="dark"] .progress,
        .dark .progress {
            background-color: var(--color-dark-secondary);
        }

        [data-theme="dark"] .progress-bar,
        .dark .progress-bar {
            background-color: var(--color-primary);
        }

        .preview-container {
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .preview-container,
        .dark .preview-container {
            background-color: var(--color-dark-secondary);
            border: 1px solid var(--color-dark-border);
        }

        .preview-container img {
            max-height: 300px;
            max-width: 100%;
            object-fit: contain;
            margin: 0 auto;
            display: block;
            border-radius: 4px;
        }

        .file-info {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .file-info-item {
            background-color: #e9ecef;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .file-info-item,
        .dark .file-info-item {
            background-color: var(--color-dark);
            color: var(--color-white);
            border: 1px solid var(--color-dark-border);
        }

        [data-theme="dark"] .file-info-item i,
        .dark .file-info-item i {
            color: var(--color-primary);
        }

        .drop-area {
            border: 2px dashed var(--color-border);
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: var(--color-white);
        }

        [data-theme="dark"] .drop-area,
        .dark .drop-area {
            background-color: var(--color-dark-secondary);
            border-color: var(--color-gray-light);
            color: var(--color-white);
        }

        .drop-area.dragging {
            background-color: var(--color-light);
            border-color: var(--color-primary);
        }

        [data-theme="dark"] .drop-area.dragging,
        .dark .drop-area.dragging {
            background-color: var(--color-dark);
            border-color: var(--color-primary);
        }

        .drop-area p {
            margin-bottom: 0;
            font-size: 1rem;
            color: inherit;
        }

        [data-theme="dark"] .text-muted,
        .dark .text-muted {
            color: var(--color-gray-light) !important;
        }

        [data-theme="dark"] .btn.custom--btn,
        .dark .btn.custom--btn {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
        }

        [data-theme="dark"] .btn.custom--btn:disabled,
        .dark .btn.custom--btn:disabled {
            background-color: var(--color-dark-secondary);
            border-color: var(--color-dark-border);
            color: var(--color-gray-light);
        }

        /* Quality slider styles */
        [data-theme="dark"] .form-range::-webkit-slider-runnable-track,
        .dark .form-range::-webkit-slider-runnable-track {
            background-color: var(--color-dark-secondary);
        }

        [data-theme="dark"] .form-range::-webkit-slider-thumb,
        .dark .form-range::-webkit-slider-thumb {
            background-color: var(--color-primary);
        }

        [data-theme="dark"] .form-range::-moz-range-track,
        .dark .form-range::-moz-range-track {
            background-color: var(--color-dark-secondary);
        }

        [data-theme="dark"] .form-range::-moz-range-thumb,
        .dark .form-range::-moz-range-thumb {
            background-color: var(--color-primary);
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
    </style>
@endpush

<div x-data="window.bitflanConvertComponent()" 
     x-init="$watch('preview', value => value && $el.scrollIntoView({ behavior: 'smooth' }))" 
     x-on:destroy.window="destroy">
    
    <div class="form-group">
        <label class="custom-label">{{ trans('webtools/tools/jpg-to-webp.image') }}</label>
        
        <div class="drop-area" 
             :class="{'dragging': isDragging}"
             x-on:dragover.prevent="isDragging = true"
             x-on:dragleave.prevent="isDragging = false"
             x-on:drop.prevent="handleDrop($event)"
             x-on:click="$refs.upload.click()">
            
            <p>Drag & drop your JPG image here or click to browse</p>
            <small class="text-muted d-block mt-2">Maximum file size: {{ $serverMaxSize }}MB</small>
            <small class="text-muted d-block">Supported formats: JPG, JPEG</small>
        </div>
        
        <input type="file" x-ref="upload" class="visually-hidden" accept="image/jpeg,image/jpg" @change="handleFileSelect" @click.stop />
    </div>

    <template x-if="error">
        <div class="alert alert-danger mb-3" x-text="error"></div>
    </template>

    <template x-if="preview">
        <div class="form-group">
            <label class="custom-label">Preview:</label>
            <div class="preview-container">
                <img :src="preview" alt="Preview" />
            </div>
            
            <div class="file-info">
                <template x-if="dimensions">
                    <span class="file-info-item">
                        <i class="fas fa-expand-arrows-alt me-1"></i>
                        <span x-text="dimensions"></span>
                    </span>
                </template>
                
                <template x-if="fileSize">
                    <span class="file-info-item">
                        <i class="fas fa-file me-1"></i>
                        Original: <span x-text="fileSize + ' KB'"></span>
                    </span>
                </template>
                
                <template x-if="compressedSize">
                    <span class="file-info-item">
                        <i class="fas fa-compress me-1"></i>
                        Compressed: <span x-text="compressedSize + ' KB'"></span>
                    </span>
                </template>
            </div>
        </div>
    </template>

    <div class="form-group">
        <button @click="generate()" class="btn custom--btn button__lg" x-bind:disabled="converting || error || !preview">
            <template x-if="converting">
                <span>Converting...</span>
            </template>
            <template x-if="!converting">
                <span>{{ trans('webtools/tools/jpg-to-webp.submit') }}</span>
            </template>
        </button>
    </div>

    <div class="d-none">
        <canvas x-ref="canvas"></canvas>
        <a href="#" x-ref="anchor"></a>
    </div>
</div>