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

<div x-data="window.imageOcrComponent()" 
     x-init="init()" 
     x-on:destroy.window="destroy()"
     data-max-size="{{ $maxSizeBytes }}">
    
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label class="custom-label">@lang('webtools/tools/image-ocr.upload_label')</label>
                <div class="upload-container"
                     :class="{ 'drag-over': dragOver }"
                     @dragover="handleDragOver"
                     @dragleave="handleDragLeave"
                     @drop="handleDrop"
                     @click="$refs.fileInput.click()">
                    <input x-ref="fileInput" 
                           type="file" 
                           class="visually-hidden" 
                           accept="image/png,image/jpeg,image/jpg,image/webp" 
                           @change="handleFileSelect"
                           @click.stop />
                    <div class="text-muted">
                        <i class="fas fa-cloud-upload-alt fa-2x mb-2"></i>
                        <p class="mb-0">@lang('webtools/tools/image-ocr.drag_drop_browse')</p>
                        <small>@lang('webtools/tools/image-ocr.max_file_size'): {{ $serverMaxSize }}MB<br>@lang('webtools/tools/image-ocr.supported_formats')</small>
                    </div>
                </div>
            </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 mt-3">
                    <label class="custom-label">Preview:</label>
                    <div class="preview-container border rounded overflow-hidden">
                        <img :src="preview" class="img-fluid" style="max-height: 300px;" />
                        <div class="dimension-badge" x-show="dimensions.width">
                            <span x-text="dimensions.width"></span> × <span x-text="dimensions.height"></span>
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="preview && !processing">
                <div class="form-group mt-3">
                    <button @click="processImage()" 
                            class="btn custom--btn button__lg" 
                            x-bind:disabled="processing || error">
                        @lang('webtools/tools/image-ocr.submit')
                    </button>
                </div>
            </template>
            
            <template x-if="processing">
                <div class="mt-3">
                    <div class="progress mb-3">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" 
                             :style="'width: ' + (progress * 100) + '%'" 
                             :aria-valuenow="progress * 100" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                            <span x-text="Math.round(progress * 100) + '%'"></span>
                        </div>
                    </div>
                    <div class="text-center">
                        <span x-text="processingStatus"></span>
                    </div>
                </div>
            </template>
        </div>

        <div class="col-lg-6">
            <div class="form-group">
                <label class="custom-label">@lang('webtools/tools/image-ocr.result_label')</label>
                <div class="copy-textarea-btn">
                    <textarea x-ref="resultOutput"
                              x-text="result" 
                              class="rounded custom-textarea" 
                              placeholder="@lang('webtools/tools/image-ocr.result_placeholder')" 
                              rows="12" 
                              readonly></textarea>
                    <button @click="copyToClipboard($refs.resultOutput, $event)" 
                            class="btn custom--btn button__md copy-btn btn__dark"
                            x-bind:disabled="!result.length">
                        <i class="far fa-copy"></i> @lang('webtools/general.copy')
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('alpine-components')
<script type="text/javascript">
    window.imageOcrComponent = function() {
        return {
            processing: false,
            processingStatus: '',
            progress: 0,
            error: null,
            maxSize: 0,
            preview: null,
            result: '',
            dragOver: false,
            dimensions: { width: 0, height: 0 },
            worker: null,

            init() {
                this.maxSize = parseInt(this.$el.dataset.maxSize || 5 * 1024 * 1024); // Default 5MB
            },

            destroy() {
                if (this.worker) {
                    // No need for explicit termination here
                    // as the worker will be garbage collected
                    this.worker = null;
                }
                if (this.preview) {
                    URL.revokeObjectURL(this.preview);
                }
            },

            validateFile(file) {
                if (!file) {
                    return '@lang("webtools/tools/image-ocr.errors.select_file")';
                }

                if (file.size > this.maxSize) {
                    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                    const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(0);
                    return '@lang("webtools/tools/image-ocr.errors.file_size_exceeds")'.replace(':size', sizeMB).replace(':max', maxSizeMB);
                }

                if (!['image/png', 'image/jpeg', 'image/jpg', 'image/webp'].includes(file.type)) {
                    return '@lang("webtools/tools/image-ocr.errors.invalid_format")';
                }

                return null;
            },

            handleDragOver(e) {
                e.preventDefault();
                this.dragOver = true;
            },

            handleDragLeave(e) {
                e.preventDefault();
                this.dragOver = false;
            },

            handleDrop(e) {
                e.preventDefault();
                this.dragOver = false;
                
                if (e.dataTransfer.files.length) {
                    this.handleFileInput(e.dataTransfer.files[0]);
                }
            },

            handleFileSelect(e) {
                if (e.target.files.length) {
                    this.handleFileInput(e.target.files[0]);
                }
            },

            handleFileInput(file) {
                // Reset states
                this.error = this.validateFile(file);
                this.result = '';
                this.progress = 0;
                this.processingStatus = '';
                
                // Clear previous preview
                if (this.preview) {
                    URL.revokeObjectURL(this.preview);
                    this.preview = null;
                }

                if (this.error) return;
                
                // Show preview and get dimensions
                this.preview = URL.createObjectURL(file);
                
                // Get image dimensions
                const img = new Image();
                img.onload = () => {
                    this.dimensions = {
                        width: img.width,
                        height: img.height
                    };
                };
                img.onerror = () => {
                    this.error = '@lang("webtools/tools/image-ocr.errors.load_failed")';
                    URL.revokeObjectURL(img.src);
                };
                img.src = this.preview;
            },

            processImage() {
                if (!this.preview) return;
                
                this.processing = true;
                this.processingStatus = '@lang("webtools/tools/image-ocr.processing")';
                this.result = '';
                this.progress = 0;
                
                // Clean up previous worker if any
                this.worker = null;
                
                // Using Tesseract.js v4 API
                (async () => {
                    try {
                        // Create worker with progress logger
                        const worker = await Tesseract.createWorker({
                            logger: (m) => {
                                if (m.status === 'recognizing text') {
                                    this.progress = m.progress;
                                    this.processingStatus = `Processing: ${Math.round(m.progress * 100)}%`;
                                } else {
                                    this.processingStatus = `${m.status}...`;
                                }
                            }
                        });
                        
                        // Store reference to worker
                        this.worker = worker;
                        
                        // Load language data
                        await worker.loadLanguage('eng');
                        await worker.initialize('eng');
                        
                        // Perform OCR
                        const { data } = await worker.recognize(this.preview);
                        this.result = data.text;
                        
                        // Clean up
                        await worker.terminate();
                        this.worker = null;
                    } catch (error) {
                        console.error('OCR Error:', error);
                        this.error = '@lang("webtools/tools/image-ocr.errors.extraction_failed")';
                    } finally {
                        this.processing = false;
                    }
                })();
            },

            copyToClipboard(element, event) {
                if (!element || !element.value) return;
                
                element.select();
                element.setSelectionRange(0, 99999);
                document.execCommand('copy');
                
                // Update button text temporarily
                const button = event.currentTarget;
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="fas fa-check"></i> Copied!';
                
                setTimeout(() => {
                    button.innerHTML = originalText;
                }, 2000);
            }
        };
    };
</script>

<style>
    .upload-container {
        border: 2px dashed #ccc;
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .upload-container:hover {
        border-color: #007bff;
    }
    
    .upload-container.drag-over {
        border-color: #28a745;
        background-color: rgba(40, 167, 69, 0.1);
    }
    
    .preview-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .dimension-badge {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-family: monospace;
    }
    
    .copy-textarea-btn {
        position: relative;
    }
    
    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }

    .dark .upload-container {
        border-color: #555;
        background-color: #2b2b2b;
    }
    
    .dark .upload-container:hover {
        border-color: #7b68ee;
    }
    
    .dark .upload-container.drag-over {
        border-color: #28a745;
        background-color: rgba(40, 167, 69, 0.1);
    }
    
    .dark .progress {
        background-color: #444;
    }
    
    .dark .text-muted {
        color: #aaa !important;
    }
    
    .dark .preview-container {
        background-color: #2b2b2b;
    }
    
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
</style>
@endpush