@props(['name' => 'photo_url', 'value' => '', 'label' => 'Media Photo Attachment'])

<div x-data="photoPickerComponent('{{ $name }}', '{{ $value }}')" class="space-y-2 text-xs">
    <label class="block font-mono uppercase text-slate-300">{{ $label }}</label>

    <!-- Hidden input to carry final URL to form submission -->
    <input type="hidden" name="{{ $name }}" :value="currentUrl">

    <!-- Mode switch tabs -->
    <div class="flex items-center space-x-2 border-b border-slate-800 pb-1.5 text-[11px] font-mono">
        <button type="button" @click="mode = 'link'" 
                :class="mode === 'link' ? 'text-cyan-400 border-b-2 border-cyan-400 font-bold' : 'text-slate-400 hover:text-white'"
                class="pb-1 transition-colors flex items-center space-x-1">
            <i data-lucide="link" class="w-3 h-3"></i>
            <span>Tautan Fivemanage (R2)</span>
        </button>
        <button type="button" @click="mode = 'upload'" 
                :class="mode === 'upload' ? 'text-emerald-400 border-b-2 border-emerald-400 font-bold' : 'text-slate-400 hover:text-white'"
                class="pb-1 transition-colors flex items-center space-x-1">
            <i data-lucide="upload-cloud" class="w-3 h-3"></i>
            <span>Upload File (Auto-Compress 50%+)</span>
        </button>
    </div>

    <!-- Mode 1: Fivemanage URL Input -->
    <div x-show="mode === 'link'" class="space-y-1.5">
        <div class="relative">
            <input type="url" x-model="inputUrl" @input="validateUrl()" 
                   placeholder="https://r2.fivemanage.com/xxxxxx.png"
                   class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-8 pr-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-cyan-500">
            <i data-lucide="external-link" class="w-3.5 h-3.5 absolute left-2.5 top-2.5 text-slate-500"></i>
        </div>

        <!-- Strict Warning Alert on Non-Fivemanage Domain -->
        <div x-show="errorMessage" x-transition class="p-2 rounded bg-red-950/80 border border-red-800 text-red-300 text-[11px] font-mono flex items-start space-x-2">
            <i data-lucide="alert-triangle" class="w-4 h-4 text-red-400 shrink-0 mt-0.5"></i>
            <span x-text="errorMessage"></span>
        </div>
        <div class="text-[10px] font-mono text-slate-500">
            * Hanya menerima tautan media berawalan <code class="text-cyan-400">https://r2.fivemanage.com/</code> (SPAM UPLOAD DOJ & SASP).
        </div>
    </div>

    <!-- Mode 2: Direct File Upload with Canvas Compression -->
    <div x-show="mode === 'upload'" class="space-y-2">
        <div class="border-2 border-dashed border-slate-800 hover:border-cyan-500/60 rounded-xl p-4 text-center cursor-pointer bg-slate-950/60 transition-all relative"
             @click="$refs.fileInput.click()">
            <input type="file" x-ref="fileInput" @change="handleFileSelected($event)" accept="image/*" class="hidden">
            <i data-lucide="image-up" class="w-6 h-6 mx-auto text-slate-500 mb-1"></i>
            <div class="text-slate-300 font-semibold text-xs">Pilih atau Drag File Foto Disini</div>
            <div class="text-[10px] text-slate-500 font-mono mt-0.5">Maks 12 MB (Akan dikompresi otomatis min. 50% menjadi &le; 6 MB)</div>
        </div>

        <!-- Compression Progress Feedback -->
        <div x-show="isCompressing" class="p-2 rounded bg-cyan-950/60 border border-cyan-800/60 text-cyan-300 text-[11px] font-mono flex items-center space-x-2">
            <i data-lucide="loader-2" class="w-4 h-4 animate-spin text-cyan-400"></i>
            <span>Mengompresi foto & mengunggah ke Fivemanage...</span>
        </div>

        <div x-show="compressionStats" class="p-2 rounded bg-emerald-950/60 border border-emerald-800/60 text-emerald-300 text-[11px] font-mono flex items-center justify-between">
            <div class="flex items-center space-x-1.5">
                <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-400"></i>
                <span x-text="compressionStats"></span>
            </div>
            <span class="text-[9px] px-1.5 py-0.5 rounded bg-emerald-900 text-emerald-200 font-bold uppercase" x-text="uploadStorage"></span>
        </div>
    </div>

    <!-- Image Preview Thumbnail & Lightbox Trigger -->
    <div x-show="currentUrl" class="mt-2 p-2 bg-slate-950 border border-slate-800 rounded-xl flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img :src="currentUrl" alt="Media Preview" class="w-12 h-12 object-cover rounded-lg border border-slate-800 shadow cursor-pointer hover:opacity-80 transition-opacity"
                 @click="openLightbox = true">
            <div class="truncate max-w-xs font-mono text-[11px]">
                <div class="text-white font-bold truncate" x-text="currentUrl"></div>
                <div class="text-emerald-400 text-[10px] flex items-center space-x-1">
                    <i data-lucide="check" class="w-3 h-3"></i>
                    <span>Tersimpan & Tervalidasi</span>
                </div>
            </div>
        </div>
        <div class="flex items-center space-x-1">
            <button type="button" @click="openLightbox = true" class="p-1 text-slate-400 hover:text-cyan-400 rounded" title="Lihat Foto Ukuran Penuh">
                <i data-lucide="maximize-2" class="w-4 h-4"></i>
            </button>
            <button type="button" @click="clearPhoto()" class="p-1 text-slate-400 hover:text-red-400 rounded" title="Hapus Foto">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
            </button>
        </div>
    </div>

    <!-- Lightbox Modal -->
    <div x-show="openLightbox" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-4" x-cloak>
        <div @click.outside="openLightbox = false" class="max-w-4xl max-h-[90vh] relative">
            <button type="button" @click="openLightbox = false" class="absolute -top-10 right-0 text-slate-400 hover:text-white p-1 font-mono text-xs flex items-center space-x-1">
                <span>[Tutup Esc]</span>
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
            <img :src="currentUrl" alt="Full Inspection" class="max-h-[85vh] max-w-full rounded-xl border border-slate-700 shadow-2xl object-contain">
        </div>
    </div>
</div>

<script>
function photoPickerComponent(fieldName, initialValue) {
    return {
        mode: initialValue ? 'link' : 'link',
        currentUrl: initialValue || '',
        inputUrl: initialValue || '',
        errorMessage: '',
        isCompressing: false,
        compressionStats: '',
        uploadStorage: '',
        openLightbox: false,

        validateUrl() {
            const val = this.inputUrl.trim();
            if (!val) {
                this.errorMessage = '';
                this.currentUrl = '';
                return;
            }

            // Strict check: must start with https://r2.fivemanage.com/
            const pattern = /^https?:\/\/r2\.fivemanage\.com\/.+/i;
            if (!pattern.test(val)) {
                this.errorMessage = "Hanya bisa menggunakan media dari SPAM UPLOAD DOJ & SASP dan tautan harus berawalan https://r2.fivemanage.com/";
                this.currentUrl = '';
            } else {
                this.errorMessage = '';
                this.currentUrl = val;
            }
        },

        handleFileSelected(event) {
            const file = event.target.files[0];
            if (!file) return;

            // Enforce max 12 MB input limit
            if (file.size > 12 * 1024 * 1024) {
                alert("File melebihi batas 12 MB. Pilih file yang lebih kecil.");
                return;
            }

            this.isCompressing = true;
            this.errorMessage = '';
            const originalSizeMb = (file.size / (1024 * 1024)).toFixed(2);

            // Client-side HTML5 Canvas compression
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;
                    const maxDim = 1600;

                    if (width > maxDim || height > maxDim) {
                        if (width > height) {
                            height = Math.round((height * maxDim) / width);
                            width = maxDim;
                        } else {
                            width = Math.round((width * maxDim) / height);
                            height = maxDim;
                        }
                    }

                    canvas.width = width;
                    canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);

                    // Compress by at least 50% using quality 0.7
                    canvas.toBlob((blob) => {
                        const compressedSizeMb = (blob.size / (1024 * 1024)).toFixed(2);
                        const reduction = Math.round((1 - (blob.size / file.size)) * 100);

                        // Prepare FormData for server upload
                        const formData = new FormData();
                        formData.append('photo', blob, 'upload.webp');

                        fetch('/media/upload', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json'
                            },
                            body: formData
                        })
                        .then(res => res.json())
                        .then(res => {
                            if (res.success) {
                                this.currentUrl = res.url;
                                this.inputUrl = res.url;
                                this.uploadStorage = res.storage || 'fivemanage';
                                this.compressionStats = `Original: ${originalSizeMb} MB &rarr; Terkompresi: ${compressedSizeMb} MB (-${reduction}%)`;
                            } else {
                                alert(res.message || 'Upload gagal.');
                            }
                        })
                        .catch(err => {
                            alert('Gagal mengupload gambar.');
                        })
                        .finally(() => {
                            this.isCompressing = false;
                        });
                    }, 'image/webp', 0.7);
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        },

        clearPhoto() {
            this.currentUrl = '';
            this.inputUrl = '';
            this.errorMessage = '';
            this.compressionStats = '';
        }
    };
}
</script>